JavaScript数组中最有用的十五个方法

startmvc php框架学习社区

技术交流社区
JavaScript数组中最有用的十五个方法
admin 普通会员 时间:2024-03-14 00:14:33 浏览:591

数组在JavaScript中是非常常用的一种数据结构,它的长度和元素类型都是非固定的。由于数组的长度可随时改变,它的数据在内存中也可以不连续。这些特性给使用带来很多方便。需要注意的是,只能用整数作为数组的索引,不能使用字符串。


Array有非常多好用的方法,掌握下面这些常用方法,提升你的开发效率。


1、Array.map()

map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

const list = [1, 2, 3, 4];
list.map((el) => el * 2); // [2, 4, 6, 8]

2、Array.filter()

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


const list = [1, 2, 3, 4];
list.filter((el) => el % 2 === 0); // [2, 4]

3、Array.reduce()

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。


const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item, 0); // 15

4、Array.reduceRight()

reduceRight() 方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。


const list = [1, 2, 3, 4, 5];
list.reduceRight((total, item) => total + item, 0); // 15

5、Array.fill()

用静态值填充数组中的元素。


const list = [1, 2, 3, 4, 5];
list.fill(0); // [0, 0, 0, 0, 0]

6、Array.find()

返回符合所提供条件第一个元素的值。否则返回undefined。


const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // 3
list.find((el) => el === 6); // undefined

7、Array.indexOf()

返回可以在数组中找到给定元素的第一个索引,如果不存在,则返回 -1。


const list = [1, 2, 3, 4, 5];
list.indexOf(3); // 2
list.indexOf(6); // -1

8、Array.sort()

sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的。


const array = ['D', 'B', 'A', 'C'];
array.sort(); // ['A', 'B', 'C', 'D']
// OR
const array = [4, 1, 3, 2, 10];
array.sort(); // [1, 10, 2, 3, 4]
array.sort((a, b) => a - b); // [1, 2, 3, 4, 10]

9、Array.reverse()

reverse() 方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。


const list = [1, 2, 3, 4, 5];
list.reverse(); // [5, 4, 3, 2, 1]
list; // [5, 4, 3, 2, 1]

10、Array.includes()

includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。


const list = [1, 2, 3, 4, 5];
list.includes(3); // true
list.includes(6); // false

11、Array.pop()

pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。


const list = [1, 2, 3, 4, 5];
list.pop(); // 5
list; // [1, 2, 3, 4]

12、Array.push()

push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。


const list = [1, 2, 3, 4, 5];
list.push(6); // 6
list; // [1, 2, 3, 4, 5, 6]

13、Array.shift()

shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。


const list = [1, 2, 3, 4, 5];
list.shift(); // 1
list; // [2, 3, 4, 5]

14、Array.unshift()

unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。


const list = [1, 2, 3, 4, 5];
list.unshift(0); // 6
list; // [0, 1, 2, 3, 4, 5]

15、Array.join()

join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。


const list = [1, 2, 3, 4, 5];
list.join(', '); // "1, 2, 3, 4, 5"


回复列表
0个回复