js数组的常用操作1

在 中,数组是一种常见的数据结构,用于存储多个值。数组的操作非常丰富,以下是一些常见的数组操作及其具体解释和示例代码。

1. 创建数组

使用数组字面量

js 复制代码
let arr = [1, 2, 3, 4];

使用 Array 构造函数

js 复制代码
let arr = new Array(1, 2, 3, 4);

2. 访问数组元素

使用索引

js 复制代码
let arr = [1, 2, 3, 4];
console.log(arr[0]); // 输出 1
console.log(arr[3]); // 输出 4

3. 遍历数组

使用 for 循环

js 复制代码
let arr = [1, 2, 3, 4];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

使用 for...of 循环

js 复制代码
let arr = [1, 2, 3, 4];
for (let value of arr) {
    console.log(value);
}

使用 forEach 方法

js 复制代码
let arr = [1, 2, 3, 4];
arr.forEach((value, index) => {
    console.log(`Index: ${index}, Value: ${value}`);
});

4. 添加和删除元素

push

向数组末尾添加一个或多个元素。

js 复制代码
let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // 输出 [1, 2, 3, 4]

pop

从数组末尾移除一个元素。

js 复制代码
let arr = [1, 2, 3, 4];
arr.pop();
console.log(arr); // 输出 [1, 2, 3]

unshift

向数组开头添加一个或多个元素。

js 复制代码
let arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // 输出 [0, 1, 2, 3]

shift

从数组开头移除一个元素。

js 复制代码
let arr = [1, 2, 3, 4];
arr.shift();
console.log(arr); // 输出 [2, 3, 4]

5. 数组方法

concat

连接两个或多个数组。

js 复制代码
let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2);
console.log(newArr); // 输出 [1, 2, 3, 4]

slice

返回一个新数组,包含从开始到结束(不包括结束)选择的数组的一部分。

js 复制代码
let arr = [1, 2, 3, 4];
let newArr = arr.slice(1, 3);
console.log(newArr); // 输出 [2, 3]

splice

通过删除或替换现有元素或添加新元素来修改数组内容。

js 复制代码
let arr = [1, 2, 3, 4];
arr.splice(1, 2, 5, 6); // 从索引1开始删除2个元素,然后插入5和6
console.log(arr); // 输出 [1, 5, 6, 4]

indexOf

返回数组中首次出现的指定元素的索引,如果不存在则返回 -1。

js 复制代码
let arr = [1, 2, 3, 4];
console.log(arr.indexOf(3)); // 输出 2
console.log(arr.indexOf(5)); // 输出 -1

includes

判断数组是否包含指定的元素,返回布尔值。

js 复制代码
let arr = [1, 2, 3, 4];
console.log(arr.includes(3)); // 输出 true
console.log(arr.includes(5)); // 输出 false

find

返回数组中满足提供的测试函数的第一个元素的值。

js 复制代码
let arr = [1, 2, 3, 4];
let found = arr.find(element => element > 2);
console.log(found); // 输出 3

findIndex

返回数组中满足提供的测试函数的第一个元素的索引,如果没有找到则返回 -1。

js 复制代码
let arr = [1, 2, 3, 4];
let index = arr.findIndex(element => element > 2);
console.log(index); // 输出 2

filter

创建一个新数组,其包含通过所提供函数实现的测试的所有元素。

js 复制代码
let arr = [1, 2, 3, 4];
let filteredArr = arr.filter(element => element > 2);
console.log(filteredArr); // 输出 [3, 4]

map

创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

js 复制代码
let arr = [1, 2, 3, 4];
let newArr = arr.map(element => element * 2);
console.log(newArr); // 输出 [2, 4, 6, 8]

reduce

对数组中的每个元素执行一个提供的函数,将其结果汇总为单个值。

js 复制代码
let arr = [1, 2, 3, 4];
let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出 10

some

测试数组中的某些元素是否通过由提供的函数实现的测试。

js 复制代码
let arr = [1, 2, 3, 4];
let hasElementGreaterThan2 = arr.some(element => element > 2);
console.log(hasElementGreaterThan2); // 输出 true

every

测试数组中的所有元素是否通过由提供的函数实现的测试。

js 复制代码
let arr = [1, 2, 3, 4];
let allElementsGreaterThan2 = arr.every(element => element > 2);
console.log(allElementsGreaterThan2); // 输出 false

sort

对数组中的元素进行排序并返回此数组。

js 复制代码
let arr = [3, 1, 4, 2];
arr.sort((a, b) => a - b);
console.log(arr); // 输出 [1, 2, 3, 4]

reverse

反转数组中的元素顺序。

js 复制代码
let arr = [1, 2, 3, 4];
arr.reverse();
console.log(arr); // 输出 [4, 3, 2, 1]

join

将数组的所有元素连接成一个字符串。

js 复制代码
let arr = [1, 2, 3, 4];
let str = arr.join('-');
console.log(str); // 输出 "1-2-3-4"

flat

按照指定的深度递归地将数组展平。

js 复制代码
let arr = [1, [2, [3, [4]]]];
let flatArr = arr.flat(2);
console.log(flatArr); // 输出 [1, 2, 3, [4]]

flatMap

首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。

js 复制代码
let arr = [1, 2, 3];
let newArr = arr.flatMap(x => [x * 2]);
console.log(newArr); // 输出 [2, 4, 6]

总结

以上是 中数组的常见操作及其解释和示例。这些操作涵盖了数组的创建、访问、遍历、修改以及高级操作方法,掌握这些操作可以大大提高你对数组的操作能力和代码的可读性。

相关推荐
§ꦿCFོ༉7 小时前
嵌入式八股文—C语言入门学习(四)
c语言·开发语言·学习
投图匠7 小时前
十种不同风格的 CTP接口 框架
开发语言·python
treasure1409 小时前
【复古】浅尝Django前后端不分离
前端·css·python·django·bootstrap·html·web
jay神10 小时前
基于 YOLOv8 的手势识别系统(Web 版)
前端·人工智能·python·深度学习·yolo·计算机视觉·计算机毕业设计
屏什么录10 小时前
长时间录屏中途崩溃:MP4 打不开的 6 种救回方案与参数设置
前端·音视频开发
爱笑的k1110 小时前
nano-vllm 源码剖析:千行 Python 手写离线推理引擎的调度、显存与并行时序
开发语言·python·vllm
code_Bo10 小时前
不只命令行:我把跨 Agent 会话同步做成了桌面应用
前端·javascript·后端
kyriewen11 小时前
AI 能把页面写出来,为什么改个需求就开始崩?
前端·javascript·人工智能
OpsEye11 小时前
同一套用例跑两个大模型接口,差异到底出在哪
javascript·ai编程
X1A0RAN11 小时前
PPT 图片批量处理教程:导出全部幻灯片 · 提取全部素材
开发语言·javascript·powerpoint