美文网首页
ES的新特性

ES的新特性

作者: Doter | 来源:发表于2018-12-13 20:22 被阅读0次

    E6的新特性

    let const

    let是为了限制变量的作用域。

    for(let aa=0;aa<7;aa++){
    console.log(aa);
    }
    console.log(aa);
    //1,2,3,4,5,6,undefind
    for(var aa=0;aa<7;aa++){
    console.log(aa);
    }
    console.log(aa);
    //1,2,3,4,5,6,7
    

    const是声明常量,为了防止变量发生变化。

    注意观察下面的代码

    const a="a";
    const b={
      a:"A",
      b:"B",
      c:"C'
    }
    a=1;//fail
    b={}; //fail
    b.a="AA"; //pass
    b["c"]="C";//pass 
    b={}//fail
    

    由此可见const只是限制了value的值变化。如果其值为引用,则不会限制其引用值得变化。

    const和let一样,也会限制其作用域。

    控制台操作结果

    字符串模板``

    非常好用的一个特性。

    let name="doter";
    let a = `hello word,${name}!`;
    console.log(a);
    //hello word,doter
    

    在常见的大量字符串变量拼接时,特别方便。在webGL写glsl的脚本时特别方便。

    解构

    //对象解构
    let node={a:1,b:2,c:3};
    let {a,b,c} = node
    console.log(a,b,c);//1 2 3
    
    //数组解构
    let arr=[1,2,3];
    let {d,e,f} = node
    console.log(a,b,c);//1 2 3
    console.log(d,e,f);//1 2 3
    

    可变参数

    function getNode(a,...node){
    console.log(node);
    }
    getNode(1,2,3,4);//2 3 4
    getNode(a=1,b=2,c=3);//2 3
    

    展开运算符...

    let node={a:1,b:2,c:3};
    console.log({...node});//{a:1,b:2,c:3}
    
    //接下来很有趣的,当解构遇上展开
    let {...node1} = node
    console.log(node1);//{a:1,b:2,c:3}
    //node1将会得到一个新的对象,以后就可以用这个做浅复制了。
    
    node1.a= 2;
    console.log(node1);//{a:2,b:2,c:3}
    
    let {a, b, ...node2} = node
    console.log(node2);//{c:3}
    //
    

    感觉不可思议吧,其实这个应该放在前面的可变参数中理解。解构的时候,右边的值解构后全部传入左侧的{},而左侧{}将参数依次按照可变参数处理。
    貌似和展开符没有半毛钱关系。是了,为了加深记忆。

    同理对数组也可作展开这里不做代码演示。

    what?浅复制。是了,因为此操作只是展开了第一层。

    let node = {a:{a:1,ab:3},b:4};
    let {...node1} = node;//浅复制
    node1.a.ab=4;
    console.log(node);//{a: {a: 1, ab: 4},b: 4}
    

    看见了吧node.a.ab也发生了变化。所以只是浅复制。这里是个坑哦。
    顺便提一下,常见的深复制操作:

    let node = {a:{a:1,ab:3},b:4};
    //>>>>>>>>>>>>>>>>>>>>>>>
    var node2 = JSON.parse(JSON.stringify(node));
    //<<<<<<<<<<<<<<<<<<<<<<
    node2.a.ab=4;
    console.log(node.a.ab);//3
    console.log(node2.a.ab);//4
    

    对象字面量简写法

    let a = 4;
    let node = {
      a,
      b:1,
      c(){console.log("a");}
    }
    console.log(node);//{a:4,b:1,c:f}
    //很简单吧?
    

    未完待续

    for of 与原来的for in区别

    let arr=[1,2,3,4,5,6,7,8];
    for(let i =0;i<arr.length;i++){
    console.log(i);
    }
    for(let index in arr){
    console.log(arr[index]);
    }
    for(let value of arr){
    console.log(value);
    }
    //都可以打印出来
    

    map

    Promise

    箭头函数=>

    ES7新特性

    **

    [].includes

    async/await

    相关文章

      网友评论

          本文标题:ES的新特性

          本文链接:https://www.haomeiwen.com/subject/diqyhqtx.html