ES6-Array

docs/.vuepress/config.ts

@@ -11,6 +11,10 @@ const Navbar = [
           {
             text: "红宝书",
             link: "/frontend/js/red-book"
+          },
+          {
+            text: "ES6",
+            link: "/frontend/js/es6"
           }
         ]
       },

docs/frontend/js/es6/01.md

@@ -5,8 +5,8 @@ prev:
   link: ./index.md
 
 next:
-  text: 目录
-  link: ./index.md
+  text: Array
+  link: ./02.md
 ---
 
 ## Set 和 Map 数据结构

docs/frontend/js/es6/02.md

@@ -0,0 +1,147 @@
+---
+title: ES6
+prev:
+  text: Set 和 Map 数据结构
+  link: ./01.md
+
+next:
+  text: Array
+  link: ./02.md
+---
+
+## Array
+
+### 扩展运算符
+
+1. 能够正确识别四个字节的 Unicode 字符
+
+```js
+[..."x\uD83D\uDE80y"].length; // 3
+```
+
+2. 任何定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组
+
+### Array.from()
+
+Array.from()方法用于将两类对象转为真正的数组：
+
+1. 类似数组的对象（array-like object），即任何有 length 属性的对象。此时扩展运算符就无法转换
+2. 可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）
+
+### Array.of()
+
+Array.of()方法用于将一组值，转换为数组
+
+```js
+Array.of(3, 11, 8); // [3,11,8]
+Array.of(3); // [3]
+Array.of(); // []
+```
+
+这个方法的主要目的，是弥补数组构造函数 Array()的不足。因为参数个数的不同，会导致 Array()的行为有差异。
+
+### 实例方法：copyWithin()
+
+在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组
+
+```js
+Array.prototype.copyWithin(target, (start = 0), (end = this.length));
+```
+
+### 实例方法：find() 和 findIndex()，findLast() 和 findLastIndex()
+
+都可以发现 NaN，弥补了数组的 indexOf() 方法的不足
+
+### 实例方法：fill()
+
+```js
+new Array(3).fill(7);
+```
+
+> 注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。
+
+#### 实例方法：entries()，keys() 和 values()
+
+```js
+for (let index of ["a", "b"].keys()) {
+  console.log(index);
+}
+// 0
+// 1
+
+for (let elem of ["a", "b"].values()) {
+  console.log(elem);
+}
+// 'a'
+// 'b'
+
+for (let [index, elem] of ["a", "b"].entries()) {
+  console.log(index, elem);
+}
+// 0 "a"
+// 1 "b"
+```
+
+### 实例方法：includes()
+
+Array.prototype.includes 方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的 includes 方法类似
+
+indexOf 方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对 NaN 的误判
+
+```js
+[NaN].indexOf(NaN); // -1
+
+[NaN].includes(NaN); // true
+```
+
+### 实例方法：flat()，flatMap()
+
+Array.prototype.flat() 用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响
+
+```js
+[1, 2, [3, 4]].flat(); // [1, 2, 3, 4]
+
+[1, 2, [3, 4, [5, 6]]].flat(); // [1, 2, 3, 4, [5, 6]]
+
+[1, 2, [3, 4, [5, 6]]].flat(2); // [1, 2, 3, 4, 5, 6]
+
+// 如果不管有多少层嵌套，都要转成一维数组，可以用 Infinity 关键字作为参数
+[1, [2, [3]]].flat(Infinity); // [1, 2, 3]
+```
+
+flatMap() 方法对原数组的每个成员执行一个函数（相当于执行 Array.prototype.map()），然后对返回值组成的数组执行 flat() 方法。该方法返回一个新数组，不改变原数组
+
+> flatMap()只能展开一层数组
+
+### 实例方法：at()
+
+at()方法，接受一个整数作为参数，返回对应位置的成员，并支持负索引
+
+不仅可用于数组，也可用于字符串和类型数组（TypedArray）
+
+### 实例方法：toReversed()，toSorted()，toSpliced()，with()
+
+这四个新方法对应的原有方法，含义和用法完全一样，唯一不同的是不会改变原数组，而是返回原数组操作后的拷贝
+
+- toReversed() 对应 reverse()，用来颠倒数组成员的位置。
+- toSorted() 对应 sort()，用来对数组成员排序。
+- toSpliced() 对应 splice()，用来在指定位置，删除指定数量的成员，并插入新成员。
+- with(index, value) 对应 splice(index, 1, value)，用来将指定位置的成员替换为新的值。
+
+### 实例方法：group()，groupToMap()
+
+group()的参数是一个分组函数，原数组的每个成员都会依次执行这个函数，确定自己是哪一个组
+
+```js
+const array = [1, 2, 3, 4, 5];
+
+array.group((num, index, array) => {
+  return num % 2 === 0 ? "even" : "odd";
+});
+// { odd: [1, 3, 5], even: [2, 4] }
+
+[6.1, 4.2, 6.3].group(Math.floor);
+// { '4': [4.2], '6': [6.1, 6.3] }
+```
+
+groupToMap()的作用和用法与 group()完全一致，唯一的区别是返回值是一个 Map 结构，而不是对象。Map 结构的键名可以是各种值，所以不管分组函数返回什么值，都会直接作为组名（Map 结构的键名），不会强制转为字符串。这对于分组函数返回值是对象的情况，尤其有用

docs/frontend/js/es6/index.md

@@ -5,3 +5,5 @@ sidebar: false
 ## ES6
 
 [第 1 章 Set 和 Map 数据结构](./01.md)
+
+[第 2 章 Array](./02.md)