常用JavaScript 数组 API大全

简介: 常用JavaScript 数组 API大全

以下是一些常用的 JavaScript 数组 API 的代码示例:

1、push()

push(): 在数组末尾添加一个或多个元素,返回新的数组长度

const arr = [1, 2, 3];
const newLength = arr.push(4, 5);
console.log(arr); // [1, 2, 3, 4, 5]
console.log(newLength); // 5
const fruits = ['苹果', '香蕉'];
const res = fruits.push('橘子', '西瓜');
console.log(fruits);  //[ '苹果', '香蕉', '橘子', '西瓜' ]
console.log(res);     //4

2、pop()

pop(): 删除数组末尾的元素,返回被删除的元素

const arr = [1, 2, 3];
const lastElement = arr.pop();
console.log(arr); // [1, 2]
console.log(lastElement); // 3
const fruits = ['苹果', '香蕉', '橘子'];
const lastFruit = fruits.pop();
console.log(fruits);     // ['苹果', '香蕉']
console.log(lastFruit); //橘子

3、unshift()

unshift(): 在数组开头添加一个或多个元素,返回新的数组长度

const arr = [1, 2, 3];
const newLength = arr.unshift(0, -1);
console.log(arr); // [-1, 0, 1, 2, 3]
console.log(newLength); // 5
const fruits = ['苹果', '香蕉'];
const newLength = fruits.unshift('橘子', '西瓜');
console.log(fruits);        //[ '橘子', '西瓜', '苹果', '香蕉' ]
console.log(newLength); //4

4、shift()

shift(): 删除数组开头的元素,返回被删除的元素

const arr = [1, 2, 3];
const firstElement = arr.shift();
console.log(arr); // [2, 3]
console.log(firstElement); // 1
const fruits = ['苹果', '香蕉', '橘子'];
const firstFruit = fruits.shift();
console.log(fruits);      //[ '香蕉', '橘子' ]
console.log(firstFruit);  //苹果

5、slice()

slice(): 返回一个新的数组,包含从开始到结束(不包括结束)的所有元素

const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(1, 4);
console.log(newArr); // [2, 3, 4]

6、splice()

splice(): 在数组中添加或删除元素,返回被删除的元素

splice() 方法用于从数组中删除、替换或添加元素,并返回被删除的元素组成的数组,它会直接修改原数组。语法:array.splice(start, deleteCount, item1, item2, …) 其中,start 表示要修改的起始位置,deleteCount 表示要删除的元素个数,item1、item2 等表示要添加的元素。如果 deleteCount 为 0,则表示只添加元素,不删除元素。

const arr = [1, 2, 3, 4, 5];
const removedElements = arr.splice(1, 2, 6, 7);
console.log(arr); // [1, 6, 7, 4, 5]
console.log(removedElements); // [2, 3]
//实现删除
let arr = [1,2,3,4,5]
console.log(arr.splice(0,2));  //[ 1, 2 ] 返回被删除的元素
console.log(arr);  //[ 3, 4, 5 ]   该方法会改变原数组
//实现添加
let arr2 = [1,2,3,4,5]
console.log(arrsplice(1,0,666,777)); //[] 返回空数组,没有删除元素
console.log(arr2);  //[ 1, 666, 777, 2, 3, 4, 5 ]  原数组改变了
// 实现替换
let arr3 = [1,2,3,4,5]
console.log(arrsplice(2,1,"aaa","bbb")); //[ 3 ]  返回被删除的一个元素
console.log(arr3);  //[ 1, 2, 'aaa', 'bbb', 4, 5 ]  可以添加字符串
let arr4 = [1,2,3,4,5]
console.log(arrsplice(1,4,666)); //[ 2, 3, 4, 5 ]  返回被删除的四个元素
console.log(arr4);  //[ 1, 666 ]

7、map()

map(): 创建一个新数组,其中的元素是调用提供的函数后返回的结果

map() 方法用于对数组中的每个元素执行一个回调函数,并返回一个新的数组,新数组中的元素为回调函数的返回值。

const arr = [1, 2, 3];
const newArr = arr.map((element) => element * 2);
console.log(newArr); // [2, 4, 6]
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); //[ 1, 4, 9, 16, 25 ]

8、filter()

filter(): 创建一个新数组,其中的元素是调用提供的函数后返回值为 true 的元素

filter() 方法用于筛选、过滤数组中符合条件的元素,并返回一个新的数组。//筛选出偶数 const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter(num => num % 2 === 0); console.log(evenNumbers); //[ 2, 4 ]

const arr = [1, 2, 3, 4, 5];
const newArr = arr.filter((element) => element % 2 === 0);
console.log(newArr); // [2, 4]

9、reduce()

reduce(): 对数组中的所有元素进行累加或合并,返回一个累加或合并后的结果

reduce() 方法是数组对象的一个方法,用于将数组中的所有元素按照指定的规则进行归并计算,返回一个最终值。

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, element) => acc + element, 0);
console.log(sum); // 15

10、join() 方法

join() 方法用于将数组中的所有元素以指定的分隔符连接成一个字符串。

const fruits = ['苹果', '香蕉', '橘子'];
const joinedString = fruits.join(',');
console.log(fruits);  //[ '苹果', '香蕉', '橘子' ]
console.log(joinedString); //苹果,香蕉,橘子

11、concat() 方法

concat() 方法用于合并两个或多个数组,返回一个新的数组。

const fruits1 = ['苹果', '橘子'];
const fruits2 = ['西瓜', '蓝莓'];
const combinedFruits = fruitsconcat(fruits2);
console.log(combinedFruits); //[ '苹果', '橘子', '西瓜', '蓝莓' ]

12、forEach() 方法

forEach() 方法用于对数组中的每个元素执行一个回调函数。

const fruits = ['火龙果', '蓝莓', '西瓜', '葡萄'];
fruits.forEach(fruit => {
console.log(fruit); //火龙果 蓝莓 西瓜 葡萄
});

以上是一些常用的 JavaScript 数组 API 的代码示例,还有许多其他有用的数组 API 可以在文档中查找。

目录
相关文章
|
7天前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
|
15天前
|
缓存 JavaScript 前端开发
深入浅出:使用Node.js构建RESTful API
【9月更文挑战第3天】在数字化浪潮中,后端开发如同搭建一座连接用户与数据的桥梁。本文将带领读者从零开始,一步步用Node.js搭建一个功能完备的RESTful API。我们将探索如何设计API的结构、处理HTTP请求以及实现数据的CRUD操作,最终通过一个简单的实例,展示如何在真实世界中应用这些知识。无论你是初学者还是有一定经验的开发者,这篇文章都会为你揭示后端开发的奥秘,让你轻松入门并掌握这一技能。
39 3
|
16天前
|
JavaScript 前端开发
JavaScript基础知识-数组的遍历
关于JavaScript数组遍历基础知识的文章。
27 2
JavaScript基础知识-数组的遍历
|
1天前
|
JavaScript 前端开发
js删除数组最后一个元素
js删除数组最后一个元素
|
16天前
|
JavaScript 前端开发
JavaScript基础知识-数组的练习
关于JavaScript基础知识中数组操作的练习,主要介绍了如何从一个包含Person对象的数组中过滤出成年人(年龄达到18岁及以上)并将他们放入一个新的数组中。
25 1
JavaScript基础知识-数组的练习
|
16天前
|
JavaScript 前端开发
JavaScript基础知识-数组的常用方法
关于JavaScript基础知识-数组的常用方法。
14 1
JavaScript基础知识-数组的常用方法
|
16天前
|
JavaScript 前端开发 索引
JavaScript基础知识-数组基于索引访问
关于JavaScript数组基于索引访问的基础知识介绍。
13 1
JavaScript基础知识-数组基于索引访问
|
16天前
|
JavaScript 前端开发
JavaScript基础知识-数组的定义方式
本文介绍了JavaScript中数组的多种定义方式。
11 1
JavaScript基础知识-数组的定义方式
|
6天前
|
JavaScript
js 循环数组取值
js 循环数组取值
|
12天前
|
存储 JavaScript 前端开发
JS中的数组有哪些常用操作函数和属性
【9月更文挑战第7天】JS中的数组有哪些常用操作函数和属性
9 1