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 小时前
微信小程序 getSystemInfo 提示已废弃、屏幕高度算错胶囊还对不齐?getWindowInfo 和 getDeviceInfo 怎么接才稳
javascript·微信小程序·小程序·小程序开发·devdiy
Felven2 小时前
C. Brr Brrr Patapim
c语言·开发语言
FungLeo2 小时前
成为全栈·Vue 管理后台篇·用 fetch 建一层可控的请求内核
前端·javascript·vue.js·http·fetch·formdata·接口封装
用户84298142418102 小时前
ByteJS,让重要的 JavaScript 以字节码运行。
javascript
路溪非溪3 小时前
python标准库使用总结
开发语言·python
FungLeo4 小时前
成为全栈·Vue 管理后台篇·Vue Router如何守住多角色后台边界
前端·javascript·vue.js·rbac·vue router·路由守卫·前端权限
FungLeo4 小时前
成为全栈·Vue管理后台篇·仪表盘不是几张卡片:组合统计接口与角色视图
前端·javascript·vue.js·rbac·仪表盘·管理后台·tanstack query
程序员大阳4 小时前
HTML+CSS+JS对话式实战(7)-学生端活动报名功能开发
javascript·css·html·活动报名
SomeOtherTime5 小时前
Rust 面向对象介绍(AI回答)
开发语言·python·rust
zh_xuan5 小时前
kotlin常见面试题
开发语言·kotlin·面试题