JS数组常用方法

Array API

属性：

Array.length

该属性会返回该数组的长度

方法：

1、concat()

作用：连接两个或多个数组，不会改变原来的数组。

参数：concat(val,val,val,…)，参数可以是一个数组名，也可以直接是数组的形式

语法：array.concat(val,val,…)

返回值：该方法会返回数组连接后的一个新的数组

例如：

let arr=[1,2,3]
let arr2=[4,5,6]
let newArr=arr.concat(arr2,[7,8,9])
console.log(newArr)
//output  [1,2,3,4,5,6,7,8,9]

2、copyWithin()

作用：复制该数组的一部分到数组中的另一个位置，该方法会改变原来数组的内容，但长度不变。

参数：copyWithin(target,start,end)，复制从数组的start索引位置开始，到end索引位置结束的元素到数组target索引位置，复制的元素包含索引start，不包含索引end。该方法不会改变数组的长度。

• 参数的个数为一个时copyWithin(target)，复制的元素为从数组开始到结束，包含结束位置；
• 参数的个数为两个时copyWithin(target,start)，复制的元素为从start索引开始到数组的结束，包含结束位置。
• 如果target、start或end为负数，则从数组末尾开始计数。

语法：array.copyWithin(target,start,end)

返回值：返回改变后的数组

例如：

let arr=[1,2,3,4,5,6]
console.log(arr.copyWithin(0,1,2))
//output Array[2,2,3,4,5,6]
//注意此时的array数组已经变为[2,2,3,4,5,6]
console.log(arr.copyWithin(3))
//output Array[2,2,3,2,2,3]
//array=[2,2,3,2,2,3]
console.log(arr.copyWith(2,4))
//output Array[2,2,2,3,2,3]
console.log(arr.copyWith(-2))
//output Array[2,2,2,3,2,2]

3、every()

作用：测试这个数组中是否每个元素都满足every()中提供的函数。

参数：every(function(element,index,array ){ //函数主体})

• 参数element，表示测试的当前值

• 参数index，表示测试的当前值的索引，可选

• 参数array，表示当前调用every()的数组，可选

语法：array.every(函数)

返回值：返回一个布尔值

例如：

let arr=[5,6,8,12,36,42,9]
function isMoreThanTen(ele,index,arr){
    return ele>=10
}
console.log(arr.every(isMoreThanTen))
//output false
let res=arr.every(function(ele,index,arr){
                  return ele<=50
                  })
console.log(res)
//output true

//箭头函数表示法
console.log(arr.every(ele => ele<=10))
//output false

4、fill()

作用：用一个固定的值填充从开始索引值到结束索引值，不包含结束索引值

参数：fill(value,start,end)

• 参数value，表示要填充的值
• 参数start，表示开始填充位置的索引值，可以为负值，从数组尾部开始计数
• 参数end，表示结束填充位置的索引值，可以为负值，从数组尾部开始计数
• 注意当start或者end为负值时，起始索引不能大于结束索引

语法：array.fill(value,start,end)

返回值：修改后的数组

例子：

let arr=[1,2,3,4,5]
let newArr=arr.fill(0,1,3)
console.log(newArr)
//output Array[1,0,0,4,5]
console.log(arr.fill(2,-3,-1))
//output Array[1,0,2,2,5]
console.log(arr.fill(3,-3))
//output Array[1,0,3,3,3]

5、filter()

作用：过滤数组中不满足filter()提供的函数的元素，返回一个新的满足函数条件的数组

参数：filter(function(element,index,array,thisArg){//函数主体 })

• 参数element，表示数组中每个处理的元素
• 参数index，表示被处理元素的索引，可选
• 参数array，表示调用filter()的数组，可选
• 参数thisArg，表示执行函数时用于this的值，可选

语法：array.filter(执行函数)

返回值：返回一个新的满足函数条件的数组

例如：

let arr=[5,6,10,13,1,5,20]
console.log(arr.filter(function(ele){return ele>10}))
//output Array[13,20]

//箭头函数写法
console.log(arr.filter(ele => ele<10))
//output Array[5,6,1,5]

6、find()

作用：找到数组中第一个满足函数条件的元素

参数：find(function(element,index,array){ })

• 参数element，表示数组中正在处理的元素
• 参数index，表示被处理元素的索引，可选
• 参数array，表示调用find()的数组，可选

语法：array.find(函数)

返回值：返回第一个满足函数条件的元素的值，如果没有则返回undefined

例如：

let let arr=[5,6,10,13,1,5,20]
console.log(arr.find(function(ele){return ele>10}))
//output 13

//箭头函数写法
console.log(arr.find(ele => ele<10))
//output 5
console.log(arr.find(ele => ele>20))
//output undefined

另外还有一个方法findIndex()，该方法是找出数组中第一个满足函数条件的元素的索引值，注意是索引值又叫做下标值，使用方法和参数与find()一致，只是输出结果不同。当找不到时会返回-1

例如：

let let arr=[5,6,10,13,1,5,20]
console.log(arr.findIndex(function(ele){return ele>10}))
//output 3

//箭头函数写法
console.log(arr.findIndex(ele => ele<10))
//output 0
console.log(arr.findIndex(ele => ele>20))
//output -1

7、flat()

作用：将一个数组中的子数组按深度遍历，并将遍历的元素与子数组合并为一个新的数组。说白了就是把数组中的子数组的数组中括号去掉，深度为多少就去掉几层的中括号

参数：flat(depth)，默认深度为1

语法：array.flat(深度值)

返回值：返回一个新的数组，其中包含数组与子数组的所有元素

例如：

let arr=[1,2,3,[4,5,[6,[7,8]]]]
console.log(arr.flat())
//output Array[1,2,3,4,5,[6,[7,8]]]
console.log(arr.flat(2))
//output Array[1,2,3,4,5,6,[7,8]]
console.log(arr.flat(3))
//output Array[1,2,3,4,5,6,7,8]

8、forEach()

作用：遍历数组中的每个元素并让它们执行一次给定的函数

参数：forEach(function(currentValue,index,array){ //函数主体})

• 参数currentValue，表示数组中正在处理的元素
• 参数index，表示被处理元素的索引，可选
• 参数array，表示调用find()的数组，可选

语法：array.forEach(函数)

返回值：undefined

例如：

let arr=[1,2,3,4,5,6]
arr.forEach(function(ele,index){
    console.log('arr'+'['+index+']='+(ele+1))
})
//output
//"arr[0]=2"
//"arr[1]=3"
//"arr[2]=4"
//"arr[3]=5"
//"arr[4]=6"
//"arr[5]=7"

9、includes()

作用：判断该数组是否包含参数所表示的某个元素

参数：includes(value,index)

• 参数value，表示需要查找的元素
• 参数index，表示从index处索引开始查找是否有value，如果为负数则从数组末尾开始查找，可选参数

语法：array.includes(value,index)

返回值：如果查找到含有value，则返回true，反之则false

例如：

let arr=['a','c','d','f','g']
console.log(arr.includes('a'))
//output true
console.log(arr.includes('a',1))
//output false

10、indexOf()

作用：找到参数给定的一个元素的第一个索引值，注意是该参数的第一个索引

参数：indexOf(value,index)

• 参数value，表示需要查找的值
• 参数index，表示从哪一个索引位置开始查找，负数表示从数组末尾开始计数，但是查找的顺序依然是从左向右，例如索引值为-2，意味着从数组倒数第二个位置开始向右查找。可选参数

语法：array.indexOf(value,index)

返回值：如果查找到存在第一个元素，就返回这个元素的索引值，不存在则返回-1

例如：

let arr=['a','b','c','t','a','b']
console.log(arr.indexOf('a'))
//output 0
console.log(arr.indexOf('a',1))
//output 4
console.log(arr.indexOf('a',-3))
//output 4
console.log(arr.indexOf('c',-3))//不存在
//output -1 

另外还有一个方法lastIndexOf()，作用是查找数组中该参数最后一次出现的索引值，并返回该索引值，如果不存在则返回-1

11、isArray()

作用：判断参数是否是一个数组

参数：isArray(obj)，obj为需要检测的值

语法：Array.isArray(obj)，注意这里Array是JavaScript的内置对象，不是自己定义的数组

返回值：是一个数组返回true，反之返回false

例如：

console.log(Array.isArray('abcd'))
//output false
console.log(Array.isArray([]))
//outout true
console.log(Array.isArray({id:1234}))
//output false
console.log(Array.isArray([1,2,3]))
//output true

12、join()

作用：将数组中的元素连接成一个字符串

参数：当没有参数时默认以,号分隔，有参数时按照参数给定的样式分隔字符

语法：array.join(参数)

返回值：返回一个字符串，如果数组长度为0则返回一个空字符串

例如：

let arr=['a','b','c','d','e']
console.log(arr.join())
//output "a,b,c,d,e"
console.log(arr.join(''))
//output "abcde"
console.log(arr.join('-'))
//output "a-b-c-d-e"

13、pop()

作用：删除数组最后一个元素，并返回它的值，会改变数组的长度

参数：无

语法：array.pop()

返回值：返回数组中被删除的最后一个元素，当数组为空时返回undefined

例如：

let arr=[1,2,3,4,5,6]
console.log(arr.pop())
//output 6
console.log(arr)
//output Array[1,2,3,4,5]

14、push()

作用：向数组的尾部添加一个元素或多个元素，返回一个新的数组长度

参数：push(val1,vla2,…)

• 参数val，表示添加到数组末尾的值

语法：array.push(val1,val3,…)

返回值：返回新的数组的长度

例如：

let arr=[1,2,3,4,5]
console.log(arr.push(6,7,8))
//output 8
console.log(arr)
//output Array[1,2,3,4,5,6,7,8]

15、reduce()

作用：让数组中的每个元素一次执行里面的函数，并将结果汇总返回

参数：reduce(函数,firstValue)

• 函数function(total,currentValue,index,array){}
• 参数total，表示累计的值
• 参数currentValue，表示当前正在处理的值
• 参数index，表示当前正在处理值的下标，可选值
• 参数array，表示调用reduce()的数组，可选值
• 参数firstValue，表示执行函数的第一个值，如果不设置就以数组的第一个元素

语法：array.reduce(function(total,currentValue,index,array),firstValue)

返回值：返回一个累计值total

例如：

let arr=[1,2,3,4]
let total=arr.reduce(function(total,curr){
    return total+curr
})
console.log(total)
//output 10

//指针函数写法
console.log(arr.reduce((total,curr)=>total+curr,10))
//output 20

另外还有有一个方法reduceRight()，它的用法和reduce()用法一样，只不过reduceRight()是按数组元素从右向左累计

例如：

let arr = ['0', '1', '2', '3', '4', '5'].reduceRight(
  (total, currentValue) => total+currentValue
);
console.log(arr);
//output: "54321"

16、reverse()

作用：将数组数顺序颠倒，会改变原来的数组内容

参数：无

语法：array.reverse()

返回值：返回颠倒后的数组

例如：

let arr=[1,2,3,4,5,6]
console.log(arr.reverse())
//ouput Array[6,5,4,3,2,1]
console.log(arr)
//ouput Array[6,5,4,3,2,1]

17、shift()

作用：删除数组的第一个元素，删除后的数组长度会发生变化

参数：无

语法：array.shift()

返回值：从数组中删除的元素，如果数组为空则返回undefined

例如：

let arr=[1,2,3,4,5,6]
console.log(arr.shift())
//output 1
console.log(arr)
//output Array[2,3,4,5,6]

18、unshift()

作用：添加一个或多个元素到数组头部，添加后会改变原来的数组

参数：unshift(val1,val2,…)

• 参数val,表示添加的到数组头部的元素

语法：array.unshift(val1,val2,…)

返回值：会返回添加元素后数组的长度

例如：

let arr=[1,2,3]
console.log(arr.unshift(4,5,6))
//output 6
console.log(arr)
//output Array[4,5,6,1,2,3]

19、slice()

作用：截取数组中的一小段元素，返回一个新的数组

参数：slice(start,end)

• 参数start，截取的数组元素的起始索引，可选参数
• 参数end，截取的数组元素的结束位置，可选参数
• 截取的元素包含起始位置的元素，不包含结束位置的元素
• 当只有一个参数时，这个参数代表起始索引，截取的元素从起始索引到数组末尾，包含数组的最后一个元素
• 当没有参数的时候，默认截取整个数组
• 参数可以为负值，为负值时表示从数组末尾开始计数

语法：array.slice(start,end)

返回值：返回一个新的含有截取的元素的数组

例如：

let arr=['a','b','c','d','e','f']
console.log(arr.slice(1,3))
//output Array['b','c']
console.log(arr.slice())
//output Array['a','b','c','d','e','f']
console.log(arr.slice(-2))
//output Array['e','f']
console.log(arr.slice(-2,-1))
//output Array['e']

20、some()

作用：测试数组里的元素是不是有至少一个满足该方法参数提供的函数

参数：some(函数)

• 函数function(element,index,array)有三个参数
• 参数element，表示正在被处理的元素的值
• 参数index，表示正在被处理的元素的索引，可选参数
• 参数array，表示调用some()的数组，可选参数

语法：array.some(function(element,index,array){})

返回值：如果有至少一个元素满足函数则返回true，反之则返回false

例如：

let arr=[5,11,12,20,16]
console.log(arr.some(function(ele){
    return ele<10
}))
//output true

//指针函数写法
console.log(arr.some((ele)=>ele>20))
//output false

21、sort()

作用：按照参数函数的方法排序,如果没有参数则按照UTF-16字典顺序排序

参数：sort(函数)

语法：sort(function(firstValue,secondValue){ })

返回值：排好序的数组，原来数组已经改变

例如：

let arr=['acd','abd','c','ca']
console.log(arr.sort())
//output Array['abd','acd,'c','ca']
let arr1=[2,100,1,12,6]
console.log(arr1.sort())
//output Array[100,1,12,2,6]

//从小到大排序
console.log(arr1.sort(function(a,b){
    return a-b
}))
//output Array[1,2,6,12,100]
//从大到小排序
console.log(arr1.sort(function(a,b){
    return b-a
}))
//output Array[100,12,6,2,1]

22、splice()

作用：删除数组中指定位置的一个或多个元素，并添加一个或多个元素

参数：splice(start,count,item1,item2,…)

• 参数start，表示删除元素的起始索引
• 参数count，表示从start位置开始删除多少个元素，可选参数
• 参数item，表示要添加的元素，不指定添加元素，则就只删除元素，可选参数

语法：array.splice(start,count,item1,item2,…)

返回值：返回一个新数组，里面包含所有删除的元素，没有删除元素就返回一个空数组

例如：

let arr=['a','b','c','d','e','f']
console.log(arr.splice(1,2))
//output Array['b','c']
console.log(arr)
// output Array ["a", "d", "e", "f"]
console.log(arr.splice(1,1,'b','c'))
//output Array['d']
console.log(arr)
//output Array ["a", "b", "c", "e", "f"]

23、toString()

作用：将数组转化为一个字符串，注意转化的字符串里包含数组元素间的分隔逗号

参数：无

语法：array.toString()

返回值：返回一个字符串

例如：

let arr=[1,2,3,4,5,6]
console.log(arr.toString())
//output "1,2,3,4,5,6"