js 操作数组的方法

简介: js 操作数组的方法

在 JavaScript 中,数组对象提供了多种方法来操作数组。以下是一些常用的数组操作方法,包括它们的详细代码示例:

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

let array = [1, 2, 3];
array.push(4); // 添加单个元素
console.log(array); // 输出: [1, 2, 3, 4]
 
array.push(5, 6); // 添加多个元素
console.log(array); // 输出: [1, 2, 3, 4, 5, 6]

2、pop() - 删除并返回数组的最后一个元素。

let array = [1, 2, 3, 4];
let lastElement = array.pop();
console.log(array); // 输出: [1, 2, 3]
console.log(lastElement); // 输出: 4

3、shift() - 删除并返回数组的第一个元素。

let array = [1, 2, 3, 4];
let firstElement = array.shift();
console.log(array); // 输出: [2, 3, 4]
console.log(firstElement); // 输出: 1

4、unshift() - 向数组的开头添加一个或多个元素,并返回新的长度。

let array = [1, 2, 3];
array.unshift(0); // 添加单个元素
console.log(array); // 输出: [0, 1, 2, 3]
 
array.unshift(-2, -1); // 添加多个元素
console.log(array); // 输出: [-2, -1, 0, 1, 2, 3]

5、concat() - 用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let concatenatedArray = array1.concat(array2);
console.log(concatenatedArray); // 输出: [1, 2, 3, 4, 5, 6]

6、slice() - 返回一个新的数组对象,这一对象是一个由开始到结束(不包括结束)选择的、由原数组的浅拷贝构成。原数组不会被改变。

let array = [1, 2, 3, 4, 5];
let slicedArray = array.slice(1, 3); // 从索引1开始到索引2(不包括)结束
console.log(slicedArray); // 输出: [2, 3]

7、splice() - 通过删除、替换现有元素或者添加新元素来修改数组,并以数组的形式返回被修改的内容。

let array = [1, 2, 3, 4, 5];
 
// 从索引2开始,删除2个元素,并添加新元素6和7
let removedElements = array.splice(2, 2, 6, 7);
console.log(array); // 输出: [1, 2, 6, 7, 5]
console.log(removedElements); // 输出: [3, 4]

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

let array = [1, 2, 3, 4];
let mappedArray = array.map(function(item) {
return item * 2;
});
console.log(mappedArray); // 输出: [2, 4, 6, 8]

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

let array = [1, 2, 3, 4, 5];
let filteredArray = array.filter(function(item) {
return item > 2;
});
console.log(filteredArray); // 输出: [3, 4, 5]

10、reduce() - 对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个输出值。

let array = [1, 2, 3, 4, 5];
let sum = array.reduce(function(accumulator,
相关文章
|
4天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
11 3
|
1天前
|
存储 JavaScript 前端开发
史上最详细JavaScript数组去重方法(11种)
使用set和Array.from ()方法 array.from可以将set结构转成数组
16 7
|
3天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
6 2
|
4天前
|
JavaScript
通过使用online表单的获取使用,了解vue.js数组的常用操作
通过使用online表单的获取使用,了解vue.js数组的常用操作
|
4天前
|
JavaScript 前端开发
在JavaScript中实现模块化开发有多种方法
【5月更文挑战第10天】JavaScript模块化开发可通过CommonJS、AMD和ES6模块实现。CommonJS适用于服务器端,使用`require`和`module.exports`处理模块;AMD(如RequireJS)用于浏览器端,依赖`require`和`define`;ES6模块提供原生支持,使用`import`和`export`。选择方式需考虑项目环境、复杂度和技术栈。
13 4
|
5天前
|
Web App开发 JavaScript 前端开发
javascript操作DIV总结 转
javascript操作DIV总结 转
|
5天前
|
JavaScript 前端开发
JS tostring()和join()方法
JS tostring()和join()方法
7 1
|
5天前
|
存储 JavaScript 前端开发
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
深入了解JavaScript中的indexOf()方法:实现数组元素的搜索和索引获取
7 0
|
6天前
|
JavaScript 前端开发 索引
js添加、删除、替换、插入元素的方法
js添加、删除、替换、插入元素的方法
11 0
|
7天前
|
JavaScript 前端开发
JavaScript 循环方法详解
JavaScript 循环方法详解
19 1