let/const

ES2015 前没有块级作用域，用 var 在花括号内声明一个变量，在花括号外也能访问到。

  1. {
  2.   let a = 125;
  3.   var b = 521;
  4. }
  5. a // Uncaught ReferenceError: a is not defined
  6. b // 521
  1. 在 for 循环中，如果使用 var 来控制循环有时候会产生意料之外的结果。
  1. for (var i = 0; i <10; i++) {  
  2.     setTimeout(function() {  // 同步注册回调函数到 异步的 宏任务队列。
  3.          console.log(i);        // 执行此代码时，同步代码for循环已经执行完成
  4.       }, 0);
  5. }
  6. // 输出 10个10
  10. // i虽然在全局作用域声明，但是在for循环体局部作用域中使用的时候，变量会被固定，不受外界干扰。
  11. for (let i = 0; i < 10; i++) { 
  12.   setTimeout(function() {
  13.     console.log(i);    //  i 是循环体内局部作用域，不受外界影响。
  14.   }, 0);
  15. }
  16. // 输出 0-9
  20. for (let i = 0; i < 3; i++) { 
  21.   for (let i = 0; i < 3; i++) { 
  22.     console.log(i);
  23.   }
  24. }
  25. // 输出 3次 0 1 2

变量提升

var 生命的变量可以先使用再声明，因为 var 声明的变量相当于在作用域的最前面先赋予 undefined 的值，称之为变量提升；let 必须先生命再使用。

  1. console.log(foo)  // 输出 undefined，不报错
  2. var foo = '1'

暂时性死区

  1. var tmp=521;
  2. if(true){
  3.     tmp='abc';//ReferenceError: tmp is not defined
  4.     let tmp;
  5. }
  7. // 代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

重复声明

  1. var i = 1;
  2. var i = 2; // 不报错
  4. let j = 1;
  5. let j = 2; // 报已经变量存在的错误

let 和 const

  1.  const 和 let 的特性相同，区别在于 const 声明的是不可改变的常量。但是如果用 const 声明复杂对象，那么可以改变这个对象的属性值，因为对象常量的内存地址并没有改变。
  1. const i = 4;
  2. i = 5;  // 报错
  4. const a = { b: 1, c: 2 }
  5. a.b = 3 // 不会报错，因为 a 的内存地址没有改变
  7. a = { d: 6 } // 报错

数组解构

  1. // 数组的解构
  3. const arr = [100, 200, 300]
  5. // const [foo, bar, baz] = arr
  6. // console.log(foo, bar, baz)
  7. // foo = 100, bar = 200, baz = 300
  9. // const [, , baz] = arr
  10. // console.log(baz)
  11. // baz = 300
  13. // const [foo, ...rest] = arr
  14. // console.log(rest)
  15. // rest = [200, 300]
  17. // const [foo, bar, baz, more] = arr
  18. // console.log(more)
  19. // more = undefined
  21. // 设置默认值
  22. // const [foo, bar, baz = 123, more = 'default value'] = arr
  23. // console.log(baz, more)
  24. // baz = 300, more = 'default value'
  26. const path = '/foo/bar/baz'
  27. // const tmp = path.split('/')
  28. // const rootdir = tmp[1]
  30. const [, rootdir] = path.split('/')
  31. console.log(rootdir)

对象解构

  1. // 对象的解构
  3. const obj = { name: 'zce', age: 18 }
  5. // const { name } = obj
  6. // console.log(name)
  8. // 重命名
  9. // const name = 'tom'
  10. // const { name: objName } = obj
  11. // console.log(objName)
  13. // 设置默认值
  14. // const name = 'tom'
  15. // const { name: objName = 'jack' } = obj
  16. // console.log(objName)
  18. const { log } = console
  19. log('foo')
  20. log('bar')
  21. log('123')

模板字符串

  1. // 模板字符串
  3. // 反引号包裹
  4. // const str = `hello es2015, this is a string`
  6. // 允许换行
  7. // const str = `hello es2015,
  9. // this is a \`string\``
  11. // console.log(str)
  13. const name = 'tom'
  14. // 可以通过 ${} 插入表达式，表达式的执行结果将会输出到对应位置
  15. const msg = `hey, ${name} --- ${1 + 2} ---- ${Math.random()}`
  16. console.log(msg)

带标签的模板字符串

  1. const name = 'tom'
  2. const gender = false
  4. function myTagFunc (strings, name, gender) {
  5.   // console.log(strings, name, gender)
  6.   // return '123'
  7.   const sex = gender ? 'man' : 'woman'
  8.   return strings[0] + name + strings[1] + sex + strings[2]
  9. }
  11. const result = myTagFunc`hey, ${name} is a ${gender}.`
  13. console.log(result)
  14. // 输出 hey, tom is a woman.
  15. // 字符串会在模板那里分隔, strings 是 ['hey, ', ' is a ', '.', raw: ['hey, ', ' is a ', '.']]

字符串扩展方法

  1. // 字符串的3个扩展方法
  3. const message = 'Error: foo is not defined.'
  5. console.log(
  6.   message.startsWith('Error'),
  7.   message.endsWith('.'),
  8.   message.includes('foo')
  9. )

参数默认值

  1. // 函数参数的默认值
  3. // 第一种
  4. function zce (enable) {
  5.   // 短路运算很多情况下是不适合判断默认参数的，例如 0 '' false null
  6.   // enable = enable || true
  7.   enable = enable === undefined ? true : enable
  8.   console.log('foo invoked - enable: ')
  9.   console.log(enable)
  10. }
  12. // 第二种
  13. // 默认参数一定是在形参列表的最后
  14. function foo (enable = true) {
  15.   console.log('foo invoked - enable: ')
  16.   console.log(enable)
  17. }
  19. foo(false)

扩展运算符 … 的作用

接收剩余参数

… 接收剩余的参数，返回一个数组，接收剩余参数必须在最后。

  1. function foo (first, ...args) {
  2.   console.log(args) // [2, 3, 4]
  3. }
  5. foo(1, 2, 3, 4)

数组展开

  1. // 展开数组参数
  3. const arr = ['foo', 'bar', 'baz']
  5. console.log(...arr)
  6. // 输出 foo bar baz

数组、对象拷贝

需要注意的是，… 是浅拷贝，如果是基本数据类型的数组和一层的对象则相互不会影响，如果是对象数组和多层对象则会影响。

  1. var arr = [1,2,3,4,5]
  2. var [ ...arr2 ] = arr
  3. arr[2] = 5
  4. console.log(arr) // [1, 2, 5, 4, 5]
  5. console.log(arr2) // [1, 2, 3, 4, 5]

箭头函数

箭头函数不会改变 this，因为它本身没有 this 的机制。
如果箭头右边不写花括号，相当于返回右边的值，如果写了花括号，想要返回值就需要写 return。

  1. const arr = [1, 2, 3, 4, 5, 6, 7]
  3. // 常用场景，回调函数
  4. arr.filter(i => i % 2)
  6. // 或者这么写
  7. arr.filter(i =>{ return i % 2 })

对象

对象字面量的增强

  1. // 对象字面量
  3. const bar = '345'
  5. const obj = {
  6.   foo: 123,
  7.   // bar: bar
  8.   // 属性名与变量名相同，可以省略 : bar
  9.   bar,
  10.   // method1: function () {
  11.   //   console.log('method111')
  12.   // }
  13.   // 方法可以省略 : function
  14.   method1 () {
  15.     console.log('method111')
  16.     // 这种方法就是普通的函数，同样影响 this 指向。
  17.     console.log(this)
  18.   },
  19.   // Math.random(): 123 // 不允许
  20.   // 通过 [] 让表达式的结果作为属性名
  21.   [bar]: 123
  22. }
  24. // obj[Math.random()] = 123
  26. console.log(obj)
  27. obj.method1()

对象扩展方法

Object.assign

将多个源对象的属性复制到一个第一个对象。如果有同一个属性名，保留后传入的。

  1. const source1 = {
  2.   a: 123,
  3.   b: 123
  4. }
  6. const source2 = {
  7.   b: 789,
  8.   d: 789
  9. }
  11. const target = {
  12.   a: 456,
  13.   c: 456
  14. }
  16. const result = Object.assign(target, source1, source2)
  18. console.log(target)
  19. console.log(result === target)
  21. // 输出 {a: 123, c: 456, b: 789, d: 789}  true

Object.assign 是一层的深拷贝，如果是多层的对象，它还是浅拷贝。下面的 obj 的 name 属性没有被改变，但是更深一层的 address.city 被改变了。

  1. function func (obj) {
  3.   const funcObj = Object.assign({}, obj)
  4.   funcObj.name = 'funcObj'
  5.   funcObj.address.city = 'guangzhou'
  6.   console.log(funcObj)  // 输出 address: {city: 'guangzhou', country: 'china'} name: "funcObj"
  7. }
  9. const obj = { name: 'global obj', address: { city: 'chaozhou', country: 'china' } }
  11. func(obj)
  12. console.log(obj)  //输出 address: {city: 'guangzhou', country: 'china'} name: "global obj"

Object.is

用来判断两个值是否相等。

  1. // Object.is
  3. console.log(
  4.   // 0 == false              // => true
  5.   // 0 === false             // => false
  6.   // +0 === -0               // => true
  7.   // NaN === NaN             // => false
  8.   // Object.is(+0, -0)       // => false
  9.   // Object.is(NaN, NaN)     // => true
  10. )

Proxy

Proxy 类可以避免直接去操作一个对象，而通过代理的方式对对象的属性值进行查询和修改。这么做主要有三个作用：

  • 拦截和监视外部对对象的访问
  • 降低函数或类的复杂度
  • 在复杂操作前对操作进行校验或对所需资源进行管理
  1. // Proxy 对象
  3. const person = {
  4.   name: 'zce',
  5.   age: 20
  6. }
  8. const personProxy = new Proxy(person, {
  9.   // 监视属性读取
  10.   get (target, property) {
  11.     return property in target ? target[property] : 'default'
  12.     // console.log(target, property)
  13.     // return 100
  14.   },
  15.   // 监视属性设置
  16.   set (target, property, value) {
  17.     if (property === 'age') {
  18.       if (!Number.isInteger(value)) {
  19.         throw new TypeError(`${value} is not an int`)
  20.       }
  21.     }
  23.     target[property] = value
  24.     // console.log(target, property, value)
  25.   }
  26. })
  28. personProxy.age = 100
  30. personProxy.gender = true
  32. console.log(personProxy.name)
  33. console.log(personProxy.xxx)

对比 Object.defineProperty，Proxy 具有以下优势：

  1. 可以进行读写以外的操作，比如删除 ```javascript const person = { name: ‘zce’, age: 20 }

const personProxy = new Proxy(person, { deleteProperty (target, property) { console.log(‘delete’, property) delete target[property] } })

delete personProxy.age

  2. 2. 可以很方便地监视数组的操作
  3. ```javascript
  4. const list = []
  6. const listProxy = new Proxy(list, {
  7.   set (target, property, value) {
  8.     console.log('set', property, value)
  9.     target[property] = value
  10.     return true // 表示设置成功
  11.   }
  12. })
  14. listProxy.push(100)
  15. listProxy.push(100)
  1. 不需要侵入对象 ```javascript const person = {}

Object.defineProperty(person, ‘name’, { get () { console.log(‘name 被访问’) return person._name }, set (value) { console.log(‘name 被设置’) person._name = value } }) Object.defineProperty(person, ‘age’, { get () { console.log(‘age 被访问’) return person._age }, set (value) { console.log(‘age 被设置’) person._age = value } })

person.name = ‘jack’

console.log(person.name)

// Proxy 方式更为合理 const person2 = { name: ‘zce’, age: 20 }

const personProxy = new Proxy(person2, { get (target, property) { console.log(‘get’, property) return target[property] }, set (target, property, value) { console.log(‘set’, property, value) target[property] = value } })

personProxy.name = ‘jack’

console.log(personProxy.name)

  2. <a name="PKvx2"></a>
  3. ## Reflect
  4. Reflect 内部封装了一系列对对象的底层操作，都是静态方法，Reflect 成员方法就是 Proxy 处理对象的默认实现。
  5. ```javascript
  6. // Reflect 对象
  8. // const obj = {
  9. //   foo: '123',
  10. //   bar: '456'
  11. // }
  13. // const proxy = new Proxy(obj, {
  14. //   get (target, property) {
  15. //     console.log('watch logic~')
  17. //     return Reflect.get(target, property)
  18. //   }
  19. // })
  21. // console.log(proxy.foo)
  23. const obj = {
  24.   name: 'zce',
  25.   age: 18
  26. }
  28. // console.log('name' in obj)
  29. // console.log(delete obj['age'])
  30. // console.log(Object.keys(obj))
  32. console.log(Reflect.has(obj, 'name'))  // 判断是否拥有某个属性
  33. console.log(Reflect.deleteProperty(obj, 'age'))  // 删除某个属性
  34. console.log(Reflect.ownKeys(obj)) // 返回键的数组

Promise

class

ES2015 之前，定义一个类是通过函数定义的方式，定义方法是通过原型链。ES2015 引入了 class，定义一个类变得更加简单了。

  1. // class 关键词
  3. // function Person (name) {
  4. //   this.name = name
  5. // }
  7. // Person.prototype.say = function () {
  8. //   console.log(`hi, my name is ${this.name}`)
  9. // }
  11. class Person {
  12.   constructor (name) {
  13.     this.name = name
  14.   }
  16.   say () {
  17.     console.log(`hi, my name is ${this.name}`)
  18.   }
  19. }
  21. const p = new Person('tom')
  22. p.say()

静态

引入 static 关键字，一些方法和变量的访问，就不需要先实例化一个对象，再调用了。

  1. // static 方法
  3. class Person {
  4.   constructor (name) {
  5.     this.name = name
  6.   }
  8.   say () {
  9.     console.log(`hi, my name is ${this.name}`)
  10.   }
  12.   static create (name) {
  13.     return new Person(name)
  14.   }
  15. }
  17. const tom = Person.create('tom')
  18. tom.say()

继承

extends 关键字使得一个类可以从另一个类继承属性和方法。

  1. // extends 继承
  3. class Person {
  4.   constructor (name) {
  5.     this.name = name
  6.   }
  8.   say () {
  9.     console.log(`hi, my name is ${this.name}`)
  10.   }
  11. }
  13. class Student extends Person {
  14.   constructor (name, number) {
  15.     super(name) // 父类构造函数
  16.     this.number = number
  17.   }
  19.   hello () {
  20.     super.say() // 调用父类成员
  21.     console.log(`my school number is ${this.number}`)
  22.   }
  23. }
  25. const s = new Student('jack', '100')
  26. s.hello()

Set

Set 是 JavaScript 一种全新的数据结构，类似于数组，但是它的成员的值是不可重复的。Set 经常用于数组的去重。

  1. const s = new Set()
  3. s.add(1).add(2).add(3).add(4).add(2)
  6. const arr = [1, 2, 1, 3, 4, 1]
  8. // const result = Array.from(new Set(arr))
  9. const result = [...new Set(arr)]
  11. console.log(result) // [1,2,3,4]

Map

Map 也是一种新的数据结构，往里面放每一个成员，都要赋予一个键。与普通对象赋值方式不同，Map不会把键的类型转成字符串，它的键的类型任意，可以是一个对象，这是对象赋值做不到的。

  1. const m = new Map()
  3. const tom = { name: 'tom' }
  5. m.set(tom, 90)
  7. console.log(m)
  9. console.log(m.get(tom))
  11. // 常用方法
  12. // m.has()
  13. // m.delete()
  14. // m.clear()
  16. m.forEach((value, key) => {
  17.   console.log(value, key)
  18. })

Symbol

Symbol 可以创建一个完全独一无二的值，在如今大量使用第三方模块的情况下，使用 Symbol 作为对象的键可以避免键名的冲突，也可以创建私有成员。

  1. // Symbol 数据类型
  3. // 场景1：扩展对象，属性名冲突问题
  5. // // shared.js ====================================
  7. const cache = {}
  9. // a.js =========================================
  11. cache['a_foo'] = Math.random()
  13. // b.js =========================================
  15. cache['b_foo'] = '123'
  17. console.log(cache)
  19. // =========================================================
  21. const s = Symbol()
  22. console.log(s)
  23. console.log(typeof s)
  25. 两个 Symbol 永远不会相等
  27. console.log(
  28.   Symbol() === Symbol() // false
  29. )
  31. Symbol 描述文本
  33. console.log(Symbol('foo'))
  34. console.log(Symbol('bar'))
  35. console.log(Symbol('baz'))4
  37. // 使用 Symbol 为对象添加用不重复的键
  39. const obj = {}
  40. obj[Symbol()] = '123'
  41. obj[Symbol()] = '456'
  42. console.log(obj)
  44. 也可以在计算属性名中使用
  46. const obj = {
  47.   [Symbol()]: 123
  48. }
  49. console.log(obj)
  3. // 案例2：Symbol 模拟实现私有成员
  5. // a.js ======================================
  7. const name = Symbol()
  8. const person = {
  9.   [name]: 'zce',
  10.   say () {
  11.     console.log(this[name])
  12.   }
  13. }
  14. // 只对外暴露 person
  16. // b.js =======================================
  18. // 由于无法创建出一样的 Symbol 值，
  19. // 所以无法直接访问到 person 中的「私有」成员
  20. // person[Symbol()]
  21. person.say()

Symbol 的常用方法：

  1. // Symbol 补充
  3. console.log(
  4.   // Symbol() === Symbol()
  5.   Symbol('foo') === Symbol('foo')  // false
  6. )
  8. // Symbol 全局注册表 ----------------------------------------------------
  10. const s1 = Symbol.for('foo')
  11. const s2 = Symbol.for('foo')
  12. console.log(s1 === s2)  // true
  14. console.log(
  15.   Symbol.for(true) === Symbol.for('true')
  16. )  // true   for 会把传入的参数转成字符串
  18. // 内置 Symbol 常量 ---------------------------------------------------
  20. console.log(Symbol.iterator)
  21. console.log(Symbol.hasInstance)
  23. const obj = {
  24.   [Symbol.toStringTag]: 'XObject'
  25. }
  26. console.log(obj.toString())
  28. // Symbol 属性名获取 ---------------------------------------------------
  30. const obj = {
  31.   [Symbol()]: 'symbol value',
  32.   foo: 'normal value'
  33. }
  35. // for (var key in obj) {
  36. //   console.log(key)
  37. // }
  38. // console.log(Object.keys(obj))
  39. // console.log(JSON.stringify(obj))
  41. console.log(Object.getOwnPropertySymbols(obj))  // [Symbol()] 可以获取到Symbol键

for of 循环

所有可被迭代的数据类型都可以使用 for..of 遍历，普通对象不能用 for…of 遍历。

  1. // 遍历 Map 可以配合数组结构语法，直接获取键值
  3. const m = new Map()
  4. m.set('foo', '123')
  5. m.set('bar', '345')
  7. for (const [key, value] of m) {
  8.   console.log(key, value)
  9. }

迭代

ES2015 提供了 Iterable 接口，一些数据类型实现了这个接口，如Array，Set，Map。for…of 循环的本质就是调用这些数据类型的迭代器方法。

  1. const set = new Set(['foo', 'bar', 'baz'])
  3. const iterator = set[Symbol.iterator]()  // set 的迭代器
  5. while (true) {
  6.   const current = iterator.next()  // 迭代器实现了 next()
  7.   if (current.done) {
  8.     break // 迭代已经结束了，没必要继续了
  9.   }
  10.   console.log(current.value)
  11. }

想要 for…of 可以遍历一个普通对象，那么就实现它的迭代器。

  1. // 迭代器设计模式
  3. // 场景：你我协同开发一个任务清单应用
  5. // 我的代码 ===============================
  7. const todos = {
  8.   life: ['吃饭', '睡觉', '打豆豆'],
  9.   learn: ['语文', '数学', '外语'],
  10.   work: ['喝茶'],
  12.   // 提供统一遍历访问接口
  13.   each: function (callback) {
  14.     const all = [].concat(this.life, this.learn, this.work)
  15.     for (const item of all) {
  16.       callback(item)
  17.     }
  18.   },
  20.   // 提供迭代器（ES2015 统一遍历访问接口）
  21.   [Symbol.iterator]: function () {
  22.     const all = [...this.life, ...this.learn, ...this.work]
  23.     let index = 0
  24.     return {
  25.       next: function () {
  26.         return {
  27.           value: all[index],
  28.           done: index++ >= all.length
  29.         }
  30.       }
  31.     }
  32.   }
  33. }
  35. // 你的代码 ===============================
  37. // for (const item of todos.life) {
  38. //   console.log(item)
  39. // }
  40. // for (const item of todos.learn) {
  41. //   console.log(item)
  42. // }
  43. // for (const item of todos.work) {
  44. //   console.log(item)
  45. // }
  47. todos.each(function (item) {
  48.   console.log(item)
  49. })
  51. console.log('-------------------------------')
  53. for (const item of todos) {
  54.   console.log(item)
  55. }

生成器 Generator

一种新的异步编程方案。

  1. function * foo () {
  2.   console.log('1111')
  3.   yield 100
  4.   console.log('2222')
  5.   yield 200
  6.   console.log('3333')
  7.   yield 300
  8. }
  10. const generator = foo()
  12. console.log(generator.next()) // 第一次调用，函数体开始执行，遇到第一个 yield 暂停
  13. console.log(generator.next()) // 第二次调用，从暂停位置继续，直到遇到下一个 yield 再次暂停
  14. console.log(generator.next()) // 。。。
  15. console.log(generator.next()) // 第四次调用，已经没有需要执行的内容了，所以直接得到
  1. // Generator 应用
  3. // 案例1：发号器
  5. function * createIdMaker () {
  6.   let id = 1
  7.   while (true) {
  8.     yield id++
  9.   }
  10. }
  12. const idMaker = createIdMaker()
  14. console.log(idMaker.next().value)
  15. console.log(idMaker.next().value)
  16. console.log(idMaker.next().value)
  17. console.log(idMaker.next().value)
  19. // 案例2：使用 Generator 函数实现 iterator 方法
  21. const todos = {
  22.   life: ['吃饭', '睡觉', '打豆豆'],
  23.   learn: ['语文', '数学', '外语'],
  24.   work: ['喝茶'],
  25.   [Symbol.iterator]: function * () {
  26.     const all = [...this.life, ...this.learn, ...this.work]
  27.     for (const item of all) {
  28.       yield item
  29.     }
  30.   }
  31. }
  33. for (const item of todos) {
  34.   console.log(item)
  35. }

ES Modules

ES2016

Array.includes()

用于判断数组是否包含指定元素。可以找到 NaN 元素。

  1. const arr = ['foo', 1, NaN, false]
  3. // 直接返回是否存在指定元素
  4. console.log(arr.includes('foo'))
  5. // 能够查找 NaN
  6. console.log(arr.includes(NaN))

ES2017

Object.values()

遍历对象的属性值。

Object.entries()

遍历对象的属性名和值的对。

  1. const obj = {
  2.   foo: 'value1',
  3.   bar: 'value2'
  4. }
  6. console.log(Object.values(obj))  // ['value1', 'value2']
  8. console.log(Object.entries(obj))  // [ ['foo', 'value1'], ['bar', 'value2'] ]
  10.  for (const [key, value] of Object.entries(obj)) {
  11.    console.log(key, value)
  12.  }  // foo value1 bar value2