javascript中操作数组的常用方法集合

文章javascript中操作数组的常用方法集合分享给大家，欢迎收藏Java资料网，专注分享技术知识

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]

2. reverse()
   描述：将数组中的元素进行颠倒顺序
   注意：会改变原数组

//JavaScript
let arr = [0, 1, 2]
console.log(arr.reverse()) // [2, 1, 0]
console.log(arr)   // [2, 1, 0]

3. 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]

4. push()
   描述：往数组的末尾添加一个或多个元素
   注意：返回新数组的长度，会改变原数组

//JavaScript
let arr = [0, 1, 2]
console.log(arr.push(3)) // 4
console.log(arr) // [0, 1, 2, 3]

5. pop()
   描述：从数组的末尾删除一个元素
   注意：返回被删除的元素，会改变原数组

//JavaScript
let arr = [0, 1, 2]
console.log(arr.pop()) // 2
console.log(arr) // [0, 1]

6. unshift()
   描述：往数组的开始添加一个或多个元素
   注意：返回新数组的长度，会改变原数组

//JavaScript
let arr = [0, 1, 2]
console.log(arr.unshift(-1)) // 4
console.log(arr) // [-1, 0, 1, 2]

7. shift()
   描述：从数组的开始位置删除一个元素
   注意：返回被删除的元素，会改变原数组

//JavaScript
let arr = [0, 1, 2]
console.log(arr.shift()) // 0
console.log(arr) // [1, 2]

8. 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]

9. 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]

10. toString()
    描述：将数组转换为字符串，类似于 join()，但只能使用默认的', '进行分隔
    注意：不会改变原数组

//JavaScript
let arr = [0, 1, 2]
console.log(arr.toString()) // 0,1,2
console.log(arr) // [0, 1, 2]

11. 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]

12. 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]

13. 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]

14. 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]

15. 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]

16. 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]

17. 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新增的方法

18. 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]

19. 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]

20. 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]

21. from()
    描述：可以将带有 length 属性或可迭代的任意对象转换为数组
    注意：

//JavaScript
let str = '01234'
console.log(Array.from(str)) // ['0', '1', '2', '3', '4']

22. 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

文章来源:https://www.cnblogs.com/bkzj/p/16479514.html
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！