JS数组方法汇总

JS中的数组

在工作中，操作数组的时候还是蛮多的，总结一下关于ES5中数组的方法以及ES6中新增的数组的操作方法

JS中的数组与其它语言不同的是，ECMAScript数组中每一项可以保存任意数据类型的值，而且ECMAScript中数组的长度是随数组中数据的长度自动变化的

创建数组的方式：

一、使用Array构造函数

const arr = new Array()  //此时arr就是一个空数组，new操作符可以省略，结果相同

传值：
1、只传一个值时：传数字n会按照数字创建长度为n的空数组，
const arr = new Array(3)   //[empty*3] 创建一个length为3的空数组
传递其他数据类型的参数，创建包含那一项的数组
const arr = new Array('Gary')   //['Gary']
2、传递多个值时，创建包含所有值的数组
const arr = new Array(1,2,3)   //[1,2,3]
const arr = new Array('Gary', 'Nigo' , 'Well')  //['Gary' , 'Nigo' , 'Well']

二、直接使用数组字面量

const arr = [1,2,3]  //[1,2,3]

读取和设置数组中的值

通过[下标]的形式可以进行读取和设置数组指定项的值

const arr = [1,2,3];
console.log(arr[0]);   //1
arr[1] = 4;   //此时的数组： [1,4,3]
arr[3] = 5;  //此时的数组： [1,4,3,5]

数组的length

不止可读，同样可写。可以通过修改数组的长度实现从数组的末尾移除项或添加新的项，但是添加的新的项是undefined

const arr = [1,2,3];
arr.length = 2;
console.log(arr);  //[1,2]

const arr = [1,2,3];
arr.length = 5;
console.log(arr);   //[1,2,3,empty*2]

利用数组的length属性可以向数组末尾添加新的项

const arr = [1,2,3];
arr[arr.length] = 4;    //向数组的下标3位置添加一项
arr[arr.length] = 5;    //向数组的下标4位置添加一项
console.log(arr);     //[1,2,3,4,5]

通过下标影响数组的长度

const arr = [1,2,3];
arr[99] = 12;
console.log(arr.length); //100,  数组3-98项都是undefined

检测数组

一、instance操作符

对于一个网页，或者一个全局作用域而言，使用instance时绝对有效的。

[1,2,3] instanceof Array   //true

但是instance假定只有一个全局执行函数，如果网页中包含多个框架那么实际就存在两个甚至更多不同的全局执行环境，从而存在不同版本的Array构造函数，如果从一个框架向另一个框架传入一个数组，那么传入的数组与第二个框架中原生创建的数组分别具有不同的Array构造函数，可能得不到预期结果

二、Array.isArray(value)

这个方法的最终目的是确定传入的内容是不是数组，而不关心它是在哪个全局环境中创建的

Array.isArray([1,2,3])  //true

三、调用Object的原生toString()方法

在任何值上调用Object的原生toString()方法，都会返回一个[object NativeConstructorName]格式的字符串，可以判断该值的具体类型

例：

console.log(Object.prototype.toString.call([1,2,3]))  //'[Object Array]'

同样，该方法适用于任意数据类型的检测

转换方法

所有对象都具有toLocaleString() 、 toString() 、 valueOf()方法

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

const arr = [1,2,3]
console.log(arr.toLocaleString());  //'1,2,3'

const arr = [1,2,3]
console.log(arr.valueOf());    //[1,2,3]  依旧是数组

数组的join()方法

传入不同字符，用于将数组的每一项拼接成有特定字符拼接的字符串

const arr [ 1,2,3];
console.log(arr.join(','))  //'1,2,3'
console.log(arr.join())   //不传值或传入undefined，默认以逗号分隔
console.log(arr.join(''))  //'123'  
console.log(arr.join('-'))  //'1-2-3'

尾部操作

数组可以模拟栈结构的先进后出规则,

一、push

向数组尾部添加任意个项，并返回修改后数组的长度

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

二、pop

从数组中移除最后一项，返回被移除的项

const arr = [1,2,3]
console.log(arr.pop())  //3
console.log(arr)   //[1,2]

头部操作

一、unshift

向数组头部添加任意个项，并返回修改后数组的长度

const arr = [1,2,3]
console.log(arr.unshift(-1,0))   //5
console.log(arr)   //[-1,0,1,2,3]

二、shift

移除数组头部第一项，返回被移除的项

const arr = [1,2,3]
console.log(arr.shift())   //1
console.log(arr)  //[2,3]

排序方法

一、reverse

反转数组项的顺序

const arr = [1,2,3]
arr.reverse();
console.log(arr)  //[3,2,1]

二、sort

sort()方法默认升序排列，但是进行比较时，会调用每个数组项的toString()方法，比较得到的字符串，即使数组项是数组，也会转换成字符串进行比较

console.log([1,5,10,23].sort())  //[1,10,23,5]因为是转换成字符串进行比较的

发现会有问题，因此可以sort()可以传入一个比较函数，比较函数接受两个参数，如果参数一应该位于参数二之前就返回一个负数，如果两个参数相等则返回0，如果参数一应该位于参数二之后就返回一个正数

function compare(val1,val2) {
        //从小到大
    if(val1 < val2){
     
        return -1
    }else if(val1 > val2) {
     
        return 1
    }else{
     
        return 0
    }
}
const arr = [5,1,23,4,6];
arr.sort(compore);
console.log(arr)  //[1,4,5,6,23]

function compare(val1,val2) {
        //从大到小
    if(val1 < val2){
     
        return 1
    }else if(val1 > val2) {
     
        return -1
    }else{
     
        return 0
    }
}
const arr = [5,1,23,4,6];
arr.sort(compore);
console.log(arr)  //[23,6,5,4,1]

根据思路简化一下：

const arr = [5,1,23,4,6];
arr.sort((val1,val2) =>{
       //从小到大
    return val1 - val2
})
console.log(arr)  //[1,4,5,6,23]

const arr = [5,1,23,4,6];
arr.sort((val1,val2) =>{
       //从大到小
    return val2 - val1
})
console.log(arr)  //[23,6,5,4,1]

操作方法

一、concat

数组的concat()方法会首先当前数组的副本，然后将接收到的参数拼接到当前数组的尾部，最后返回新构建的数组

如果接收到的是一个或多个数组，会将这些数组的每一项统统添加进新的结果数组中

接收到的不是数组而是只，则会把接收到的值添加到数组的尾部

const arr = [1,2];
const ar2 = arr.concat( 12 , [13,14]);
console.log(arr)   //[1,2]
console.log(arr2)  //[1,2,12,13,14]

二、slice

基于当前数组的一个或多个项创建一个新数组，不改变原数组

最多接受两个参数，要返回项的起始和结束位置

只有一个参数时，返回包含从该下标开始到原数组结束位置的所有项的一个新数组

两个参数是，第一个参数指定起始位置，第二个参数指定结束位置，包前不包后

const arr = [1,2,3,4,5]
const arr1 = arr.slice(1)   //[2,3,4,5]
const arr2 = arr.slice(1,4)  //[2,3,4]

如果参数中有负数，则用数组长的加该负数，来确定相应的位置

如果结束位置小于起始位置，则返回空数组

三、splice

很强大，可以实现数组的增删改

1、删除

传入两个参数，要删除的第一项的位置和要删除的个数,

splice方法始终返回一个数组，包含从原始数组中删除的项，如果没有删除的项，则返回一个空数组

const arr = [1,2,3,4,5]
const removed = arr.splice(1,2)
console.log(arr) [1,4,5]
console.log(removed) [2,3]

2、插入

三个参数 起始位置 0 要插入的项， 如果传入多项内容，可以在参数后逗号隔开，插入多项

const arr = [1,2,4]
const arr1 = arr.splice( 1 , 0 ,12 , 34)
console.log(arr1) //[1,12,34,2,4]

3、替换

三个参数 起始位置 要删除的项数 插入的值

const arr = [1,2,3]
const arr1 = arr.splice(1 ,1,5)
console.log(arr1)  //[1,5,3]

位置方法

一、indexOf()

接受两个参数 要查找的项 表示查找起点位置的索引，第二个参数可不传

从数组的下标0处开始向后查找，返回查找的项在数组中第一次出现的位置，如果不存在则返回-1，比较每一项时，采用全等操作符=== ，因此必须严格相等才可以

二、lastIndexOf()

用法同indexOf() 区别是lastIndexOf()方法是从数组的最后一项依次向前找

cosnt arr = [1,4,54,22,4,22,5];
console.log(arr.indexOf(4))  //1
console.log(arr.lastIndexOf(4)) //4
console.log(arr.indexOf(4,3))  //4
console.log(arr.lastIndexOf(4,4)) //1

迭代方法

ES5中共5种数组的迭代方法

每个方法都可以接收两个参数，要在每一项上运行的函数 和 运行该函数的作用域对象–影响this的值（可不传）。传入这些方法中的函数接收三个参数： 数组每一项的值、每一项的下标、数组对象本身

一、every()

对数组中每一项运行给定函数，如果每一项都满足条件，则返回true

const arr = [1,2,34,5,7]
let result = arr.every((item , index , arr) {
     
                       return item > 3
                       })
console.log(result)   //false 不是每一项都满足

二、some()

对数组中每一项运行给定函数，如果有满足条件的项就返回true,都不满足才返回false

const arr = [1,2,34,5,7]
let result = arr.some((item , index , arr) {
     
                       return item > 3
                       })
console.log(result)   //true  有一项满足条件就返回true

三、filter()

对数组每一项运行给定函数，返回true的项组成的数组，不改变原数组

const arr = [1,2,34,5,7]
let result = arr.filter((item , index , arr) {
     
                       return item < 6
                       })
console.log(result)   //[1,2,5]
console.log(arr)    //[1,2,34,5,7]

四、forEach()

对数组中每一项运行给定函数，没有返回值，允许回调方法改变调用的数组，可能会改变原数组

const arr = [1,2,3]
arr.forEach((item,index,array) => {
     
    item * 2
})
console.log(arr)   //[2,4,6]

五、map()

对数组中每一项运行给定函数，返回新的函数调用结果组成的数组，不改变原数组

const arr = [1,2,3]
const arr2 = arr.map(item => {
     
    return item*2
})
console.log(arr)   //[1,2,3]
conaole.log(arr2)   //[2,4,6]

归并方法

一、reduce()

迭代数组的所有项，并构建一个最终返回的值，从数组的第一项开始，逐个遍历数组到最后一项

接收两个参数 在每一项上调用的函数、作为归并基础的初始值(可不传)

传给reduce()的函数接收4个参数 前一个值、当前值、项的索引、当前对象

这个函数返回的任何值都会作为第一个参数自动传给下一项，直到数组遍历结束

求数组中所有值之和

const arr = [1,2,3,4]
const sum = arr.reduce((prev , cur , index , arr) => {
     
    return prev + cur
})
console.log(sum) //10

第一次执行函数，prev是1 ，cur是2；第二次，prev是3 ， cur是3；第三次 prev是6 ，cur是4

遍历结束

求数组中所有值与10之和呢？

const arr = [1,2,3,4]
const sum = arr.reduce((prev , cur , index ,arr) => {
     
    return prev + cur
} , 10)
console.log(sum)   //20

二维数组转一维数组

const arr = [[1,2,3],[1,23,3],[1,2,3]]
const result = arr.reduce((prev, cur , index ,arr) => {
     
    return prev.concat(cur)
})
console.log(result)  //[1,2,3,1,23,3,1,2,3]

数组去重

const arr = [1,23,4,1,4,5,5];
const arr2 = arr.reduce((prev , cur) => {
     
    return prev.includes(cur) ? prev : prev.concat(cur)
} , [])
console.log(arr2)   //[1,23,4,5]

二、reduceRight()

用法同reduce() 只不过reduceRight()是从数组最后一项向数组第一项遍历