简单的数组方法

数组可以保存多个数据,包括另一个数组和对象,很多时候我们都会对数组进行操作(增删改查),所以这时候一些方便的数组方法就显得尤为重要.

检测数据是否为数组

var arr = [10, 20, 30, 40, 50];
//使用Array.isArray(数组名) 来判断数据是否为数组
console.log(Array.isArray(arr));// true

//使用 数组名 instanceof Array 来判断 
//此方法也可以判断数据是否为别的数据类型,只需要把后面的Array改成对应数据类型名称即可
console.log(arr instanceof Array);// true

遍历数组

1.使用for循环去遍历数组:

var arr = [`卢本伟`,`PDD`,`孙亚龙`]
//通过数组.length的方式就可以得到数组的长度(数组中元素的个数)
//利用数组的length就可以进行数组元素的遍历
for (var a = 0; a < arr.length; a++) {
        console.log(arr[a]); // 卢本伟 PDD 孙亚龙
        //打印数组里面的每一项数据
    }

2.使用forEach语句遍历数组:

var arr = [`卢本伟`, `PDD`, `孙亚龙`]
    //forEach语句里面会跟三个参数,分别代表数组的每一项(e),对应的索引号(i)和数组本身(a)
    arr.forEach((e, i, a) => {
        console.log(e, i, a);
        // 卢本伟 0 ['卢本伟', 'PDD', '孙亚龙']
        // PDD 1  ['卢本伟', 'PDD', '孙亚龙']
        // 孙亚龙 2  ['卢本伟', 'PDD', '孙亚龙']
    })

3.jQuery中的$.each遍历数组

var arr = [`卢本伟`, `PDD`, `孙亚龙`]
   // 小括号里面跟两个参数,要遍历的数组和一个回调函数
   // 函数的两个形参分别代表元素的索引(i),索引对应的元素(e)
    $.each(arr, (i, e) => {
        console.log(i,e);
    })

4.some方法遍历数组:

//some方法可以遍历数组并且查找数组中是否有满足条件的元素
 var arr = [10, 20, 30, 40, 50];
 var flag = arr.some((e, i, a) => {
        //参数一是:数组元素(e)
        //参数二是:数组元素的索引(i)
        //参数三是:数组本身(a)
        return e < 10 
    })
    console.log(flag); // false
    //some返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环

5.filter方法遍历数组:

//filter方法会遍历数组,然后查询满足条件的元素,并返回一个新数组
var arr = [10, 20, 30, 40, 50];
var newArr = arr.filter((e, i, a) => {
      //参数一是:数组元素(e)
      //参数二是:数组元素的索引(i)
      //参数三是:数组本身(a)
      return i > 20
    })
    console.log(newArr); //[30, 40, 50]
    //filter方法返回值是一个新数组

给数组添加元素

1.使用push给数组添加元素(常用)

var arr = [1, 2, 3]
arr.push(4)// 可以添加一个元素
arr.push(5, 6) //也可以添加多个元素,使用逗号隔开
console.log(arr.push(7))
//push方法的返回值就是添加成功之后数组的长度,打印的是7
console.log(arr)// [1,2,3,4,5,6,7]

2.使用unshift方法给数组条件元素

var arr = [1, 2, 3]
arr.unshift(4)// 可以添加一个元素在所有元素的前面
arr.unshift(5, 6) //也可以添加多个元素
console.log(arr.unshift(7)) // push方法的返回值就是添加成功之后数组的长度,打印的是7
console.log(arr);// [7, 5, 6, 4, 1, 2, 3]

3.splice() 方法向数组添加元素(麻烦)

var arr = [1, 2, 3, 4]
//splice(i, h, e1, e2...) splice方法里面有三个参数
//i 必选,根据索引规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
//h 必选,要删除的项目数量,如果设置为0,则不会删除项目。
//e 可选,要添加的新数据,多个之间用逗号隔开。

//使用arr.length可以直接获得数组的长度,往数组最后添加元素
arr.splice(arr.length, 0, 5, 6, 7)
console.log(arr);[1, 2, 3, 4, 5, 6, 7]

arr.splice(2, 0, 4, 5, 6)
console.log(arr);//[1, 2, 4, 5, 6, 3, 4]

此方法不仅可以添加数据,还可删除从索引处开始的零个或多个元素，并且用参数列表(e)中声明的一个或多个值来替换那些被删除的元素。

如果从数组中删除了元素，则返回的是含有被删除的元素的数组。

var arr = [1, 2, 3, 4, 7, 8, 9]
//从索引为2的元素开始删除三个元素,并且用4,5,6替换他们 
console.log(arr.splice(2, 3, 4, 5, 6));//[3, 4, 7]
console.log(arr);// [1, 2, 4, 5, 6, 8, 9]

4.使用 数组.length 添加元素(没十年脑血栓一般不会用这个办法)

var arr = [1, 2, 3, 4]
//数组的长度是按照元素的数量计算,而索引从零开始计算
//所以直接console.log(arr[arr.length]);得到的一定是undefined
//但是可以使用这个方法直接给数组添加元素
arr[arr.length] = 5
console.log(arr); [1, 2, 3, 4, 5]

持续更新中...........

2021.10.13更新
 

删除数组元素

1.使用pop方法删除数组元素(从数组最后面开始删除)

//pop() 方法用于删除数组的最后一个元素并返回删除的元素。
//注意：此方法改变数组的长度！
//此方法的返回值是被删除的那个元素

var arr = [1, 2, 3, 4, 5, 6, 7, 8]
arr.pop()
console.log(arr.pop()); //8
console.log(arr) //[1, 2, 3, 4, 5, 6, 7]

2.使用shift方法删除数组元素(从数组最前面开始删除)

//shift() 方法用于删除数组的第一个元素并返回删除的元素。
//注意：此方法改变数组的长度！
//此方法的返回值是被删除的那个元素

var arr = [1, 2, 3, 4, 5, 6, 7, 8]
arr.shift()
console.log(arr.shift()); //1
console.log(arr);//[2, 3, 4, 5, 6, 7, 8]

3.使用splice方法来删除元素

splice方法的使用方法上面已经介绍过了,不多赘述

//splice(i, h, e1, e2...) splice方法里面有三个参数
//i 必选,根据索引规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
//h 必选,要删除的项目数量,如果设置为0,则不会删除项目。
//e 可选,要添加的新数据,多个之间用逗号隔开。
var arr = [1, 2, 3, 4, 7, 8, 9]
//从索引为2的元素开始删除三个元素,并且用4,5,6替换他们 
console.log(arr.splice(2, 3, 4, 5, 6));//[3, 4, 7]
console.log(arr);// [1, 2, 4, 5, 6, 8, 9]

查询数组元素

1.使用indexof方法查询

//数组名.indexOf(要查找的内容(item),[start(开始检索的位置,可选)])
//该方法会从头到尾地检索数组，看它是否含有对应的元素,
//开始检索的位置在数组start处或数组的开头(没有指定start参数时)
//如果找到一个符合的元素则返回该元素的第一次出现的位置.开始位置的索引为0
//如果在数组中没找到指定元素则返回 -1。
//该方法还可以查询字符串中是否有对应元素
var arr = [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr.indexOf(7)); //6
console.log(arr.indexof(9)); //-1

2.使用lastindexof方法查询

此方法跟indexof方法差不多,唯一的区别是此方法是从后往前查

var arr = [1, 2, 3, 4, 5, 8, 6, 7, 8]
console.log(arr.lastIndexOf(8));// indexof方法会返回5,lastIndexOf返回8

3.Array.filter方法查询元素

filter方法不仅可以遍历数组,还可以查找数组元素,它的返回值是一个新数组

//filter方法会遍历数组,然后查询满足条件的所有元素,并返回一个新数组
//它的参数是一个回调函数
var arr = [10, 20, 30, 40, 50];
var newArr = arr.filter((e, i, a) => {
      //参数一是:数组元素(e)
      //参数二是:数组元素的索引(i)
      //参数三是:数组本身(a)
      return i > 20
    })
    console.log(newArr); //[30, 40, 50]
    //filter方法返回值是一个新数组

4.Array.find方法

此方法和filter方法差不多,参数也是一个回调函数,但是它只返回满足条件的第一个元素.

var arr = [1, 2, 3, 4, 5, 8, 6, 7, 8]
var a = arr.find((e, i, a) => {
      //参数一是:数组元素(e)
      //参数二是:数组元素的索引(i)
      //参数三是:数组本身(a)
     return e > 3
})
console.log(a);//4

5.Array.includes方法 

此方法会查询数组是否包含某个值，并返回true或false

// arr.includes(e, i)
//e要查询的元素, i 从索引为i的元素开始查(可选)
var arr = [1, 2, 3, 4, 5, 8, 6, 7, 8]
console.log(arr.includes(5));// true
console.log(arr.includes(9));//false

总结:

如果你想获取的数组中符合特定条件的所有元素，使用 filter。

如果你想检查是否至少有一个元素符合特定的条件，使用 find。

如果你想检查一个数组是否包含一个特定的值，使用 includes。

如果要在数组中查找特定项目的索引，使用indexOf 。

2021.10.25更新

根据条件查询元素的索引号

arr.findIndex(callback[, thisArg])
此方法的返回值是满足回调函数中条件的第一个元素的索引,如果没有满足条件的元素,返回-1

方法里的回调函数会针对数组里的每一个值执行,回调函数里有三个参数

• e 当前元素
• i 当前元素的索引值
• a 调用此方法的数组

thisArg:此参数可选,执行回调时作为this对象的值

var arr = [1, 2, 3, 4, 5]
// 找到arr数组里面大于2的第一个元素的索引
var index = arr.findIndex((e, i, a) => e > 2) // 2