ES6学习笔记

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

ECMAScript6学习笔记

ECMAScript 和 JavaScript 的关系前者是后者的规格后者是前者的一种实现。ECMAScript 的其他方言还有如 Jscript 和 ActionScript。ES6相对之前的版本语法更严格新增了面向对象的很多特性以及一些高级特性。

1.let声明变量

var 声明的变量没有局部作用域。

let 声明的变量有局部作用域。

    {
        var a = 1;
        let b = 2;
    }
    console.log(a)
    console.log(b)  //b is not defined

var 可以声明多次。

let 只能声明一次。

    var m = 1;
    var m = 2;
    let n = 10;
    let n = 20;  //'n' has already been declared
    console.log(m)
    console.log(n)

2.const声明常量只读

声明之后不允许改变且一但声明必须初始化否则会报错。

    // 1、声明之后不允许改变 
    const PI = "3.1415926"
    PI = 3     // TypeError: Assignment to constant variable.

    // 2、一但声明必须初始化否则会报错
    const MY_AGE  // Missing initializer in const declaration

3.解构赋值

解构赋值是对赋值运算符的扩展。是一种针对数组或者对象进行模式匹配然后对其中的变量进行赋值方便了复杂对象中数据字段获取。

①数组解构取数组元素的值

    //---------传统方法------
    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)

②对象解构取对象元素的值

    let user = {name: 'parker',age: 18}
    //--------传统方法---------
    let name1 = user.name;
    let age1 = user.age;
    console.log(name1, age1)
    //--------ES6方法----------
    let {name,age} = user
    console.log(name, age)

注意对象结构中的变量必须是user中的属性即属性名要一致。

4.模板字符串

模板字符串相当于加强版的字符串用反引号 `除了作为普通字符串还可以用来①定义多行字符串还可以②在字符串中加入变量和表达式。

    let name = "parker"
    let age = 20
    let info = `My name is ${name}.I am ${age+1} years old`
    console.log(info)

字符串插入变量和表达式。变量名写在 ${} 中$ {} 中可以放入 JavaScript 表达式。

5.声明对象简写

    //传统方式定义对象
    const name = "parker"
    const age = 20
    const user1 = {name:name,age:age}
    console.log(user1)

    //ES6方式定义对象
    const user2={name,age}
    console.log(user2)

6.对象拓展运算符

拓展运算符…用于取出参数对象所有可遍历属性并把这些属性拷贝到当前对象。

    //1.对象复制
    let person1={name:"parker",age:18}
    let someone={...person1}
    console.log(someone)

    //2.对象合并
    let name = {name:"parker"}
    let age = {age:20}
    let person2 = {...name,...age}
    console.log(person2)

7.箭头函数

箭头函数提供了一种更加简洁的函数书写方式多用于匿名函数的定义。基本语法是参数 => 函数体。

    //传统方式定义函数
    var f1=function(a){
      return a
    }
    console.log(f1(3))

    var f3=function(m,n){
      return m+n
    }
    console.log(f3(3,2))



    //ES6方法使用箭头函数定义。基本语法参数 => 函数体
    var f2 = a=>a  //参数为a返回值为a
    console.log(f2(3))

    var f4 = (m,n)=>m+n
    console.log(f4(3,2))