一、数组新增的扩展

image.png

1-1 扩展运算符

  1. // ES6通过扩展元素符 ... 将一个数组转为用逗号分隔的参数序列
  2. console.log(...[1, 2, 3]) // 1 2 3
  3. console.log([...document.querySelectorAll('div')]) // [<div>, <div>, <div>]
  5. // 能够实现数组的浅拷贝
  6. const a1 = [1, 2];
  7. const a2 = [...a1];
  8. console.log(a2) // [1, 2]
  10. // 合并数组
  11. const a1 = [1, 2];
  12. const a2 = [3, 4];
  13. const a3 = [...a1, ...a2];
  14. console.log(a3) // [1, 2, 3, 4]
  16. // 扩展运算符可以与解构赋值结合起来，用于生成数组
  17. const [first, ...rest] = [1, 2, 3, 4, 5];
  18. console.log(first) // 1
  19. console.log(rest)  // [2, 3, 4, 5]
  21. // 将字符串转为真正的数组
  22. console.log([...'hello']) // ['h', 'e', 'l', 'l', 'o']
  24. // 可以将定义了遍历器（Iterator）接口的对象转为数组
  25. let set = new Set(['a','b','c'])
  26. console.log(set) // Set(3) {'a', 'b', 'c'}
  27. console.log([...set]) // ['a', 'b', 'c']

1-2 构造函数 Array 新增的方法

Array.from() ：可以将类似数组的对象和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

  1. // 基本用法
  2. let obj = {
  3.   0: 'a',
  4.   1: 'b',
  5.   2: 'c',
  6.   length: 3
  7. }
  8. console.log(Array.from(obj)) // ['a', 'b', 'c']
  10. // Array.from()第二个参数是一个函数，用来对每个元素进行处理，将处理后的值放入返回的数组
  11. console.log(Array.from(obj,(item) => item+item)) // ['aa', 'bb', 'cc']

Array.of()：用于将一组值，转换为数组

  1. // 基本用法
  2. console.log(Array.of(1, 2, 3)) // [1, 2, 3]
  4. // 没有参数的时候，返回一个空数组
  5. console.log(Array.of()) // []
  7. // 当参数只有一个的时候，实际上是指定数组的长度，所以说Array.of()参数值不能少于两个
  8. console.log(Array.of(3)) // [ , , ]

1-3 Array 实例对象新增的方法

copyWithin()：将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组

  1. // 参数如下
  2. arget（必需）：从该位置开始替换数据。如果为负值，表示倒数。
  3. start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
  4. end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。
  6. // 将从 3 号位直到数组结束的成员（4 和 5），复制到从 0 号位开始的位置，结果覆盖了原来的 1 和 2
  7. let arr = [1, 2, 3, 4, 5].copyWithin(0, 3)
  8. console.log(arr) // [4, 5, 3, 4, 5]

find()：找出第一个符合条件的数组成员

  1. // 参数是一个回调函数，接受三个参数依次为当前的值、当前的位置和原数组
  3. let a = [1, 2, 3, 4, 5].find(function(value, index, arr) {
  4.   return value > 3;
  5. }) 
  6. console.log(a) // 4

findIndex()：返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

  1. // 第一个参数是一个回调函数，接受三个参数依次为当前的值、当前的位置和原数组
  2. // 第二个参数是绑定回调函数的this对象
  4. let a = [1, 2, 3, 4, 5].findIndex(function(value, index, arr) {
  5.   return value > 4;
  6. }) 
  7. console.log(a) // 4
  9. ---------------------------------------------------------------
  11. function fn(value, index, arr){
  12.   return value > this.age;
  13. }
  14. let arr = { age: 2 }
  15. let b = [1, 2, 3, 4, 5].findIndex(fn, arr) 
  16. console.log(b) // 2

fill()：使用给定值，填充一个数组

  1. // 第一个参数是填充值，第二个和第三个参数分别是填充的起始位置和结束位置
  3. console.log(new Array(3).fill(0)) // [0, 0, 0]
  4. console.log(new Array(3).fill(0).fill(7, 1, 2)) // [0, 7, 0]


keys()，values()，entries()，
keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

  1. for(let key of ['a', 'b'].keys()){
  2.   console.log(key)
  3. }
  4. // 0
  5. // 1
  7. for(let value of ['a', 'b'].values()){
  8.   console.log(value)
  9. }
  10. // 'a'
  11. // 'b'
  13. for(let [key, value] of ['a', 'b'].entries()){
  14.   console.log(key, value)
  15. }
  16. // 0 'a'
  17. // 1 'b'

includes()：用于判断数组是否包含给定的值，返回一个布尔值，第二个参数表示搜索的起始位置，默认为0，
负数则表示倒数的位置

  1. [1, 2, 3].includes(2)     // true
  2. [1, 2, 3].includes(4)     // false
  3. [1, 2, 3].includes(3, 3);  // false
  4. [1, 2, 3].includes(3, -1); // true

flat()：将数组扁平化处理，返回一个新数组，对原数据没有影响，默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1

  1. console.log([1, 2, [3, [4, 5]]].flat()) // [1, 2, 3, [4, 5]]
  2. console.log([1, 2, [3, [4, 5]]].flat(2)) // [1, 2, 3, 4, 5]

flatMap()：对原数组的每个成员执行一个函数相当于执行Array.prototype.map()，然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组，第二个参数，用来绑定遍历函数里面的this

  1. // 等价于 [[2, 4], [3, 6], [4, 8]].flat()
  2. console.log([2, 3, 4].flatMap((x) => [x, x * 2])) // [2, 4, 3, 6, 4, 8]

1-4 数组的空位

数组的空位是指数组的某一个位置没有任何值，ES6 则是明确将空位转为 undefined ，包括Array.from、扩展运算符、copyWithin()、fill()、entries()、keys()、values()、find() 和 findIndex()

1-5 sort() 排序算法稳定性

  1. const arr = [
  2.   'peach',
  3.   'straw',
  4.   'apple',
  5.   'spork'
  6. ];
  8. const stableSorting = (s1, s2) => {
  9.   if (s1[0] < s2[0]) return -1;
  10.   return 1;
  11. };
  13. arr.sort(stableSorting) // ["apple", "peach", "straw", "spork"]

二、对象新增的扩展

image.png

2-1 属性的简写

当对象键名与对应值名相等的时候，可以进行简写

  1. const a = { b: b }
  2. // 等价于
  3. const a = { b }
  5. // 注意：简写的对象方法不能用作构造函数，否则会报错
  6. const obj = {
  7.   f() {
  8.     this.foo = 'bar';
  9.   }
  10. };
  12. new obj.f() // 报错

2-2 属性名表达式

  1. // ES6 允许字面量定义对象时，将表达式放在括号内
  3. let a = 'aaa'
  4. let b = {
  5.   [a]: 'hello'
  6. }
  7. console.log(b['aaa']) // 'hello'
  9. // 表达式还可以用于定义方法名
  11. let obj = {
  12.   ['h' + 'ello']() {
  13.     console.log('hello')
  14.   }
  15. }
  16. obj.hello() // 'hello'
  18. // 属性名表达式与属性简写，不能同时使用，会报错
  20. const foo = 'bar';
  21. const bar = 'abc';
  22. const baz = { [foo] }; // 报错
  24. // 注意，属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object Object]
  26. const keyA = {a: 1}
  27. const objA = {
  28.   [keyA]: 'valueA'
  29. };
  30. console.log(objA) // {[object Object]: 'valueA'}

2-3 super关键字

https://www.yuque.com/xiaotuzidehzy/euhezi/edy5n1

2-4 扩展运算符

  1. let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
  2. console.log(x) // 1
  3. console.log(y) // 2
  4. console.log(z) // {a: 3, b: 4}
  6. // 扩展运算符配合解构赋值是浅拷贝
  7. let obj = { a: 1, b: 2 }
  8. let { ...x } = obj
  9. console.log(x) // {a: 1, b: 2}
  11. // 等价于使用Object.assign()方法

2-5 属性的遍历

ES6 一共有 5 种方法可以遍历对象的属性

  1. for…in：循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）
  2. Object.keys(obj)：返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名
  3. Object.getOwnPropertyNames(obj)：返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名
  4. Object.getOwnPropertySymbols(obj)：返回一个数组，包含对象自身的所有 Symbol 属性的键名
  5. Reflect.ownKeys(obj)：返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举

属性遍历的次序规则

  1. 首先遍历所有数值键，按照数值升序排列
  2. 其次遍历所有字符串键，按照加入时间升序排列
  3. 最后遍历所有 Symbol 键，按照加入时间升序排
    1. Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
    2. // ['2', '10', 'b', 'a', Symbol()]

    2-6 对象新增的方法

    https://www.yuque.com/xiaotuzidehzy/euhezi/pv5rg9

    三、函数新增的扩展

    image.png

    3-1 参数

    ```javascript // ES6允许为函数的参数设置默认值

function log(x, y = ‘b’) { console.log(x, y) } log(‘a’) // ‘a’ ‘b’

// 函数的形参是默认声明的，不能使用let或const再次声明

function foo(x = 5) { let x = 1; // error const x = 2; // error }

// 参数默认值可以与解构赋值的默认值结合起来使用

function foo({x, y = 5}) { console.log(x, y) } foo({x: 1}) // 1 5 foo() // 报错，参数为对象的时候才能进行解构，否则变量x和y就不会生成

// 设置默认值避免报错

function foo({x, y = 5} = {}) { console.log(x, y) } foo() // undefined 5 foo(1) // undefined 5

// 参数默认值应该是函数的尾参数，如果不是非尾部的参数设置默认值，实际上这个参数是没发省略的 function f(x = 1, y) { console.log(x, y) } f(, 1) // 报错

  1. <a name="x5V6P"></a>
  2. ## 3-2 属性
  3. **函数的length属性将返回没有指定默认值的参数个数**
  4. ```javascript
  5. (function (a) {}).length // 1
  6. (function (a = 5) {}).length // 0
  7. (function (a, b, c = 5) {}).length // 2
  9. // rest 参数也不会计入length属性
  10. (function(...args) {}).length // 0
  12. // 如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了
  13. (function (a = 0, b, c) {}).length // 0
  14. (function (a, b = 1, c) {}).length // 1

函数的name属性返回该函数的函数名

  1. var f = function () {};
  2. console.log（f.name）// "f"
  4. // 如果将一个具名函数赋值给一个变量，则 name 属性都返回这个具名函数原本的名字
  5. const bar = function baz() {};
  6. console.log(bar.name) // "baz"
  8. // Function构造函数返回的函数实例，name属性的值为anonymous
  9. (new Function).name // "anonymous"
  10. const f = new Function()
  11. console.log(f.name) // "anonymous"
  13. // bind返回的函数，name属性值会加上bound前缀
  14. function foo() {};
  15. foo.bind({}).name // "bound foo"

3-3 作用域

https://www.yuque.com/xiaotuzidehzy/euhezi/kb4iul

3-4 严格模式

只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错

  1. // 报错
  2. function doSomething(a, b = a) {
  3.   'use strict';
  4.   // code
  5. }
  7. // 报错
  8. const doSomething = function ({a, b}) {
  9.   'use strict';
  10.   // code
  11. };
  13. // 报错
  14. const doSomething = (...a) => {
  15.   'use strict';
  16.   // code
  17. };
  19. const obj = {
  20.   // 报错
  21.   doSomething({a, b}) {
  22.     'use strict';
  23.     // code
  24.   }
  25. };

3-5 箭头函数

  1. let p = {
  2.   a: function () {
  3.     var obj = {
  4.       b: () => {console.log(this)},
  5.     }
  6.     obj.b()
  7.   }
  8. }
  9. p.a() // {a: ƒ} 函数执行上下文的this值
  10. // 箭头函数不绑定this， 它会捕获其定义时的位置上下文的this值， 作为自己的this值