最全的JavaScript常见的操作数组的函数方法宝典,不收藏绝对后悔

JavaScript在其内部封装了一个Array对象,使得我们可以方便地使用数组这种简单的数据结构,同时,也在 Array对象的原型上定义了一些常用并且很有用的操作数组的函数。

一、引言

二、数组方法

函数作用
join()将数组中所有元素都转化为字符串连接在一起
sort()将数组中的元素排序
reverse()将数组中的元素颠倒顺序
concat()将多个数组或数连接起来,组成一个新的数组
slice()返回指定数组的一个片段或子数组
splice()在数组指定位置插入或删除元素
push()在数组的尾部添加一个或多个元素
pop()删除数组的最后一个元素,并返回该元素
unshift()在数组的头部添加一个或多个元素
shift()删除数组第一个元素,并返回该元素
toString()返回将数组每个元素转化为字符串并用逗号分隔连接起来的字符串
forEach()从头至尾遍历数组,为每个元素调用指定的函数
map()将调用的数组的每个元素传递给指定的函数,并返回一个数组
filter()根据回调函数内的逻辑判断过滤数组元素,并返回一个新的数组
every()对数组元素应用指定的函数进行判断,返回true或false
some()对数组元素应用指定的函数进行判断,返回true或false
reduce()使用指定的函数将数组元素进行组合
reduceRigth()使用指定的函数将数组元素进行组合
indexOf()判断一个数在该数组中的索引位置
lastIndexOf()判断一个数在该数组中的索引位置
find()遍历数组,找出第一个符合回调函数的元素
findIndex()遍历数组,找出第一个符合回调函数的元素的索引
fill()用于填充数组
includes()判断一个数是否在该数组中

1、join()

var arr = [1, 2, 3, 4]
​
arr.join()              //返回 "1,2,3,4"
​
arr.join('-')           //返回 "1-2-3-4"
复制代码

2、sort()

var arr = ['cherry', 'apple', 'banana']
​
arr.sort()           //未传入回调函数作为参数
​
console.log(arr)     //返回  ['apple', 'banana', 'cherry']
复制代码
var arr = [54, 78, 12, 64]
​
arr.sort(function (a, b) {
    return a - b
})
​
console.log(arr)        //返回  [12, 54, 64, 78]  升序排列
复制代码
var arr = [54, 78, 12, 64]
​
arr.sort(function (a, b) {
    return b - a
})
​
console.log(arr)        //返回  [78, 64, 54, 12]  降序排列
复制代码

3、reverse()

var arr = [54, 78, 12, 64]
​
arr.reverse()
​
console.log(arr)       //返回  [64, 12, 78, 54]
复制代码

4、concat()

var arr = [1,2,3,4]
​
var new_arr = arr.concat()
​
console.log(new_arr)       //返回  [1,2,3,4]
复制代码
var arr = [1,2,3,4]
​
var new_arr = arr.concat(5,6,7,8)
​
console.log(new_arr)     //返回  [1,2,3,4,5,6,7,8]
复制代码
var arr = [1,2,3,4]
​
var new_arr = arr.concat([5,6,7,8])
​
console.log(new_arr)     //返回  [1,2,3,4,5,6,7,8]
复制代码
var arr = [1,2,3,4]
​
var new_arr = arr.concat([5,6,7,8,[9,10]])
​
console.log(new_arr)     //返回  [1,2,3,4,5,6,7,8,[9,10]]
复制代码

5、slice()

var arr = [1,2,3,4,5,6,7]
​
arr.slice(1,3)                //返回  [2,3]
arr.slice(3)                  //返回  [4,5,6,7]
arr.slice(4,-1)               //返回  [5,6]
arr.slice(-3)                 //返回  [5,6,7]
arr.slice(-3,-2)              //返回  [5]
复制代码

6、splice()

var arr = [1,2,3,4,5,6,7]
​
arr.splice(4)             //返回 [5,6,7],此时arr为[1,2,3,4]
​
arr.splice(1, 2)          //返回 [2,3],此时arr为[1,4]
​
arr.splice(1, 0, 'new1', 'new2') //返回[],此时arr为[1,'new1','new2',4]
复制代码

7、push()

var arr = []
​
arr.push(1)       //返回 1, 此时arr为 [1]
​
arr.push(5)       //返回 2, 此时arr为 [1,5]
​
arr.push(3,2)     //返回 4, 此时arr为 [1,5,3,2]
复制代码

8、pop()

var arr = [6,8,7]
​
arr.pop()          //返回 7, 此时arr为 [6,8]
​
arr.pop()          //返回 8, 此时arr为 [6]
复制代码

9、unshift()

var arr = []
​
arr.unshift(1)       //返回 1, 此时arr为 [1]
​
arr.unshift(5)       //返回 2, 此时arr为 [5,1]
​
arr.unshift(3,2)     //返回 4, 此时arr为 [2,3,5,1]
复制代码

10、shift()

var arr = [6,8,7]
​
arr.shift()          //返回 6, 此时arr为 [8,7]
​
arr.shift()          //返回 8, 此时arr为 [7]
​
arr.shift()          //返回 7, 此时arr为 []
复制代码

11、toString()

[1,2,3].toString()              //返回 '1,2,3'
​
['cherry','apple','bannana'].toString()    //返回 'cherry,apple,banana'
​
[1,2,[6,7]].toString()          //返回 '1,2,6,7'
​
[1,[3,6,[8,9]]].toString()      //返回 '1,3,6,8,9'
复制代码

12、forEach()

var a = [1,2,3,4,5]
​
a.forEach(function (value, index, arr) {
    arr[index] = value + 2
})
​
console.log(a)          // [3,4,5,6,7]
复制代码
var a = [1,2,3,4,5]
var sum = 0
​
a.forEach(function(value) {
  sum += value
})
​
console.log(sum)       // 15
复制代码

13、map()

var arr = [1,2,3,4,5]
​
var new_arr = arr.map(function (value) {
    return value * value
})
​
console.log(new_arr)      //  [1, 4, 9, 16, 25]
复制代码

14、filter()

var arr = [6, 12, 7, 1, 9, 3, 0, 19]
​
var new_arr = arr.filter(function (value) {
    return value < 6
})
​
console.log(new_arr)        // [1, 3, 0]
复制代码
var arr = [6,12,7,1,9,3,0,19]
​
var new_arr = arr.filter(function (value, index) {
    return index % 2 === 0
})
​
console.log(new_arr)       // [6, 7, 9, 0]
复制代码

15、every()

var arr = [1,2,3,4,5,6,7,8]
​
var result = arr.every(function (value) {
    return value < 10
})
​
console.log(result)          // true, 表示该数组所有元素都小于10
复制代码
var arr = [1, 2, 3, 4, 5, 6, 12, 8]
​
var result = arr.every(function (value) {
    return value < 10
})
​
console.log(result)       // false, 表示该数组中有某个元素不小于10
复制代码

16、some()

some()`方法跟`every()`方法类似,只是逻辑判断略有不同,前者是当**每个元素**调用回调函数后的返回值中,只要有一个为`true`,则最终返回`true`;反之,只有当**每个元素**调用回调函数后的返回值**全部都**为`false`时,最后才返回`false
var arr = [3, 8, 9, 45, 12]
​
var result = arr.some(function (value) {
    return value === 12
})
​
console.log(result)      // true, 表示该数组中有元素12
复制代码
var arr = [3, 8, 9, 45]
​
var result = arr.some(function (value) {
    return value === 12
})
​
console.log(result)      // false, 表示该数组中并没有元素12
复制代码

17、reduce()

var arr = [1,2,3,4,5,6]
​
var result = arr.reduce(function (x, y) {
    return x * y
})
​
console.log(result)          // 720
复制代码
var arr = [10, 11, 13, 14, 12]
​
var result = arr.reduce(function (x, y) {
    return x + y
}, 29)         //这里将老师的年龄29作为reduce()方法的第二个参数
​
console.log(result)             // 89
复制代码

18、reduceRight()

19、indexOf()

var arr = ['小红', '小明', '张三', '李四', '王五']
​
var index = arr.indexOf('张三') + 1
​
console.log(index)          // 3, 表示张三成绩排名第三
复制代码
var arr = ['张三', '小红', '小明', '张三', '李四', '王五']
​
//给indexOf()方法的第二个参数赋值1,表示从数组的第二个元素开始找
var index = arr.indexOf('张三', 1) + 1 
​
console.log(index)          // 4, 表示成绩差点的张三排名第四
复制代码
var arr = ['小红', '小明', '张三', '李四', '王五']
​
var index = arr.indexOf('小王')
​
if(index === -1) {
    console.log('false')
}
else {
    console.log('true')
}
​
//  false
复制代码

20、lastIndexOf()

21、find()

var arr = [1, 7, 3, 10, 12, 20]
​
var result = arr.find(function (value) {
    return value > 10
})
​
console.log(result)   // 12, 表示数组中找到的第一个比10大的元素为12
复制代码

22、findIndex()

var result = [3, 4, 10, 8, 9, 0].findIndex(function (value) {
    return value > 9
})
​
console.log(result)   // 2,表示该数组中第一个大于9的元素索引为2
复制代码

23、fill()

[1,2,3,4,5].fill(6)         //返回 [6, 6, 6, 6, 6]
​
[1,2,3,4,5].fill(6, 2)      //返回 [1, 2, 6, 6, 6]
​
[1,2,3,4,5].fill(6, 2, 3)   //返回 [1, 2, 6, 4, 5]
复制代码

24、includes()

var arr = ['chery', 'banana', 'apple', 'watermelon']
​
var result = arr.includes('banana')
​
console.log(result)    //true, 表示banana在数组中
复制代码
var arr = ['chery', 'banana', 'apple', 'watermelon']
​
var result = arr.includes('banana', -2) //表示从倒数第二个开始找
​
console.log(result) //false, 表示从倒数第二个开始找,没有找到banana
复制代码

三、结束语

javascript
90 views
Comments
登录后评论
Sign In
·

写得很好,学习了! 感谢分享,建议大家都学习一下!

·

大佬请收下我的膝盖

·

大佬模板你

·

satisfied 这个看 MDN 文档就行啦!