ES6基础语法-蒲公英云

ES6基础语法

野性酷女 2022-12-06 12:42 328阅读 0赞

（1）变量定义let

let和var的区别

<SCript>
    { 
        var a = 123;
        let b = 123;
    }
    console.log(a);   
    console.log(b);  //错误
</SCript>

1：作用域不一样bai，var是函数作用域，而let是块作用域，也就是说，在主函数内声明了var，整个函数内都是有效的，比如说在for循环内定义了一个var变量，实际上其在for循环以外也是可以访问的，而let由于是块作用域，所以如果在块作用域内（比如说for循环内）定义的变量，在其外面是不可被访问的，所以let用在for (let i; i < n; i++)是一种很推荐的写法

let不能在定义之前访问该变量，但是var是可以得。也就是说，let必须是先定义，再使用，而var先使用后声明也行，只不过直接使用但是没有却没有定义的时候，其值为undefined，这块要注意，这一块很容易出问题，这也是个人认为的let比var更好的地方，至于为啥会有这种区别呢，实际上var有一个变量提升的过程。也就是说，当这个函数的作用域被创建的时候，实际上var定义的变量都会被创建，并且如果此时没有初始化的话，则默认会初始化一个undefined。
let不能被重新定义，但是var是可以的。这个呢，我个人认为，从规范化的角度来说，是更推荐的，比如说，你在前面声明了一个变量，后来写代码，因为忘了之前的代码逻辑，又声明了一个同名的变量，如果这俩变量逻辑不一样，并且后面都要用的话，很容易出问题，且不容易维护。

总之呢，let从规范化的角度来说，要比var要进步了很大一步。所以一般情况下的话，推荐用let，const这些。

（2）解构

1、数组解构

//传统
    let a = 1, b = 2, c = 3;
    console.log(a,b,c)
    //ES6
    let [x,y,z]=[1,2,3]
    console.log(x,y,z)

2、对象解构

let  user={ name:'LISI',age:12};
   //传统
 let name1=user.name;
 let age1=user.age;
 console.log(name1,age1)
 //ES6
 let { name,age}=user;
 console.log(name,age);

（3）模板字符串

<SCript>
    //1、使用`符号实现换行
    let str1=`AAA BBB`
    console.log(str1)
    //2、在`符号里面使用表达式获取变量值
    let name ="Bom"
    let age=11
    let str2=`姓名,${ name},年龄，${ age}`
    console.log(str2)
    //3、在`符号中调用方法
    function f1(){ 
      return "HELLO";
    }
    let str3=`call , ${ f1()}`
    console.log(str3)
</SCript>

（4）声明对象编写

<SCript>
    const age = 12
    const name = "Tom"
    //传统写法
    const p1={ name:name,age:age}
    console.log(p1)
    //ES6
    const p2={ name,age}
    console.log(p2)
</SCript>

（5）方法简写

不需要写：function

<SCript> 
    //传统
    const p1 = { 
        hello: function () { 
            console.log("AAAAA")
        }
    }
    //ES6
    const p2 = { 
        hello() { 
            console.log("BBBB")
        }
    }
    p1.hello()
    p2.hello()
</SCript>

（6）对象拓展运算符

拓展运算符{…}用于取出参数对象所有可便利属性然后拷贝到当前对象

<SCript>
    //对象拷贝
    let p1 = {  name: "lisi", age: 11 }
    let pc1 = {  ...p1 }
    //注意：该语法在低版本浏览器会报错
    console.log(pc1)
    //合并对象
    let name = {  name: "Tim" }
    let age = {  age: 15 }
    let pc2 = {  ...name, ...age }
    console.log(pc2)
</SCript>

（7）箭头函数

箭头函数提供了一种更加简洁的函数书写方式，基本语法是
参数=>函数体

1：当箭头函数没有参数或者有多个参数，要用()括起来
2：当箭头函数函数体有多行语句，用{}括起来，表示代码块
3：当只有一行语句，并且需要返回结果时，可以省略{}，结果会自动返回

<SCript>
    //传统
    let f1 = function (a) { 
        return a
    }
    console.log(f1(1))
    //ES6，单个参数
    let f2 = a => a + 1
    console.log(f2(1))
    //ES6，多个参数
    let f3 = (a,b) => a + b
    console.log(f3(1,2))
    //ES6 ,多行代码
    let  f4=(a,b)=>{  ++a;++b; return a+b }
    console.log(f4(1,2))
</SCript>