【JS】常用数组方法

本文章主要描述了数组常用方法的使用方式。其中有：join、push、pop、unshift、shift、map、some、every、indexOf、 lastIndexOf、includes、find、findIndex、reverse、concat、slice、splice、fill、filter、sort 等等

1 join() 数组拼接

[].join() 数组拼接。将数组中每个元素按照指定的分隔符拼接成字符串。

参数： 指定的分隔符
返回值：拼接成的字符串
是否会改变原数组：是

const arr = [1, 2, 3, 4, 5, 6];
const str = arr.join("<");
console.log(str); // [1, 2, 3, 4, 5, 6]
console.log(arr); // 1<2<3<4<5<6

2 push() 添加元素

[].push() 添加元素。从数组的末尾向数组添加一个或多个元素。

参数：要添加的元素
返回值：新数组的长度
是否会改变原数组：是

const arr = [1, 2, 3, 4, 5, 6];
const length = arr.push(7, 8, 9);
console.log(length); // 9
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

3 pop() 删除元素

[].pop() 删除元素。删除数组的最后一个元素。

参数：无
返回值：删除的元素
是否会改变原数组：是

const arr = [1, 2, 3, 4, 5, 6];
const item = arr.pop();
console.log(item); // 6
console.log(arr); // [1, 2, 3, 4, 5]

4 unshift() 添加元素

[].unshift() 添加元素。从数组的开头向数组添加一个或多个元素。

参数：要添加的元素
返回值：新数组的长度
是否会改变原数组：是

const arr = [1, 2, 3, 4, 5, 6];
const length = arr.unshift(0);
console.log(length); // 7
console.log(arr); // [0, 1, 2, 3, 4, 5, 6]

5 shift() 删除元素

[].shift() 删除元素。删除数组的第一个元素。

参数：无
返回值：返回删除的元素
是否会改变原数组：是

const arr = [1, 2, 3, 4, 5, 6];
const item = arr.shift(0);
console.log(item); // 0
console.log(arr); // [2, 3, 4, 5, 6]

6 map() 遍历数组

[].map() 遍历数组。可以按照原始数组元素顺序依次处理元素。

参数：一个处理函数
返回值：新数组
是否会改变原数组：否

const arr = [1, 2, 3, 4, 5, 6];
const result = arr.map((item) => {
    
    
item 是数组中的每一项
  return item + 10;
});
console.log(result); // [11, 12, 13, 14, 15, 16]
console.log(arr); // [1, 2, 3, 4, 5, 6]

7 some() 判断数组中是否存在满足条件的元素

[].some() 判断数组中是否存在满足条件的项。只要有一项满足条件，即会返回 true，否则返回 false

参数：一个处理函数
返回值：布尔值 true 或 false
是否会改变原数组：否

const arr = [1, 2, 3, 4, 5, 6];
const result = arr.some((item) => {
    
    
  return item <= 2;
});
console.log(result); // true
console.log(arr); // [1, 2, 3, 4, 5, 6]

8 every() 判断数组中是否每一项都满足条件

[].every() 判断数组中是否每一项都满足条件，只要有一项不满足条件，即返回 false，否则返回 true

参数：一个处理函数
返回值：布尔值 true 或 false
是否会改变原数组：否

const arr = [1, 2, 3, 4, 5, 6];
const result = arr.every((item) => {
    
    
  return item <= 2;
});
console.log(result); // false
console.log(arr); // [1, 2, 3, 4, 5, 6]

9 indexOf() 查找元素在数组中第一次出现的位置

[].indexOf(m, n) 查找元素在数组中第一次出现的位置。从前往后查。

参数：m 为要查找的值; n 为开始查找的位置，不填则默认从0开始，非必填。
返回值：若可以查到，则会返回该元素在数组中第一次出现的索引值；未查到则返回-1。
是否会改变原数组：否

const arr = [1, "a", 3, 4, "a", 5, 6];
const result1 = arr.indexOf("a");
const result2 = arr.indexOf("a", 5);
console.log(result1); // 1
console.log(result2); // -1
console.log(arr); // [1, "a", 3, 4, "a", 5, 6]

10 lastIndexOf() 查找元素在数组中最后一次出现的位置

[].lastIndexOf(m, n) 查找元素在数组中最后一次出现的位置。从后往前查。

参数：m 为要查找的值; n 为开始查找的位置，不填则默认从0开始，非必填。
返回值：若可以查到，则会返回该元素在数组中第一次出现的索引值；未查到则返回-1。
是否会改变原数组：否

const arr = [1, "a", 3, 4, "a", 5, 6];
const result1 = arr.lastIndexOf("a");
const result2 = arr.lastIndexOf("a", 0);
console.log(result1); // 4
console.log(result2); // -1
console.log(arr); // [1, "a", 3, 4, "a", 5, 6]

11 includes() 判断数组中是否包含指定的值

[].includes(m, n) ES7 新增的方法。判断数组中是否包含指定的值，使用 === 全等运算符来进行值比较。如果包含即返回true，否则返回false。

参数：有两个参数，m 是需要查找的元素值；n 是可选，是开始查找元素的位置（索引）。
返回值：布尔值 true 或 false
是否会改变原数组：否

const arr = [1, 2, 3, 4, 5, 6];
const result1 = arr.includes(3);
const result2 = arr.includes(3, 3); // 第二个参数为3，表示从索引为3的时候开始查
console.log(result1); // true
console.log(result2); // false
console.log(arr); // [1, 2, 3, 4, 5, 6]

注意： includes使用===运算符来进行值比较，仅有一个例外：NaN 被认为与自身相等。
let values = [1, NaN, 2];
console.log(values.indexOf(NaN)); //-1
console.log(values.includes(NaN)); //true

12 find() 返回第一个满足条件的元素

[].find() 返回第一个满足条件的元素。

参数：一个处理函数
返回值：当满足条件时，则返回该元素；若没有符合条件的元素，则返回undefined
是否会改变原数组：否

const arr = [1, 2, 3, 4, 5, 6];
const result1 = arr.find((item) => item === 3);
const result2 = arr.find((item) => item === 33);
console.log(result1); // 3
console.log(result2); // undefined

13 findIndex() 返回第一个满足条件的元素的索引值

[].findIndex() 返回第一个满足条件的元素的索引值。

参数：一个处理函数
返回值：当满足条件时，则返回该元素的索引值；若没有符合条件的元素，则返回-1
是否会改变原数组：否

const arr = [1, 2, 3, 4, 5, 6];
const result1 = arr.findIndex((item) => item === 3);
const result2 = arr.findIndex((item) => item === 33);
console.log(result1); // 2
console.log(result2); // -1

14 reverse() 翻转数组

[].reverse() 翻转数组。用于颠倒数组中元素的顺序。

参数：无
返回值：翻转后的数组
是否会改变原数组：是

const arr = [1, 2, 3, 4, 5, 6];
const result = arr.reverse();
console.log(result); // [6, 5, 4, 3, 2, 1]
console.log(arr); // [6, 5, 4, 3, 2, 1]

15 concat() 拼接数组

[].concat() 拼接数组。将多个数组组合成一个数组。

参数：要拼接的数组元素
返回值：拼接后的新数组
是否会改变原数组：否

const arr = [1, 2, 3, 4, 5, 6];
const result = arr.concat(7, [8, 9], 0);
console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
console.log(arr); // [1, 2, 3, 4, 5, 6]

16 slice() 截取数组 或 截取字符串

[].slice(start, end) 截取数组 或 截取字符串。

参数：start 必填，表示从何处开始选取。如果该参数为负数，表示从原数组的倒数第几个元素开始提取。 end 非必填，表示从何处结束。如果没有指定该参数，即从start开始直到数组结束。如果该参数为负数，则表示在原数组中的倒数第几个元素结束。不包含结束的位置。
返回值：选取后的新数组
是否会改变原数组：否

const arr = [1, 2, 3, 4, 5, 6];
const result1 = arr.slice(1, 3);
const result2 = arr.slice(-3, -1);
console.log(result1); // [2, 3]
console.log(result2); // [4, 5]
console.log(arr); // [1, 2, 3, 4, 5, 6]

同理也可以截取字符串
const str = "abcdef";
const result = str.slice(1, 3);
console.log(result); // bc
console.log(str); // abcdef

17 splice() 可以实现删除、插入、替换

[].splice() 可以实现删除、插入、替换。

3个参数：起始位置(必填)、删除元素的个数(非必填，如果不指定该参数，会删除到数组末尾)、要插入的元素
返回值：删除的元素
是否会改变原数组：是

const arr = [1, 2, 3, 4, 5, 6];

删除
const result1 = arr.splice(0, 2); // 删除索引从0开始的两个元素
console.log(result1); // [1, 2]
console.log(arr); // [3, 4, 5, 6]

添加
const result2 = arr.splice(0, 0, 100, 200); // 在数组的最前端插入 100 和 200 这两个元素
console.log(result2); // []
console.log(arr); //  [100, 200, 1, 2, 3, 4, 5, 6]

替换
const result3 = arr.splice(0, 2, 123, 456, 789); // 删除索引从0开始的两个元素, 并在此位置上插入 123, 456, 789
console.log(result3); // [1, 2]
console.log(arr); // [123, 456, 789, 3, 4, 5, 6]

18 fill() 可用于将固定值批量替换数组中的元素

[].fill() 可用于将固定值批量替换数组中的元素

3个参数：填充的值(必填)、开始位置、结束位置
返回值：拼接后的新数组
是否会改变原数组：是

const arr = [1, 2, 3, 4, 5, 6];
const result = arr.fill(123, 1, 3);
console.log(result); // [1, 123, 123, 4, 5, 6]
console.log(arr); // [1, 123, 123, 4, 5, 6]

19 filter() 过滤数组

[].filter((item,index,arr)=>{}) 过滤数组。
参数：处理函数。item 为当前值、index 为当前值的索引、arr 为原数组
返回值：根据条件筛选出的新数组
是否会改变原数组：否

const arr = [1, 2, 3, 4, 5, 6];
const result = arr.filter((item) => item > 3); // 过滤大于3的元素
console.log(result); // [4, 5, 6]
console.log(arr); // [1, 2, 3, 4, 5, 6]

20 sort() 数组排序

前往学习 sort() 方法