ES6学习笔记【part1】基础语法-优快云博客

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))