首页 > 代码库 > ES6新属性笔记

ES6新属性笔记

一、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));//返回trueconsole.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方法,拓展运算符不可用

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

 

ES6新属性笔记