数组使用手册

淮桑榆
195 阅读19分钟

文章前言

永远把别人对你的批评记在心里，别人的表扬，就把它忘了。Hello 大家好～！我是南宫墨言QAQ

观看到文章最后的话，如果觉得不错，可以点个关注或者点个赞哦！感谢～❤️

文章主体

感谢各位观者的耐心观看，数组使用手册正片即将开始，且听南宫墨言QAQ娓娓道来

image.png

数组对象原生方法

copyWithin、fill、pop、push、sort、reverse、shift、unshift、splice、concat、includes、join、slice、toString、indexOf、lastIndexOf、forEach、entries、every、some、filter、find、findIndex、keys、values、map、reduce、reduceRight

操作方法

数组基本操作可以归纳为增、删、改、查，需要注意方法是否会对原数组产生影响

增

先上个表格，抓住你们的你们的心

方法作用返回值是否影响原数组
push接收任意数量的参数，并将它们添加到数组末尾数组的最新长度是
unshift数组开头添加任意多个值数组的最新长度是
splice传入三个参数，分别是开始位置、0（要删除的元素数量）、插入的元素空数组是
concat创建一个当前数组的副本，然后再把它的参数添加到副本末尾新构建的数组否

push

将一个或多个元素添加到数组的末尾，并返回该数组的新长度，该方法修改原有数组

/**
 * array.push(...items: T[])
 * @param items 要添加到数组的新元素.
 * @returns 数组的新长度.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const pushRlt = array.push(15,50) // 从后面添加两个数据
 
 console.log(array) // [ 2,  0,  2,  3, 6, 19, 15, 50 ]
 console.log(pushRlt) // 8

unshift

将一个或多个元素添加到数组的开头，并返回该数组的新长度，该方法修改原有数组

/**
 * array.unshift(...items: T[])
 * @param items 要添加到数组的新元素.
 * @returns 数组的新长度.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const unshiftRlt = array.unshift(15,50) // 从前面添加两个数据
 
 console.log(array) // [ 15, 50, 2,  0, 2,  3, 6, 19 ]
 console.log(unshiftRlt) // 8

splice

传入三个参数，分别是开始位置、0（要删除的元素数量）、插入的元素，返回空数组，该方法修改原有数组

/**
 * array.splice( start: number, deleteCount: number, ...items: T[])
 * @param start 开始位置.
 * @param deleteCount 要删除的元素数量.
 * @param items 要添加到数组的新元素，不新增就不传.
 * @returns 被删除元素组成的数组，这里删除数量为0，所以返回空数组.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const spliceRlt = array.splice(1, 0, 15, 50) // 开始位置，要删除元素数量， 插入的元素
 
 console.log(array) // [ 2, 15, 50,  0,  2,  3,  6, 19 ]
 console.log(spliceRlt) // []

concat

首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组，不会影响原始数组

/**
 * array.concat( ...items: (T | ConcatArray<T>)[])
 * @param items 要添加到数组末尾的其他数组或项目.
 * @returns 返回新构建的数组.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const concatRlt = array.concat( 1, [ 15, 50 ]) // 在数组末尾添加其他数组或项目
 
 console.log(array) // [ 2, 0, 2, 3, 6, 19 ]
 console.log(concatRlt) // [ 2, 0,  2,  3, 6, 19, 1, 15, 50 ]

删

方法作用返回值是否影响原数组
pop删除数组的最后一项，同时减少数组的length值被删除的项是
shift删除数组的第一项，同时减少数组的length值被删除的项 ｜ 是
splice传入两个参数，分别是开始位置，删除元素的数量删除元素的数组是
slice创建一个包含原有数组中一个或多个元素的新数组新构建的数组否

pop

删除数组的最后一项，同时减少数组的length 值，返回被删除的项，该方法修改原有数组

/**
 * array.pop()
 * @returns 数组的最后一项，空数组会返回undefined.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const popRlt = array.pop() // 取得最后一项
 
 console.log(array) // [ 2, 0, 2, 3, 6 ]
 console.log(popRlt) // 19
 console.log(array.length) // 5

shift

删除数组的第一项，同时减少数组的length 值，返回被删除的项，该方法修改原有数组

/**
 * array.pop()
 * @returns 数组的第一项，空数组会返回undefined.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const shiftRlt = array.shift() // 取得最后一项
 
 console.log(array) // [ 0, 2, 3, 6, 19 ]
 console.log(shiftRlt) // 2
 console.log(array.length) // 5

splice

传入两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组， 该方法修改原有数组

/**
 * array.splice( start: number, deleteCount: number, ...items: T[])
 * @param start 开始位置.
 * @param deleteCount 要删除的元素数量.
 * @param items 要添加到数组的新元素，不新增就不传.
 * @returns 被删除元素组成的数组.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const spliceRlt = array.splice( 0, 1 ) // 开始位置，要删除元素数量
 
 console.log(array) // [ 0, 2, 3, 6, 19 ]
 console.log(spliceRlt) // [ 2 ]

slice

创建一个包含原有数组中一个或多个元素的新数组，不会影响原始数组

/**
 * array.slice( start: number, deleteCount: number, ...items: T[])
 * @param start 开始位置.
 * @param deleteCount 要删除的元素数量.
 * @param items 要添加到数组的新元素，不新增就不传.
 * @returns 被删除元素组成的数组.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const sliceRlt1 = array.slice(1) // 截取下标从1开始到末尾
 const sliceRlt2 = array.slice(1, 4) // 截取下边从1到4，不包含4，即左闭右开
 
 console.log(array) // [ 2, 0, 2, 3, 6, 19 ]
 console.log(sliceRlt1) // [ 0, 2, 3, 6, 19 ]
 console.log(sliceRlt2) // [ 0, 2, 3 ]

改

方法作用返回值是否影响原数组
splice传入三个参数，分别是开始位置，要删除元素的数量，要插入的任意多个元素删除元素的数组是

splie

/**
 * array.splice( start: number, deleteCount: number, ...items: T[])
 * @param start 开始位置.
 * @param deleteCount 要删除的元素数量.
 * @param items 要添加到数组的新元素，不新增就不传.
 * @returns 被删除元素组成的数组.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const spliceRlt = array.splice(2, 1, 1, 8) // 从下标2开始，删除一个元素，新增两个元素
 
 console.log(array) // [ 2, 0,  1, 8, 3, 6, 19 ]
 console.log(spliceRlt) // [ 2 ]

查

方法作用返回值
indexOf查找的元素在数组中的最开始位置元素在数组中的位置或-1
lastIndexOf查找的元素在数组中最后出现的位置元素在数组中的位置或-1
includes查找的元素在数组中的位置true/false
find查找数组中满足测试函数的第一个元素值满足条件的元素值/undefined
findIndex查找数组中满足测试函数的第一个元素索引满足条件的元素值/-1

indexOf

返回要查找的元素在数组中最开始的位置，如果没找到则返回 -1

/**
 * array.indexOf(searchElement: T, fromIndex?: number)
 * @param searchElement 要查找的元素.
 * @param fromIndex（可选） 开始查找的下标.
 * @returns 元素在数组中的位置.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const indexOfRlt1 = array.indexOf(5) // 查找不在数组中的元素
 const indexOfRlt2 = array.indexOf(6) // 查找在数组中的元素
 const indexOfRlt3 = array.indexOf(2) // 查找在数组中出现重复的元素
 const indexOfRlt4 = array.indexOf(2, 1) // 从下标为1往后开始查找在数组中出现重复的元素
 
 console.log(indexOfRlt1) // -1 
 console.log(indexOfRlt2) // 4
 console.log(indexOfRlt3) // 0
 console.log(indexOfRlt4) // 2

lastIndexOf

返回要查找的元素在数组中最后出现的位置，如果没找到则返回 -1

/**
 * array.lastIndexOf(searchElement: T, fromIndex?: number)
 * @param searchElement 要查找的元素.
 * @param fromIndex（可选） 开始查找的下标.
 * @returns 元素在数组中的位置.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const lastIndexOfRlt1 = array.lastIndexOf(5) // 查找不在数组中的元素
 const lastIndexOfRlt2 = array.lastIndexOf(6) // 查找在数组中的元素
 const lastIndexOfRlt3 = array.lastIndexOf(2) // 查找在数组中出现重复的元素
 const lastIndexOfRlt4 = array.lastIndexOf(2, 1) // 从下标为1往前开始查找在数组中出现重复的元素
 
 console.log(lastIndexOfRlt1) // -1
 console.log(lastIndexOfRlt2) // 4
 console.log(lastIndexOfRlt3) // 2
 console.log(lastIndexOfRlt4) // 0

includes

返回要查找的元素在数组中的位置，找到返回true，否则false

/**
 * array.includes(searchElement: T, fromIndex?: number)
 * @param searchElement 要查找的元素.
 * @param fromIndex（可选） 开始查找的下标.
 * @returns 元素在数组中的位置.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const includesRlt1 = array.includes(5) // 查找不在数组中的元素
 const includesRlt2 = array.includes(6) // 查找在数组中的元素
 const includesRlt3 = array.includes(2) // 查找在数组中出现重复的元素
 const includesRlt4 = array.includes(2,3) // 从下标为最后出现重复元素的位置往后开始查找在数组中出现重复的元素

 console.log(includesRlt1) // false
 console.log(includesRlt2) // true
 console.log(includesRlt3) // true
 console.log(includesRlt4) // false

find

返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined

/**
 * array.find(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any)
 * @param predicate 在数组的每一项上执行函数，接收3个参数：
 * value 当前遍历到的元素.
 * index（可选）当前遍历到的索引.
 * obj（可选）数组本身.
 * @param thisArg（可选）执行回调时用作this的对象.
 * @returns 数组中第一个满足所提供测试函数的元素的值，否则返回undefined.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const findRlt = array.find(v=> v>2) // 元素值大于2

 console.log(findRlt) // 3

findIndex

返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1

/**
 * array.findIndex(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any)
 * @param predicate 在数组的每一项上执行函数，接收3个参数：
 * value 当前遍历到的元素0
 * index（可选）当前遍历到的索引0
 * obj（可选）数组本身.
 * @param thisArg（可选）执行回调时用作this的对象.
 * @returns 数组中通过提供测试函数的第一个元素的索引。否则，返回-1.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const findIndexRlt = array.findIndex(v=> v>2) // 元素值大于2

 console.log(findRlt) // 3

排序方法

数组有两个方法可以用来对元素重新排序： reverse、sort，且二者都会改变原数组

方法作用返回值
reverse反转数组反转后的数组
sort排序数组排序后的数组

reverse

将数组中元素的位置颠倒，并返回该数组，该方法会改变原数组

/**
 * array.reverse()
 * @returns 颠倒后的数组.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const reverseRlt = array.reverse() // 将数组反转

 console.log(array) // [ 19, 6, 3, 2, 0, 2 ]
 console.log(reverseRlt) // [ 19, 6, 3, 2, 0, 2 ]

sort

用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。由于它取决于具体实现，因此无法保证排序的时间和空间复杂性

/**
 * array.sort()
 * @returns 排序后的数组.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const sortRlt = array.sort() // 将数组排序

 console.log(array) // [ 0, 19, 2, 2, 3, 6 ]
 console.log(sortRlt) // [ 0, 19, 2, 2, 3, 6 ]

转换方法

join

接收一个字符串分隔符，返回包含所有项的字符串

/**
 * array.join(separator?: string)
 * @param separator 字符串分隔符.
 * @returns 包含所有项的字符串.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const joinRlt1 = array.join(',') // 分隔符为 ,
 const joinRlt2 = array.join(' || ') // 分隔符为 ||


 console.log(joinRlt1) // 2,0,2,3,6,19
 console.log(joinRlt2) // 2 || 0 || 2 || 3 || 6 || 19

迭代方法

以下数组迭代方法都不会改变原数组

方法作用返回值
some判断数组中是否至少有1个元素满足传入的测试函数true/false
every判断数组中是否所有元素都满足传入的测试函数true/false
forEach对数组的每个元素执行一次给定的函数无
filter创建一个新数组, 其包含通过所提供函数实现的测试的所有元素一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组
map对数组中的每个元素都调用一次提供的函数，并返回新的数组一个由原数组每个元素执行回调函数的结果组成的新数组
reduce对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值函数累计处理的结果
reduceRight接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值执行后的返回结果

some

测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值

/**
 * array.some(predicate: (value: T, index: number, array: T[]) => unknown)
 * @param predicate 在数组的每一项上执行函数，接收3个参数： 
 * value 当前遍历到的元素.
 * index（可选）当前遍历到的索引.
 * array（可选）数组本身.
 * @returns Boolean.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const someRlt1 = array.some(v=> v > 2) // 存在元素值大于2
 const someRlt2 = array.some(v=> v < 0) // 存在元素值小于0

 console.log(someRlt1) // true
 console.log(someRlt2) // false

every

测试一个数组内的所有元素是否都能通过某个指定函数的测试，它返回一个布尔值

/**
 * array.every(predicate: (value: T, index: number, array: T[]) => unknown)
 * @param predicate 在数组的每一项上执行函数，接收3个参数： 
 * value 当前遍历到的元素.
 * index（可选）当前遍历到的索引.
 * array（可选）数组本身.
 * @returns Boolean.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const everyRlt1 = array.every(v=> v > 0) // 所有元素值大于0
 const everyRlt2 = array.every(v=> v < 2) // 所有元素值小于2

 console.log(everyRlt1) // true
 console.log(everyRlt2) // false

forEach

对数组的每个元素执行一次给定的函数

/**
 * array.forEach(callbackfn: (value: T, index: number, array: T[]) => void)
 * @param callbackfn 为数组中每个元素执行的函数，该函数接收一至三个参数：
 * value: 数组中正在处理的当前元素
 * index（可选）数组中正在处理的当前元素的索引
 * array（可选）forEach（）方法正在操作的数组
 * @returns undefined
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 array.forEach(item => console.log(item)) // 打印每个元素
 // 2
 // 0
 // 2
 // 3
 // 6
 // 19

filter

创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

/**
 * array.filter(predicate: (value: T, index: number, array: T[]) => void)
 * @param predicate 在数组的每一项上执行函数，接收3个参数： 
 * value 当前遍历到的元素.
 * index（可选）当前遍历到的索引.
 * array（可选）数组本身.
 * @returns 一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const filterRlt = array.filter(v=> v > 2)// 截取每个元素值大于2的数组
 
 console.log(filterRlt) // [ 3, 6, 19 ]

map

创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值

/**
 * array.map(callbackfn: (value: T, index: number, array: T[]) => void)
 * @param callbackfn 生成新数组元素的函数，使用三个参数：
 * value: 数组中正在处理的当前元素
 * index（可选）数组中正在处理的当前元素的索引
 * array（可选）map方法正在操作的数组
 * @returns 一个由原数组每个元素执行回调函数的结果组成的新数组.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const mapRlt = array.map(v=> v * 2)// 将每个元素值*2
 
 console.log(mapRlt) // [ 4, 0, 4, 6, 12, 38 ]

reduce

对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值

/**
 * array.reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T)
 * @param callbackfn 执行数组中每个值的函数，包含四个参数：
 * previousValue 累计器累计回调的返回值；它是上一次调用回调时返回的累计值，或initialValue
 * currentValue 数组中正在处理的元素
 * index（可选）数组中正在处理的当前元素的索引，如果提供了initialValue，则起始索引号为0，否则从索引1起始
 * array（可选）调用reduce方法的数组
 * @param initialValue（可选） 作为第一次调用callback函数时的第一个参数的值，如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用reduce将报错。
 * @returns 函数累计处理的结果
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const reduceRlt = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0) //  对数组中值进行累加

 console.log(reduceRlt) // 32

reduceRight

接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值

/**
 * array.reduceRight(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T)
 * @param callbackfn 执行数组中每个值的函数，包含四个参数：
 * previousValue 累计器累计回调的返回值；它是上一次调用回调时返回的累计值，或initialValue
 * currentValue 数组中正在处理的元素
 * index（可选）数组中正在处理的当前元素的索引，如果提供了initialValue，则起始索引号为0，否则从索引1起始
 * array（可选）调用reduceRight方法的数组
 * @param initialValue（可选） 作为第一次调用callback函数时的第一个参数的值，如果没有提供初始值，则将使用数组中的最后一个元素。在没有初始值的空数组上调用reduce将报错。
 * @returns 函数累计处理的结果
 **/
 const array = [ 2, 0, 2, 3, 6, 19 ] // 原数组
 const temp = [ 9, 8 ] // 原数组
 const reduceRightRlt = [array, temp].reduceRight((accumulator, currentValue) =>      accumulator.concat(currentValue))

 console.log(reduceRightRlt) //[  9, 8, 2,  0,  2, 3, 6, 19 ]

数组其他方法

方法作用返回值
copyWithin浅复制数组的一部分到同一数组中的另一个位置修改后的数组
fill用一个固定值填充一个数组中从起始索引到终止索引内的全部元素，不包括终止索引修改后的数组 ｜
entries生成一个新的Array Iterator对象包含数组中每个索引的键/值对
keys生成一个新的Array Iterator对象包含数组中每个索引键的Array Iterator对象
values生成一个新的Array Iterator对象包含数组中每个索引键的Array Iterator对象
toString生成数组元素的字符串数组元素的字符串
flat创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中新的数组
flatMap等价于在调用map方法后再调用深度为 1 的 flat方法（arr.map(...args).flat()）新的数组

copyWithin

浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度

/**
 * array.copyWithin(target: number, start?: number, end?: number)
 * @param target
 * 0 为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算.
 * 如果 target 大于等于 array.length，将会不发生拷贝。如果 target 在 start 之后，复制的序列将被修改以符合 array.length.
 * @param strat 
 * 0 为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算
 * 如果 start 被忽略，copyWithin 将会从0开始复制
 * @param end 
 * 0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数， end 将从末尾开始计算
 * 如果 end 被忽略，copyWithin 方法将会一直复制至数组结尾（默认为 array.length）
 * @returns 修改后的数组.
 **/
 const array = [ 2, 0, 2, 3, 6, 19 ] // 原数组
 const copyWithinRlt = array.copyWithin(0,4,5) // 从下标为0开始，将下标从4到5（左闭右开）的数据拷贝过来

 console.log(array) // [ 6, 0, 2, 3, 6, 19 ]
 console.log(copyWithinRlt) // [ 6, 0, 2, 3, 6, 19 ]

fill

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素，不包括终止索引

/**
 * array.fill(value: T, start?: number, end?: number)
 * @param value 用来填充数组元素的值.
 * @param start 起始索引，默认值为0.
 * @param end 终止索引，默认值为数组的长度.
 * @returns 修改后的数组.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const fillRlt = array.fill(0, 2, 4)

 console.log(array) // [ 2, 0, 0, 0, 6, 19 ]
 console.log(fillRlt) // [ 2, 0, 0, 0, 6, 19 ]
 console.log(array.fill(5, 1)) // [ 2, 5, 5, 5, 5, 5 ]
 console.log(array.fill(6)) // [ 6, 6, 6, 6, 6, 6 ]

entries

返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对

/**
 * array.entries()
 * @returns 一个新的 Array 迭代器对象。Array Iterator是对象,它的原型（__proto__:Array Iterator）上有一个next方法，可用用于遍历迭代器取得原数组的[key,value].
 **/
const array = [2, 0, 2, 3, 6, 19] // 原数组
const iterator1 = array.entries() 

console.log(iterator1.next().value) // [ 0, 2 ]
console.log(iterator1.next().value) // [ 1, 0 ]
console.log(iterator1.next().value) // [ 2, 2 ]

keys

返回一个包含数组中每个索引键的Array Iterator对象

/**
 * array.keys()
 * @returns 一个新的 Array 迭代器对象.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const iterator = array.keys();
 for (const key of iterator) {
    console.log(key);
 }
 // 0
 // 1
 // 2
 // 3
 // 4
 // 5

values

返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

/**
 * array.values()
 * @returns 一个新的 Array 迭代器对象.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const iterator = array.values();
 for (const value of iterator) {
    console.log(value);
 }
 // 2
 // 0
 // 2
 // 3
 // 6
 // 19

toString

返回一个字符串，表示指定的数组及其元素

/**
 * array.toString()
 * @returns 一个表示指定的数组及其元素的字符串.
 **/
 const array = [2, 0, 2, 3, 6, 19] // 原数组
 const toStringRlt = array.toString()

 console.log(toStringRlt) // 2,0,2,3,6,19

flat

创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中

/**
 * array.flat(depth?: number)
 * params depth （可选）最大递归深度
 * @returns 根据指定深度递归地将所有子数组元素拼接到新的数组.
 **/
 const arr1 = [0, 1, 2, [3, 4]]
 const arr2 = [0, 1, 2, [[[3, 4]]]]

 console.log(arr1.flat()) // [ 0, 1, 2, 3, 4 ]
 console.log(arr2.flat(2)) // [ 0, 1, 2, [ 3, 4 ] ]

flatMap

对数组中的每个元素应用给定的回调函数，然后将结果展开一级，返回一个新数组。它等价于在调用map 方法后再调用深度为 1 的flat方法（arr.map(...args).flat()），但比分别调用这两个方法稍微更高效一些。

/**
 * array.flatMap(callback: (this: This, value: T, index: number, array: T[]) => U | ReadonlyArray<U>)
 * params callback 
 * @returns 新的数组.
 **/
const arr1 = [1, 2, 1]
const result = arr1.flatMap((num) => (num === 2 ? [2, 2] : 1))

console.log(result) // [ 1, 2, 2, 1 ]

数组的奇技淫巧

结尾营业

看官都看到这了，如果觉得不错，可不可以不吝啬你的小手手帮忙点个关注或者点个赞

711115f2517eae5e.gif

avatar
文章
阅读
粉丝