diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts index 8eccb05..5e0b73e 100644 --- a/docs/.vuepress/config.ts +++ b/docs/.vuepress/config.ts @@ -11,6 +11,10 @@ const Navbar = [ { text: "红宝书", link: "/frontend/js/red-book" + }, + { + text: "ES6", + link: "/frontend/js/es6" } ] }, diff --git a/docs/frontend/js/es6/01.md b/docs/frontend/js/es6/01.md index fe5dac9..30229ca 100644 --- a/docs/frontend/js/es6/01.md +++ b/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 数据结构 diff --git a/docs/frontend/js/es6/02.md b/docs/frontend/js/es6/02.md new file mode 100644 index 0000000..750a686 --- /dev/null +++ b/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 结构的键名),不会强制转为字符串。这对于分组函数返回值是对象的情况,尤其有用 diff --git a/docs/frontend/js/es6/index.md b/docs/frontend/js/es6/index.md index 96cf876..bfd3423 100644 --- a/docs/frontend/js/es6/index.md +++ b/docs/frontend/js/es6/index.md @@ -5,3 +5,5 @@ sidebar: false ## ES6 [第 1 章 Set 和 Map 数据结构](./01.md) + +[第 2 章 Array](./02.md)