常用的JS数组对象API
ES5及以前的Api
-
ECMAScript5为数组定义了5个迭代方法，每个方法接收两个参数， 一个是每项运行的函数，一个是运行该函数的作用域对象(可选项)，传入这些方法的函数会接收三个参数：数组项的值，该项在数组中的位置，数组对象本身。
// 1. Array.every()
// 全真为真
// 示例用途：全选+单选逻辑
const number = [1, 2, 3, 4, 5]
const result = number.every((item,index,array)=>{
return item > 0
})
console.log(result) // true
// 2. Array.some()
// 一真为真，与every()相反
// 示例用途：用于检测数组中是否有满足条件的项
const number = [1, 2, 3, 4, 5]
const result = number.some((item,index,array)=>{
return item > 2
})
console.log(result) // true
// 3. Array.filter()
// 数据筛选，返回 条件成立的项组成的数组
// 示例用途： 可以适用于 前端的搜索功能
const number = [1, 2, 3, 4, 5]
const result = number.filter((item,index,array)=>{
return item > 2
})
console.log(result) // [3, 4, 5]
// 4. Array.map()
// 对数组中的每一项运行改定的函数，返回每次函数调用的结果组成的数组
// 示例用途：for循环遍历操作数组中的每一项。
const number = [1, 2, 3, 4, 5]
const result = number.map((item,index,array)=>{
return item * index
})
console.log(result) // [0, 2, 6, 12, 20]
// 5. Array.forEach()
// 对数组中的每一项运行改定的函数，这个方法没有返回值
// 示例用途：for循环遍历操作数组中的每一项。
const number = [1, 2, 3, 4, 5]
const result = number.forEach((item,index,array)=>{
item * index
})
console.log(result) // [0, 2, 6, 12, 20]
-
归并方法
reduce()// 示例：实现数组元素累加求和
const number = [1, 2, 3, 4, 5]
const result = number.reduce((prev,next,index,array) => {
return prev + next
})
console.log(result) // 15
- 回调函数的参数：
- accumulate: 前一项，
- currentValue: 后一项，
- currentIndex: 项的索引(如果有初始值，从0开始，否则从1开始)
- arry: 数组对象
- 语法: array.reduce(callBack(accumulate,currentValue,currentIndex,array),initialValue)
- 概念: 方法接收一个函数作为累加器，数组中的每个值(从左到右)开始缩减，最终计算为一个值。
- initialValue: (可选参数)作为归并基础的初始值
- reduce() 可以作为一个高阶函数，用于函数的 compose。
- 注意: reduce() 对于空数组是不会执行回调函数的。
reduceRight() 方法的功能和 reduce() 功能是一样的， 不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
数组变异方法(含义：改变原数组本身，并且不需要重新赋值给原数组)
// 1. 默认排序顺序为按字母升序
const array1 = [6, 8, 4, 3, 5, 7, 9, 11, 2]
array1.sort()
console.log(array1) // [11, 2, 3, 4, 5, 6, 7, 8, 9]
// 2. 若要按照number形式进行排序，需要传一个函数作为参数
const array1 = [6, 8, 4, 3, 5, 7, 9, 11, 2]
array1.sort((a, b)=>{
// return b - a // 降序
return a - b // 升序
})
console.log(array1) // [2, 3, 4, 5, 6, 7, 8, 9, 11]
// 3. 随机排序
const array1 = [6, 8, 4, 3, 5, 7, 9, 11, 2]
array1.sort((a, b)=>{
return Math.random() > 0.5 ? -1 : 1
})
console.log(array1) // [4, 9, 8, 5, 6, 2, 7, 11, 3]
const array = [1, 2, 3, 4, 5]
console.log(array.join()) // 1,2,3,4,5
console.log(array.join("")) // 12345
console.log(array.join("-")) // 1-2-3-4-5
const array = [1, 2, 3, 4, 5]
array.reverse()
console.log(array) // [5, 4, 3, 2, 1]
// 1. 传一个参数时，从当前位置开始，一直删除到最后，返回被删除元素所组成的数组
const array1 = [1, 2, 3, 4, 5]
const result = array1.splice(1)
console.log(result) // [2, 3, 4, 5]
console.log(array1) // [1]
// 2. 传两个参数时，从下标为 1 位置开始删除，删除 2 个 返回被删除元素所组成的数组
const array2 = [1, 2, 3, 4, 5]
const result = array2.splice(1 , 2)
console.log(result) // [2 ,3]
console.log(array2) // [1 ,4, 5]
// 3. 传三个参数时，从下标为 1 位置开始删除，删除 2 个
// ，用1替换被删除的元素 返回被删除元素所组成的数组
const array3 = [1, 2, 3, 4, 5]
const result = array3.splice(1 , 2 , 1)
console.log(result) // [2 ,3]
console.log(array3) // [1, 1, 1, 4, 5]
-
array.splice(start,deleteCount,items)
这个方法很 :ox: :beer: 能对数组进行增删改， 返回一个新的数组 -
array.reverse()倒序操作 -
array.join()将数组按照特定的连接方式转换为字符串 -
array.push()在数组末尾添加一个或多个元素，返回数组的长度 -
array.pop()删除数组末尾的一个元素，返回被删除的元素 -
array.unshift()在数组头部添加一个或多个元素，返回数组的长度 -
array.shift()删除数组头部的一个元素，返回被删除的元素 -
array.indexOf()查找数组元素，找到返回下标，找不到返回 -1 -
array.sort()数组排序
数组非变异方法 (含义：不改变原数组本身，需要重新赋值给原数组)
const arr1 = [1, 2, 3]
const arr2 = [-1, -2, -3]
const arr3 = [11, 22, 33]
console.log(arr1.concat(arr2, arr3)) // [1, 2, 3, -1, -2, -3, 11, 22, 33]
const arr1 = [1, 2, 3, 4, 5, 6]
// 传两个参数，包括开始，不包括结束
const result = arr1.slice(0, 5)
console.log(result) // [1, 2, 3, 4, 5,]
// 传一个参数，slice(n)---> 从当前项到数组的最后一项截取
const result = arr1.slice(1)
console.log(result) // [2, 3, 4, 5, 6]
// 参数为负数：表示 arr1.length + 负数
// 或者理解为倒序截取
const result = arr1.slice(-5, -2)
console.log(result) // [2, 3, 4,]
// 原数组
console.log(arr1) // [1, 2, 3, 4, 5, 6]
-
arr.slice(start, end)数组截取 -
arr.concat(arr1, arr2)组合数组
ES6
-
Array.from()// 概念： 将伪数组转成真正的数组，将伪数组对象或可遍历对象转换为真数组
const arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3}
const arr1 = Array.from(arrayLike)
console.log(arr1) // ['a','b','c']
// 当然也可以用Es6之前的方法
const arr2 = Array.protoype.slice.call(arrayLike)
console.log(Array.from(arr2)) // ['a','b','c'] -
Array.of()// 将一系列数据生成一个数组
const arr1 = new Array(3)
console.log(arr1) // [empty × 3]
const arr2 = new Array(3,4)
console.log(arr2) // [3,4]
const arr3 = Array.of(3)
console.log(arr3) // [3] -
Array.isArray(obj)// 判断变量是否为数组
console.log(Array.isArray([])) // true
console.log(Array.isArray([1])) // true
console.log(Array.isArray(new Array())) // true
console.log(Array.isArray(Array.prototype) // true -
拓展运算：...// 数组的展开操作
const arr1 = [1,2,3]
const arr2 = [...arr1]
arr2.push(4)
console.log(arr2) // [1,2,3,4]
// 函数定义的时候 等同于 argument的作用 ...变量名 得到真正的数组
function foo(...arr) {
console.log(...a) // 数组的展开操作 11 22 33
foo1.apply(null,a)
}
function foo1(a,b,c) {
console.log(a,b,c) // 11 22 33
}
foo(11,22,33) -
Array.find((item,index,arry)=>{})// 查找，第一个符合条件的数组成员，如果没有找到，返回undefined
const arr = [1,2,3,4,5,6]
const arr1 = arr.find((item,index,arry)=>{
// return item return item > 1
})// console.log(arr1) // undefinedconsole.log(arr1) // 2 -
Array.findIndex((item,index,arry)=>{})// 查找，第一个符合条件的数组成员，返回其下标，没有找到则返回 -1
const arr = [1,2,3,4,5,6]
const arr1 = arr.findIndex((item,index,arry)=>{
// return item return item > 3
})// console.log(arr1) // -1console.log(arr1) // 4 -
Array.includes(searchElement[,fromIndex = 0])// 概念：找到返回true ， 找不到返回 false (可以和数组的filter方法搭配使用)
// 参数：(要找的元素[,开始查找的索引])
// 从该索引处开始查找 searchElement。 如果为负值。则按升序从
// array.length + fromIndex 的索引开始搜索。默认为0
const arr = [1,2,3,4,5,6]
const arr1 = arr.includes(3)
console.log(arr1) // true
const arr2 = arr.includes(3,-1)
// 从下标 6 - 1 = 5 开始查找3
console.log(arr2) // false
const arr3 = arr.includes(3,-10)
// 从下标 6 - 10 = -4
// 如果计算出的索引小于 0 ， 则整个数组都会被搜索
console.log(arr3) // true