let/const

  1. # let const 
  2. 在ES6以前，JS只有var一种声明方式，但是在ES6之后，就多了let跟const这两种方式。
  3. 用var定义的变量没有块级作用域的概念，而let跟const则会有，因为这三个关键字创建是不一样的。
  5. {
  6.     var a = 10
  7.     let b = 20
  8.     const c = 30
  9. }
  10. a // 10
  11. b // Uncaught ReferenceError: b is not defined
  12. c // c is not defined
  13. let d = 40
  14. const e = 50
  15. d = 60
  16. d // 60
  17. e = 70 // VM231:1 Uncaught TypeError: Assignment to constant variable.

Class

  1. # Class
  3. // ES6之前写法
  5. function Person(name, age) {
  6.     this.name = name
  7.     this.age = age
  8. }
  9. Person.prototype.information = function () {
  10.     return 'My name is ' + this.name + ', I am ' + this.age
  11. }
  13. // ES6写法
  15. class Person {
  16.     constructor(name, age) {
  17.         this.name = name
  18.         this.age = age
  19.     }
  20.     information() {
  21.         return 'My name is ' + this.name + ', I am ' + this.age
  22.     }
  23. }

Arrow function

  1. # Arrow function
  3. 箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或 new.target。
  4. 这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。
  6. 在ES6以前，我们写函数一般是：
  8. var list = [1, 2, 3, 4, 5, 6, 7]
  9. var newList = list.map(function (item) {
  10.     return item * item
  11. })
  12. 但是在ES6里，我们可以：
  14. const list = [1, 2, 3, 4, 5, 6, 7]
  15. const newList = list.map(item => item * item)
  16. 看，是不是简洁了不少,而且箭头函数做回调的时候没有this的指向问题。

Function parameter defaults

  1. # Function parameter defaults
  3. 在ES6之前，如果我们写函数需要定义初始值的时候，需要这么写：
  5. function config (data) {
  6.     var data = data || 'data is empty'
  7. }
  8. 这样看起来也没有问题，但是如果参数的布尔值为false时就会出问题，例如我们这样调用config：
  10. config(0)
  11. config('')
  12. 那么结果就永远是后面的值
  14. 如果我们用函数参数默认值就没有这个问题，写法如下：
  17. const config = (data = 'data is empty') => {}

Template string （模版字符串）

  1. # Template string
  3. 在ES6之前，如果我们要拼接字符串，则需要像这样：
  5. var name = 'kris'
  6. var age = 24
  7. var info = 'My name is ' + this.name + ', I am ' + this.age
  8. 但是在ES6之后，我们只需要写成以下形式：
  10. const name = 'kris'
  11. const age = 24
  12. const info = `My name is ${name}, I am ${age}`

Destructuring assignment

  1. # Destructuring assignment
  3. 我们通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。
  5. 比如我们需要交换两个变量的值，在ES6之前我们可能需要：
  7. var a = 10
  8. var b = 20
  9. var temp = a
  10. a = b
  11. b = temp
  12. 但是在ES6里，我们有：
  14. let a = 10
  15. let b = 20
  16. [a, b] = [b, a]
  17. 是不是方便很多

Module

  1. # Module
  3. 在ES6之前，JS并没有模块化的概念，有的也只是社区定制的类似CommonJS和AMD之类的规则。例如基于CommonJS的NodeJS：
  5. // circle.js
  6. // 输出
  7. const { PI } = Math
  8. exports.area = (r) => PI * r ** 2
  9. exports.circumference = (r) => 2 * PI * r
  11. // index.js
  12. // 输入
  13. const circle = require('./circle.js')
  14. console.log(`半径为 4 的圆的面积是 ${circle.area(4)}`)
  15. 在ES6之后我们则可以写成以下形式：
  17. // circle.js
  18. // 输出
  19. const { PI } = Math
  20. export const area = (r) => PI * r ** 2
  21. export const circumference = (r) => 2 * PI * r
  23. // index.js
  24. // 输入
  25. import {
  26.     area
  27. } = './circle.js'
  28. console.log(`半径为 4 的圆的面积是: ${area(4)}`)

Spread operator

  1. # Spread operator
  3. ES6中Spread Operator 是三个点儿... 用来组装对象或者数组
  5. 扩展操作符可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。
  7. 比如在ES5的时候，我们要对一个数组的元素进行相加，在不使用reduce或者reduceRight的场合，我们需要：
  9. function sum(x, y, z) {
  10.     return x + y + z;
  11. }
  12. var list = [5, 6, 7]
  13. var total = sum.apply(null, list)
  14. 但是如果我们使用扩展操作符，只需要如下：
  16. const sum = (x, y, z) => x + y + z
  17. const list = [5, 6, 7]
  18. const total = sum(...list)
  19. 非常的简单，但是要注意的是扩展操作符只能用于可迭代对象
  21. 如果是下面的情况，是会报错的：
  23. var obj = {'key1': 'value1'}
  24. var array = [...obj] // TypeError: obj is not iterable

Object attribute shorthand

  1. # Object attribute shorthand
  3. 在ES6之前，如果我们要将某个变量赋值为同样名称的对象元素，则需要：
  6. var cat = 'Miaow'
  7. var dog = 'Woof'
  8. var bird = 'Peet peet'
  10. var someObject = {
  11.   cat: cat,
  12.   dog: dog,
  13.   bird: bird
  14. }
  15. 但是在ES6里我们就方便很多：
  17. let cat = 'Miaow'
  18. let dog = 'Woof'
  19. let bird = 'Peet peet'
  21. let someObject = {
  22.   cat,
  23.   dog,
  24.   bird
  25. }
  27. console.log(someObject)
  29. //{
  30. //  cat: "Miaow",
  31. //  dog: "Woof",
  32. //  bird: "Peet peet"
  33. //}
  34. 非常方便

Promise

  1. # Promise
  3. Promise 是ES6提供的一种异步解决方案，比回调函数更加清晰明了。
  5. Promise 翻译过来就是承诺的意思，这个承诺会在未来有一个确切的答复，并且该承诺有三种状态，分别是：
  7. 1.等待中（pending）2.完成了 （resolved）3.拒绝了（rejected）
  9. 这个承诺一旦从等待状态变成为其他状态就永远不能更改状态了，也就是说一旦状态变为 resolved 后，就不能再次改变
  11. new Promise((resolve, reject) => {
  12.   resolve('success')
  13.   // 无效
  14.   reject('reject')
  15. })
  16. 当我们在构造 Promise 的时候，构造函数内部的代码是立即执行的
  18. new Promise((resolve, reject) => {
  19.   console.log('new Promise')
  20.   resolve('success')
  21. })
  22. console.log('finifsh')
  23. // new Promise -> finifsh
  24. Promise 实现了链式调用，也就是说每次调用 then 之后返回的都是一个 Promise，并且是一个全新的 Promise，原因也是因为状态不可变。如果你在 then 中 使用了 return，那么 return 的值会被 Promise.resolve() 包装
  26. Promise.resolve(1)
  27.   .then(res => {
  28.     console.log(res) // => 1
  29.     return 2 // 包装成 Promise.resolve(2)
  30.   })
  31.   .then(res => {
  32.     console.log(res) // => 2
  33.   })
  34. 当然了，Promise 也很好地解决了回调地狱的问题，例如：
  36. ajax(url, () => {
  37.     // 处理逻辑
  38.     ajax(url1, () => {
  39.         // 处理逻辑
  40.         ajax(url2, () => {
  41.             // 处理逻辑
  42.         })
  43.     })
  44. })
  45. 可以改写成：
  47. ajax(url)
  48.   .then(res => {
  49.       console.log(res)
  50.       return ajax(url1)
  51.   }).then(res => {
  52.       console.log(res)
  53.       return ajax(url2)
  54.   }).then(res => console.log(res))

for…of

  1. # for...of
  3. for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。
  5. 例子如下：
  7. const array1 = ['a', 'b', 'c'];
  9. for (const element of array1) {
  10.       console.log(element)
  11. }
  13. // "a"
  14. // "b"
  15. // "c"

Symbol

  1. # Symbol
  3. Symbol类型是为了解决属性名冲突的问题，顺带还具备模拟私有属性的功能。
  5. symbol 是一种基本数据类型，Symbol()函数会返回symbol类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的symbol注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法："new Symbol()"。
  7. 每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据类型仅有的目的。
  9. 例子如下：
  11. const symbol1 = Symbol();
  12. const symbol2 = Symbol(42);
  13. const symbol3 = Symbol('foo');
  15. console.log(typeof symbol1); // "symbol"
  16. console.log(symbol3.toString()); // "Symbol(foo)"
  17. console.log(Symbol('foo') === Symbol('foo')); // false

迭代器（Iterator）/ 生成器（Generator）

  2. # 迭代器（Iterator）/ 生成器（Generator）
  4. iterator:它是这么一个对象，拥有一个next方法，这个方法返回一个对象{done,value}，这个对象包含两个属性，一个布尔类型的done和包含任意值的value
  5. iterable: 这是这么一个对象，拥有一个obj[@@iterator]方法，这个方法返回一个iterator
  6. generator: 它是一种特殊的iterator。反的next方法可以接收一个参数并且返回值取决与它的构造函数（generator function）。generator同时拥有一个throw方法
  7. generator 函数: 即generator的构造函数。此函数内可以使用yield关键字。在yield出现的地方可以通过generator的next或throw方法向外界传递值。generator 函数是通过function*来声明的
  8. yield 关键字：它可以暂停函数的执行，随后可以再进进入函数继续执行
  10. 迭代器（Iterator）是一种迭代的机制，为各种不同的数据结构提供统一的访问机制。任何数据结构只要内部有 Iterator 接口，就可以完成依次迭代操作。
  12. 一旦创建，迭代器对象可以通过重复调用next()显式地迭代，从而获取该对象每一级的值，直到迭代完，返回{ value: undefined, done: true }
  14. 虽然自定义的迭代器是一个有用的工具，但由于需要显式地维护其内部状态，因此需要谨慎地创建。生成器函数提供了一个强大的选择：它允许你定义一个包含自有迭代算法的函数， 同时它可以自动维护自己的状态。生成器函数使用 function*[2]语法编写。最初调用时，生成器函数不执行任何代码，而是返回一种称为Generator的迭代器。通过调用生成器的下一个方法消耗值时，Generator函数将执行，直到遇到yield关键字。
  16. 可以根据需要多次调用该函数，并且每次都返回一个新的Generator，但每个Generator只能迭代一次。
  18. 所以我们可以有以下例子：
  21. function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
  22.     for (let i = start; i < end; i += step) {
  23.         yield i;
  24.     }
  25. }
  26. var a = makeRangeIterator(1,10,2)
  27. a.next() // {value: 1, done: false}
  28. a.next() // {value: 3, done: false}
  29. a.next() // {value: 5, done: false}
  30. a.next() // {value: 7, done: false}
  31. a.next() // {value: 9, done: false}
  32. a.next() // {value: undefined, done: true}

Set/WeakSet

  1. # Set/WeakSet
  3. Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
  5. 所以我们可以通过Set实现数组去重
  7. const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5]
  8. console.log([...new Set(numbers)]) 
  9. // [2, 3, 4, 5, 6, 7, 32]
  10. WeakSet 结构与 Set 类似，但区别有以下两点：
  12. •WeakSet 对象中只能存放对象引用, 不能存放值, 而 Set 对象都可以。•WeakSet 对象中存储的对象值都是被弱引用的, 如果没有其他的变量或属性引用这个对象值, 则这个对象值会被当成垃圾回收掉. 正因为这样, WeakSet 对象是无法被枚举的, 没有办法拿到它包含的所有元素。
  14. 所以代码如下：
  16. var ws = new WeakSet()
  17. var obj = {}
  18. var foo = {}
  20. ws.add(window)
  21. ws.add(obj)
  23. ws.has(window) // true
  24. ws.has(foo)    // false, 对象 foo 并没有被添加进 ws 中 
  26. ws.delete(window) // 从集合中删除 window 对象
  27. ws.has(window)    // false, window 对象已经被删除了
  29. ws.clear() // 清空整个 WeakSet 对象

Map/WeakMap

  1. # Map/WeakMap
  3. Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
  5. 例子如下，我们甚至可以使用NaN来作为键值：
  7. var myMap = new Map();
  8. myMap.set(NaN, "not a number");
  10. myMap.get(NaN); // "not a number"
  12. var otherNaN = Number("foo");
  13. myMap.get(otherNaN); // "not a number"
  14. WeakMap 对象是一组键/值对的集合，其中的键是弱引用的。其键必须是对象，而值可以是任意的。
  16. 跟Map的区别与Set跟WeakSet的区别相似，具体代码如下：
  18. var wm1 = new WeakMap(),
  19.     wm2 = new WeakMap(),
  20.     wm3 = new WeakMap();
  21. var o1 = {},
  22.     o2 = function(){},
  23.     o3 = window;
  25. wm1.set(o1, 37);
  26. wm1.set(o2, "azerty");
  27. wm2.set(o1, o2); // value可以是任意值,包括一个对象
  28. wm2.set(o3, undefined);
  29. wm2.set(wm1, wm2); // 键和值可以是任意对象,甚至另外一个WeakMap对象
  30. wm1.get(o2); // "azerty"
  31. wm2.get(o2); // undefined,wm2中没有o2这个键
  32. wm2.get(o3); // undefined,值就是undefined
  34. wm1.has(o2); // true
  35. wm2.has(o2); // false
  36. wm2.has(o3); // true (即使值是undefined)
  38. wm3.set(o1, 37);
  39. wm3.get(o1); // 37
  40. wm3.clear();
  41. wm3.get(o1); // undefined,wm3已被清空
  42. wm1.has(o1);   // true
  43. wm1.delete(o1);
  44. wm1.has(o1);   // false

Proxy/Reflect

  1. # Proxy/Reflect
  3. Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。
  4. Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。
  6. Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与 Proxy 的方法相同。Reflect不是一个函数对象，因此它是不可构造的。
  8. Proxy跟Reflect是非常完美的配合，例子如下：
  10. const observe = (data, callback) => {
  11.       return new Proxy(data, {
  12.             get(target, key) {
  13.                 return Reflect.get(target, key)
  14.             },
  15.             set(target, key, value, proxy) {
  16.                   callback(key, value);
  17.                   target[key] = value;
  18.                     return Reflect.set(target, key, value, proxy)
  19.             }
  20.       })
  21. }
  23. const FooBar = { open: false };
  24. const FooBarObserver = observe(FooBar, (property, value) => {
  25.   property === 'open' && value 
  26.           ? console.log('FooBar is open!!!') 
  27.           : console.log('keep waiting');
  28. });
  29. console.log(FooBarObserver.open) // false
  30. FooBarObserver.open = true // FooBar is open!!!
  31. 当然也不是什么都可以被代理的，如果对象带有configurable: false 跟writable: false 属性，则代理失效。

Math对象的扩展

  1. # Math对象的扩展
  3. •二进制表示法 : 0b或0B开头表示二进制(0bXX或0BXX)
  5. •二进制表示法 : 0b或0B开头表示二进制(0bXX或0BXX)
  7. •八进制表示法 : 0o或0O开头表示二进制(0oXX或0OXX)
  9. •Number.EPSILON : 数值最小精度
  11. •Number.MIN_SAFE_INTEGER : 最小安全数值(-2^53)
  13. •Number.MAX_SAFE_INTEGER : 最大安全数值(2^53)
  15. •Number.parseInt() : 返回转换值的整数部分
  17. •Number.parseFloat() : 返回转换值的浮点数部分
  19. •Number.isFinite() : 是否为有限数值
  21. •Number.isNaN() : 是否为NaN
  23. •Number.isInteger() : 是否为整数
  25. •Number.isSafeInteger() : 是否在数值安全范围内
  27. •Math.trunc() : 返回数值整数部分
  29. •Math.sign() : 返回数值类型(正数1、负数-1、零0)
  31. •Math.cbrt() : 返回数值立方根
  33. •Math.clz32() : 返回数值的32位无符号整数形式
  35. •Math.imul() : 返回两个数值相乘
  37. •Math.fround() : 返回数值的32位单精度浮点数形式
  39. •Math.hypot() : 返回所有数值平方和的平方根
  41. •Math.expm1() : 返回e^n - 1
  43. •Math.log1p() : 返回1 + n的自然对数(Math.log(1 + n))
  45. •Math.log10() : 返回以10为底的n的对数
  47. •Math.log2() : 返回以2为底的n的对数
  49. •Math.sinh() : 返回n的双曲正弦
  51. •Math.cosh() : 返回n的双曲余弦
  53. •Math.tanh() : 返回n的双曲正切
  55. •Math.asinh() : 返回n的反双曲正弦
  57. •Math.acosh() : 返回n的反双曲余弦
  59. •Math.atanh() : 返回n的反双曲正切

Array对象的扩展

  1. # Array对象的扩展
  2. Array.prototype.from：转换具有Iterator接口的数据结构为真正数组，返回新数组。
  5.   console.log(Array.from('foo')) // ["f", "o", "o"]
  6.   console.log(Array.from([1, 2, 3], x => x + x)) // [2, 4, 6]
  7. •Array.prototype.of()：转换一组值为真正数组，返回新数组。
  9.   Array.of(7)       // [7] 
  10.   Array.of(1, 2, 3) // [1, 2, 3]
  12.   Array(7)          // [empty, empty, empty, empty, empty, empty]
  13.   Array(1, 2, 3)    // [1, 2, 3]
  14. •Array.prototype.copyWithin()：把指定位置的成员复制到其他位置，返回原数组
  16.   const array1 = ['a', 'b', 'c', 'd', 'e']
  18.   console.log(array1.copyWithin(0, 3, 4)) // ["d", "b", "c", "d", "e"]
  20.   console.log(array1.copyWithin(1, 3)) // ["d", "d", "e", "d", "e"]
  21. •Array.prototype.find()：返回第一个符合条件的成员
  23.   const array1 = [5, 12, 8, 130, 44]
  25.   const found = array1.find(element => element > 10)
  27.   console.log(found) // 12
  28. •Array.prototype.findIndex()：返回第一个符合条件的成员索引值
  30.   const array1 = [5, 12, 8, 130, 44]
  32.   const isLargeNumber = (element) => element > 13
  34.   console.log(array1.findIndex(isLargeNumber)) // 3
  35. •Array.prototype.fill()：根据指定值填充整个数组，返回原数组
  37.   const array1 = [1, 2, 3, 4]
  39.   console.log(array1.fill(0, 2, 4)) // [1, 2, 0, 0]
  41.   console.log(array1.fill(5, 1)) // [1, 5, 5, 5]
  43.   console.log(array1.fill(6)) // [6, 6, 6, 6]
  44. •Array.prototype.keys()：返回以索引值为遍历器的对象
  46.   const array1 = ['a', 'b', 'c']
  47.   const iterator = array1.keys()
  49.   for (const key of iterator) {
  50.         console.log(key)
  51.   }
  53.   // 0
  54.   // 1
  55.   // 2
  56. •Array.prototype.values()：返回以属性值为遍历器的对象
  58.   const array1 = ['a', 'b', 'c']
  59.   const iterator = array1.values()
  61.   for (const key of iterator) {
  62.         console.log(key)
  63.   }
  65.   // a
  66.   // b
  67.   // c
  68. •Array.prototype.entries()：返回以索引值和属性值为遍历器的对象
  70.   const array1 = ['a', 'b', 'c']
  71.   const iterator = array1.entries()
  73.   console.log(iterator.next().value) // [0, "a"]
  74.   console.log(iterator.next().value) // [1, "b"]
  75. •数组空位：ES6明确将数组空位转为undefined或者empty
  77.   Array.from(['a',,'b']) // [ "a", undefined, "b" ]
  78.   [...['a',,'b']] // [ "a", undefined, "b" ]
  79.   Array(3) //  [empty × 3]
  80.   [,'a'] // [empty, "a"]

https://es6.ruanyifeng.com/#docs/let

https://juejin.cn/post/6844903959283367950