ES6新特性整理

字面量增强（语法糖）

对象

  // es5
  var aaa = 1;
  var bbb = 2;
  var obj = {
    aaa: aaa,
    bbb: bbb
  }
  // => es6  (属性和值相同时，可简写；)
  var aaa = 1;
  var bbb = 2;
  var obj = {
    aaa,
    bbb
  }

方法

 // es5
  var fuc =  {
    aaa: function() {
      console.log(aaa);
    }
  }
  // es6  (方法可省去function声明；)
  var fuc = {
    aaa() {
      console.log(aaa);
    }
  }

计算属性名（拼接对象的key）

  // es5
  var a = 'pxq'
  var aaa = {}
  aaa[a + 1] = 'pxq1';
  aaa[a + 2] = 'pxq2';
  aaa[a + 3] = 'pxq3';
  // es6 (可以使用【】 直接在对象中拼接key)
  var a = 'pxq'
  var aaa = {
    [a + 1]: 'pxq1',
    [a + 2]: 'pxq2',
    [a + 3]: 'pxq3',
  }

数据结构

数组

  // es5
  var arr = ['pxq1', 'pxq2', 'pxq3'];
  var pxq1 = arr[0]
  var pxq2 = arr[1]
  var pxq3 = arr[2]

  // es6 
  var arr = ['pxq1', 'pxq2', 'pxq3'];
  var [pxq1, pxq2, pxq3] = arr //全部拆分
  var [, pxq1,] = arr //拆分指定数据
  var [pxq1, ...pxq] = arr // 结构对应元素，剩余拆分为数组
  console.log(pxq1, pxq); //打印结果 'pxq1', ['pxq2', 'pxq3']

  // 结构默认值 当定义变量数量大于数组个数时，超过的部分使用自定义数据
  var [pxq1, pxq2, pxq3, pxq4 = 'pxq4'] = arr

对象

  // es5
  var obj = {
    name: 'pxq',
    age: '20',
    height: 1.72
  }
  var name = obj.name
  var age = obj.age
  var height = obj.height

  // es6
  var obj = {
    name: 'pxq',
    age: '20',
    height: 1.72
  }
  var { name, age, height } = obj //基本拆分
  var { name: pxqName, age: pxqAge, height: pxqHeight } = obj //自定义变量名
  var { name: pxqName, age: pxqAge, height: pxqHeight, address: pxqAddress = '沧州市' } = obj //没有key的时候默认创建并设置默认值

let/const 定义变量

数字连接符(优化视觉体验)

//es5
let a1 = 1000000000

//es6
let a1 = 1_000_000_000

字符串模板

  // es5 
  var name = 'pxq'
  var aaa = "我的名字是" + name + '!'


  // es6
  const name = 'pxq'
  const balance = '100'

  var aaa = `我的名字是${name}！` //字符串拼接

  var bbb = `我的余额为${balance * 100}元！` //字符串计算拼接
  console.log(bbb)  //结果：我的余额为10000

  function countMoney(num) {
    return num * 100
  }
  var ccc = `我的余额为${countMoney(balance)}元！` //结果：我的余额为10000

函数的默认值

  // es5
  function pxq(a, b) {
    let a = a || 'aaa';
    let b = b || 'bbb'
    return a + b
  }

  // es6
  function pxq(a = 'aaa', b = 'bbb') {
    return a + b
  } //形参默认值

  // 默认值的结构
  // 1.
  function pxq({ a, b } = { a: 'aaa', b: 'bbb' }) {
    return a + b
  }
  // 2.
  function pxq({ a = 'aaa', b = 'bbb' } = {}) {
    return a + b
  }

函数的剩余参数

arguments & rest

  // arguments
  function pxq1(aaa, bbb, ccc, ddd) {
    let p = arguments
    console.log(p.length); //4
    console.log(p[0]); //1
    console.log(p[1]); //2
    console.log(p[2]); //3
    console.log(p[3]); //4
  }

  pxq1(1, 2, 3, 4)

  // rest
  function pxq2(aa, ...args) {
    console.log(args); // [2, 3, 4, 5, 6]
  }

  pxq2(1, 2, 3, 4, 5, 6)

展开运算符 (浅拷贝)

  let arr1 = [ 'aa', 'bb', 'cc' ]
  let arr2 = [ 11, 22, 33 ]

  let arr3 =[ ...arr1, ...arr2 ]
  console.log(arr3); //['aa', 'bb', 'cc', 11, 22, 33]

  let obj1 = { name: 'pxq', age: 18 }
  let obj2 = { hobby: [ 'youxi', 'lanqiu' ] }
  let obj3 = { ...obj1, ...obj2 }
  console.log(obj3); //{ age: 18 hobby: (2) ['youxi', 'lanqiu'] name: "pxq" }

Symbol 唯一标识符

  // 作为唯一的key
  const key1 = Symbol()
  const key2 = Symbol()
  console.log( key1 === key2 ) //false

  let obj = {
    [key1]: 'pxq1',
    [key2]: 'pxq2'
  }

  // 新增、查找
  const key3 = Symbol()
  obj[key3] = 'pxq3'

  console.log(obj[key3]); //'pxq3'

  // 获取所有的key并遍历
  let keys = Object.getOwnPropertySymbols(obj)
  console.log(keys);

  for (const sKey of keys) {
    console.log(obj[sKey]); 
  }
 
  // 添加key 查看对应的key
  const key5 = Symbol.for('pxq')
  const key6 = Symbol.for('pxq')
  console.log( key5 === key6 ); //true
  console.log(Symbol.keyFor(key5)); //'pxq'

  //添加描述
  let key4 = Symbol('pxq')
  console.log(key4.description); //'pxq'