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]

总结

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

相关推荐
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
老码沉思录1 小时前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
爱吃生蚝的于勒1 小时前
C语言内存函数
c语言·开发语言·数据结构·c++·学习·算法
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
小白学大数据3 小时前
Python爬虫开发中的分析与方案制定
开发语言·c++·爬虫·python
冰芒猓4 小时前
SpringMVC数据校验、数据格式化处理、国际化设置
开发语言·maven
失落的香蕉4 小时前
C语言串讲-2之指针和结构体
java·c语言·开发语言
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css