数组创建
Array.of()
将参数中所有值作为元素形成数组。
如:
console.log(Array.of(1, 2, 3, true,'www')); // [1, 2, 3, true, 'www'] console.log(Array.of()) //[]
Array.from()
将【类数组对象】或【可迭代对象】转化为数组。
- Array.from(arrayLike)
- Array.from(arrayLike, mapFn) //==》 Array.from( arrayLike.map(mapFn) )
- Array.from(arrayLike, mapFn, thisArg) //==》 Array.from( arrayLike.map(mapFn.bind(thisArg)) )
arrayLike 【类数组对象】或【可迭代对象】
mapFn 【map 函数】
thisArg 【 map 函数】的this对象
/*1类*/ console.log(Array.from([1, 2, 3])); // [1, 2, 3] /*2类*/ console.log(Array.from([1, 2, 3], (n) => n * 2)); // [2, 4, 6] /*3类*/ let map = { do: function(n) { return n * 2; } } let arrayLike = [1, 2, 3]; console.log(Array.from(arrayLike, function (n){ return this.do(n); }, map)); // [2, 4, 6]
类数组对象
- 必须含有 length 属性
- 且【元素属性名】必须是【数值】或者【可转换为数值的字符】
Array.from(arraylike) 转化成数组时:
- arraylike的length作为转化后的数组的length
- 如果arraylike转化后的项不够,缺少的项用undefined补齐;
- 如果arraylike转化后的项数量>length,只保留索引 < length
Array.from({ 0: '1', 1: '2', 2: 3, }); //返回:[] Array.from({ 0: '1', 1: '2', 2: 3,
length:3 }); //返回:["1", "2", 3]
Array.from({ a: '1', 1: '2', 2: 3, length:3 }); // 返回:[undefined, "2", 3] Array.from({ a: '1', '1': 2, 3: 'str', 2: 3, length:4 }); // 返回:[undefined, 2, 3, "str"] //上面的对象如果length设置的不对 Array.from({ a: '1', '1': 2, 3: 'str', 2: 3, length:3 }); // 返回:[undefined, 2, 3] Array.from({ a: '1', '1': 2, 3: 'str', 2: 3, length:5 }); // 返回:[undefined, 2, 3, "str", undefined]
可迭代对象Map转成数组
- 会转成二维数组
- map的每组【键值对】转化成 一个【一维数组】:[key1, value1]
- 每个【键值对组成的一维数组】作为二维数组的单元:[ [key1,value1],[key2,value2],...]
Map对象没有length,有size, 转化后数组length== Map对象的size
let map = new Map(); map.set('key0', 'value0'); map.set('key1', 'value1'); console.log(Array.from(map)); // [['key0', 'value0'],['key1','value1']]
Set对象转化成数组
Set对象没有length,有size, 转化后数组length== Set对象的size
let arr = [1, 2, 3]; let set = new Set(arr); console.log(Array.from(set)); // [1, 2, 3]
字符串转化成数组
等同于string.split('')
let str = 'abc'; console.log(Array.from(str)); // ["a", "b", "c"] console.log(str.split('')); // ["a", "b", "c"]
扩展的方法
查找
find()
查找并返回第一个符合条件【元素】
找到就结束遍历
let arr = Array.of(1, 2, 3, 4); console.log(arr.find(item => item > 2)); // 3
findIndex()
查找并返回第一个符合条件【元素的索引】
找到就结束遍历
let arr = Array.of(1, 2, 1, 3); // 参数1:回调函数 // 参数2(可选):指定回调函数中的 this 值 console.log(arr.findIndex(item => item = 1)); // 0
findIndex和indexOf同样时返回第一满足条件的索引,有何不同?
- findIndex是满足【指定任意条件】
- indexOf 是满足【是指定元素】
填充
使用指定值替换指定区域的值
- fill(fillVal,startIndex [,endIndex])
- fillVal:用来填充的【值】
- startIndex:被填充的【起始索引】
- endIndex(可选):被填充的【结束索引】,默认为数组length, 【此位置不在填充范围】
- 不改变数组长度
- 改变原有数组元素
将 【startIndex 】到 【endIndex】 前的值[不包括位置endIndex],全部替换成【fillVal】
等同于
arr = arr.map((item, index)=>{ if(index>=startIndex && index<endIndex) return fillVal else return item })
let arr = Array.of(1, 2, 3, 4); console.log(arr.fill(0,1,2)); // [1, 0, 3, 4] //将第1位开始到 第2位前【不包括位置2】的值替换成0
copyWithin(changeStartIndex, templateStartIndex[, templateEndIndex])
使用数组内的某段数据的副本,替换另一段的数据
- changeStartIndex 被修改位置的开始索引
- templateStartIndex 模板开始的索引
- templateEndIndex 【可选】模板结束的索引, 默认为数组length, 【此位置不在模板范围】
- 不改变数组长度
- 改变原有数组元素
用【templateStartIndex ,templateEndIndex-1 】位置值的副本,替换【从changeStartIndex 位置开始的值】,【替换长度 = Math.min(副本长度,替换区域长度)】
//使用区域【3,4-1】值,替换从0开始区域的值 console.log([1, 2, 3, 4].copyWithin(0,2,4)); // [3, 4, 3, 4] // 使用区域【0,length-1】值, 替换从【倒数第二】开始到第0位【包括】区域的值 console.log([1, 2, 3, 4].copyWithin(-2, 0)); // [1, 2, 1, 2] console.log([1, 2, ,4].copyWithin(0, 2, 4)); // [, 4, , 4]
遍历
entries()
遍历键值对
- 返回Array Iterator[数组迭代器]
- 通过 Iterator1.next().value 可逐步访问每项键值对, 只能单向遍历,且每项只有遍历一次,遍历完就不能再被遍历
const arr = [1, "m", 0]; const lter1 = arr.entries(); const lter2 = arr.entries(); const lter3 = arr.entries(); console.log(lter1.next().value) // [0,1] console.log(lter1.next().value) // [1,'m'] console.log(lter1.next().value) // [2,0] console.log(lter1.next().value) // undefined console.log([...lter2]) //[[0,1], [1,'m'],[2,0]] console.log(lter2.next().value) // undefined console.log(lter3.next().value) // [0,1] console.log([...lter3) //[[1,'m'],[2,0]]
Iterator
Iterator 是 ES6 引入的一种新的遍历机制,迭代器有两个核心概念:
- 迭代器是一个统一的接口,它的作用是使各种数据结构可被便捷的访问,它是通过一个键为Symbol.iterator 的方法来实现。
- 迭代器是用于遍历数据结构元素的指针(如数据库中的游标)。
迭代过程
迭代的过程如下:
- 通过 Symbol.iterator 创建一个迭代器,指向当前数据结构的起始位置
- 随后通过 next 方法进行向下迭代指向下一个位置, next 方法会返回当前位置的对象,对象包含了 value 和 done 两个属性, value 是当前属性的值, done 用于判断是否遍历结束
- 当 done 为 true 时则遍历结束
keys()
遍历键名。
数组的键名就是索引
console.log([...[,'a'].keys()]); // [0, 1]
values()
遍历键值。
空位用undefined 填充
console.log([...[,'a'].values()]); // [undefined, 'a']
包含
includes(searchVal[, searchStartIndex])
数组是否包含指定值。
- searchVal 搜索的值
- searchStartIndex 【可选】从此的位置开始搜索
注意:与 Set 和 Map 的 has 方法区分;Set 的 has 方法用于查找值;Map 的 has 方法用于查找键名。
// 参数1:包含的指定值 [1, 2, 3].includes(1); // true // 参数2:可选,搜索的起始索引,默认为0 [1, 2, 3].includes(1, 2); // false // NaN 的包含判断 [1, NaN, 3].includes(NaN); // true
嵌套数组转一维数组
flat(zIndex)
zIndex: 【可选】指定转换的嵌套层数, 使用Infinity代表无限平拍
console.log([1 ,[2, 3]].flat()); // [1, 2, 3] // 指定转换的嵌套层数 console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]] // 不管嵌套多少层 console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5] // 自动跳过空位 console.log([1, [2, , 3]].flat());<p> // [1, 2, 3]
flatMap(func[, thisArg])
先对数组中每个元素进行了的处理,再对数组执行 flat() 方法。
- func:flat前的数组的处理
- thisArg:func的this对象
console.log([1, 2, 3].flatMap(n => [n * 2])); // [2, 4, 6]
扩展运算符
复制数组
空位用undefined填充
let arr = [1, 2], arr1 = [...arr]; console.log(arr1); // [1, 2] // 数组含空位 let arr2 = [1, , 3], arr3 = [...arr2]; console.log(arr3); [1, undefined, 3]
合并数组
console.log([...[1, 2],...[3, 4]]); // [1, 2, 3, 4]