JS数组常用方法及示例

70 阅读4分钟
let arr=[1,2],let brr=[3,4]

以下8个是不影响原数组的

1.concat

拼接数组

arr.concat(brr)//[1,2,3,4]

2.join

将数组分割为字符串

arr.join()//不传默认使用','分割 1,2
brr.join("-")//3-4

3.includes

检查数组中是否包含某值,包含返回true,反之返回false

arr.includes(2)//true
arr.includes(3)//false
//vue示例代码 
v-if="[1,2,3,4].includes(xx)"

4.indexOf

返回数组中值第一次出现的索引,没有就返回-1

arr.indexOf(2)//1
arr.indexOf(3)//-1

5.lastIndexOf

返回值最后一次出现的索引,没有就返回-1

brr.lastIndexOf(3)//0
brr.lastIndexOf(5)//-1

6.toString

将数组转成字符串

arr.toString()//'1,2'

7.flat

数组降维(扁平化数组)

let crr= [1,2,[3,4,[5,6]]]
crr.flat(1)//[1,2,3,4,[5,6]]
crr.flat(2)//[1,2,3,4,5,6]
crr.flat(Infinity)//[1,2,3,4,5,6]全部降维(降维打击)

8.slice

截取数组,从索引为第一个参数的位置开始,到索引为第二个参数的位置结束;包含开始,不包含结束[startIndex,endIndex);

let drr=[1,2,3,2,2,9]
const a = drr.slice(1)//[2,3,2,2,9]
const r = drr.slice(2,5)//[3,2,2]
const b = drr.slice(2,9)//[3,2,2,9]
const c = drr.slice(-1)//[9]
const c = drr.slice(-2)//[2,9]

以下7个是影响原数组的

1.push

在数组的末尾添加一个元素

arr.push(3)//[1,2,3]

2.pop

在数组的末尾删除一个元素

arr.pop()//[1]

3.shift

在数组的首部删除一个元素

arr.shift()//[2]

4.unshift

在数组的首部添加一个元素

arr.unshift(6)//[6,1,2]

5.reverse

反转数组的顺序

arr.reverse()//[2,1]

6.sort

排序

const arr=[8,1,5,3]
arr.sort((a,b)=>a-b)//[1,3,5,8]升序
arr.sort((a,b)=>b-a)//[8,5,3,1]降序

7.splice

添加/删除/替换数组元素 const r=arr.splice(index,num,item,...itemx)//第一个参数index是必需的,是数组元素的下标,从index开始添加/删除,必须是数字;第二个参数是可选的,必须是数字,规定删除多少元素,可以是0(替换);第三个参数是要添加到数组的新元素

const arr=[1,2,3,4,5]
const r = arr.splice(2)//r[3,4,5],arr[1,2]
const r=arr.splice(2,0)//arr[1,2,3,4,5]r[]
const r=arr.splice(2,1)//arr[1,2,4,5]r[3]
const r=arr.splice(2,0,'n','b')//arr[1,2,'n','b',3,4,5]r[]
const r=arr.splice(2,2,'n','b')//arr[1,2,'n','b',5]r[3,4]
const r=arr.splice(2,2,'n','b','a')//arr[1,2,'n','b','a',5]r[3,4]
const r=arr.splice(-1)//arr[1,2,3,4]r[5]
const r=arr.splice(-2,0,'m','n')//arr[1,2,3,'m','n',4,5]r[]
const r=arr.splice(-2,1,'m','n')//arr[1,2,3,'m','n',5]r[4]
const r=arr.splice(-2,>=2,'m','n')//arr[1,2,3,'m','n']r[4,5]

以下是部分遍历数组的方法

1.forEach

循环数组, 传入数组的值或索引,这个方法没有返回值

const r=arr.forEach((v,i)=>{
console.log(v,i)//1,0;2,1
})
console.log(r)//undefined

2.map

循环数组,传入数组的值或索引, 返回一个新数组(里面是return的值)

const r=arr.map((v,i)=>i)
console.log(r)//[0,1]

3.filter

循环数组,过滤数组, 传入数组的值或索引, 返回一个新数组(只会把满足条件的装进去).

const r=brr.filter((v,i)=>v>3)
console.log(r)//[4]

4.every

循环数组,每一项都满足条件,才返回true, 否则返回false

const r=brr.every((v,i)=>v>3)//false
const r=brr.every((v,i)=>v<5)//true 

5.some

循环数组,有一项满足条件,就返回true, 全都不满足则返回false

const r=brr.some((v,i)=>v>3)//true
const r=brr.some((v,i)=>v>5)//false

6.find

循环数组,找到满足条件的第一个元素的值,都没有满足条件则返回undefined

const r=brr.find((v,i)=>v>3)//4
const r=brr.find((v,i)=>v>4)//undefind

7.findIndex

循环数组,找到满足条件的第一个元素的索引,都没有满足条件则返回-1

const r=brr.findIndex((v,i)=>v>3)//1
const r=brr.find((v,i)=>v>4)//-1

7.reduce

reduce()方法对数组中的每个元素执行一个由自己提供的回调函数(升序执行),将其结果汇总为单个返回值

array.reduce(callback(prev,cur,index,arr),[initialValue])
//reduce接收两个参数,第二个是默认值initialValue,可以不传,传则作为第一次调用callback的第一个参数,第一个参数是一个回调函数,有四个参数:
//prev 上次调用回调函数的返回值,如果initialValue没传,则prev当作初始值
//cur 数组中当前要被处理的元素
//index 当前元素在数组中的索引
//arr 调用reduce的数组
const arr=[1,5,5,8,3]
const sum=arr.reduce((prev,cur)=>prev+cur,0)//24 求和求积
const max=arr.reduce((prev,cur)=>prev>cur?prev:cur)//8 求最大/小值
let brr=arr.reduce((prev,cur)=>{
if(!prev.includes(cur)){
    return prev.concat(cur)
}
else{
return prev
}
},[])
console.log(brr);//[1,5,8,3]//数组去重
const str="ababca"
const s = str.split("").reduce((prev,cur)=>{
        prev[cur] ? prev[cur]++ : prev[cur]=1
        return prev
    },{})
console.log(s);//{a:3,b:2,c:1}//判断某值出现的次数