JavaScript 数组方法总结

JavaScript 数组方法总结

JavaScript 数组提供了丰富的方法来操作数组数据。这些方法可以分为两大类:改变原数组的方法不改变原数组的方法

改变原数组的方法

以下方法会直接修改原始数组:

  1. push() - 在数组末尾添加一个或多个元素,返回新数组长度

    js 复制代码
    const arr = [1, 2, 3];
    arr.push(4, 5); // 返回 5
    console.log(arr); // [1, 2, 3, 4, 5]
  2. pop() - 删除并返回数组的最后一个元素

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    const lastItem = arr.pop(); // 返回 5
    console.log(arr); // [1, 2, 3, 4]
  3. unshift() - 在数组开头添加一个或多个元素,返回新数组长度

    js 复制代码
    const arr = [1, 2, 3];
    arr.unshift(-1, 0); // 返回 5
    console.log(arr); // [-1, 0, 1, 2, 3]
  4. shift() - 删除并返回数组的第一个元素

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    const firstItem = arr.shift(); // 返回 1
    console.log(arr); // [2, 3, 4, 5]
  5. splice() - 添加、删除或替换数组中的元素

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    arr.splice(2, 1, "a", "b"); // 从索引2开始删除1个元素,并插入'a'和'b'
    console.log(arr); // [1, 2, 'a', 'b', 4, 5]
  6. reverse() - 反转数组中元素的顺序

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    arr.reverse();
    console.log(arr); // [5, 4, 3, 2, 1]
  7. sort() - 对数组元素进行排序

    js 复制代码
    const arr = [5, 2, 3, 1, 4];
    arr.sort();
    console.log(arr); // [1, 2, 3, 4, 5]
  8. fill() - 用固定值填充数组

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    arr.fill(0, 1, 4); // 用0填充索引1到3的位置
    console.log(arr); // [1, 0, 0, 0, 5]
  9. copyWithin() - 复制数组的一部分到同一数组中的另一个位置

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    arr.copyWithin(0, 3, 5); // 将索引3到4的元素复制到索引0开始的位置
    console.log(arr); // [4, 5, 3, 4, 5]

不改变原数组的方法

以下方法不会修改原始数组,而是返回一个新数组或其他值:

  1. concat() - 合并两个或多个数组,返回一个新数组

    js 复制代码
    const arr1 = [1, 2, 3];
    const arr2 = [4, 5];
    const newArr = arr1.concat(arr2);
    console.log(newArr); // [1, 2, 3, 4, 5]
    console.log(arr1); // [1, 2, 3] (未改变)
  2. slice() - 提取数组的一部分,返回一个新数组

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    const newArr = arr.slice(1, 4);
    console.log(newArr); // [2, 3, 4]
    console.log(arr); // [1, 2, 3, 4, 5] (未改变)
  3. map() - 对数组中的每个元素执行函数,返回新数组

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    const newArr = arr.map((x) => x * 2);
    console.log(newArr); // [2, 4, 6, 8, 10]
    console.log(arr); // [1, 2, 3, 4, 5] (未改变)
  4. filter() - 创建一个新数组,包含通过测试的所有元素

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    const newArr = arr.filter((x) => x > 3);
    console.log(newArr); // [4, 5]
    console.log(arr); // [1, 2, 3, 4, 5] (未改变)
  5. reduce() - 对数组中的每个元素执行函数(从左到右),将其减少为单个值

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    const sum = arr.reduce((acc, cur) => acc + cur, 0);
    console.log(sum); // 15
    console.log(arr); // [1, 2, 3, 4, 5] (未改变)
  6. reduceRight() - 类似于 reduce,但从右到左执行

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    const result = arr.reduceRight((acc, cur) => acc + cur, 0);
    console.log(result); // 15
    console.log(arr); // [1, 2, 3, 4, 5] (未改变)
  7. find() - 返回数组中满足测试函数的第一个元素的值

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    const found = arr.find((x) => x > 3);
    console.log(found); // 4
    console.log(arr); // [1, 2, 3, 4, 5] (未改变)
  8. findIndex() - 返回数组中满足测试函数的第一个元素的索引

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    const foundIndex = arr.findIndex((x) => x > 3);
    console.log(foundIndex); // 3
    console.log(arr); // [1, 2, 3, 4, 5] (未改变)
  9. includes() - 判断数组是否包含指定的元素

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    console.log(arr.includes(3)); // true
    console.log(arr); // [1, 2, 3, 4, 5] (未改变)
  10. join() - 将数组的所有元素连接成一个字符串

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    const str = arr.join("-");
    console.log(str); // "1-2-3-4-5"
    console.log(arr); // [1, 2, 3, 4, 5] (未改变)
  11. indexOf() - 返回数组中指定元素第一次出现的索引

    js 复制代码
    const arr = [1, 2, 3, 4, 5, 3];
    console.log(arr.indexOf(3)); // 2
    console.log(arr); // [1, 2, 3, 4, 5, 3] (未改变)
  12. lastIndexOf() - 返回数组中指定元素最后一次出现的索引

    js 复制代码
    const arr = [1, 2, 3, 4, 5, 3];
    console.log(arr.lastIndexOf(3)); // 5
    console.log(arr); // [1, 2, 3, 4, 5, 3] (未改变)
  13. every() - 测试数组中的所有元素是否都通过了指定函数的测试

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    const allPositive = arr.every((x) => x > 0);
    console.log(allPositive); // true
    console.log(arr); // [1, 2, 3, 4, 5] (未改变)
  14. some() - 测试数组中是否至少有一个元素通过了指定函数的测试

    js 复制代码
    const arr = [1, 2, 3, 4, 5];
    const hasEven = arr.some((x) => x % 2 === 0);
    console.log(hasEven); // true
    console.log(arr); // [1, 2, 3, 4, 5] (未改变)
  15. flat() - 将嵌套数组展平

    js 复制代码
    const arr = [1, [2, [3, 4]]];
    const flatArr = arr.flat(2);
    console.log(flatArr); // [1, 2, 3, 4]
    console.log(arr); // [1, [2, [3, 4]]] (未改变)
  16. flatMap() - 先映射每个元素,然后将结果展平,相当于先 map 再 flat(1)

    js 复制代码
    const arr = [1, 2, 3];
    const result = arr.flatMap((x) => [x, x * 2]);
    console.log(result); // [1, 2, 2, 4, 3, 6]
    console.log(arr); // [1, 2, 3] (未改变)

方法对比表格

下面的表格提供了 JavaScript 数组方法的快速参考:

方法名 改变原数组 返回值 描述
push() 新数组长度 在数组末尾添加一个或多个元素
pop() 被删除的元素 删除数组的最后一个元素
unshift() 新数组长度 在数组开头添加一个或多个元素
shift() 被删除的元素 删除数组的第一个元素
splice() 包含被删除元素的数组 添加、删除或替换数组中的元素
reverse() 颠倒后的数组 反转数组中元素的顺序
sort() 排序后的数组 对数组元素进行排序
fill() 填充后的数组 用固定值填充数组
copyWithin() 修改后的数组 复制数组的一部分到同一数组中的另一个位置
concat() 新数组 合并两个或多个数组
slice() 新数组 提取数组的一部分
map() 新数组 对数组中的每个元素执行函数
filter() 新数组 创建一个包含通过测试的所有元素的新数组
reduce() 单个值 将数组减少为单个值(从左到右)
reduceRight() 单个值 将数组减少为单个值(从右到左)
find() 元素值或 undefined 返回满足测试函数的第一个元素的值
findIndex() 索引或-1 返回满足测试函数的第一个元素的索引
includes() 布尔值 判断数组是否包含指定的元素
join() 字符串 将数组的所有元素连接成一个字符串
indexOf() 索引或-1 返回指定元素第一次出现的索引
lastIndexOf() 索引或-1 返回指定元素最后一次出现的索引
every() 布尔值 测试数组中的所有元素是否都通过了指定函数的测试
some() 布尔值 测试数组中是否至少有一个元素通过了指定函数的测试
flat() 新数组 将嵌套数组展平
flatMap() 新数组 先映射每个元素,然后将结果展平

总结

改变原数组的方法

  • push()
  • pop()
  • unshift()
  • shift()
  • splice()
  • reverse()
  • sort()
  • fill()
  • copyWithin()

不改变原数组的方法

  • concat()
  • slice()
  • map()
  • filter()
  • reduce()
  • reduceRight()
  • find()
  • findIndex()
  • includes()
  • join()
  • indexOf()
  • lastIndexOf()
  • every()
  • some()
  • flat()
  • flatMap()

在使用数组方法时,了解它们是否会修改原数组非常重要,特别是在处理不可变数据或需要保留原始数据时。

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python
袁煦丞8 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作