❤️小姐姐熬夜整理的《js数组中常用方法》，确定不来看看？❤️

Posted 2021-08-28 Dream丶Killer

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了❤️小姐姐熬夜整理的《js数组中常用方法》，确定不来看看？❤️相关的知识，希望对你有一定的参考价值。

js数组中常用方法归纳

❤ 今天我们来整理一下js数组中常用的方法，可以收藏起来以备不时之需哟~~❤

文章目录

1、arr.push()

作用：接收任意数量的值，并从数组的末尾按顺序添加
返回：数组的长度
修改原数组

let arr = [1, 2, 3]
let result = arr.push(4, 5)
console.log(arr) //[1, 2, 3, 4, 5],会修改原数组
console.log(result) //5，返回数组长度

2、arr.pop()

作用：删除数组末尾的值
返回：被删除的值
修改原数组

let arr = [1, 2, 3]
let result = arr.pop()
console.log(arr) //[1, 2],会修改原数组
console.log(result) //3,返回被删除的值

3、arr.unshift()

作用：接收任意数量的值，并将他们看作整体，从数组的头部添加
返回：新数组的长度
修改原数组

let arr = [1, 2, 3]
let result = arr.unshift(4, 5)
console.log(arr) //[4, 5, 1, 2, 3],修改原数组
console.log(result) //5,返回数组的长度

4、arr.shift()

作用：删除数组头部的值
返回：被删除的值
修改原数组

let arr = [1, 2, 3]
let result = arr.pop()
console.log(arr) //[2, 3],会修改原数组
console.log(result) //1,返回被删除的值

5、arr.join()

作用：将数组以分隔符(参数)的形式转化为字符串，如果不传参，默认分隔符是逗号
返回：分隔符拼接成的字符串
不修改原数组

var arr = [1, 2, 3]
var result1 = arr.join()
var result2 = arr.join("-")
console.log(arr) //[1, 2, 3],不修改原数组
console.log(result1, typeof(result1)) //1,2,3 string 默认分隔符为逗号
console.log(result2, typeof(result2)) //1-2-3 string 以“-”为分隔符

6、arr.find(callback)

作用：查找数组中满足条件的第一个元素
返回：第一个元素的值，没找到则为 undefined
不修改原数组

var arr = [1, 2, 3, 4, 5, 6]
var result = arr.find(item => item > 4)
console.log(result) //5,第一个满足条件的值
console.log(arr) //[1, 2, 3, 4, 5, 6]

7、arr.findIndex(callback)

作用：查找数组中满足条件的第一个元素
返回：第一个元素的索引，没找到则返回 -1 ，find() 是返回值
不修改原数组

var arr = [1, 2, 3, 4, 5, 6]
var result = arr.find(item => item > 4)
console.log(result) //4,第一个满足条件的索引值
console.log(arr) //[1, 2, 3, 4, 5, 6]

8、arr.includes(value[, fromIndex])

作用：判断数组是否包含 value ，fromIndex 可指定开始查找的位置
返回：包含返回 true ，否则为 false
如果 fromIndex 大于数组长度，不会被搜索，直接返回false
不修改原数组

var arr = [1, 2, 3, 4, 5, 6]
var result = arr.find(item => item > 4)
console.log(result) //4,第一个满足条件的索引值
console.log(arr) //[1, 2, 3, 4, 5, 6]

9、arr.reverse()

作用：将数组元素反转
返回：反转后的数组
修改原数组

var arr = [1, 2, 3, 4, 5]
var resultArr = arr.reverse()
console.log(resultArr) //[5, 4, 3, 2, 1],反转
console.log(arr) //[5, 4, 3, 2, 1],修改原数组

10、arr.concat()

作用：合并两个或者多个数组
返回：合并后的新数组
不修改原数组

var arr1 = [1, 2, 3]
var arr2 = [4, 5]
var arr3 = [6, 7]
var resultArr = arr1.concat(arr2, arr3)
console.log(resultArr) // [1, 2, 3, 4, 5, 6, 7],返回合并后的数组
console.log(arr1) //[1, 2, 3],不修改原数组

11、arr.sort([compareFunction])

作用：将数组元素排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后挨个比较字符编码
返回：排序后的数组
修改原数组

不指明 compareFunction 的情况

var arr = [1, 22, 130, 188, 26]
console.log(arr.sort()) //[1, 130, 188, 22, 26],转换成字符串，比较字符编码
console.log(arr) //[1, 130, 188, 22, 26],修改原数组

指明 compareFunction(a, b)

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

1）升序

function compareFunction(a, b){
  return a - b
}
var arr = [1, 22, 130, 188, 26]
var resultArr = arr.sort(compareFunction)
console.log(resultArr) //[1, 22, 26, 130, 188],返回排序后的数组
console.log(arr) //[1, 22, 26, 130, 188],改变原数组

2）降序

function compareFunction(a, b){
  return b - a
}
var arr = [1, 22, 130, 188, 26]
var resultArr = arr.sort(compareFunction)
console.log(resultArr) //[188, 130, 26, 22, 1]
console.log(arr) //[188, 130, 26, 22, 1]

12、arr.slice(start, end)

作用：获取指定区域内的元素，左闭右开
返回：获取的元素
不修改原数组

var arr = [1, 2, 3, 4, 5, 6]
var resultArr = arr.slice(0, 3)
console.log(resultArr) //[1, 2, 3],左开右闭
console.log(arr) //[1, 2, 3, 4, 5, 6],不修改原数组

13、arr.splice(index, howmany, item1, …, itemX)

index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany ：必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX：可选。向数组添加的新项目。

作用：可增加元素、删除元素、修改元素
返回：返回被删除的元素，如果是增加或修改，会返回空数组
修改原数组

1）增加，从索引1的位置增加"apple"进去

var arr = [1, 2, 3, 4, 5, 6]
var deleteItem = arr.splice(1, 0, 'apple')
console.log(deleteItem) //[],返回被删除的元素
console.log(arr) //[1, apple, 2, 3, 4, 5, 6],修改原数组

2）修改，可以说是替换，替换元素 3 为字符串 "replace"

var arr = [1, 2, 3, 4, 5, 6]
var deleteItem = arr.splice(2, 1, 'replace') //从第2个位置，删除1个，添加replace元素
console.log(deleteItem) //3
console.log(arr) //[1, 2, "replace", 4, 5, 6]

3）删除，删除元素3,4

var arr = [1, 2, 3, 4, 5, 6]
var deleteItem = arr.splice(2, 2)//从索引为2的位置，删除2个
console.log(deleteItem) //[3, 4]
console.log(arr) //[1, 2, 5, 6]

14、arr.entries()

返回一个数组的迭代对象，这个对象包含数组的键值对
不修改原数组

var arr = [1, 2, 3, 4, 5, 6]
var arrIterator = arr.entries()
console.log(arrIterator) //Array Iterator {}
console.log(arr) //[1, 2, 3, 4, 5, 6]

15、arr.map(callback)

每个元素调用 callback 函数，返回并组合形成一个新数组
不修改原数组

var arr = [1, 2, 3, 4, 5, 6]
var newArr = arr.map(item => item + 2) //每个元素＋2
console.log(newArr) //[3, 4, 5, 6, 7, 8]
console.log(arr) //[1, 2, 3, 4, 5, 6],不修改原数组

16、arr.forEach(callback)

作用：对数组的每个元素执行一次给定的函数
返回：undefined
不修改原数组

var arr = [1, 2, 3, 4, 5, 6]
var result = arr.forEach(item => console.log(item)) //1 2 3 4 5 6
console.log(result) //undefined
console.log(arr) //[1, 2, 3, 4, 5, 6]

17、arr.every(callback)

注意：若收到一个空数组，此方法在一切情况下都会返回 true。

作用：测试一个数组内的所有元素是否都能通过某个指定函数
返回：一个布尔值
如果发现有一个为 false，会立即返回
不修改原数组

var arr = [1, 2, 3, 4, 5, 6]
var result = arr.every(item => item > 0) //每个元素都大于0？
console.log(result) //true
console.log(arr) //[1, 2, 3, 4, 5, 6]

18、arr.fill(value[, start[, end]])

作用：用一个固定值填充一个数组中从起始索引到终止索引内的全部元素
返回：填充后的数组
[start，end) ，左闭右开
修改原数组

var arr = [1, 2, 3, 4, 5, 6]
var resultArr1 = arr.fill('apple', 2, 4) //填充值"apple",从第2位开始，到第4位结束，不包含第四位
console.log(resultArr1) // [1, 2, "apple", "apple", 5, 6]
console.log(arr) // [1, 2, "apple", "apple", 5, 6],修改原数组

19、arr.filter(callback)

作用：对数组进行过滤
返回：返回过滤后的新数组
不修改原数组

var arr = [1, 2, 3, 4, 5, 6]
var resultArr = arr.filter(item => item % 2 == 0) //过滤数组中的偶数
console.log(resultArr) //[2, 4, 6]
console.log(arr) //[1, 2, 3, 4, 5, 6],不修改原数组