JavaScript中操作数组的方法汇总

一、目录

1.1 会修改原数组的方法：

  1. pop() --- 删除数组的最后一个元素,返回被删除的元素
  2. push() --- 往数组末尾增加一个元素, 返回新数组的长度
  3. shift() --- 删除数组的第一个元素, 返回被删除的元素
  4. unshift() --- 往数组开头增加一个元素, 返回新数组的长度
  5. reverse() --- 将数组中元素的顺序进行颠倒, 返回颠倒后的数组
  6. sort() --- 对数组的元素进行排序, 返回排序后的数组
  7. splice() --- 从数组中添加、删除、替换元素，返回被删除的元素数组
  8. fill() --- 将指定数据替换掉数组的指定部分, 返回替换完的数组
  9. copyWithin() --- 从数组中截取一段元素放到数组指定下标位置, 返回更改后的数组

1.2 不会修改原数组的方法：

  1. forEach() --- 遍历数组, 里面的元素如果都是基本数据类型无法修改，有引用数据类型可以修改引用数据类型里的数据
  2. concat() --- 连接两个或多个数组, 返回连接后的数组
  3. every() --- 检测数组的每一项是否都符合要求, 返回布尔值
  4. some() --- 检测数组的每一项是否有元素符合要求, 返回布尔值
  5. filter() --- 检测数组的每一项元素, 返回通过测试的元素数组
  6. indexOf() --- 搜索数组中的元素, 返回其位置
  7. lastIndexOf() --- 从后面开始搜索数组中的元素, 返回其位置
  8. join() --- 把数组中的元素拼接为一个字符串, 返回拼接好的字符串
  9. toString() --- 将数组转换为字符串, 返回拼接好的字符串
  10. map() --- 对数组的每一项进行函数处理, 返回处理后的数组
  11. slice() --- 截取数组的一部分, 返回截取的元素数组
  12. find() --- 对数组的每一项进行指定函数测试, 返回第一个通过的元素
  13. findIndex() --- 对数组的每一项进行指定函数测试, 返回第一个通过的元素下标
  14. from() --- 将可迭代的任意对象转化为数组, 返回转换的数组
  15. includes() --- 检查数组中是否包含指定元素, 返回布尔值
  16. reduce() --- 接收一个函数作为累加器，数组中每个元素从左往右开始缩减，最终计算为一个值

二、方法汇总及详细介绍

  1. join()
    描述：将数组的所有元素都转换为字符串并且使用指定字符拼接在一起
    注意：拼接的默认字符为','；不会改变原数组
//JavaScript
let arr = [0, 1, 2]
console.log(arr.join())    // 0,1,2
console.log(arr.join(''))  // 0-1-2
console.log(arr.join('-')) // 0-1-2
console.log(arr)           // [0, 1, 2]
  1. reverse()
    描述：将数组中的元素进行颠倒顺序
    注意：返回颠倒后的数组, 会改变原数组
//JavaScript
let arr = [0, 1, 2]
console.log(arr.reverse()) // [2, 1, 0]
console.log(arr)   // [2, 1, 0]
  1. concat()
    描述：用于连接多个数组
    注意：不会改变现有数组，返回新的数组
//JavaScript
let arr1 = [0, 1, 2]
let arr2 = [3, 4, 5]
console.log(arr1.concat(arr2)) // [0, 1, 2, 3, 4, 5]
console.log(arr1) // [0, 1, 2]
  1. push()
    描述：往数组的末尾添加一个或多个元素
    注意：返回新数组的长度，会改变原数组
//JavaScript
let arr = [0, 1, 2]
console.log(arr.push(3)) // 4
console.log(arr) // [0, 1, 2, 3]
  1. pop()
    描述：从数组的末尾删除一个元素
    注意：返回被删除的元素，会改变原数组
//JavaScript
let arr = [0, 1, 2]
console.log(arr.pop()) // 2
console.log(arr) // [0, 1]
  1. unshift()
    描述：往数组的开始添加一个或多个元素
    注意：返回新数组的长度，会改变原数组
//JavaScript
let arr = [0, 1, 2]
console.log(arr.unshift(-1)) // 4
console.log(arr) // [-1, 0, 1, 2]
  1. shift()
    描述：从数组的开始位置删除一个元素
    注意：返回被删除的元素，会改变原数组
//JavaScript
let arr = [0, 1, 2]
console.log(arr.shift()) // 0
console.log(arr) // [1, 2]
  1. slice()
    语法： arr.slice(a, b)
    描述：截取指定下标A到指定下标B之间的元素, 包括A, 不包括B
    注意：返回截取的元素数组，不会改变原数组
//JavaScript
let arr = [0, 1, 2]

// 截取下标0~下标2之间的数据
console.log(arr.slice(0, 2)) // [0, 1]

console.log(arr) // [0, 1, 2]
  1. splice()
    语法： splice(index, deleteCount, item1, item2 ... )
    描述：从数组中添加/删除元素，
    注意：返回的是删除的元素数组，会改变原数组
//JavaScript
let arr = [0, 1, 2]

// 解释：从数组的下标1位置开始，删除1项，顺便增加元素6
console.log(arr.splice(1, 1, 6)) // [1]
console.log(arr) // [0, 6, 2]

// 解释：从数组下标2位置开始，删除0项，增加5,4,3
console.log(arr.splice(2, 0, 5, 4, 3)) // []
console.log(arr) // [0, 6, 5, 4, 3, 2]

// 解释：从下标0开始，删除3位
console.log(arr.splice(0, 3)); // [0, 6, 5]
console.log(arr); // [4, 3, 2]
  1. toString()
    描述：将数组转换为字符串，类似于 join()，但只能使用默认的', '进行分隔
    注意：不会改变原数组
//JavaScript
let arr = [0, 1, 2]
console.log(arr.toString()) // 0,1,2
console.log(arr) // [0, 1, 2]
  1. indexOf() / lastIndexOf()
    语法： arr.indexOf(item, start)
    描述：在数组中搜索指定元素和开始位置(非必选)，返回其位置
    注意：未找到返回-1，如有多个返回第一个；如需要从后往前查找应使用：lastIndexOf()
//JavaScript
let arr = [0, 1, 2, 1]
console.log(arr.indexOf(1)) // 1
console.log(arr.indexOf(1, 2)) // 3
console.log(arr.indexOf(3)) // -1
console.log(arr) // [0, 1, 2, 1]
  1. every()
    描述：对数组的每一项进行指定函数测试，都通过测试，则返回 true，否则返回 false
    注意：检测的是数组的所有元素是否都通过；当出现一个不通过时，后面的测试将不再进行
//JavaScript
let arr = [0, 1, 2, 1, 3]

// 判断数值是否大于1
function checkAdult(num) {
    console.log(num) // 0   // 证明不会再测试后面的元素
    return num >= 1
}

// 并不是所有元素都大于1的，所以返回 false
console.log(arr.every(checkAdult)) // false
console.log(arr) // [0, 1, 2, 1, 3]
  1. some()
    描述：对数组的每一项进行指定函数测试, 只要有一个元素通过测试, 就会返回 true, 否则返回 false
    注意：当通过第一个元素后，后面的元素不会再进行测试
//JavaScript
let arr = [0, 1, 2, 1, 3]

// 判断数值是否大于1
function checkAdult(num) {
    console.log(num) // 0  1  // 证明不会再测试后面的元素
    return num >= 1
}

// 数组中有大于1的，所以返回 true
console.log(arr.some(checkAdult)) // true
console.log(arr) // [0, 1, 2, 1, 3]
  1. filter()
    描述：对数组的每一项进行指定函数测试, 返回所有通过测试的元素组成的数组
    注意：不会对空数组执行函数, 不会改变原数组
//JavaScript
let arr = [0, 1, 2, 1, 3]

// 判断数值是否大于1
function checkAdult(num) {
    return num >= 1
}

console.log(arr.filter(checkAdult)) // [1, 2, 1, 3]
console.log(arr) // [0, 1, 2, 1, 3]
  1. map()
    描述：对数组的每一项进行指定函数测试, 返回每次函数的返回值组成的数组
    注意：不会对空数组执行函数, 不会改变原数组
//JavaScript
let arr = [0, 1, 2]

// 返回+1的值
function add(num) {
    return ++num
}

console.log(arr.map(add)) // [1, 2, 3]
console.log(arr) // [0, 1, 2]
  1. forEach()
    描述：遍历数组
    注意：不会对空数组执行 forEach() 方法
//JavaScript
let arr = [0, 1, 2]

// 遍历数组，并且输出数组下标对应的元素
arr.forEach((item, index) => {
    console.log(`arr[${index}] = ${item}`)
})

// arr[0] = 0
// arr[1] = 1
// arr[2] = 2

console.log(arr) // [0, 1, 2]
  1. sort()
    描述：对数组的元素进行排序，可以按照字母或数字，亦可以是升序或者降序
    注意：返回排序后的数组，会对原数组产生改变；默认排序方法是按照字符串排序，会导致 '2' > '10'，因为 '2' > '1'
//JavaScript
let arr = [10, 6, 2, 60, 1]

console.log(arr.sort()) //  [1, 10, 2, 6, 60]

// 使用 sort() 方法调用比较函数， a - b 如果为负数，说明 a 比 b 小
console.log(arr.sort((a, b) => b - a)) //  [60, 10, 6, 2, 1]

// 将 arr 数组颠倒顺序
console.log(arr.reverse();) // [1, 2, 6, 10, 60]

以下为ES6新增的方法

  1. find() / findIndex()
    描述：返回数组中第一个通过测试的元素 / 元素下标
    注意：当出现返回 true 的元素，将不再测试剩余元素；不会对空数组执行函数
//JavaScript
let arr = [1, 2, 3]

function checkAdult(num) {
    return num > 1
}

console.log(arr.find(checkAdult)) // 2
console.log(arr.findIndex(checkAdult)) // 1
console.log(arr) // [1, 2, 3]
  1. fill()
    语法： arr.fill(value, start, end)
    描述：使用 value 填充 start(可选, 默认为0) 到 end(可选, 默认为arr.length) 的所有数组元素
    注意：会改变原数组
//JavaScript
let arr = [0, 1, 2]

console.log(arr.fill(3, 1, 3)) // [0, 3, 3]
console.log(arr.fill(4)) // [4, 4, 4]
console.log(arr.fill(5, 1)) // [4, 5, 5]
  1. copyWithin()
    语法： arr.copyWithin(target, start, end)
    描述：将 start(可选, 默认为0) 位置到 end(可选, 默认为arr.length) 位置的字符复制到 target(粘贴的下标) 位置
    注意：arr.length 不会改变，但是数据会改变
//JavaScript
let arr = [0, 1, 2]

// 将 0~arr.length 的数据复制到 下标1 位置
console.log(arr.copyWithin(1)) // [0, 0, 1]

// 将下标2到下标3的元素，复制到下标0位置
console.log(arr.copyWithin(0, 2, 3)) //  [1, 0, 1]

// 将下标1~下标3的元素，复制到下标0位置
console.log(arr.copyWithin(0, 1, 3)) //  [0, 1, 1]
  1. from()
    描述：可以将带有 length 属性或可迭代的任意对象 ( 伪数组 ) 转换为数组
    注意：
//JavaScript
let str = '01234'
console.log(Array.from(str)) 
// ['0', '1', '2', '3', '4']

// 数组去重
let arr = [1, 2, 3, 4, 2, 1, 4, 1]
console.log(Array.from(new Set(arr)))
// [1, 2, 3, 4]
  1. includes()
    描述：检查数组是否包含指定元素,包含返回 true, 不包含返回 false
    注意：includes() 对比 indexOf() 可以判断 NaN，基本可以取代 indexOf()
//JavaScript
let arr = [0, 1, 2, NaN]

console.log(arr.includes(2)) // true
console.log(arr.includes(3)) // false
console.log(arr.includes(NaN)) // true
  1. reduce()
    描述：reduce() 方法对数组中的每个元素按顺序执行一个由您提供的 reducer 函数, 每一次运行 reducer 都会将先前元素的计算结果作为参数传入, 最后将结果 汇总为单个返回值
    注意：reduce() 对于空数组是不会执行回调函数的
let arr = [1, 2, 3, 4, 5]

let sum1 = arr.reduce(function(prev, cur) {
    return prev + cur
})

// 使用箭头函数优化

let sum2 = arr.reduce((prev, cur) => prev + cur)
console.log(sum1, sum2) // 15 15
posted @ 2022-07-19 17:21  如是。  阅读(90)  评论(0)    收藏  举报