js数组方法汇总

最新推荐文章于 2025-05-27 20:12:36 发布

懒羊羊我小弟

最新推荐文章于 2025-05-27 20:12:36 发布

阅读量259

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/IO14122/article/details/114792131

版权

JavaScript 专栏收录该内容

28 篇文章

订阅专栏

前言

js数组的定义：使用单独的变量名来存储一系列的值。数组中有许多的方法，在项目中如何使用最便捷的方法实现复杂的逻辑操作，这就需要对于数组方法的深入理解。对此我分类汇总了js大部分的方法仅供参考。

一、数组的定义

构造函数创建：使用new关键词创建一个Array数组var arr = new Array();。传递参数就是数组的每项数据用逗号隔开，注意：只有一个数字参数时，默认代表创建数组的长度，而里面的值为空"empty"。
字面量创建：由一对包含数组项的方括号表示，多个数组项之间以逗号隔开。var arr = [1,2,3,4];注意：如果使用数组字面量的方式创造数组的话, 那么用逗号隔开的各个数组项的最后一个, 最好不要是空的, 这样js解析引擎不同的版本会展示完全不一样的结果

	 var arr1 = new Array(1,2,3,4);
	 console.log(arr1);  // [1, 2, 3, 4]
	 var arr2 = new Array(4);
	 console.log(arr2);  // [empty × 4]
	 var arr3 = [1,2,3,4,];
	 console.log(arr3);  // [1, 2, 3, 4]

二、数组的栈和队列方法

数组栈方法

数组提供了一种类似于其他语言数组的方法（栈方法），栈是一种数据结构，主要讲究先进后出；就类似于瓶子装东西，先装进去的东西总是要等到最后才能拿出来。

push() 在数组尾部添加一条或多条数据。此方法直接改变原数组，有返回值；返回新的数组长度。
pop() 在数组尾部删除一条数据。此方法直接改变原数组，有返回值；返回被删除的元素。

        // 栈方法
        var arr = [1,2,3,4];
        // push()尾部添加一条或者多条数据
        var len = arr.push(5,6);
        console.log(arr,len); // [1, 2, 3, 4, 5, 6] 6
        // pop()尾部删除一条数据，单次只能删除一条数据
        var popArr = arr.pop(2);
        console.log(arr,popArr); // [1, 2, 3, 4, 5] 6

数组队列方法

数组还提供了队列方法，队列方法讲究先进先出，在列表的末尾添加项，开头删除项，或者开头添加末尾删除。就类似于排队买东西，先排队的站在前面率先买到东西。

unshift() 在数组的头部添加一条或多条数据。此方法直接改变原数组，有返回值；返回新的数组长度，与 pop() 方法结合组成队列；
shift() 在数组开头删除一条数据。此方法直接改变原数组，有返回值；返回被删除的元素，与 push() 方法结合组成队列；

     var arr = [1, 2, 3, 4];
     // unshift()头部添加一条或多条数据
     var len = arr.unshift(-1,0);
     console.log(arr,len); // [-1, 0, 1, 2, 3, 4] 6
     // shift() 头部删除一条数据，单次只能删除一条数据
     var shiftArr = arr.shift();
     console.log(arr,shiftArr); // [0, 1, 2, 3, 4] -1

三、数组迭代方法

js数组的迭代方法都可以接收两个参数：要在每一项上运行的函数和（可选的）运行该函数的作用域对象——影响this 的值。其中第一个函数参数中默认注入三个形参（数组项的值、该项在数组中的位置和数组对象本身）。

every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。用于查询数组都满足某个条件的数据；
some()：对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。用于查询数组是否有满足某个条件数据；
filter()：对数组中的每一项运行给定函数，返回该函数会返回true 的项组成的数组。
forEach()：对数组中的每一项运行给定函数。这个方法没有返回值。
map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

        var arr = [1, 2, 3, 4];
        // 1.every()方法： 一定要确保每个数组项目都得符合return的语句条件, 返回true
        let everyArr = arr.every((item, index, arr) => item > 3);
        console.log(everyArr, arr); // false  [1, 2, 3, 4]

        // 2.some()方法： 确保有一条数组项目符合return的语句条件, 返回true
        let someArr = arr.some((item, index, arr) => item > 3);
        console.log(someArr, arr); // true  [1, 2, 3, 4]

        // 3.map()方法：返回一个新数组，这个新数组的每一项都是在原始数组中的对应的数组项目传入函数经过一系列处理的结果。
        let mapArr = arr.map((item, index, arr) => item + 2);
        console.log(mapArr, arr); // [3, 4, 5, 6]  [1, 2, 3, 4]

        // 4.filter()方法：返回一个新数组，通过每次迭代返回的Boolean值来判断，为true才会进入新的数组，类似于过滤。
        let filterArr = arr.filter((item, index, arr) => item > 2);
        console.log(filterArr, arr); // [3, 4]  [1, 2, 3, 4]

        // 5.forEach()方法：没有返回值，也无法改变数组的值，就类似于for循环
        let forEachArr = arr.forEach((item, index, arr) => {
            console.log(33); // 执行四次输出33
        });
        console.log(forEachArr, arr); // undefined  [1, 2, 3, 4]

迭代方法总结：五种迭代方法都不会改变原数组，根据传入第一个参数的函数使用的方法不同，这个函数执行后的返回值可能会也可能不会影响方法的返回值。
注意：如果该数组不是一个简单的一维数组，而是数组对象的话可以在迭代过程中对于对象中的值做出一些修改。

四、数组的其他操作

reverse() 反转数组顺序：该直接反转数组的整体顺序；改变原数组
sort() 数组排序：该方法会按照字符串的先后顺序对数组的每一个数组项目的字符顺序来进行排序的，如果数组的某个项目不是字符串, 那么会先把数组项目转换为字符串,再来按照字符串的比较方式来排序。直接改变原数组还可以可以传入一个参数, 该参数必须为一个函数(被称为比较函数),比较函数接收两个参数；
concat() 数组拼接：该方法可以基于当前数组中的所有项创建一个新数组。具体来说，这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组，可以传递多个数组作为参数。不改变原数组
slice() 截取数组：该方法可以接受一或两个参数，即要返回项的起始和结束位置。作为原数组的一个副本。不改变原数组
splice() 全能方法：可以传递三个参数（要操作的起始位置、要删除几项、需要添加或替换的元素），利用这个方法可以实现数组的增加，删除、添加、替换等操作；改变原数组
indexOf() 正向查找方法：两个参数（查找的值、开始查找的起始项默认0），在数组中从前往后查找第一个与参数相同的数据，要求查找的项必须严格相等。如果有返回第一次出现的索引，如果没有返回-1；无法查取
lastIndexOf() 逆向查找方法：两个参数（查找的值、开始查找的起始项默认数组结尾开始）在数组中从后往前查找第一个与参数相同的数据，要求查找的项必须严格相等。如果有返回第一次出现的索引，如果没有返回-1；
join() 数组转字符串：一个参数，以什么分割符隔开，默认以逗号隔开，返回转换后的字符串。不改变原数组
toString() 数组转字符串：对于数组中每一项都使用toString()方法，可以实现数组扁平化，以逗号隔开。如果有对象结构只能转换为[object Object]。不改变原数组，所有JavaScript对象都拥有toString()方法。
toLocalString() 数组转字符串：把数组转换为本地字符串，并返回结果。不改变原数组
reduce(callbackfn,[initialValue]) 迭代累加：initialValue参数作为callbackfn函数的第一次调用的第一个参数，callbackfn函数有三个参数（上一次调用回调返回的值、数组中当前被处理的数组项、当前数组项在数组中的索引值、数组本身）。然后就是在数组的从前往后累加计算；经常用来做累加和去重
reduceRight(callbackfn,[initialValue]) 迭代累加：initialValue参数作为callbackfn函数的第一次调用的第一个参数，callbackfn函数有三个参数（上一次调用回调返回的值、数组中当前被处理的数组项、当前数组项在数组中的索引值、数组本身）。然后就是在数组的从后往前累加计算；

五、es6新增数组方法

copyWithin(target,start,end) 修改数组：target（必需）：从该位置开始替换数据。如果为负值，表示倒数，start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算，end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。该方法就是在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。
includes()：返回Boolean，表示某个数组是否包含给定的值，与字符串的indexOf()方法类似,相比于indexOf()更加的方便，indexOf()内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。
entries(): 遍历数组，对应键值对的遍历。可以使用for…fo遍历；
keys()：遍历数组，对应键名的遍历。可以使用for…fo遍历；
values()：遍历数组，对应键值的遍历。可以使用for…fo遍历；
find(callback)：找出第一个符合条件的数组项目。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
findIndex(callback)：方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
fill(val,start,end)：使用给定值，填充一个数组,val给定值、start开始位置、end结束位置；如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。
flat()：用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响，用于数组扁平化，默认只拉伸一层。如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数
flatMap() ：方法先对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。只能展开一层数组。参数是一个遍历函数，该函数可以接受三个参数，分别是数组数组、数组项目的位置（从零开始）、数组。(和map一样一样的).

六、数组的实例方法

Array.isArray() 检测是否为数组，返回Boolean;
Array.from(类数组)：将类数组对象转换为真正的数组对象。
Array.of(): 方法用于将一组值，转换为数组。这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。