关于ES6的一些小结

看了文档和视频,做了点笔记记录一下…之前电脑的资料不小心删了,ES6前几章的笔记都没了 T_T,函数章没了就不写进去了,总共是十大章!

对象扩展运算符

主要用在声明一个方法，但是不确定参数个数的时候。

1
2
3
4
5
6
7
8
9
function szb(...arg){
    console.log(arg[0]);console.log(arg[1]);console.log(arg[2]);
}
szb(1,2,3); 
//这样会使得arr1的内存空间映射到arr2，所以改变arr2的值也会改变arr1的值
let arr1 =['a','b'];
let arr2 =arr1; 
//这样写即可
let arr2 =[...arr1];

rest 运算符 已知一定数量的参数，剩余不确定的时候使用

解构赋值

let a =1; let b =2; let c =3;可以用es6写法:let [a,b,c] =[1,2,3];
括号左右两边的结构必须一样。
可以在左边设置默认值。 let [fpp=true]=[];
也可以用对象进行解构赋值： let {foo,bar}={foo:'szb',bar:'bzs'};
如果先定义了一个变量但是没有赋值，后面才进行赋值操作。需要加上圆括号：
let foo; ({foo}={foo:'szb'});
字符串解构赋值：
const [a,b,c]='szb';abc分别会输出s,z,b

字符串模板

用``代替单引号和双引号来进行字符串拼接。
变量使用${变量}来引用
其中花括号内可以使用运算，例如${a+b}

查找字符串： includes(要查找的字符串); 会返回true，false
开头查找： startsWith()
末尾查找：endsWith()
循环输出几次： 字符串.repeat(次数)

数组

将后台传回的字符串转成数组 ‘3,4,5’
1
Array.of()
查找一个实例内查找数组元素
1
2
let arr =[1,2,4];
arr.find()
填充替换
1
2
let arr =['123','456','789'];
arr.fill('111',1,3); //替换第一个到第三个
遍历数组
1
2
3
4
5
6
7
8
let arr =['123','456','789'];
for(let item of arr) //
for(let item of arr.key()) // 数组下标
for(let item of arr.entries()) //数组下标和值
arr.forEach((val,index)=>console.log(index,val))
arr.filter(x=>console.log(x))
arr.some(x=>console.log(x))
console.log(arr.map(x=>'abc')) // 替换
in的用法

可以检查对象在是否存在某个元素 ‘a’ in obj
在数组中:

1
2
3
let arr =['abc',,];
console.log(0 in arr ); //true
console.log(1 in arr ); //false

对象

key值的构建:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let key = 'skill';
let obj = {
	[key]:'web'
}
console.log(obj)  // Object{skill:'web'}
自定义对象方法:
let obj = {
	add:function(a,b){
		return a+b;
}
}
console.log(obj.add(1,2));  //3

//is()
let obj1 ={name:'szb'};
let obj2 ={name:'szb'};
Object.is(obj1.name,obj2.name);  true

//assign
let a ={a:'szba'}; 
let b ={b:'szbb'}; 
let c ={c:'szbc'}; 
let d =Object.assign(a,b,c);
console.log(d); 		//Object{a:'szba',b:'szbb',c:'szbc'}

Symbol

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//Symbol   作用:保护对象元素
let a= new String;
let b= new Number;
let c= new Boolean;
let d= new Array;
let e= new Object;

let f= Symbol();
let obj={
[szb]:'szb'
}
console.log(obj[szb]);  //szb
obj[szb]='web';
console.log(obj[szb]);  //web


//若是不想被看到变量某一个属性
let obj = {name:'szb',skill:'web'};
let age = Symbol();
obj[age] = 18;
for(let item in obj){
console.log(obj);  //szb  web
}
//若是要输出
console.log(obj[age]);

Set和WeakSet数据结构

1
2
3
//Set
let setArr = new Set(['szb','a','b']);
console.log(setArr);     //Set{'szb','a','b'}

数组添加元素不能用push,要用setArr.add();
如果添加的元素在数组里了,数组无变化(不允许重复元素)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//has
查找元素
setArr.has('szb')    //true
//clear
清除所有元素
setArr.clear()
//delete
删除单个元素
setArr.delete('szb')
//size
元素个数(重复元素只算1)
setArr.size

//对象用weakset
//WeakSet
let weakObj = new WeakSet();
let obj = {a:'szb',b:'bzs'};
weakObj.add(obj);
//...和Set不一样,它必须要以上操作才能使用,obj要先声明好

Map数据类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let json ={
name:'jspang',
skill:'web'
};
let map = new Map();
map.set(json,'szb');
console.log(map);          //key是 json的值,value是szb
map灵活,key和value可以是字符串,对象等

//map的增删查   get    set    delete
map.get('json');
map.delete('json');
map.clear();             //清空
map.clear('xxx');	//查找

Promise

在es5中，比如在洗菜，吃饭，洗碗这个过程中，需要函数嵌套，会产生一个回调地狱，即在函数内部进行函数调用，后期会变得难以维护。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
let state = 1；
function step1(resolve,reject){
console.log('洗菜');
if(state==1){
resolve('洗菜完成了');
}else{
reject('洗菜出错了');
}
}

function step2(resolve,reject){
console.log('吃饭');
if(state==1){
resolve('吃饭完成了');
}else{
reject('吃饭出错了');
}
}

function step3(resolve,reject){
console.log('洗碗');
if(state==1){
resolve('洗碗完成了');
}else{
reject('洗碗出错了');
}
}

1
2
3
4
5
6
7
8
9
10
//用Promise来做
new Promise (step1).then(function(val){
console.log(val);
return new Promise(step2);
}).then(function(val){
console.log(val);
return new Promise(step3);
}).then(function(val){
console.log(val);
});

Proxy代理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
let obj = {
add(val){
return val+100;
},
name:'i s'
}

// new Proxy({},{})  前面放对象体,后面放预处理的机制

let pro =  new Proxy({
add(val){
return val+100;
},
name:'i s'
},{
//get,set,apply
//get  得到某个值之前,做的事情
get(target,key,property){
console.log('this is get ');
return target[key];  //必须 
//其中target是name:'i s',key就是name
},
set(target,key,value,receive){
console.log($key{} = ${value});
return target[key] = value;  //必须
}
})

console.log(pro.name);

pro.name =  'szb';
console.log(pro.name);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//apply  处理函数上
let target = function(){
return 'this is sp';
}
let handler = {
apply(target,ctx,args){
console.log('do');
return Reflect.apply(...arguments);  //必须
}
}

let pro = new Proxy(target,handler);

console.log(pro());
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

没什么特别的...