前端知识点——ES6(ECMA 2015)

写在前面

笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。

let const

• 没有变量提升
• const常量，readonly，索引不变的前提下可以修改内部值

for(let i = 0; i < 3; i++) {
   
  for(let i = 0; i < 3; i++) {
   
    //这里虽然有两次定义i，但是因为是i，所以作用域不同，不冲突。
    console.log(i) // 0 1 2  0 1 2  0 1 2
  }
}

解构

数组的解构

const [a, b, c = 'C'] = ['A', 'B']
console.log(a, b, c) // "A" "B" "C"

const [a, b, c = 'C'] = ['A', 'B', 3]
console.log(a, b, c) // "A" "B" 3

对象的解构

const obj = {
   
  name: 'aeorus',
  age: 27
}
const {
   
  name: userName, // 重命名
  age
} = obj
console.log(userName, age) // "aeorus" 27

模板字符串

• 支持换行
• 插值表达式 -> ${}
• 可以使用标签 -> 用途类似拦截器

const str = console.log`aeorus` // ["aeorus", raw: ["aeorus"]]
// 自定义标签
const name = 'aeorus'
const age = 27
function myTagFunc(strings, name, age) {
   
  console.log(strings) // ["My name is ", " and I'm ", " years now.", raw: ["My name is ", " and I'm ", " years now."]]
  console.log(name) // "aeorus"
  console.log(age) // 27
  return 'rebuild result'
}
const str = myTagFunc`My name is ${
     name} and I'm ${
     age} years now.`
console.log(str) // "rebuild result"

字符串的扩展方法

• includes()
• startsWith()
• endsWith()

const name = 'aeorus'
console.log(name.includes('A')) // false
console.log(name.startsWith('a')) // true
console.log(name.endsWith('s')) // true

对象字面量增强

const name = 'aeorus'
const obj = {
   
  // name: name
  name,
  // method1: function() {}
  method1() {
   },
  // 可以使用[key]方式添加动态key的键值对
  [Math.random()]: 'random'
}

Object.assign

Object.assign(target, source) -> target和source的交集，同名的key以source为准

Proxy

Proxy <-> Object.defineProperty 数据劫持

const obj = {
   
  name: 'aeorus',
  age: 27
}
// Object.defineProperty
for (let key in obj) {
   
  Object.defineProperty(obj, key, {