I am poor and inexperienced.

Js数组方法(API总结与应用)


avatar
Lucky 2023-12-06 260

1、静态方法

Array.from() 从数组类对象或可迭代对象创建一个新的 Array 实例。
Array.isArray() 如果参数是数组则返回 true ,否则返回 false 。

例子:

let a = ‘12345’

let b = [‘1’, ‘2’, ‘3’, ‘4’, ‘5’]

Array.from(a) // [‘1’, ‘2’, ‘3’, ‘4’, ‘5’]

Array.isArray(a) // false

Array.isArray(b) // true

 

2、数组首尾元素处理

方法 说明
Array.prototype.pop() 从数组中移除最后一个元素并返回该元素。
Array.prototype.push() 在数组末尾添加一个或多个元素,并返回数组新的 length。
Array.prototype.shift() 从数组中移除第一个元素并返回该元素。
Array.prototype.unshift() 在数组的前面添加一个或多个元素,并返回数组新

的 length。

 

例子:

let num = [1, 2, 3, 4, 5];

num.pop() // [1, 2, 3, 4]

num.push(6) // [1, 2, 3, 4, 5, 6]

num.shift() // [2, 3, 4, 5]

num.unshift(0) // [0, 1, 2, 3, 4, 5];

 

 

3、数组遍历

方法 说明
Array.prototype.forEach() 对调用数组中的每个元素调用函数。
Array.prototype.map() 返回一个新数组,其中包含对调用数组中的每个元素调用函数的结果。

例子:

let num = [1, 2, 3, 4, 5];

num.forEach((item) => {

console.log(item) // 打印 1 2 3 4 5

})

 

let newarr = num.map((item) => {

return item * 2

})

console.log(newarr) // 打印 [2, 4, 6, 8, 10]

// 不改变原num [1, 2, 3, 4, 5]

// newarr [2, 4, 6, 8, 10]

 

 

4、数组查找

方法 说明

Array.prototype.at()
Array.prototype.find() 返回数组中满足提供的测试函数的第一个元素的值,如果没有找到合适的元素,则返回 undefined。
Array.prototype.findIndex() 返回数组中满足提供的测试函数的第一个元素的索引,如果没有找到合适的元素,则返回 -1。
Array.prototype.indexOf() 返回在调用数组中可以找到给定元素的第一个(最小)索引,如果没有找到合适的元素,则返回 -1。

例子:

let num = [1, 2, 3, 4, 5];

num.at(2) // console.log(num.at(2)) 打印 3

 

num.find(item => item> 2) // console.log(num.find(item => item> 2)) 打印 3

num.find(item => item> 6) // console.log(num.find(item => item> 6)) 打印 undefined

 

num.findIndex(item => item === 2) // console.log(num.findIndex(item => item === 2)) 打印 1

num.findIndex(item => item === 6) // console.log(num.findIndex(item => item === 6)) 打印 -1

 

num.indexOf(3) // console.log(num.indexOf(3)) 打印 2

num.indexOf(6) // console.log(num.indexOf(6)) 打印 -1

 

 

5、数组过滤(重要)

方法 说明
Array.prototype.includes() 确定调用数组是否包含一个值,根据情况返回 true 或 false。
Array.prototype.some() 如果调用数组中至少有一个元素满足提供的测试函数,则返回 true。
Array.prototype.every() 如果调用数组中的每个元素都满足测试函数,则返回 true。
Array.prototype.filter() 返回一个新数组,其中包含调用所提供的筛选函数返回为 true 的所有数组元素。
Array.prototype.reduce() 对数组的每个元素(从左到右)执行用户提供的 “reducer” 回调函数,将其简化为单个值。

 

例子:

let num = [1, 2, 3, 4, 5];

num.includes(2) // console.log(num.includes(2)) 打印 true

num.includes(6) // console.log(num.includes(6)) 打印 false

 

num.some(item => item === 2)

num.some(item => item > 2)

num.some(item => item > 6)

console.log(num.some(item => item === 2)) // true

console.log(num.some(item => item > 2)) // true

console.log(num.some(item => item > 6)) // false

 

num.every(item => item === 2)

num.every(item => item > 2)

num.every(item => item > 6)

console.log(num.every(item => item === 2)) // false

console.log(num.every(item => item > 0)) // true

console.log(num.every(item => item > 6)) // false

 

let newarr = num.filter(item => item > 2)

console.log(newarr) // [3, 4, 5]

 

let a = [1, 2, 2, 3, 3, 3]

function unique(arr) {

return arr.reduce((pre, cur) => {

return pre.includes(cur) === true ? pre : pre.concat(cur) // concat会返回一个新数组

// 判断上一次return的结果(pre)是否存在相同元素。

// 如果存在pre不变直接return返回;若不存在pre合并当前元素后return返回

}, []) // [] 空数组作为初始值

}

 

6、数组合并

方法 说明

Array.prototype.toString() 将数组的所有元素连接为字符串。
Array.prototype.join() 将数组的所有元素连接为字符串。
Array.prototype.concat() 返回一个新数组,该数组由被调用的数组与其它数组或值连接形成。

例子:

let num = [1, 2, 3, 4, 5];

num.toString()

console.log(num.toString()) // 1,2,3,4,5

console.log(num.toString().replaceAll(‘,’, ”)) // 12345

 

num.join(”)

console.log(num.join(”)) // 12345

console.log(num.join(‘*’)) // 1*2*3*4*5

 

let n1 = num.concat([6, 7], 8)

console.log(n1) //  [1, 2, 3, 4, 5, 6, 7, 8]

let n2 = num.concat([6, [7, [8]]])

console.log(n2)

function flatten(arr, deep) {

return deep > 0 ? flatten([].concat(…arr), deep – 1) : arr

}

let result = flatten(a, 2) // 传入数组执行方法,展开深度为3

console.log(result) // 输出结果:[1, 2, 3, 4, 5, 6, 7, 8]

 

 

7、数组删除与截取

方法 说明
Array.prototype.slice() 提取调用数组的一部分并返回一个新数组。
Array.prototype.splice() 从数组中添加和/或删除元素。

参数说明:splice(start, deleteCount, item1, item2, itemN)方法可接收三个以上参数,可用于删除数组中的元素,

start:代表数组开始修改的位置,若是负值则代表倒数第几位开始(等价array.length – n),若start超出数组长度则以末尾开始修改。

deleteCount:代表从start开始要移除的元素个数(含第 start 位), 若deleteCount 大于 start 之后的元素的总数,则从 start 后面的元素都将被删除。

item1,item2…:代表删除后从原数组start位置开始要添加的数据,会在删除后不指定则 splice() 方法只会删除数组元素

let num = [1, 2, 3, 4, 5];

let n1 = num.slice(0)

console.log(n1) // [1, 2, 3, 4, 5]

let n2 = num.slice(1)

console.log(n2) // [2, 3, 4, 5]

let n3 = num.slice(2,100)

console.log(n3) // [3, 4, 5]

let n4 = num.slice(2,4)

console.log(n4) // [3, 4]

 

num.splice(3)

console.log(num) // [1, 2, 3]

num = [1, 2, 3, 4, 5];

num.splice(3,1)

console.log(num) // [1, 2, 3, 5]

num = [1, 2, 3, 4, 5];

num.splice(3,2)

console.log(num) // [1, 2, 3]

num = [1, 2, 3, 4, 5];

num.splice(3,2,1,2)

console.log(num) // [1, 2, 3, 1, 2]

 

 

8、数组排序

方法 说明
Array.prototype.sort() 对数组的元素进行排序并返回该数组。
Array.prototype.reverse() 反转数组中元素的顺序。

例子:

let num = [1, 2, 3, 4, 5];

num.reverse()

console.log(num) // [5, 4, 3, 2, 1]

 

let num2 = [10, 2, 30, 4, 1, 8, 0];

num2.sort()

console.log(num2.sort()) // [0, 1, 10, 2, 30, 4, 8] 默认按元素转化成后字符串的各个字符的Unicode代码点进行排序

let n1 = num2.sort((a,b) => a-b)

console.log(n1) //  [0, 1, 2, 4, 8, 10, 30]

num2.sort((a,b) => b-a)

console.log(num2.sort((a,b) => b-a)) // [30, 10, 8, 4, 2, 1, 0]

 

9、返回新数组的方法总结如下:

Array.prototype.map()
Array.prototype.filter()
Array.prototype.concat()
Array.prototype.slice()
Array.prototype.sort