js 数组有哪些方法

JavaScript 数组提供了许多内置方法来操作和处理数组。以下是一些常用的数组方法:

创建和操作数组的方法

  1. Array.from():从类数组对象或可迭代对象创建一个新的数组实例。

    javascript 复制代码
    let arr = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
  2. Array.isArray():判断一个值是否为数组。

    javascript 复制代码
    Array.isArray([1, 2, 3]); // true
  3. Array.of():创建一个具有可变数量参数的新数组实例。

    javascript 复制代码
    let arr = Array.of(1, 2, 3); // [1, 2, 3]

修改数组的方法

  1. push():向数组末尾添加一个或多个元素,并返回新的长度。

    javascript 复制代码
    let arr = [1, 2, 3];
    arr.push(4); // [1, 2, 3, 4]
  2. pop():移除数组末尾的一个元素,并返回该元素。

    javascript 复制代码
    let arr = [1, 2, 3];
    arr.pop(); // 3, arr 变为 [1, 2]
  3. shift():移除数组开头的一个元素,并返回该元素。

    javascript 复制代码
    let arr = [1, 2, 3];
    arr.shift(); // 1, arr 变为 [2, 3]
  4. unshift():向数组开头添加一个或多个元素,并返回新的长度。

    javascript 复制代码
    let arr = [1, 2, 3];
    arr.unshift(0); // [0, 1, 2, 3]
  5. splice():通过删除或替换现有元素或添加新元素来修改数组。

    javascript 复制代码
    let arr = [1, 2, 3, 4];
    arr.splice(1, 2, 'a', 'b'); // [1, 'a', 'b', 4]
  6. concat():合并两个或多个数组,不改变现有数组,返回一个新数组。

    javascript 复制代码
    let arr1 = [1, 2];
    let arr2 = [3, 4];
    let arr3 = arr1.concat(arr2); // [1, 2, 3, 4]
  7. slice():返回一个从开始到结束(不包括结束)选择的数组的一部分,原数组不变。

    javascript 复制代码
    let arr = [1, 2, 3, 4];
    let newArr = arr.slice(1, 3); // [2, 3]

查找和遍历数组的方法

  1. forEach():对数组的每个元素执行一次提供的函数。

    javascript 复制代码
    let arr = [1, 2, 3];
    arr.forEach(num => console.log(num)); // 1, 2, 3
  2. map():创建一个新数组,其结果是该数组中的每个元素调用一个提供的函数后返回的结果。

    javascript 复制代码
    let arr = [1, 2, 3];
    let newArr = arr.map(num => num * 2); // [2, 4, 6]
  3. filter():创建一个新数组,其包含通过所提供函数实现的测试的所有元素。

    javascript 复制代码
    let arr = [1, 2, 3, 4];
    let newArr = arr.filter(num => num > 2); // [3, 4]
  4. reduce():对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行),将其结果汇总为单个返回值。

    javascript 复制代码
    let arr = [1, 2, 3, 4];
    let sum = arr.reduce((acc, num) => acc + num, 0); // 10
  5. find() :返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

    javascript 复制代码
    let arr = [1, 2, 3, 4];
    let found = arr.find(num => num > 2); // 3
  6. findIndex() :返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1

    javascript 复制代码
    let arr = [1, 2, 3, 4];
    let index = arr.findIndex(num => num > 2); // 2
  7. some():测试数组中的某些元素是否通过了由提供的函数实现的测试。

    javascript 复制代码
    let arr = [1, 2, 3, 4];
    let hasLargeNumber = arr.some(num => num > 3); // true
  8. every():测试数组中的所有元素是否都通过了由提供的函数实现的测试。

    javascript 复制代码
    let arr = [1, 2, 3, 4];
    let allPositive = arr.every(num => num > 0); // true
  9. includes() :判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false

    javascript 复制代码
    let arr = [1, 2, 3, 4];
    arr.includes(2); // true
  10. indexOf() :返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回 -1

    javascript 复制代码
    let arr = [1, 2, 3, 4];
    arr.indexOf(3); // 2
  11. lastIndexOf() :返回在数组中可以找到一个给定元素的最后一个索引,如果不存在,则返回 -1

    javascript 复制代码
    let arr = [1, 2, 3, 4, 3];
    arr.lastIndexOf(3); // 4

其他有用的方法

  1. join():将数组的所有元素连接成一个字符串。

    javascript 复制代码
    let arr = [1, 2, 3];
    let str = arr.join('-'); // "1-2-3"
  2. reverse():反转数组中的元素顺序。

    javascript 复制代码
    let arr = [1, 2, 3];
    arr.reverse(); // [3, 2, 1]
  3. sort():对数组的元素进行排序并返回数组。

    javascript 复制代码
    let arr = [3, 1, 4, 2];
    arr.sort(); // [1, 2, 3, 4]
  4. fill():用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。

    javascript 复制代码
    let arr = [1, 2, 3, 4];
    arr.fill(0, 1, 3); // [1, 0, 0, 4]
  5. copyWithin():浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。

    javascript 复制代码
    let arr = [1, 2, 3, 4, 5];
    arr.copyWithin(0, 3); // [4, 5, 3, 4, 5]
  6. flat():按照一个可指定的深度递归地将数组展平,并返回一个新数组。

    javascript 复制代码
    let arr = [1, [2, [3, [4]]]];
    arr.flat(2); // [1, 2, 3, [4]]
  7. flatMap():首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。

    javascript 复制代码
    let arr = [1, 2, 3];
    arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

这些方法提供了丰富的功能来操作和处理数组,使得 JavaScript 中的数组操作变得非常方便和高效。

相关推荐
泯泷1 天前
那段文字是谁删的?Yjs 14 正式版之前,一套删除归属方案的实现与边界
前端·javascript·算法
hold?fish:palm1 天前
34 合并K个升序链表
javascript·算法·链表
C++ 老炮儿的技术栈1 天前
我们在设计tcp协议时,要传一个字符串过去,报文:头十长度十内容,是否要把‘\0‘也填入,长度是否包含‘\0‘
开发语言·数据结构·c++·mfc·c
传奇开心果编程1 天前
【Rust入门练中学】第2课:变量、可变性与常量
开发语言·学习·rust
zr想努力1 天前
从0开始配置Perforce4环境
开发语言
幸运小圣1 天前
PointerEvent 常用属性与事件整理【JavaScript】
开发语言·javascript·ecmascript
长谷深风1111 天前
评测AI Agent:三种裁判各司其职
java·大数据·开发语言·人工智能·ai agent
边境悍匪1 天前
蜗牛学苑 Java 智能体学习 Day42|项目周开发技术汇总 1 思维导图复盘
java·开发语言·spring boot·学习·spring
君顾11 天前
本地托管机构管理源码实战:需求拆解、数据建模与多端部署
java·开发语言·托管
志尊宝1 天前
Vue3 零基础每日笔记(038):亲手封装 useDebounceFn 与 useThrottleFn——高频事件的流量阀
前端·javascript·vue·html·vue3