最全的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 文档就行啦!