ES6新属性笔记

Posted 2020-09-02 小凡

一、destructuring--解构赋值

1、数组解构赋值

　　（1）完全解构

　　　　

　　let [a,b,c] = [1,2,3];//普通
　　console.log(a+":"+b+":"+c);

　　let [a1, [[b1], c1]] = [1, [[2], 3]];//嵌套
　　console.log(a1+":"+b1+":"+c1);

　　let [ , , third] = ["foo", "bar", "baz"];
　　console.log(third);

　　let [x, , y] = [1, 2, 3];
　　console.log(x+":"+y);

这种解构赋值的方式很直观，数组嵌套的多了以后也好输出。

　　（2）不完全解构

　　let [x1, y1] = [1, 2, 3];
　　console.log(x1+":"+y1);
　　//x1 y1分别对应1 2 
　　let [x3,, y3 = "cc", z3 = "ccy"] = [1, 2, 3];
　　console.log(x3+":"+y3+":"+z3);
　　//x3对应1；这里的2对应x3与y3之间的空变量；y3=‘cc’只是初始化一下值，当对应的数组中有值的话会直接被覆盖，这里的cc就已经被3覆盖掉了，z3就是ccy 　　
　　let [a2, [b2], d2] = [1, [2, 3], 4];
 　 console.log(a2+":"+b2+":"+d2);
　　//a2对应1，b2对应2，d2对应4

2、对象解构赋值

　　对象解构与数组解构基本一样

　　

　　/*对象的属性没有次序，变量必须与属性同名，才能取到正确的值*/
　　let {foo, bar ,arr:[name,age,id="001"]} = {foo: "aaa", bar: "bbb" ,arr:["zhangsan","18"]};
　　console.log(foo+":"+bar+":"+name+":"+age+":"+id);

3、字符串解构

     let [q,w,e] = "lemon";
     console.log(e);

4、函数参数解构

　　let funObj = {
　　　　name:"lemon",
　　　　age:"18",
       }
　　function show({name,age,id="001"}){
       console.log(name+":"+age+":"+id);
       }
　　show(funObj);

----------------------------------------------------------------------------------------------------------------华丽的分割线---------------------------------------------------------------------------------------------------------------

二、Symbol--定义一个独一无二的值

　　var x = ‘lemon‘;
　　var y = ‘lemon‘;
　　console.log(x == y);
　　console.log(x === y);
　　//此时x与y是相等的，毋庸置疑打印出来的自然是两个true；

　　var m = Symbol(‘lemon‘);
　　var n = Symbol(‘lemon‘);
　　console.log(m == n);
　　//此时打印出的就是false了；

语法很简单，由Symbol定义出的是独一无二的；

三、set与WeakSet--ES6新增的数据类型

1、set

set是ES6新增的一种数据类型，语法特点与数组类似不同的是set数据结构里的的所有数据都是唯一的。　

先来看下数组

var arr1 = [1,2,3,4,6,6,7,7,8];
for(var i = 0;i < arr1.length; i++){
　　console.log(arr1[i]);
}
for(var n in arr1){
　　console.log(arr1[n]);
}
arr1.map(function(val){  //依次遍历数组中的数据
　　console.log(val);
});

　　

再来看下我们set数据结构，set数据是数组通过Set来转变的

var arr1 = [1,2,3,4,6,6,7,7,8];
var set1 = new Set(arr1);
//当数组转变为set数据时，数组中所有的重复数据都将会被删除，只会保留一个，此时set里面的数据只有 1,2,3,4,5,6,7,8；

/*for of语法遍历*/
for(var ele of set1){ //请忽略报错   for in循环不能遍历set集合  用for of
　　console.log(ele);
}

 

add方法来添加数据，类似数组的push方法

var set2 = new Set();
for(var i = 0 ; i < 10; i++){
　　set2.add(i);
}
console.log(set2);

 

我们还可以使用拓展运算符“[...set]”,将set集合转换为数组

//这里我们将上面的set2转化为数组
var arr = [...set2];
console.log(arr);

 

我们还可以通过delete方法删除set里面的数据

//此处还是拿上面的set2进行讲解
set2.delete(2);//这里的2不是索引，是数据，这里只能删除对应的数据；

 

还可以通过clear方法进行清空

set2.clear();
console.log(set2);

 

为什么在删除的时候没有使用索引，我们先来看看遍历的结果

let set3 = new Set([‘lemon1‘,‘lemon2‘,‘lemon3‘,4,2,3,4]);
set3.forEach(function(index,val){
    console.log(index+":"+val);
});
//index与他的value值相同；

 

使用has方法进行判断set中是否有对应数据

var set = new Set([1,2,3]);
console.log(set.has(3));//返回true
console.log(set.has(4));//返回false

 

set还有size属性，像数组里面的length

var set = new Set([1,2,3]);
console.log(set.size)//返回3

 

values方法可以遍历出所有值

var set = new Set([1,2,3]);
console.log(set.values);

var newSet = ser.values();
for(var val of newSet){
    console.log(val)
}

2、WeakSet

WeakSet类似于Set，也是不重复的值的集合。但是它只能用于存储对象。而不能是其他类型的值。 
WeakSet是一个个构造函数。可以接受数组和类似数组的对象作为参数。（实际上，任何具作为iterable接口的对象都可以作为WeakSet的参数）。该数组的所有成员都会自动成为WeakSet的实例对象的成员。 
WeakSet的一个用处是存储DOM节点，而不用担心这些节点从文档移除时，会引起内存的泄露。

具体内容这里就不讲解了。

代码格式如下：

/*WeakSet与Set使用方式类似，与set不同的地方在于WeakSet只能保存对象类型的数据*/
        let ws1 = new WeakSet();
        ws1.add(5);//报错

        let ws2 = new WeakSet();
        let num = new Number(5);
        console.log(num);
        ws2.add(num);//不报错

        let data = new WeakSet();
        var obj1 = {name:"ccy"};
        var obj2 = new String("你好");
        var obj3 = new Number(6);
        data.add(obj1);
        data.add(obj2);
        data.add(obj3);
        /*不能遍历、取值*/
        for(let i of data){
            console.log(i);
        }
        /*只能判断数据存不存在*/
        console.log(data);
        console.log(data.has(obj1));
        //没有size属性，没有clear方法,拓展运算符不可用

这篇就说这么多，学到知识记得收藏加关注哟！