ES6基础

ES6基础

对象字面量

1. 属性值得简写

   // 原先的写法
   var listeners = [];
   function listen(){};
   var events = {
       listeners: listeners,
       listen: listen,
   }
   
   // ES6简写：当对象的属性名和所引用的变量名相同时，可以简写
   var listeners = [];
   function listen(){};
   var events = {
       listeners,
       listen,
   }
   

2. 可计算属性

   // 场景： 属性名是可变的
   // 使用[]包裹变量即可
   var expertise = 'journalism';
   var person = {
       name: 'sharon',
       age: 27,
       [expertise]: ['international', 'politics', 'internet'],
   }
   

   注意：可计算属性和属性简写是不可以同时使用的

3. 方法定义

   // 原先的写法
   var person = {
       eat: function() {
           console.log('I have eatten');
       }
   }
   
   // ES6简写：当对象的属性名和所引用的变量名相同时，可以简写
   var person = {
       eat() {
           console.log('I have eatten');
       }
   }
   

箭头函数

var example = (params) => {
    // 函数体
}

• 箭头函数绑定的作用域是父级作用域，意味着this是父级的this
• 箭头函数没有自己的this，arguments， super
• 箭头函数不能用作构造函数

结构

1. 对象的解构

   var character = {
       name: 'Bruce',
       prseudonym: 'batman',
       metadata: {
           age: 34,
           gender: 'male'
       },
       batarang: ['gas pellet', 'bat-mobile control', 'bat-cuffs']
   }
   
   // 对象的解构
   var { prseudonym, name } = character;
   // 等价于var prseudonym = character.prseudonym, name = character.name
   
   // 解构别名
   var { prseudonym: alias } = character;
   // 等价于var alias = character.prseudonym
   
   // 对象的深层次解构
   var {metadata: { gender } } = character
   // 等价于 var { gender } = character.metadata;
   //       var gender = character.metadata.gender  
   // 解构的属性不存在时
   var { boots } = character;
   console.log(boots); // undefined
   // 为不存在的属性提供默认值
   var { boots = {size: 10} } = character;
   console.log(boots); // {size: 10}
   // 默认值也适用于嵌套属性
   var  { matadata: {enemy = 'Satan'} } = character;
   console.log(enemy); // Satan
   // 默认值与别名结合使用的时候，别名放到前面，默认值放到后面
   var { boots: footwear = { size: 10 }} = character;
   console.log(footwear); // {size: 10}
   

2. 数组的解构

   数组的解构语法和对象的解构语法非常的类似。对象解构语法使用{}，数组解构语法使用[]

   // 数组解构
   var coordinates = [12, -7];
   var [x, y] = coordinates;
   console.log(x); // 12
   
   // 跳过不感兴趣的值
   var names = ['James', 'L.', 'Howlett'];
   var [ firstName, ,lastName ] = names;
   console.log(lastName); // 'Howlett'
   
   // 给undefined设置默认值
   var names = ['James', 'L.'];
   var var [ firstName='John', ,lastName='Doe' ] = names;
   console.log(lastName); // 'Doe'
   

3. 函数参数的默认值

   // 当没有传入值，或者传入的值时undefine或null时，会使用默认值
   function sumof (a=1, b=2, c=3) {
       return a+b+c
   }
   console.log(sumof(undefined, undefined, 4)); // 7
   

4. 函数参数的解构

   var defaultOptions = {brand: 'Volkswagen', make: 1999};
   function carFactory(option = defaultOptions) {
       console.log(option.brand);
       console.log(option.make);
   }
    carFactory() // 'Volkswagen' 1999
   // 当传递options时，默认值会失效
    carFactory({make: 2000}) // undefined 2000
   

   因此这里需要用到函数的解构

   function carFactory({brand = 'Volkswagen', make = 1999}) {
       console.log(brand);
       console.log(make);
   }
    carFactory({make: 2000}) // 'Volkswagen' 2000
   // 弊病是当没有给函数传递对象时，根本就不会发生解构
   

   函数参数的解构和默认值结合使用

   function carFactory({brand = 'Volkswagen', make = 1999} = {}) {
       console.log(brand);
       console.log(make);
   }
    carFactory() // 'Volkswagen' 1999
   

剩余参数和扩展运算符

1. 剩余参数：在函数的最后一个参数面前添加…,可以将该参数转化为一个特殊的‘剩余参数’。当剩余参数是函数中唯一的参数时，会获取所有传入函数的参数。

   • 剩余参数前面的参数不会包含在剩余参数中
   • 剩余参数也可以使用在数组或对象结构中

   // 剩余参数时函数的唯一参数时
   function join(...list) {
       return list.join(',');
   }
   join('first', 'second', 'third') // 'first，second，third'
   
   // 剩余参数前面还有参数时
   function join(separator, ...list) {
       return list.join(',');
   }
   join('first', 'second', 'third') // 'second，third'
   
   // 在数组中使用剩余参数
   var [first, second, ...other] = ['a', 'b', 'c', 'd', 'e'];
   console.log(other); // ['c', 'd', 'e']
   
   // 在对象中使用剩余参数
   var obj = {
       name: 'lisi',
       age: 10
   }
   var { name, ...list } = obj;
   console.log(list); // {age: 10}
   

模板字面量

var world = ' world'
var str = `hello${world}`
console.log(str); // "hello world"

let和const声明

1. let
   • 没有变量提升
   • 存在块级作用域
   • 会有暂时性死区
2. const
   • 没有变量提升
   • 存在块级作用域
   • 会有暂时性死区
   • 声明后必须马上赋值
   • 赋值后不可更改。对于引用来行来说，不可更改的只是引用地址。