js之数组方法详解

最新推荐文章于 2025-04-21 17:02:58 发布

李亚龙

最新推荐文章于 2025-04-21 17:02:58 发布

阅读量121

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_42252504/article/details/132263287

版权

对于js数组的认识，我们可以从两个方面去解析：改变原数组和不改变原数组去分类

一、改变原数组的方法：

主要包括：pop、push、reverse、shift、unshift、sort、splice

1、pop()

pop() 方法移除数组的最后一个元素，并返回该元素。

注意：pop() 方法会改变数组的长度。

pop() 返回它删除的元素：

let teams = ["Lakers", "Jazz", "Rockets", "Suns"];
teams.pop();   //'Suns'

2、push()

push() 方法向数组末尾添加新项目，并返回新长度。

提示：新的项目将被添加到数组的末尾。

注释：push() 方法会改变数组的长度。

向数组添加一个新项目：

let teams = ["Lakers", "Jazz", "Rockets", "Suns"];
teams.push("Warriors"); //5
console.log(teams) //(5) ['Lakers', 'Jazz', 'Rockets', 'Suns', 'Warriors']

3、reverse()

reverse() 方法反转数组中元素的顺序。

反转数组中元素的顺序：

let teams = ["Lakers", "Jazz", "Rockets", "Suns"];
teams.reverse() //(4) ['Suns', 'Rockets', 'Jazz', 'Lakers']

4、shift()

shift() 方法移除数组的第一项。

shift() 方法会改变数组的长度

shift 方法的返回值是被移除的项目

let teams = ["Lakers", "Jazz", "Rockets", "Suns"];
teams.shift() //'Lakers'

5、unshift()

unshift() 方法将新项添加到数组的开头，并返回新的长度。

unshift() 方法会改变数组的长度。

提示：如需在数组末尾添加新项，请使用 push()方法。

let teams = ["Lakers", "Jazz", "Rockets", "Suns"];
teams.unshift("Kings","Spurs") //6
console.log(teams)//(6) ['Kings', 'Spurs', 'Lakers', 'Jazz', 'Rockets', 'Suns']

6、sort()

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

        若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
        若 a 等于 b，则返回 0。
        若 a 大于 b，则返回一个大于 0 的值

let points = [40,100,1,5,25,10];
points.sort((a,b) => { return b - a }) //(6) [100, 40, 25, 10, 5, 1]

此处比较大小可灵活处理，如果是对象，可根据对象的某一属性值大小去比较，规则跟上面的方式一样。

7、splice()

splice() 方法向/从数组添加/删除项目，并返回删除的项目。

splice(index,howmany,arr1,arr2,…) ，用于添加或删除数组中的元素。从index位置开始删除howmany个元素，并将arr1、arr2…数据从index位置依次插入。howmany为0时，则不删除元素

let teams = ["Lakers", "Jazz", "Rockets", "Suns"];
teams.splice(2,1,"Kings","Spurs") //['Rockets']
console.log(teams) //(5) ['Lakers', 'Jazz', 'Kings', 'Spurs', 'Suns']

二、不改变原数组（返回新数组）的方法：

主要包括：concat、join、slice、map、some、every、filter、forEach、reduce、indexOf、includes、lastIndexOf、toString、valueOf、find、findIndex

1、concat

该方法可以连接两个或多个数组，并将新的数组返回

var arr1 = [1, 2, 3]
var arr2 = ['a', 'b', 'c']
var arr3 = [{ name: 'Lisa', age: 18 }, { name: 'Jack', age: 20 }]
var result = arr1.concat(arr2, arr3)
console.log(result);   // [1, 2, 3, 'a', 'b', 'c',  {name: 'Lisa', age: 18}, {name: 'Jack', age: 20}]

2、join

该方法可以将数组转换为一个字符串。

在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符

如果不指定连接符，则默认使用,作为连接符

// 填写参数
var arr = ["Banana", "Orange", "Apple", "Pear"];
var result = arr.join(" and ");
console.log(result);  // Banana and Orange and Apple and Pear
 
// 不写参数
var arr = ["Banana", "Orange", "Apple", "Pear"];
var result = arr.join();
console.log(result);  // Banana,Orange,Apple,Pear

3、slice

可以用来从数组提取指定元素

将截取到的元素封装到一个新数组中返回

* - 参数：

* 1.截取开始的位置的索引,包含开始索引

* 2.截取结束的位置的索引,不包含结束索引

* - 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素

* - 索引可以传递一个负值，如果传递一个负值，则从后往前计算

* -1 倒数第一个

* -2 倒数第二个、

 var arr = ["Banana", "Orange", "Apple", "Strawberry", 'Pear', 'Lemon'];
 var result = arr.slice(1, 3);
 console.log(result);   // ['Orange', 'Apple']
  
 
 var arr = ["Banana", "Orange", "Apple", "Strawberry", 'Pear', 'Lemon'];
 var result = arr.slice(-3);  // slice(-3) 表示提取原数组中的倒数第三个元素到最后一个元素（包含 最后一个元素）
 console.log(result);   // ['Strawberry', 'Pear', 'Lemon']
 
 
 var arr = ["Banana", "Orange", "Apple", "Strawberry", 'Pear', 'Lemon'];
 var result = arr.slice(-2,-1);  // slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）
 console.log(result);    // ['Pear']

4、forEach

该方法需要一个函数作为参数

* - 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数

* - 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素

* 以实参的形式传递进来，我们可以来定义形参，来读取这些内容

* - 浏览器会在回调函数中传递三个参数：

* 第一个参数，就是当前正在遍历的元素

* 第二个参数，就是当前正在遍历的元素的索引

* 第三个参数，就是正在遍历的数组

var arr = [10, 236, 'hi', true, 'hello'];
arr.forEach(function (item, index, arr1) {
        console.log('index为' + [index], 'item为' + item);  
        // index为0 item为10  
        // index为1 item为236 
        // index为2 item为hi 
        // index为3 item为true 
        // index为4 item为hello
  })

5、map

该方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。

var arr =[1, 2, 3, 4, 5, 6]
var result = arr.map(function (item) {
    return item + 'hi'
})
console.log(result);  // ['1hi', '2hi', '3hi', '4hi', '5hi', '6hi']

6、every

用于检测数组所有的元素是否都符合指定条件每一个都满足条件返回true 有一个不满足就会返回false 并且剩下的元素不会再进行检测返回值为布尔值

 var arr=[12, 5, 4, 66, 21, 99]
 var result = arr.every(function (item) {
       return item >20
   })
 console.log(result);  // false

7、some

用于检测数组中的元素是否满足指定条件有一个元素满足条件返回true 剩下的元素不会再进行检测如果没有满足条件的元素则返回false 返回值为布尔值

var arr = [12, 5, 4, 66, 21, 99]
var result = arr.some(function (item) {
     return item > 20
   })
console.log(result); // true

8、filter

‘过滤筛选’ 创建一个新的数组新数组中的元素是通过检查指定数组中符合条件的所有元素结果为true则保存新的数组中结果为false则过滤掉

var arr = [10, 236, 'hi', true, function () { }, { name: '张三' }];
var result = arr.filter(function (item) {
  return typeof item == 'number' 
    || typeof item == 'boolean' 
    || item instanceof Function;
});
console.log(result);  // [10, 236, true, ƒ ()]

9、reduce

接收一个函数作为累加器数组中的每个值（从左到右）开始缩减最终计算为一个值

语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

total为初始值 currentValue为当前元素  currentIndex为当前元素的索引 arr为数组本身  initialValue为传递给函数的初始值

 var arr = [1, 2, 3, 4, 5, 6]
 var result = arr.reduce(function (total,currentValue,currentIndex,arr) {
        return total + currentValue
    },10)
 console.log(result);  // 31

10、indexOf

返回数组中某个指定的元素位置 (从索引为0开始检查数组中是否包含有某个值有则返回匹配到的第一个索引没有则返回-1）

var arr = ["Banana", "Orange", "Apple", "Strawberry"];
var result = arr.indexOf('Orange');
console.log(result);  // 1

11、lastIndexOf

返回一个指定的元素在数组中最后出现的位置从该字符串的后面向前查找 (有则返回匹配到的第一个索引没有则返回-1）

var arr = ["Banana", "Orange", "Apple", "Strawberry", "Apple", "Orange"];
var result = arr.lastIndexOf('Orange');
console.log(result);  // 5

12、toString

将数组中的元素用逗号拼接成字符串返回拼接后的字符串

 var arr = [1, 2, 3];
 arr.toString();
 console.log(arr);  //  [1, 2, 3]

13、valueOf

返回数组对象的原始值

var arr = ["Banana", "Orange", "Apple", "Pear"];
arr.valueOf(); 
console.log(arr);  // ['Banana', 'Orange', 'Apple', 'Pear']

14、find

基础参数说明： arrary.find(function(item,index,arr),thisvalue);
array:数组。

item:当前循环的项。

index:循环项的下标。

arr：当前循环的数组。

thisvalue：如果传的话，在callbck函数中this为该值，不穿的话this为undefined

var array = [1, 2, 3, 4, 5, 6, 6, 6]
   var result = array.find(function (item, index, arr) {
      console.log(this); // [1, 2, 3, 4, 5, 6, 6, 6]
      return item > 6;
   }, array)
   console.log(result); // undefined
   console.log(array);  //[1, 2, 3, 4, 5, 6, 6, 6]


var result = array.find(function (item, index, arr) {
    console.log(this); // [1, 2, 3, 4, 5, 6, 6, 6]
    return item > 5;
}, array)
console.log(result); // 6
console.log(array);  //[1, 2, 3, 4, 5, 6, 6, 6]

15、findIndex

方法返回数组中满足所提供的测试函数的第一个元素的索引

注意：对于空数组，函数是不会执行的

语法：

        array.findIndex(callback, thisArg)

        array.findIndex(function(element, index, arr), thisArg)

var num = [1, 30, 39, 29, 10, 13];
var val = num.findIndex(myFunc);

function myFunc(element) {
    return element >= 18;
}

三、数组拷贝

1、对于简单数组拷贝

方法很多：map、解构、展开操作符、concat、slice、循环push

const arr = [1,2,3,4,5]

解构： const [..copy] = numbers

展开操作符：const copy = new Array(...arr)

使用concat : const copy = arr.concat()

2、但是对于数据元素是对象的时候上述方法就属于浅拷贝，深拷贝的话就需要其他方式

①、JSON的序列化和反序列化 JSON.stringify()

该方法虽然可以实现数组的深拷贝，但是只能针对对象里面普通属性，当对象里面有函数的时候，就无法实现深拷贝了，另外对于RegExp类型的也是无法拷贝的

②、使用递归封装一个深拷贝方法

实现：

var deepCopy = function(obj){

//只拷贝对象

if (typeof obj !== 'object') return

    //根据obj的类型判断是新建一个数组还是一个对象

    var newObj = obj instanceof Array ? [] : {}

    for(var key in obj) {

        //遍历obj,并且判断是obj的属性才拷贝

        if(obj.hasOwnProperty(key)){

            //判断如果类型是对象的话则递归进行深拷贝

            newObj[key] = typeof obj[key] === 'object'?deepCopy(obj[key]):obj[key];

        }

    }

}

③、引用第三方库 lodash 的 cloneDeep()方法