ES6 小总结

Posted afanadmin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6 小总结相关的知识,希望对你有一定的参考价值。

ES6 基础[遗漏点]

{
    // 块级作用域 {}
    {
        let a = 10;
        console.log(a);//10
    }
    // console.log(a);//报错
    // 只能在{}里面进行使用
}

{
    let a = 10;
    // let a = 20;//报错: 不能重复声明
}

{
    console.log(a);//未定义->域解析功能
    var a = 10;
    // console.log(b);//报错->没有域解析功能
    let b = 10;
}

{
    const name = "JackAfan";//常量
    // name = 1;//报错->常量不能修改
    console.log(name);
}

{
    // 解构赋值: 解构内容[对象]进行赋值;
    // 对象的解构赋值 {} -> 名字一一对应即可
    let obj = {
        a:10,
        b:20
    }
    let {a,b} = obj;
    console.log(a,b);
    let {a:a1,b:b1} = obj;//对象解构赋值的别名 :
    console.log(a1,b1);
    
    // 数组的解构赋值 []; -> 顺序需要对应
    let arr = [1,2];
    let [c,d] = arr;
    console.log(c,d);
}

{
    // 展开运算符
    let obj = {
        name:"JackAfan"
    }
    let arr = [1,2,3];
    let newObj = {...arr};
    console.log(newObj)
    // 注意事项:数组无法展开对象  
}

{
    //箭头函数不定参-> rest参数 不定参
    function fn(){
        console.log(arguments)
    }
    fn(1,2,3,4,5);
    let fn1 = (...arg)=>{
        console.log(arg)
    }
    fn1(1,2,2);
}

{
    // 箭头函数->返还对象 -> ({})
    let fn = (name,age)=>({name:name,age:age});
    console.log(fn("张三",20));
}

{
    document.querySelector("button").onclick = ()=>{
        console.log(this);
    }
    // this穿透!!
}

 

以上是关于ES6 小总结的主要内容,如果未能解决你的问题,请参考以下文章

VS中添加自定义代码片段——偷懒小技巧

回归 | js实用代码片段的封装与总结(持续更新中...)

ES6解构赋值

es6 一些小知识

微信小程序代码片段

30秒就能看懂的JavaScript 代码片段