javascript数组的常用方法汇总

🕗 发布于 2024-09-22 15:20 javascript 开发语言 ecmascript

在 JavaScript 中，数组是一个非常常用的数据结构，JavaScript 提供了许多方法来操作和处理数组。以下是 JavaScript 中数组的常用方法，分为不同类型进行介绍：

1. 添加/删除元素

push()：向数组末尾添加一个或多个元素，返回数组的新长度。
```
let arr = [1, 2, 3];
arr.push(4); // arr = [1, 2, 3, 4]
```

pop()：移除并返回数组最后一个元素。

let arr = [1, 2, 3];
let last = arr.pop(); // arr = [1, 2], last = 3

unshift()：向数组开头添加一个或多个元素，返回数组的新长度。
```
let arr = [2, 3];
arr.unshift(1); // arr = [1, 2, 3]
```

shift()：移除并返回数组第一个元素。

let arr = [1, 2, 3];
let first = arr.shift(); // arr = [2, 3], first = 1

splice(start, deleteCount, item1, item2, ...)：从数组中删除、添加或替换元素。返回被删除的元素数组。

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2); // 删除从索引 1 开始的 2 个元素，arr = [1, 4, 5]
arr.splice(2, 0, 6, 7); // 在索引 2 处插入 6 和 7，arr = [1, 4, 6, 7, 5]

slice(start, end)：返回从 start 到 end（不包括 end）的浅拷贝新数组，不修改原数组。
```
let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 3); // newArr = [2, 3]
```

2. 查找元素

indexOf(item)：返回元素在数组中的第一个索引，找不到则返回 -1。
```
let arr = [1, 2, 3, 4];
arr.indexOf(3); // 2
```
lastIndexOf(item)：返回元素在数组中的最后一个索引，找不到则返回 -1。
```
let arr = [1, 2, 3, 2];
arr.lastIndexOf(2); // 3
```
includes(item)：判断数组是否包含某个元素，返回布尔值。
```
let arr = [1, 2, 3];
arr.includes(2); // true
```
find(callback)：返回满足条件的第一个元素，找不到则返回 undefined。
```
let arr = [1, 2, 3, 4];
let found = arr.find(num => num > 2); // 3
```

findIndex(callback)：返回满足条件的第一个元素的索引，找不到则返回 -1。

let arr = [1, 2, 3, 4];
let foundIndex = arr.findIndex(num => num > 2); // 2

3. 迭代和遍历

forEach(callback)：对数组中的每个元素执行一次提供的函数（不会返回新数组）。
```
let arr = [1, 2, 3];
arr.forEach(num => console.log(num)); // 输出：1 2 3
```

map(callback)：对数组中的每个元素执行提供的函数，返回新的数组。

let arr = [1, 2, 3];
let newArr = arr.map(num => num * 2); // newArr = [2, 4, 6]

filter(callback)：返回满足条件的元素组成的新数组。

let arr = [1, 2, 3, 4];
let filteredArr = arr.filter(num => num > 2); // filteredArr = [3, 4]

some(callback)：如果数组中至少有一个元素满足条件，则返回 true，否则返回 false。
```
let arr = [1, 2, 3];
arr.some(num => num > 2); // true
```
every(callback)：如果数组中每个元素都满足条件，则返回 true，否则返回 false。
```
let arr = [1, 2, 3];
arr.every(num => num > 0); // true
```
reduce(callback, initialValue)：将数组元素组合为一个值，callback 接收四个参数：累计值、当前值、当前索引和原数组。initialValue 是可选的初始累计值。
```
let arr = [1, 2, 3, 4];
let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // sum = 10
```

reduceRight(callback, initialValue)：从数组的末尾开始执行 reduce 操作。

let arr = [1, 2, 3, 4];
let sum = arr.reduceRight((accumulator, currentValue) => accumulator + currentValue, 0); // sum = 10

4. 数组排序和变换

sort(compareFunction)：对数组进行排序，会修改原数组。compareFunction 可选，用于自定义排序规则。

字符串数组排序

let fruits = ['banana', 'apple', 'mango'];
fruits.sort();
console.log(fruits); // 输出 ['apple', 'banana', 'mango']

数字数组排序
对于数字数组，默认排序可能会给出错误的结果，因为默认是将所有值转换成字符串再排序

let numbers = [8, 2, 3, 5, 1, 10];
numbers.sort(); // 默认转换为字符串排序，结果可能不是期望的 [1, 2, 3, 5, 8, 10]
console.log(numbers); // 输出[ 1, 10, 2, 3, 5, 8 ]

为了正确地对数字进行排序，应该提供一个比较函数

let numbers = [8, 2, 3, 5, 1, 10];
numbers.sort((a, b) => a - b); 
console.log(numbers); // 输出[1, 2, 3, 5, 8, 10]

如果想要倒序

let numbers = [8, 2, 3, 5, 1, 10];
numbers.sort((a, b) => b - a); 
console.log(numbers); // 输出[10, 8, 5, 3, 2, 1]

对象数组排序
如果你有一个对象数组，并且想要根据某个属性来排序这些对象，可以这样做：

let people = [
  { name: 'John', age: 23 },
  { name: 'Jane', age: 29 },
  { name: 'Jack', age: 27 }
];

// 按年龄排序
people.sort((a, b) => a.age - b.age);
console.log(people);
// 输出：
// [
//   { name: 'John', age: 23 },
//   { name: 'Jack', age: 27 },
//   { name: 'Jane', age: 29 }
// ]

reverse()：反转数组顺序，会修改原数组。

let arr = [1, 2, 3];
arr.reverse(); // arr = [3, 2, 1]

join(separator)：将数组元素连接成字符串，separator 是可选的分隔符。
```
let arr = [1, 2, 3];
let str = arr.join('-'); // str = "1-2-3"
```

concat()：合并两个或多个数组，返回新数组，不修改原数组。

let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2); // newArr = [1, 2, 3, 4]

flat(depth)：将多维数组“拉平”到指定的深度，默认深度为 1。

let arr = [1, [2, [3, [4]]]];
let flatArr = arr.flat(2); // flatArr = [1, 2, 3, [4]]

flatMap(callback)：对每个元素调用映射函数，然后将结果“拉平”一层。

let arr = [1, 2, 3];
let flatMapped = arr.flatMap(num => [num, num * 2]); // flatMapped = [1, 2, 2, 4, 3, 6]

5. 其他常用方法

Array.isArray()：检查一个值是否为数组。
```
Array.isArray([1, 2, 3]); // true
```
fill(value, start, end)：用指定值填充数组，start 和 end 是可选的起始和结束位置（不包括结束位置）。
```
let arr = [1, 2, 3, 4];
arr.fill(0, 1, 3); 
console.log(arr) // 会改变原数组输出：[1, 0, 0, 4]
```

from()：从类数组或可迭代对象创建一个新数组。

let arr = Array.from('hello'); 
console.log(arr) // 输出：['h', 'e', 'l', 'l', 'o']

of()：根据给定的参数创建一个新数组。

 let arr = Array.of(1, 2, 3); 
 console.log(arr) // [ 1, 2, 3 ]

原文地址：https://blog.csdn.net/misstianyun/article/details/142400363

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：力扣中等 2300.咒语和药水的成功对数
下一篇：JavaScript ---案例（统计字符出现次数）

PCL 三维重建 RBF移动立方体三维重建算法
RBF（径向基函数）Marching Cubes算法是一种基于RBF插值的方法，用于从点云数据中提取三维表面。这种算法结合了传统的Marching Cubes算法和径向基函数的优势，能够处理复杂的点云
阅读更多2024-11-19
Argo workflow 拉取git 并使用pvc共享文件
第一个任务（拉取 Git 仓库）：这个任务将使用 git 命令克隆指定的 Git 仓库。第二个任务（读取 Git 文件）：这个任务会读取第一个任务拉取的 Git 仓库中的文件。我们将使用 Argo W
阅读更多2024-11-19
java计算机毕业设计选题参考3000篇
【294】springboot+jpa+layui学生住宿管理系统mysql学生寝室分配系统含文档。基于微信小程序的社区车位租赁系统的设计与实现+springboot后台weixin200。【483】
阅读更多2024-11-19
《Python网络安全项目实战》项目6 编写密码工具程序_练习题(2)答案
《Python网络安全项目实战》项目6 编写密码工具程序_练习题(2)答案
阅读更多2024-11-19
三种方式js的引入
1.js的组成部分：BOM(browser object model)浏览器对象模型、DOM(document object model)文档对象模型、ECMAScript。2.js的引入方式:行内式
阅读更多2024-11-19
使用MQTTX连接新版ONENet
使用mqtt连接新版的onenet 教程包含产品创建设备创建，关键参数获取，token软件获取，token生成，mqttx软件的下载与使用数据流的上传等手把手操作帮助你上云
阅读更多2024-11-19
深度学习之其他常见的生成式模型
自回归模型通过对图像数据的概率分布pdataxpdatax进行显式建模，并利用极大似然估计优化模型。pdatax∏i1npxi∣x1x2xi−1pdataxi1∏npxi∣x1x2..
阅读更多2024-11-19
MySQL表的新增与查询
这里的值要和列的个数和类型相匹配使用'或者"来表示字符串。
阅读更多2024-11-19
Vue-组件三大组成&组件通信
style的默认样式是作用到哪里的？scoped的作用是什么？style中推不推荐加scoped？data写成函数的目的是什么？组件通信，就是指组件与组件之间的数据传递组件的数据是独立的，无法直接访问
阅读更多2024-11-19
Python爬虫学习路线精简大纲！！！
Python爬虫学习路线精简大纲！！！
阅读更多2024-11-19