文章内容
JavaScript的内置对象数组 Array 提供了很多实用的方法，下面我总结了一些我在工作中经常用到的一些方法
-
Array.forEach()- 对数组的每个元素执行一次给定的函数let arr = [1, 2, 3, 4, 5, 6] arr.forEach(item => { console.log(item * 2) }) // 2, 4, 6, 8, 10, 12 -
Array.isArray()- 判断一个值是不是数组let arr1 = [1, 2, 3, 4, 5, 6] let arr2 = '1, 2, 3, 4, 5, 6' console.log(Array.isArray(arr1)) // true console.log(Array.isArray(arr2)) // false -
Array.concat()- 合并两个或多个数组该方法不会改变现有数组，而是返回一个新数组
let arr1 = [1, 2, 3] let arr2 = [4, 5, 6] let arr3 = arr1.concat(arr2) console.log(arr1) // [1, 2, 3] console.log(arr2) // [4, 5, 6] console.log(arr3) // [1, 2, 3, 4, 5, 6] -
Array.every()- 判断数组中的所有元素是否可以通过某个指定函数的测试，它返回一个布尔值let arr = [1, 2, 3, 4, 5, 6] console.log(arr.every(item => item > 0)) // true console.log(arr.every(item => item > 3)) // false -
Array.some()- 判断数组中是否至少有一个元素可以通过某个指定函数的测试，它返回一个布尔值let arr = [1, 2, 3, 4, 5, 6] console.log(arr.some(item => item > 5)) // true console.log(arr.some(item => item > 10)) // false -
Array.filter()- 创建一个新的数组，该数组包含了现有数组所有的通过某个指定函数测试的元素该方法不会改变现有数组，而是返回一个新数组
let arr1 = [1, 2, 3, 4, 5, 6] let arr2 = arr1.filter(item => item % 2 === 0) console.log(arr1) // [1, 2, 3, 4, 5, 6] console.log(arr2) // [2, 4, 6] -
Array.includes()- 判断数组中是否包含某个值，它返回一个布尔值与Array.some()不同的是，它的参数不接受函数，只能是一个指定的值
let arr = [1, 2, 3, 4, 5, 6] console.log(arr.includes(item => item > 3)) // false 因为它不接受一个函数作为参数，所以不能得到预想的结果 console.log(arr.includes(3)) // true -
Array.find()- 返回数组中第一个可以通过某个指定函数测试的元素，如果该数组中所有的元素都不能通过测试，则返回undefinedlet arr = [1, 2, 3, 4, 5, 6] console.log(arr.find(item => item % 2 === 0)) // 2 console.log(arr.find(item => item > 10)) // undefined -
Array.findIndex()- 返回数组中第一个可以通过某个指定函数测试的元素索引，如果该数组中所有的元素都不能通过测试，则返回-1let arr = [1, 2, 3, 4, 5, 6] console.log(arr.findIndex(item => item % 2 === 0)) // 1 console.log(arr.findIndex(item => item > 10)) // -1 -
Array.indexOf()- 返回数组中找到的第一个元素索引，如果找不到，则返回-1与Array.findIndex()不同的是，它的参数不接受函数，只能是一个指定的值
let arr = [1, 2, 3, 4, 5, 6] console.log(arr.indexOf(item => item > 4)) // -1 console.log(arr.indexOf(5)) // 4 -
Array.lastIndexOf()- 返回数组中找到的最后一个元素索引，如果找不到，则返回-1let arr = [1, 2, 3, 4, 5, 6, 5, 4, 3, 2, 1] console.log(arr.lastIndexOf(4)) // 7 console.log(arr.lastIndexOf(10)) // -1 -
Array.unShift()- 将一个元素或多个元素添加到数组的开头该方法会修改现有数组
let arr = [1, 2, 3, 4, 5, 6] arr.unshift(999) console.log(arr) // [999, 1, 2, 3, 4, 5, 6] -
Array.shift()- 删除数组中的第一个元素该方法会修改现有数组
let arr = [1, 2, 3, 4, 5, 6] arr.shift() console.log(arr) // [2, 3, 4, 5, 6] -
Array.push()- 将一个元素或多个元素添加到数组的结尾该方法会修改现有数组
let arr = [1, 2, 3, 4, 5, 6] arr.push(999) console.log(arr) // [1, 2, 3, 4, 5, 6, 999] -
Array.pop()- 删除数组中的最后一个元素该方法会修改现有数组
let arr = [1, 2, 3, 4, 5, 6] arr.pop() console.log(arr) // [1, 2, 3, 4, 5] -
Array.slice()- 截取并返回一个新的数组，是现有数组的浅拷贝该方法不会改变现有数组，而是返回一个新数组
let arr1 = [1, 2, 3, 4, 5, 6] let arr2 = arr1.slice(1, 3) console.log(arr1) // [1, 2, 3, 4, 5, 6] console.log(arr2) // [2, 3] -
Array.splice()- 以删除/替换/增加元素的方式修改数组该方法会修改现有数组
let arr = [1, 2, 3, 4, 5, 6] arr.splice(2, 1) console.log(arr) // [1, 2, 4, 5, 6] 以删除元素的方式修改现有数组 arr.splice(2, 1, 999) console.log(arr) // [1, 2, 999, 5, 6] 以替换元素的方式修改现有数组 arr.splice(2, 0, 888) console.log(arr) // [1, 2, 888, 999, 5, 6] 以添加元素的方式修改现有数组 -
Array.reverse()- 将数组中的元素颠倒位置该方法会修改现有数组
let arr = [1, 2, 3, 4, 5, 6] arr.reverse() console.log(arr) // [6, 5, 4, 3, 2, 1] -
Array.sort()- 将数组中的元素按照某种顺序进行排序该方法会修改现有数组
let arr = [1, 2, 3, 4, 5, 6, 5, 4, 3, 2, 1] arr.sort((a, b) => { return a - b }) console.log(arr) // [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6] -
Array.map()- 创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。let arr1 = [1, 2, 3, 4, 5, 6] let arr2 = arr1.map(item => { return item * 2 }) console.log(arr1) // [1, 2, 3, 4, 5, 6] console.log(arr2) // [2, 4, 6, 8, 10, 12]
总结
-
Array.concat()Array.filter()Array.slice()Array.map()等方法不会改变现有数组，而是会创建一个新的数组 -
Array.unShift()Array.shift()Array.push()Array.pop()Array.splice()Array.reverse()Array.sort()等方法会改变现有数组 -
Array.isArray()Array.every()Array.some()Array.includes()等方法会返回一个布尔值 -
Array.findIndex()Array.indexOf()Array.lastIndexOf()等方法会返回数组的索引 -
注意
Array.some()与Array.includes()，Array.findIndex()与Array.indexOf()之间使用上的区别
