振作精神,努力更新!
先定个小目标,每周更新3篇内容!
本周:2022 - 06 - 27 ~ 2022 - 07 - 03 ( 第一篇 )
三点运算符
应用:
-
克隆数组
let arr2 = [...arr1]
-
合并数组
let arr3 = [...arr1, ...arr2]
-
与解构赋值结合
let [a, ...arr2] = arr1
-
字符串
[...'hello'] // [ "h", "e", "l", "l", "o" ] // 可识别四个字节的字符
-
实现了 Iterator 接口的对象
任何定义了遍历器(Iterator)接口的对象,都可以用扩展运算符转为真正的数组。
-
Map、Set结构,Generator 函数
数组的空位
ES5:
-
forEach()
,filter()
,reduce()
,every()
和some()
都会跳过空位。 -
map()
会跳过空位,但会保留这个值 -
join()
和toString()
会将空位视为undefined
,而undefined
和null
会被处理成空字符串。
ES6:明确将空位转为undefined
-
Array.from
-
...
-
entries()
、keys()
、values()
、find()
和findIndex()
会将空位处理成undefined
copyWithin()
会连空位一起拷贝。
fill()
会将空位视为正常的数组位置。
for...of
循环也会遍历空位。
注意:由于空位的处理规则非常不统一,所以建议避免出现空位。
Array.from()
Array.from
方法用于将两类对象转为真正的数组:
-
类似数组的对象(array-like object)
-
可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。
Array.from
还可以接受第二个参数,作用类似于数组的map
方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
Array.of()
Array.of
方法用于将一组值,转换为数组。
主要目的是弥补数组构造函数Array()
的不足.
参数个数的不同,会导致Array()
的行为有差异。
Array.of() // [] Array.of(undefined) // [undefined] Array.of(1) // [1] Array.of(1, 2) // [1, 2]
copyWithin()
在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。
Array.prototype.copyWithin(target, start = 0, end = this.length)
-
target(必需):从该位置开始替换数据。如果为负值,表示倒数。
-
start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
-
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。
find() 和 findIndex()
find(),参数为回调函数,返回符合条件的第一个值。
findIndex
方法的用法与find
方法类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
。
这两个方法的回调函数都可以接受三个参数:当前值 value,当前位置 index,原数组 arr。
这两个方法都可以发现NaN
。
这两个方法都可以接受第二个参数,用来绑定回调函数的this
对象。
arr.find(callback, obj)
fill()
['a', 'b', 'c'].fill(7) // [7, 7, 7] new Array(3).fill(7) // [7, 7, 7] ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']
注意:填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象。
let arr = new Array(3).fill([]); arr[0].push(5); arr // [[5], [5], [5]]
entries()、keys()、values()
用于遍历数组,
keys()
是对键名的遍历、
values()
是对键值的遍历,
entries()
是对键值对的遍历。
可以手动调用遍历器对象的next
方法,进行遍历
let letter = ['a', 'b', 'c']; let entries = letter.entries(); console.log(entries.next().value); // [0, 'a'] console.log(entries.next().value); // [1, 'b'] console.log(entries.next().value); // [2, 'c']
includes()
Array.prototype.includes
方法返回一个布尔值,表示某个数组是否包含给定的值。
该方法的第二个参数表示搜索的起始位置,默认为0
。
该方法可以检测 NaN。
flat()、flatMap()
该方法用于拉平嵌套的数组。
该方法返回一个新数组,对原数据没有影响。
[1, 2, [3, 4]].flat() // [1, 2, 3, 4]
flat()
默认只会“拉平”一层
[1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]] [1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]
不管有多少层嵌套,都要转成一维数组,可以用Infinity
关键字作为参数。
原数组有空位,flat()
方法会跳过空位
// 相当于 [[2, 4], [3, 6], [4, 8]].flat() [2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8]
flatMap()
方法的参数是一个遍历函数,该函数可以接受三个参数,分别是当前数组成员、当前数组成员的位置(从零开始)、原数组。
flatMap()
方法还可以有第二个参数,用来绑定遍历函数里面的this
。