es6一些方法

1.rem的理解:(关于页面的适配--手写)
rem 的62% 是个 什么意思 16px=1rem 1px=62.5%rem;
2.对promise的理解:
参考:
https://mp.weixin.qq.com/s/baiyaLF9Xv6ECabCOlIlAg
其余的作用,其实不大:(看下面代码)
function runAsync1(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务1执行完成');
resolve('随便什么数据1');
}, 1000);
});
return p;
}
function runAsync2(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务2执行完成');
resolve('随便什么数据2');
}, 2000);
});
return p;
}
function runAsync3(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务3执行完成');
resolve('随便什么数据3');
}, 2000);
});
return p;
}

runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
})
.then(function(data){
console.log(data);
return runAsync3(); //这里直接返回数据
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
}).then(function (data) {
console.log(data)
})
关于async的理解:
3.在vue 里面的异步
问的这么专业 就是axios mmp
4.迭代器和生成器的理解
参考:
迭代器和生成器:
1.迭代器的代码:
/* 迭代器和生成器的区别,之后再说 */
//ES5的迭代器,就是一个闭包而已
function literator(arr) {
let i=0; //计数器
return{
next(){
let done=(i>=arr.length); //指示循环是否完成
let value=(!done?arr[i++]:undefined); //当前循环的值

return {
value:value,
done:done
}
}
}
}
let myCase=literator([1,2,3,4,5]);
console.log(myCase.next());
console.log(myCase.next());
console.log(myCase.next());
console.log(myCase.next());
console.log(myCase.next());
console.log(myCase.next());
2.生成器:
function* show() {
yield "hello";
yield "world";
yield "ni hao";
return "返回值"
}

let res = show();
console.log(res.next());
console.log(res.next());
console.log(res.next());
console.log(res.next());

function* myGenerator(arr) {
for (let i = 0; i < arr.length; i++) {
yield arr[i];
}
}

let test=myGenerator([1,2,3]);
console.log(test.next()); //这儿的next方法,属于test对象
console.log(test.next());
console.log(test.next());
console.log(test.next());
5.ES6新增的类型
map
set
参考:
理解:
1.array,set,map
都属于迭代器 iterable(可迭代),类型 ,可以使用for in 来遍历
2.一直对for in 的误解
for in 只可以遍历对象,而数组就是一个对象
3.迭代器的遍历:
iterable内置的forEach方法
4.如何初始化 ,创建实例
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
5.常用的map操作
/*
* clear
从映射中移除所有元素。
删除
从映射中移除指定的元素。
forEach
对映射中的每个元素执行指定操作。
get
返回映射中的指定元素。
如果映射包含指定元素,则返回 true。
set
添加一个新建元素到映射。
toString
返回映射的字符串表示形式。
valueOf
返回指定对象的原始值。
* */
var m = new Map();
m.set(1, "black");
m.set(2, "red");
m.set("colors", 2);
m.set({x:1}, 3);

console.log(m);
m.forEach(function (item, key, mapObj) {
document.write(item.toString() + "<br />");
});

7.操作日期的API
代码:(常用的就这几个)
let TheDay=new Date();
let year=TheDay.getFullYear();
let mounth=('00'+(TheDay.getMonth()+1)).slice(-2);
let day=('00'+TheDay.getDate()).slice(-2);
console.log(year+'-'+mounth+'-'+day)

//获取今天星期几
let weekend=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
console.log( TheDay.getDay(),weekend[TheDay.getDay()])
8.切割字符串的使用
let str='hello world';
console.log(str.slice(-2))
9.你开发过vue的插件吗
没有,咋地了 mmp( 插件的使用 )
官方的流程:
自己写vue插件的流程
1.main.js
1.导入vue的插件文件
import Loading from '/loading' //loading 目录下面有index.js文件
2.显式的引用插件:
Vue.use(Loading)
3.好向不需要注入子组件
2.在子组件里面引用:
<loading> </loading> //直接使用好像就可以
3.插件的写法:
1.插件模板的写法:./loading.vue --vue文件
正常的组件写法:
<template><div>正在加载中....</div></template>
<script> export default {}</script>
<style scoped></style>
2.在loading文件夹下面index.js
1.引入vue的模板文件
import LoadingComponent from './loading'
2.核心部分,在使用Vue.use()的时候,自动调用install
const Loading={
install:function(Vue){
Vue.component('loading',LoadingComponent) // loading就是插件名 随便起
}
}
3.导出组件
export default Loading
10.数组去重
写三个数组去重的方法 就会写俩 而且强调是函数 (双层循环,就不要用了 太麻烦了)
代码:
arr=[1,2,2,3,4,5,6,7,8,5,4,3]
function f1(arr){
return Array.from(new Set(arr))
}
console.log(f1(arr))
function f2(arr) {
let newArr=[];
arr.forEach(function (item,key,index) {
if(newArr.indexOf(item)==-1){
newArr.push(item)
}
})
return newArr;
}
console.log(f2(arr))

function f3(arr){
let noReat=arr.sort((a,b)=>a-b);
for(var i=0;i<noReat.length-1;i++){
if(arr[i]==arr[i+1]){
arr.splice(i,1)
}
}
console.log(noReat)
}
f3(arr)
11,遍历对象的方法
for in 不要使用for of + object.keys(obj)
12.数组和对象解构
let {a,d}={a:12,d:[13,14]}
还有就是 ... 的使用
代码:
function add(...arr) {
console.log(arr);
console.log(arguments);
//arguments 不是数组的,不可以使用数组的方法的

}
add(1,2,3,4,5,6,7,8);
13.模板字符串的使用
代码:
var c=` ${a+d}======${ b }===${++a}

hello

world
`;
理解:
` ${ 写计算 }
在里面,字符串是可以随便换行的
`
14.ES6 对于 数组,字符串的扩展
这个之前也是学过的,但是 基本都忘了 mmp ...
16.vue 的传值
1.使用父子组件传值
2.使用vuex
3.使用bus 来进行传值
17.事件的委托
事件捕获--->目标对象---->向上冒泡
18.vuex的实现原理
就是那张图

19.谈谈你对vue的理解
mvvm
vue的生命周期

生命周期的理解:
vue的说明周期
beforeCreate:创建之前
这个阶段数据是读不到的,时间段,刚调用初始化函数 new...
created:创建之后
完成了数据观测,属性和方法的运算,但是没有挂在$el
所以没有渲染在DOM树上,
初始化完成....
beforeMounted:安装之前
挂载之前调用,在之前,寻找编译的模板和虚拟挂在节点
在他之前,执行的动作
1.找el:"'或者vm.$mount(""),确定虚拟挂在点
2.找template或者 直接找外部的挂载点,确定挂在位置
mounted:安装之后
在此之前,执行的动作:
el选项的节点,被$el代替(挂在到了DOM树上),已经挂载完成(渲染完毕)
数据被渲染了,render(第一次)执行完毕
beforeUpdate:更新之前
有数据更新的时候,立即触发:
不进行DOM的渲染,执行时间,当有数据更新之后,立马执行
updated:更新之后
绑定的数据进行更新(渲染),并且渲染DOM
之前的动作:
虚拟DOM的渲染和关在完成
beforedestroy:销毁之前
实例销毁之前,调用销毁函数,但没有执行销毁函数
调用销毁函数,立即执行:
在此之前,销毁函数被调用
destroy:销毁之后
在这个事件点之前:
VUE实例销毁
数据,方法,组件..的解绑
================================
生命周期阶段,实例生命中的是时间点,在这个时间点执行函数
mounted:function(){
................
}
20.web socket的理解
21, https协议的理解
TCP连接,http,https,udp,webSocket ...
22.web woker
23.谈谈你对const 和let 的理解
const (常量标识):
初始化,必须赋值
常量的名称 默认为大写
常量不可以再次被修改的(否则,直接报错)
let:
js 函数的作用域问题
let是块级作用域,不进行声明提前
代码:(比较这两者的区别 )
使用var 变量的声明提前,打印 indefined
{
console.log(str)
var str = 'hello world'
}
使用let 直接报错,没有声明提前,就没有定义这块内存
{
console.log(str)
let str = 'hello word';
}
还有:
let 声明一个变量,在同一个作用域里面 ,只能声明一次
否则报错:
Uncaught SyntaxError: Identifier 'str' has already been declared
下面的写法,是可以的 因为他们不是一个作用域
let a = '666'

function fun() {
let a = '777'
console.log(a)
}

fun();
24, 变量提升的理解( hoisting)
1.变量提升只是提升变量的声明,并不会把赋值也提升上来
代码测试:
bar();
var foo = 1;
function bar() {
console.log(foo) //undefind
if (!foo) {
var foo = 10;
}
console.log(foo); //打印10
}
理解:
function 变量名 (){ } 可以进行声明提升
2.先提升函数 ,之后提升使用var 声明的变量;
foo(); //输出1
function foo() { //先提升函数(函数整个提升)
console.log('1');
}
var foo = function () { //提升变量 var foo; 之后的函数不会被提升的
console.log('2');
}
foo(); //输出2
25.eventLoop
问的这么专业 --什么意思 mmp

猜你喜欢

转载自blog.csdn.net/qq_37818095/article/details/80813270