ES6 常用语法 一

ES6 是什么

• ECMAScript 2015 于2015年6月正式发布
• 可以使用babel语法转换器，支持低端浏览器
• 流行的库都基于ES6构建，React默认使用ES6开发

ES6 有啥

• 块级作用域、字符串、函数
  • 作用域
    • 定义变量使用 let 替代 var
    • const 定义不可修改的变量
    • 作用域和{}

     {
         var name1 = 'cjw';
         let name2 = 'cjw';
     }
        console.log(name1) //cjw
        console.log(name2) //name2 is not defined
    

  • 字符串
    • 模版字符出纳
      • 使用反引号
      • 多行字符串
      • 告别+拼接字符串

         let name = 'chenjiawei'
         let age = '18'
         console.log('My name is ' +name+' ,I am ' + age + ' old') 
         console.log(`My name is ${name} ,I am ${age} old `)     
      

  • 函数拓展

    • 参数默认值

      //  曾经的写法
      function(a,b){
          var a = a || 12
          var b = b || 55
          return a+b;
      }
      // ES6
      function(a=12,b=15){
          return a+b;
      }
      

    • 箭头函数

        x => x*x 
      

        x=>{
          if(x>0){
            return x * x;
           }
          else {
            return - x * x;
          }
        }
      

      箭头函数和匿名函数有个区别：
      箭头函数的this是词法作用域，由上下文确定，也就是指向外层调用者。匿名函数的this最终指向的是调用它的对象。
      由于this在箭头函数中按照词法作用域绑定，所以用call() 和 apply() 无法对this进行绑定。
      箭头函数不能用作构造器，和 new一起用会抛出错误。
      箭头函数没有prototype属性。

    • 展开运算符

      function fn(a,b){
        console.log(a,b);
      }
      let arr = ['hello','world'];
      fn.apply(null,arr) //曾经的方法
      fn(...arr) //利用展开运算符
      

• 对象扩展、解构

  • Object拓展

    • Object.keys、values、entries

      /* Array 对象 */ 
      let arr = ["a", "b", "c"];
      console.log(Object.keys(arr)); // ["0", "1", "2"]
      console.log(Object.values(arr)); // ["a", "b", "c"]
      console.log(Object.entries(arr)); // [["0", "a"], ["1", "b"], ["2", "c"]]
      
      /* Object 对象 */ 
      let obj = { foo: "bar", baz: 42 };
      console.log(Object.keys(obj )); // ["foo", "baz"]
      console.log(Object.values(obj )); // ["bar", 42]
      console.log(Object.entries(obj )); // [["foo", "bar"], ["baz", 42]]
      

    • 对象方法简写，计算属性

      let name = 'cjw'
      const obj = {
        name,
        [name]:'cjw',
        hello:function(){
        },
        hello1(){
        }
      }
      console.log(obj) //{name: "cjw", cjw: "cjw", hello: ƒ, hello1: ƒ}
      

    • 展开运算符（不是ES6标准，但是babel支持）

  • 解构赋值
    函数可以多返回值

    • 数组解构
    • 对象解构

    var [a, b, c] = [1, 2, 3];
    
    // 返回一个数组
    function example() {
      return [1, 2, 3];
    }
    
    var [a, b, c] = example();
    
    // 返回一个对象
    function example() {
      return {
        foo: 1,
        bar: 2
      };
    }
    
    var {foo, bar} = example();
    

• 类、模块化等
  • 类
    • 是prototype的语法糖
    • Extends继承
    • Constructor构造函数

     class Rectangle {
      // constructor
      constructor(height, width) {
        this.height = height;
        this.width = width;
      }
      // Getter
      get area() {
        return this.calcArea()
      }
      // Method
      calcArea() {
        return this.height * this.width;
      }
    }
    const square = new Rectangle(10, 10);
    
    console.log(square.area);
    // 100