数组方法 知多少?

131 阅读3分钟

常用的数组原型方法梳理,一起来复习一下吧

image.png

push

添加元素到数组尾部,返回添加成功后数字的长度

arr.push(...items)

pop

弹出(删除)数组最后一个元素,并返回该元素

arr.pop()

shift

删除数组的第一个元素,并返回该元素

arr.shift()

unshift

从数组头部添加元素,返回添加成功后数字的长度

arr.unshift(...items)

splice

一共有2+n个参数(n>=0):开始位置,删除元素数量(可选),在删除的位置插入n个元素。返回被删除元素的数组

arr.splice(start,?deleteCount,...items)
// 当不传deleteCount将删除数组start开始的所有元素

slice

两个参数:开始位置,结束位置。获取数组 [开始位置,结束位置) 的元素,返回这些元素组成的新数组(不改变当前数组)

arr.slice(0, 10)

concat

连接当前数组和传入数组,返回一个新数组(不改变当前数组)

arr.concat([1,2,3,4])

join

将当前数组的所有元素连接成一个字符串并返回这个字符串。

arr.join(str)

tips:

如果遇到多维数组会摊平数组,再转成字符串

如果元素为对象,它会转换为"[object Object]"

如果一个元素为 undefined 或 null,它会被转换为空字符串

indexOf

返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回 -1

lastIndexOf

返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1

includes

判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回 false

find

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

findIndex

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

filter

返回一个新数组,新数组中的元素是筛选出来的符合条件的所有对象

map

按照原始数组元素顺序依次使用传入参数处理元素,返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

sort

对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序。默认排序顺序为按字母升序。

[4,10,22].sort() //  [10, 22, 4]   
[4,10,22].sort((a, b) => { return a - b })  // [4, 10, 22]
[4,10,22].sort((a, b) => { return b - a })  //  [22, 10, 4]

resverse

将数组中元素的位置颠倒,并返回该数组。

reduce

对数组中的每个元素执行一个由传入的reducer函数(升序执行),将其结果汇总为单个返回值。

let arr = [1,2,3,4]
arr.reduce((pre, next) => { return pre + next} ) // 10

forEach

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

at

传入一个参数n(整数)。当0<=n<数组长度,返回a[n];当 数组长度*-1=<n<0,返回从后往前数的第|n|位的元素;否则返回undefined

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 11, 12, 13];
arr[-1] // 13

flat

传入一个整数n,用于将嵌套的m维数组变成m-n(>=1)维的数组,n小于0则取0,然后返回这个新的一维数组。

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

tips:

如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数


copyWithin

copyWithin(target, start = 0, end = this.length) :浅复制数组的[start,end]部分到同一数组中的从start开始的另一个位置,并返回它(不改变数组长度)

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

of

Array.of()方法用于将一组值,转换为数组。

Array.of(3, 11, 8) // [3,11,8]; 

tips:

Array.of()基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。

from

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']