关于数组的整理

Reference：关于vue更新数组项
数组方法的变更与非变更在 vue 及 react 单向数据流中均有应用

VUE的数组变更方法

官方提供的变更方法有：（以下vue提供的方法均会修改原数组）
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

各方法的作用&返回值

• push()

  作用：将一个或多个元素添加到数组的末尾
  返回值：该数组的新长度

  arr.push(element1,......., elementN)
  

• unshift()

  作用：将一个或多个元素添加到数组的开头
  返回值：该数组的新长度

  arr.unshift(element1, ..., elementN)
  

• pop()

  作用：删除最后一个元素
  返回值：该元素的值

  arr.pop()
  

• shift()

  作用：删除第一个元素
  返回值：该元素的值

  arr.shift()
  

• splice()

  作用：通过删除或替换现有元素或者原地添加新的元素来修改数组
  返回值：以数组形式返回被修改的内容

  array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
  

  const months = ['Jan', 'March', 'April', 'June'];
  months.splice(1, 0, 'Feb');// inserts at index 1
  console.log(months);// expected output: Array ["Jan", "Feb", "March", "April", "June"]
  

• sort()

  用原地算法对数组进行排序，并返回数组。

  arr.sort([compareFunction])
  

  常用操作：（将数组乱序）

  arr.sort((a, b) => Math.random() - 0.5)
  

• reverse()

  作用：翻转数组。
  返回值：反转后的数组。

   arr.reverse()
  

非变更方法

非变更方法：
map()
slice()
concat()
filter()

ES6新增与修复

Reference：ES6基础教程——数组的扩展

for-in 与 for-of

结论：for-of 更适合用来循环数组，for-in更适合用来循环对象

in操作符

1. 扩展运算符（…）

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

具体用法请查阅文档，以下只做简单整理。

1.1 复制数组

const a1 = [1, 2];
const [...a2] = a1;

1.2 合并数组

const arr1 = ['a', 'b']
const arr2 = ['c']
const arr3 = ['d', 'e']
console.log([...arr1, ...arr2, ...arr3])
[ 'a', 'b', 'c', 'd', 'e' ]

1.3 与解构赋值结合

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

1.4 将字符串转化为真数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]
够正确识别四个字节的 Unicode 字符
[...'x\uD83D\uDE80y'].length // 3

1.5 将实现了 Iterator 接口的对象 转化为真数组

let nodeList = document.querySelectorAll('div')
let array = [...nodeList]
// NodeList对象实现了 Iterator

1.6 可以用在 Map 和 Set 结构，Generator 函数

const go = function* () {
	yield 1
	yield 2
	yield 3
}

[...go()] // [1, 2, 3]

---

2. Array.from()【将可遍历对象 (iterable) 转化为真数组】

作用：将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

明概念：什么是类数组对象？
拥有一个 length 属性和若干索引属性的对象。可以通过数组的方式读写和遍历，但无法使用数组方法。
Reference：JavaScript深入之类数组对象与arguments

2.1 可接受第二个参数，类似于map遍历方法

Array.from(arrayLike, (x) => x * x)
// 等同于
Array.from(arrayLike).map((x) => x * x)

Array.from([1, 2, 3], (x) => x * x)
[1, 4, 9]

2.2 可接受第三个参数绑定this

---

3. Array.of()【将一组值，转换为数组】

	Array.of(3, 11, 8) // [3,11,8]
	// 弥补Array()构造函数传参不同导致结果的不同

用来弥补 Array() 或者 new Array() 由于传入的参数不同而导致的重载
Array() 方法没有参数、一个参数、三个参数时，返回结果都不一样

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

---

4.数组实例的 copyWithin()【变更方法：改变原数组】

作用：在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)
- target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
- start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。
- end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

[1, 2, 3, 4, 5].copyWithin(0, 3)
[4, 5, 3, 4, 5]
// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
[4, 2, 3, 4, 5]

---

5. 数组实例的 find() 和 findIndex()

5.1 这两个方法都可以发现NaN

[NaN].indexOf(NaN)
// -1
[NaN].findIndex((y) => Object.is(NaN, y))
// 0

---

6. fill()

第一个参数：给定填充的值
第二个：指定填充的起始位置
第三个参数：填充结束位置

---

7. 数组实例的 entries()，keys() 和 values()

---

8. 数组实例的 includes()-可判断NaN

补充修正 indexOf() 方法: indexOf() 内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判

[NaN].includes(NaN)
// true

Map 和 Set 数据结构有一个has方法，需要注意与includes区分。

Map 结构的has方法，是用来查找键名的，比如Map.prototype.has(key)、 WeakMap.prototype.has(key)、Reflect.has(target, propertyKey)。

Set 结构的has方法，是用来查找值的，比如Set.prototype.has(value)、WeakSet.prototype.has(value)。

---

9. 数组实例的 flat()，flatMap()

9.1 flat()

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

// 拉平两层
[(1, 2, [3, [4, 5]])].flat(2)
// [1, 2, 3, 4, 5]

// 拉平无数层
[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

9.2 flatMap()【非变更方法】

作用：对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法
flatMap()只能展开一层数组

flatMap() 接收两个参数，第一个为一个遍历函数，第二个参数：this。
该函数可以接受三个参数，分别是当前数组成员、当前数组成员的位置（从零开始）、原数组

arr.flatMap(function callback(currentValue[, index[, array]]) {
  // ...
}[, thisArg])

[2, 3, 4].flatMap((x) => [x, x * 2])
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
// 最终结果为 [2, 4, 3, 6, 4, 8]

---

10. 数组的空位

map会跳过空位但会保留值
ES6 则是明确将空位转为undefined

---

11.

关于defineProperty