首页 > 其他 > 详细

ES6新属性笔记

时间:2017-03-04 00:01:26      阅读:272      评论:0      收藏:0      [点我收藏+]

一、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方法,拓展运算符不可用
技术分享

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

ES6新属性笔记

原文:http://www.cnblogs.com/libin-1/p/6498808.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!