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"

posted @ 2021-08-24 08:58 东方初白阅读(16) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JS数组去重

· 分割URL中的查询字符串

· JavaScript 数组中的常用方法数组方法

· JS 数组方法

· JS数组的常用方法

阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

东方初白

JS数组常用方法

目录

Array API

属性：

Array.length

方法：

1、concat()

2、copyWithin()

3、every()

4、fill()

5、filter()

6、find()

7、flat()

8、forEach()

9、includes()

10、indexOf()

11、isArray()

12、join()

13、pop()

14、push()

15、reduce()

16、reverse()

17、shift()

18、unshift()

19、slice()

20、some()

21、sort()

22、splice()

23、toString()