JS数组的常用方法

一、改变原数组的方法

1、push()末尾添加数据

语法：数组名.push(数据)

作用：往数组末尾添加数据

返回值：添加数据后数组的长度

let arr=[10,20,30,40]
let res=arr.push(50)
console.log(arr)//[10,20,30,40,50]
console.log(res)//5

2、pop()末尾删除数据

语法：数组名.pop()

作用：从数组的末尾删除一个数据

返回值：删除的那个数据

 let arr=[10,20,30,40,50]
 let res=arr.pop()
 console.log(arr)//[10,20,30,40]
 console.log(res)//50

3、unshift()头部添加数据

语法：数组名.unshift(数据)

作用：在数组的头部添加数据

返回值：数组的长度

let arr=[10,20,30,40]
let res=arr.unshift(50)
console.log(arr)//[50,10,20,30,40]
console.log(res)//5

4、shift()头部删除数据

语法：数组名.shift()

作用：头部删除一个数据

返回值：删除掉的那个数据

let arr=[10,20,30,40,50]
let res=arr.shift()
console.log(arr)//[20,30,40,50]
console.log(res)//10

5、reverse()翻转数组

语法：数组名.reverse()

作用：用来翻转数组的

返回值：翻转完成后的数组

let arr=[10,20,30,40,50]
let res=arr.reverse()
console.log(arr)//[50,40,30,20,10]
console.log(res)//[50,40,30,20,10]

6、sort()排序

语法一：数组名.sort()  会按照位排序

语法二：数组名.sort(function(a,b){return a-b})  会正序排序

语法三：数组名.sort(function(a,b){return b-a})  会倒序排序

返回值：排序完成后的数组

//语法一:
let arr1=[1,3,11,5,7,51]
let res1=arr1.sort()
console.log(res1)//[1,11,3,5,51,7]
console.log(arr1)//[1,11,3,5,51,7]
//语法二:
let arr2=[1,3,11,5,7,51]
let res2=arr2.sort(function(a,b){return a-b})
console.log(res2)//[1,3,5,7,11,51]
console.log(arr2)//[1,3,5,7,11,51]
//语法三:
let arr3=[1,3,11,5,7,51]
let res3=arr3.sort(function(a,b){return b-a})
console.log(res3)//[51,11,7,5,3,1]
console.log(arr3)//[51,11,7,5,3,1]

7、splice()截取数组

语法一：数组名.splice(开始索引，多少个)

作用：用来截取数组的

返回值：返回一个新数组，内容为截取的数据

语法二：数组名.splice(开始索引，多少个，插入的数据)

作用：删除并插入数据

注意：从你的开始索引起

返回值：返回一个新数组，内容为截取的数据

//语法一:
let arr1=[10,20,30,40,50]
let res1=arr1.splice(1,2)
console.log(arr1)//[10,40,50]
console.log(res1)//[20,30]
//语法二:
let arr2=[10,20,30,40,50]
let res2=arr2.splice(1,2,66,77)
console.log(arr2)//[10,66,77,40,50]
console.log(res2)//[20,30]

二、不改变原数组的方法

1、concat()合并数组

语法：数组名.concat(数据)

作用：合并数组

返回值：一个新数组

let arr=[10,20,30,40,50]
let res=arr.concat(60,70)
console.log(arr)//[10,20,30,40,50]
console.log(res)//[10,20,30,40,50,60,70]

2、join()数组转字符串

语法：数组名.join("连接符")

作用：把一个数组转成字符串

返回值：转好的字符串

let arr=[10,20,30,40,50]
let res=arr.join("-")
console.log(arr)//[10,20,30,40,50]
console.log(res)//10-20-30-40-50

3、slice()截取数组的一部分数据

语法：数组名.slice(开始索引，结束索引)

作用：截取数组中的一部分数据

返回值：把截取出来的数据放到一个新数组中

注意：包含开始索引不包含结束索引

let arr=[10,20,30,40,50,60,70]
let res=arr.slice(1,4)
console.log(arr)//[10,20,30,40,50,60,70]
console.log(res)//[20, 30, 40]

4、indexOf()从左检查数组中有没有这个值

语法一：数组名.infexOf(查询的数据)

作用：检查数组中有没有这个数据

如果有就返回第一次出现的索引

没有则返回-1

语法二：数组名.indexOf(要查询的数据，开始索引)

// 语法一
let arr1=[10,20,30,10,20,30]
let res1=arr1.indexOf(30)
console.log(arr1)//[10, 20, 30, 10, 20, 30]
console.log(res1)//2
//语法二
let arr2=[10, 20, 30, 10, 20, 30]
let res2=arr2.indexOf(30,3)
console.log(arr2)//[10, 20, 30, 10, 20, 30]
console.log(res2)//5

5、lastIndexOf()从右检查数组中有没有这个值

语法一：数组名.lastIndexOf(要查询的数据)

作用：检查数组中有没有这个数据

如果有就返回第一次出现的索引

没有则返回-1

语法二：数组名.lastIndexOf(要查询的数据，开始索引)

// 语法一
let arr1=[10,20,30,10,20,30]
let res1=arr1.lastIndexOf(30)
console.log(arr1)//[10, 20, 30, 10, 20, 30]
console.log(res1)//5
//语法二
let arr2=[10, 20, 30, 10, 20, 30]
let res2=arr2.lastIndexOf(30,3)
console.log(arr2)//[10, 20, 30, 10, 20, 30]
console.log(res2)//2

三、ES6新增数组的方法

1、forEach()循环遍历数组

语法：数组名.forEach(function(item,index,arr){})

item：表示数组中的每一项

index：表示每一项对应的索引

arr：表示原数组

作用：用来循环遍历数组

let arr=[10,20,30,40,50]
arr.forEach(function(item,index,arr){
    console.log(item+'---'+index+'---'+arr)
})

2、map()映射数组

语法：数组名.map(function (item,index,arr) {})

item：表示数组中的每一项

index：表示每一项对应的索引

arr：表示原数组

作用：用来映射数组

返回值：映射完毕的数组

let arr=[10,20,30,40,50]
let res=arr.map(function(item,index,arr){
    return item*item
})
console.log(res)//[100, 400, 900, 1600, 2500]

3、filter()过滤数组

语法：数组名.filter(function (item,index,arr) {})

item：表示数组中的每一项

index：表示每一项对应的索引

arr：表示原数组

作用：用来过滤数组

返回值：如果有就过滤出符合条件的数据，保存到一个新数组中；如果没有就返回空数组

let arr=[10,20,30,40,50]
let res=arr.filter(function(item,index,arr){
    return item>=30
})
console.log(res)//[30, 40, 50]

4、every()判断数组每一项是不是都满足条件

语法: 数组名.every(function (item,index,arr) {})

item：表示数组中的每一项

index：表示每一项对应的索引

arr：表示原数组

作用：判断数组的每一项是不是都满足条件

返回值：是一个布尔值

数组每一项都满足条件返回true

只要有一个不满足条件返回false

let arr=[10,20,30,40,50]
let res=arr.every(function(item,index,arr){
    return item>0
})
console.log(res)//true

5、some()数组中有没有满足条件的

语法: 数组名.some(function (item,index,arr) {})

item：表示数组中的每一项

index：表示每一项对应的索引

arr：表示原数组

作用：判断数组中的有没有符合条件的

返回值：是一个布尔值

数组中有一个满足条件的返回true

全部都不满足条件返回false

let arr=[10,20,30,40,50]
let res=arr.some(function(item,index,arr){
    return item>30
})
console.log(res)//true

6、find()获取数组中第一个满足条件的数据

语法: 数组名.find(function (item,index,arr) {})

item：表示数组中的每一项

index：表示每一项对应的索引

arr：表示原数组

作用：获取第一个满足条件的数据

返回值：满足条件的第一个数据；如果没有就是undefined

let arr=[10,20,30,40,50]
let res=arr.find(function(item,index,arr){
    return item>30
})
console.log(res)//40

7、reduce()叠加后的效果

语法: 数组名.reduce(function (prev,item,index,arr) {},初始值)

prev :一开始就是初始值 当第一次有了结果以后；这个值就是第一次的结果

item : 这个表示的是数组中的每一项

index : 这个表示的是每一项对应的索引

arr : 这个表示的是原数组

作用：用来叠加数组中的每一项

返回值：叠加后的结果

let arr=[10,20,30,40,50]
let res=arr.reduce(function(prev,item,index,arr){
    return prev+=item
},1)
console.log(res)//151