js数组方法总结

1、push() 尾插
（1）只插入一个元素

const arr = [1, 2, 3, 4, 5]
const arr1 = arr.push(6)
console.log(arr);//[1,2,3,4,5,6]
consloe.log(arr1);//6 返回值是数组的长度
（2）插入多个元素

const arr = [1, 2, 3, 4, 5, 6]
const arr1 = arr.push(7, 8, 9)
console.log(arr);//[1,2,3,4,5,6,7,8,9]
console.log(arr1);//9 返回值是数组的长度
（3）插入数组

const arr = [1, 2, 3, 4, 5, 6]
const arr1 = arr.push([7, 8, 9])
console.log(arr);//[1,2,3,4,5,6,[7,8,9]]
console.log(arr1);//7
（可以使用解构赋值将数组展开插入 ...[7,8,9]）

const arr = [1, 2, 3, 4, 5, 6]
const arr1 = arr.push(...[7, 8, 9])
console.log(arr);//[1,2,3,4,5,6,7,8,9]
console.log(arr1);//9        
（4）添加对象

const arr = [1, 2, 3, 4, 5, 6]
const arr1 = arr.push({ id: 8, name: 9, age: 10 })
console.log(arr);//[1,2,3,4,5,6,{ id: 8, name: 9, age: 10 }]
console.log(arr1);//7
2、pop() 尾删
只能删除一个

const arr = [1, 2, 3, 4, 5, 6]
const arr1 = arr.pop()
console.log(arr);//[1,2,3,4,5]
console.log(arr1);//6 返回的是被删除的元素
3、unshift() 头插
与尾插是一样的，可以插入多个

const arr = [1, 2, 3, 4, 5, 6]
const arr1 = arr.unshift(2)
console.log(arr);//[2,1,2,3,4,5,6]
console.log(arr1);//7 返回的是数组的长度
4、shift() 头删
与尾删一样，只能删除一个

const arr = [1, 2, 3, 4, 5, 6]
const arr1 = arr.shift()
console.log(arr);//[2,3,4,5,6]
console.log(arr1);//1 返回的是删除的数据
5、splice() 删除多个数据且可以添加数据
（1）只有一个参数时

参数是几，就从下标为几的数据开始删除

const arr = [1, 2, 3, 4, 5, 6, 7]
const arr1 = arr.splice(1)
console.log(arr);//[1]
console.log(arr1);//[2,3,4,5,6]  返回删除的数组
 
const arr = [1, 2, 3, 4, 5, 6]
const arr1 = arr.splice(3)
console.log(arr);//[1,2,3]
console.log(arr1);//[4,5,6]
如果参数为负数

const arr = [1, 2, 3, 4, 5, 6]
const arr1 = arr.splice(-3)
console.log(arr);//[1,2,3]
console.log(arr1);//[4,5,6]
其实很好理解，如图所示

（2）有两个参数时

表示从规定下标开始删除n个数，第二个参数为0时也不会截取数组

const arr = [1, 2, 3, 4, 5, 6]
const arr1 = arr.splice(1,3)
console.log(arr);//[1,5,6]
console.log(arr1);//[2,3,4]
负数也是这样的，从下标为-3的开始删除3个数

const arr = [1, 2, 3, 4, 5, 6]
const arr1 = arr.splice(-3, 3)
console.log(arr);//[1,2,3]
console.log(arr1);//[4,5,6]
两个数同为负数，就不会成功截取

const arr = [1, 2, 3, 4, 5, 6]
const arr1 = arr.splice(-3, -1)
console.log(arr);//[1,2,3,4,5,6]
console.log(arr1);//[]
（3）有三个参数时

[1,3,6] 表示数据从下标1开始删除3个数据，将6添加进去，就像头插尾插一样，可以添加多个

const arr = [1, 2, 3, 4, 5, 6]
const arr1 = arr.splice(1,3,6)
console.log(arr);//[1,6,5,6]
console.log(arr1);//[2,3,4]
 
const arr = [1, 2, 3, 4, 5, 6]
const arr1 = arr.splice(1,3,6,7,8) //从第三个参数开始，后面都是添加的数据
console.log(arr);//[1,6,7,8,5,6]
console.log(arr1);//[2,3,4]
有负数的话其实也好理解

const arr = [1, 2, 3, 4, 5, 6]
const arr1 = arr.splice(-3, 2, 8)
console.log(arr);//[1, 2, 3, 8, 6]
console.log(arr1);//[4,5]
6、concat() 连接多个数组
const arr = [1, 2, 3]
const arr1 = [4, 5, 6]
const arr2 = [7, 8, 9]
const arr3 = arr.concat(arr1,arr2)
console.log(arr3);//[1,2,3,4,5,6,7,8,9]
ES6中可以使用解构赋值来完成这一操作，效果是一样的

const arr = [1, 2, 3]
const arr1 = [4, 5, 6]
const arr2 = [7, 8, 9]
const arr3 = [...arr,...arr1,...arr2]
console.log(arr3);//[1,2,3,4,5,6,7,8,9]
7、str.split() 将字符串转化为数组
const str = "hello"
const str1 = str.split("")
console.log(str1);//["h", "e", "l", "l", "o"]
其中split()中的""是用来分割字符串的，意思就是用什么去分割字符串，前提是字符串中必须存在split()中写入的标识

const str = "h,e,l,l o"
const str1 = str.split(",")
console.log(str1);//["h", "e", "l", "l o"]
8、sort() 排序
（1）默认排序

按照字符串的形式排序，也就是只认定最左边的数字

let arr = [1, 5, 4, 3, 12, 32, 6, 7, 98, 111]
console.log(arr.sort()); //[1, 111, 12, 3, 32, 4, 5, 6, 7, 98]
 
//简单的例子
console.log("111">"12") //false
（2）从小到大排序

const arr = [1, 5, 4, 3, 12, 32, 6, 7, 98, 111]
const arr2 = arr.sort((a, b) => a - b )
console.log(arr2); //[1, 3, 4, 5, 6, 7, 12, 32, 98, 111]
（3）从大到小排序

const arr = [1, 5, 4, 3, 12, 32, 6, 7, 98, 111]
const arr2 = arr.sort((a, b) => b - a )
console.log(arr2); //[111, 98, 32, 12, 7, 6, 5, 4, 3, 1]
9、reverse() 反转数组
const arr = [1, 2, 3, 4, 5]
const arr2 = arr.reverse()
console.log(arr2);//[5,4,3,2,1]
10、slice() 截取数组
（1）只有一个参数时

表示从那个数组下标开始截取,slice(2)，从下标为2的开始截取

const arr = [1, 2, 3, 4, 5]
const arr2 = arr.slice(2)
console.log(arr2);//[3,4,5]  返回的是截取的数组
如果是负数

const arr = [1, 2, 3, 4, 5]
const arr2 = arr.slice(-2)
console.log(arr2);//[4,5]
（2）有两个参数时

[2,4) 表示从下标2开始，到下标4之前结束，取不到5，就是下标2到下标3的数据，这里就是开始位置到结束位置

const arr = [1, 2, 3, 4, 5]
const arr2 = arr.slice(2, 4)
console.log(arr2);//[3,4]
负数的话

const arr = [1, 2, 3, 4, 5]
const arr2 = arr.slice(-3, -1)
console.log(arr2);//[3,4]
总结splice和slice的区别

（1）splice是删除数组（返回的是删除的数组），slice是截取数组（返回值是截取的数组）

（2）splice(n,m,k)中n是开始位置，m是删除的长度，k是插入的数据，slice(n,m)中n是开始位置，m是结束位置

（3）splice可以传3个参数，slice只能传2个

11、forEach(callback)
对数组进行遍历，里面的回调函数有三个参数，value是当前的索引值，index是当前索引，array是原数组，三个参数可以任选写入，不必三个都写

const arr = [1, 2, 3, 4, 5]
arr.forEach((value, index, array) => {
    console.log(`value:${value}   index:${index}   array:${array}`);
})
 
//  value:1    index:0     array:1,2,3,4,5
//  value:2    index:1     array:1,2,3,4,5
//  value:3    index:2     array:1,2,3,4,5
//  value:4    index:3     array:1,2,3,4,5
//  value:5    index:4     array:1,2,3,4,5
可以在里面对数组中的数据进行处理

const arr = [1, 2, 3, 4, 5]
arr.forEach((value, index, array) => {
    console.log(`value:${value * 2}`);
})
 
//  value:2
//  value:4
//  value:6
//  value:8
//  value:10
注意返回值问题，forEach是没有返回值的，处理数据时会影响到原数组

var arr = [1,2,3,4]; 
var res = arr.forEach((item,index,arr)=>{     
    arr[index] = item * 2; 
    return arr 
})
console.log(arr); // [2,4,6,8]
console.log(res); // undefined
12、map(callback)
映射数组，言下之意就是可以返回一个新的数组，参数也是三个，value是当前的索引值，index是当前索引，array是原数组，遍历的过程和结果和forEach是完全一样的

const arr = [1, 2, 3, 4, 5]
arr.map((value, index, array) => {
    console.log(`value:${value}   index:${index}   array:${array}`);
})
 
//  value:1    index:0     array:1,2,3,4,5
//  value:2    index:1     array:1,2,3,4,5
//  value:3    index:2     array:1,2,3,4,5
//  value:4    index:3     array:1,2,3,4,5
//  value:5    index:4     array:1,2,3,4,5
不同的是，map()是有返回值的，可以返回一个新的数组，当然在处理原数组时也会发生改变

var arr1 = [1, 2, 3, 4];
var res1 = arr1.map((item, index, arr) => {
    item = item * 3;
    return item;
})
console.log(arr1); // [1,2,3,4]
console.log(res1); // [3,6,9,12]
13、filter(callback)
过滤数组，返回值是满足条件的数组，包含两个参数，value是当前的索引值，index是当前索引

// 返回奇数
const arr = [1, 2, 3, 4, 5, 6, 7]
const newArr1 = arr.filter(value => {
    return value % 2 !== 0
})
 
//简介写法
const newArr2 = arr.filter(value => value % 2 !== 0)
 
console.log(newArr1);//[1，3，5，7]
console.log(newArr2);//[1，3，5，7]
14、every(callback)
根据条件，判断数组中的数据是否全部满足条件，若满足则返回true，否则返回false

const arr = [1, 2, 3, 4, 5, 6, 7]
const arr1 = arr.every(value => value < 3)
const arr2 = arr.every(value => value < 8)
console.log(arr1);//false
console.log(arr2);//true
15、some(callback)
根据条件，判断数组中的数据是否有一个满足条件，若满足则返回true，否则返回false

const arr = [1, 2, 3, 4, 5, 6, 7]
const arr1 = arr.some(value => value < 3)
const arr2 = arr.some(value => value > 8)
console.log(arr1);//true
console.log(arr2);//false
16、reduce(callback,initialValue)
迭代数组的所有项，累加器，数组中的每个值（从左到右）合并，最终计算为一个值

callback中有四个参数

（1）previousValue 必选 --上一次调用回调返回的值，或者是提供的初始值（initialValue）

（2）currentValue 必选 --数组中当前被处理的数组项

（3）index 可选 --当前数组项在数组中的索引值

（4）array 可选 --原数组

initialValue: 可选 --初始值

实行方法：回调函数第一次执行时，preValue 和 curValue 可以是一个值，如果 initialValue 在调用 reduce() 时被提供，那么第一个 preValue 等于 initialValue ，并且curValue 等于数组中的第一个值；如果initialValue 未被提供，那么preValue 等于数组中的第一个值.

不存在初始值时

const arr = [1, 2, 3, 4, 5]
const num = arr.reduce((preValue, curValue) => {
    return preValue + curValue
})
console.log(num);//15
存在初始值时

const arr = [1, 2, 3, 4, 5]
const num = arr.reduce((preValue, curValue) => {
    return preValue + curValue
},10)
console.log(num);//25
以上计算只是reduce的初级用法，下面介绍几个高级例子

//统计次数
let arr = [1, 2, 3, 4, 3, 2, 1, 5, 6, 5, 3, 4, 2, 4, 1]
let arrResult1 = arr.reduce((pre, cur) => {
if (cur in pre) {
    pre[cur]++
} else {
    pre[cur] = 1
}
    return pre
}, {})//相当于pre={}
 
console.log(arrResult1);//{1: 3, 2: 3, 3: 3, 4: 3, 5: 2, 6: 1}
这里需要注意的是对象的使用

const person={}
person[1]=2
console.log(perosn)//{1：2}
// 数组去重
let arr = [1, 2, 3, 4, 3, 2, 1, 5, 6, 5, 3, 4, 2, 4, 1]
let arrResult2 = arr.reduce((pre, cur) => {
if (!pre.includes(cur)) {
    pre.push(cur)
}
    return pre
}, [])//相当于pre=[]
 
console.log(arrResult2);//[1, 2, 3, 4, 5, 6]
17、redeuceRight(callback,initialValue)
与reduce()功能一样，不同的是，reduceRight()从数组的末尾向前将数组中的数组项做累加

const arr = [1, 2, 3, 4, 5]
const num = arr.reduce((preValue, curValue) => {
    return preValue + curValue
})
console.log(num);//15
18、indexOf()
查找某个元素的索引值，若有重复的，则返回第一个查到的索引值若不存在，则返回 -1

const arr = [1, 2, 3, 4, 5, 3]
const num = arr.indexOf(3)
const num2 = arr.indexOf(9)
console.log(num);//2
console.log(num2);//-1
19、lastIndexOf()
与indexOf()的功能一样，不同的是从后往前查找

const arr = [1, 2, 3, 4, 5, 3]
const num = arr.lastIndexOf(3)
const num2 = arr.lastIndexOf(9)
console.log(num);//5
console.log(num2);//-1
20、Array.from()
将伪数组变成数组，就是只要有length的就可以转成数组

const str = "123456"
console.log(Array.from(str));
const obj = { 0: 1, 1: 2, length: 2 }
console.log(Array.from(obj));
转换数组的时候必须要给它添加length

21、Array.of()
将一组值转换成数组，类似于声明数组

const str = '11'
console.log(Array.of(str))// ['11']
22、copyWithin()
在当前数组内部，将制定位置的数组复制到其他位置，会覆盖原数组项，返回当前数组

target --必选 索引从该位置开始替换数组项

start --可选 索引从该位置开始读取数组项，默认为0.如果为负值，则从右往左读。

end --可选 索引到该位置停止读取的数组项，默认是Array.length,如果是负值，表示倒数

（1）只有一个参数时

let arr = [1, 2, 3, 4, 5, 6, 7]
let arr1 = arr.copyWithin(3)
console.log(arr1)   // [1, 2, 3, 1, 2, 3, 4]
其实不难理解

之后口算都可以出结果，比如参数是5，那答案就是[1,2,3,4,5,1,2]

当然参数为负数时更不难理解

假设参数是-4，答案就是[1,2,3,1,2,3,4]，取几个盖几个

（2）有两个参数时

第一个参数是起始位置，第二个参数是结束位置，假设n=1，m=3，意思就是要从2开始替换，替换的元素从4开始，利用[4,5]替换[2,3]

let arr = [1, 2, 3, 4, 5, 6, 7]
let arr2 = arr.copyWithin(1, 3)
console.log(arr2)   // [1, 4, 5, 6, 7, 6, 7]
如果要是简单粗暴的理解

现在也可以练习一下，假设n是2，m是5，那答案就是[1,2,6,7,5,6,7]

但如果要是n=5，m=2，那这个方法就不太好使了，还是得用上面的方法，n是5也就是从6开始替换，替换的元素是3，利用[3,4]替换[6,7]，答案是[1,2,3,4,5,3,4]

（3）有三个参数时

let arr = [1, 2, 3, 4, 5, 6, 7]
let arr3 = arr.copyWithin(1, 2, 4)
console.log(arr3)   // [1, 3, 4, 4, 5, 6, 7]
经过上面的铺垫，这个就好解释了，目标时下标为1的2，替换的数组时下标从2开始到3结束的[3,4]，覆盖[2,3]，答案是[1,3,4,4,5,6,7]

23、find(callback)
找到第一个符合条件的数组成员

参数为value，index，array，老生常谈了

let arr = [1, 2, 3, 4, 5, 6, 7, 1, 2]
const arr1 = arr.find(value => value > 4)
console.log(arr1);//5
24、findIndex(callback)
找到第一个符合条件的数组成员的索引值

let arr = [1, 2, 3, 4, 5, 6, 7, 1, 2]
const arr1 = arr.findIndex(value => value > 4)
console.log(arr1);//4
25、fill()
使用给定的值，填充一个数组，填充完后会改变原数组

（1）只有一个参数时

将数组中的数据全部填充替换

const arr = [1, 1, 1, 1, 1]
const arr2 = arr.fill(5)
console.log(arr2); //[5,5,5,5,5]
（2）有两个参数时

从第二个参数开始后面的全部填充替换

const arr = [1, 1, 1, 1, 1]
const arr2 = arr.fill(5, 2)
console.log(arr2//[1,1,5,5,5]
（3）有三个参数时

第二个参数开始第三个参数结束之间的数字全部填充替换

const arr = [1, 1, 1, 1, 1]
const arr2 = arr.fill(5, 2, 4)
console.log(arr2);//[1,1,5,5,1]
26、includes()
判断数中是否包含给定的值，用的很多

const arr = [1, 2, 3, 4, 5]
const arr2 = arr.includes(3)
console.log(arr2);//true
27 arr.keys()
遍历数组的键名

let arr = [1,2,3,4]
let arr2 = arr.keys()
for (let key of arr2) {
    console.log(key);   // 0,1,2,3
}
28 arr.values()
遍历数组键值

let arr = [1,2,3,4]
let arr1 = arr.values()
for (let val of arr1) {
     console.log(val);   // 1,2,3,4
}
29 arr.entries()
遍历数组的键名和键值

let arr = [1,2,3,4]
let arr1 = arr.entries()
for (let e of arr1) {
    console.log(e);   // [0,1] [1,2] [2,3] [3,4]
}
30 join()
将数组转换成字符串

const arr=[1,2,3,4,5]
console.log(arr.join(',')); // 1,2,3,4,5
总结
1、不包含参数

（1）pop()

（2）shift()

（3）sort()

（4）reverse()

（5）keys()

（6）values()

（7）entries()

（8）join()

2、包含一个参数

（1）push(参数)

（2）unshift(参数)

（3）splice(起始位置)

（4）slice(起始位置)

（5）indexOf(索引值)

（6）lastIndexOf(索引值)

（7）Array.from(字符串)

（8）Array.of(字符串)

（9）includes(参数)

（10）fill(数据)

（11）copyWithin(替换的数据)

3、包含两个参数

（1）splice(起始位置，长度)

（2）slice(起始位置，结束位置) 截取的是[起始位置，结束位置)

（3）fill(数据，起始位置)

（4）copyWithin(替换的数据，起始位置)

4、包含三个参数

（1）splice(起始位置，结束位置，插入的元素)

（2）fill(数据，起始位置，结束位置)

（3）copyWithin(替换的数据，起始位置，结束位置)

5、包含多个参数

（1）concat(参数1，参数2，参数3.....)

6、包含回调函数

（1）forEach()

（2）map()

（3）filter()

（4）every()

（5）some()

（6）reduce()

（7）reduceRight()

（8）find()

（9）findIndex()