网站

JavaScript 数组方法 - W3School

Array - JavaScript | MDN

引入

学了 JS Array 对象 之后,知道怎么创建和遍历数组。

但实际开发中,对数组最常见的操作是增删改查:往数组里加元素、删元素、查找、排序、转换格式。这些都靠数组方法来完成。

正文

定义

定义

数组方法是 Array 对象自带的一系列方法,用来对数组进行增删改查、查找、排序、转换等操作。

添加和删除元素

push()pop()

push() 在数组末尾添加元素,pop() 删除末尾元素。

let list = [1, 2, 3];
 
list.push(4);
console.log(list);
 
let last = list.pop();
console.log(last);
console.log(list);

push() 返回新数组长度,pop() 返回被删除的元素。

unshift()shift()

unshift() 在数组开头添加元素,shift() 删除开头元素。

let list = [1, 2, 3];
 
list.unshift(0);
console.log(list);
 
let first = list.shift();
console.log(first);
console.log(list);

splice()

splice() 可以在任意位置添加、删除或替换元素。

删除元素:

let list = [1, 2, 3, 4, 5];
 
list.splice(1, 2);
console.log(list);

splice(1, 2) 表示从索引 1 开始删除 2 个元素。

替换元素:

let list = [1, 2, 3, 4, 5];
 
list.splice(1, 2, 20, 30);
console.log(list);

插入元素(删除 0 个):

let list = [1, 2, 3];
 
list.splice(1, 0, 10);
console.log(list);

splice()修改原数组,返回被删除的元素组成的数组。

查找元素

indexOf()

返回元素第一次出现的索引,找不到返回 -1

let list = [1, 2, 3, 2, 1];
 
console.log(list.indexOf(2));
console.log(list.indexOf(5));

includes()

判断数组是否包含某个元素,返回布尔值。

let list = [1, 2, 3];
 
console.log(list.includes(2));
console.log(list.includes(5));

indexOf 更直观,适合只判断存在不存在的场景。

find()

返回数组中第一个满足条件的元素。

let list = [1, 2, 3, 4, 5];
 
let result = list.find(n => n > 3);
 
console.log(result);

找不到时返回 undefined

findIndex()

返回第一个满足条件的元素的索引

let list = [1, 2, 3, 4, 5];
 
let index = list.findIndex(n => n > 3);
 
console.log(index);

找不到时返回 -1

转换数组

map()

对每个元素执行操作,返回一个新数组

let list = [1, 2, 3, 4, 5];
 
let doubled = list.map(n => n * 2);
 
console.log(doubled);
console.log(list);

map() 不会修改原数组。

filter()

筛选出满足条件的元素,返回一个新数组

let list = [1, 2, 3, 4, 5];
 
let even = list.filter(n => n % 2 === 0);
 
console.log(even);

reduce()

把数组所有元素累加(或合并)成一个值。

let list = [1, 2, 3, 4, 5];
 
let sum = list.reduce((total, n) => total + n, 0);
 
console.log(sum);

0 是初始值,total 是累计值,n 是当前元素。

reduce() 不只能求和,还可以用来统计、分组等。

排序

sort()

对数组排序,会修改原数组

let list = [3, 1, 4, 1, 5];
 
list.sort();
 
console.log(list);

注意:sort() 默认按字符串顺序排,数字排序需要传比较函数。

let list = [10, 2, 30, 4];
 
list.sort((a, b) => a - b);
 
console.log(list);

a - b 是升序,b - a 是降序。

reverse()

反转数组顺序,会修改原数组

let list = [1, 2, 3];
 
list.reverse();
 
console.log(list);

转换为字符串

join()

把数组元素连接成字符串,可以指定分隔符。

let list = ["苹果", "香蕉", "橘子"];
 
console.log(list.join(", "));
console.log(list.join("-"));
console.log(list.join(""));

toString()

把数组转为字符串,默认用逗号分隔。

let list = [1, 2, 3];
 
console.log(list.toString());

合并数组

concat()

合并两个或多个数组,返回新数组,不修改原数组。

let list1 = [1, 2];
let list2 = [3, 4];
 
let merged = list1.concat(list2);
 
console.log(merged);

展开语法

也可以合并数组,写法更简洁。

let list1 = [1, 2];
let list2 = [3, 4];
 
let merged = [...list1, ...list2];
 
console.log(merged);

方法总结

方法作用是否修改原数组
push()末尾添加元素
pop()删除末尾元素
unshift()开头添加元素
shift()删除开头元素
splice()任意位置增删改
sort()排序
reverse()反转
indexOf()查找索引
includes()判断是否包含
find()查找元素
findIndex()查找元素索引
map()映射为新数组
filter()筛选为新数组
reduce()累加为一个值
join()转为字符串
toString()转为字符串
concat()合并数组

特点

  • 会修改原数组的方法:pushpopshiftunshiftsplicesortreverse
  • 不修改原数组的方法:mapfilterreduceindexOfincludesfindconcat
  • sort() 默认按字符串排序,数字排序要传比较函数
  • find()filter() 的区别:find 返回第一个匹配元素,filter 返回所有匹配元素

理解

数组方法可以按功能分成几组来记:

  • 增删push/pop(尾巴)、shift/unshift(头)、splice(中间)
  • 查找indexOf(找索引)、includes(找有没有)、find(按条件找)
  • 转换map(一对一变)、filter(筛出来)、reduce(合成一个值)
  • 排序sort(排序)、reverse(反转)

先掌握最常用的几个,其他的用到再查就行。不需要一次全记住。

引出

数组方法经常和 JS 函数 配合使用,特别是回调函数和箭头函数。

如果想了解数组的创建和遍历基础,可以回顾 JS Array 对象