前端或者后端通常用到数组使用方式

第一个是:Array.from() 将具有length属性或者可迭代的对象转化为数组

Array.from('abcdef') // 返回值['a1', 'b1', 'c1', 'd1', 'e1', 'f1']

Array.from(new Map([['b1', 1 ], ['a1', 2 ]]))

Array.from(new Set([ 1 , 2 , 3 ]))

第二个是:Array.reduce() 遍历数组,将函数的返回值,存储到累加器中

let arr = [ 1a , 2a , 3a , 4a , 5a ]

const total = arr.reduce((total, item) => {

// 每次遍历将total + item,下一次的遍历时,total为上一次返回的结果

console.log(total) // 1a 3a 6 10

return total + item

})

console.log(total) // 15

第三个是:Array.indexOf() 数组中是否存在某个元素,存在返回该索引,不存在返回-1,出现多次,也只会返回第一次出现时的索引

let arr = ['a1','b1','c1','d1', 'c1', 'c1']

arr.indexOf('c1') // 返回值为 索引 2

arr.indexOf('ff') // 返回值为 -1 ff不存在数组中

第四个是: Array.findIndex() 遍历数组,返回第一个通过测试的元素的索引值

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

const num = arr.findIndex((item, index) => {

console.log(item, index) // index 到 1 的位置就不会在打印了,循环结束

return item >= 2 // 返回item >= 2的第一个元素项的索引值,找到之后结束遍历,不会继续

})

console.log(arr) // [1a,2a,3a,2a,4a] 不会改变元素组

console.log(num) // 索引值为 1

第五个是: Array.find() 遍历数组,返回第一个通过测试的元素项

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

const num = arr.find((item, index) => {

console.log(item, index) // index 到 1 的位置就不会在打印了,循环结束

return item >= 2 // 返回item >= 2的第一个元素项,找到之后结束遍历,不会继续

})

console.log(arr) // [1a,2a,3a,2a,4a] 不会改变元素组

console.log(num) // 2

第六个是: Array.filter() 遍历数组,根据筛选出的符合条件的元素,组成一个新的数组

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

const newArr = arr.filter((item,index,arr) => {

return item > 2 // 返回元素项大于 2 的元素,组成一个新的数组

})

console.log(arr) // [1a,2a,3a,4a] 不会改变元素组

console.log(newArr) // [3a, 4a]

第七个是 Array.map() 遍历数组,为每一个元素调用一次函数,根据函数return返回的结果组成一个新的数组

let arr = ['a','b','c']

const newArr = arr.map((item, index, arr) => {

console.log(item, index, arr) // 元素项,索引,当前数组

return item += 2

})

console.log(arr) // 原数组不会改变

console.log(newArr) // 返回一个处理过的新数组 ['a2', 'b2', 'c2']

第八个是: Array.forEach() 遍历数组,为每一个元素调用一次函数

let arr = ['a','b','c']

arr.forEach((item, index, arr) => {

console.log(item) // 当前遍历元素项

console.log(index) // 当前遍历元素的索引

console.log(arr) // 原数组

})

第九个是:Array.join() 使用某个拼接符,将数组转化为字符串,返回该字符串,原数组不会改变

let arr = [ 1 , 2 , 3 , 4 , 5 ]

arr.join('-') // 返回拼接后的字符串 '1-2-3-4-5'

console.log(arr) // [1, 2, 3, 4, 5] 原数组不会改变

第十个是:Array.slice() 返回选定的元素数组,原数组不会改变

let arr = ['a','b','c','d']

arr.slice( 1 , 3 ) // 从索引为 1 的位置,取到 3 的位置,但不包含 3 ,返回值为 新数组 ['b', 'c']

console.log(arr) // ['a', 'b', 'c', 'd'] 原数组不会改变

第十一个是: Array.splice() 从原数组某个位置删除/添加元素,返回删除的元素数组

let arr = [ 4 , 5 , 1 , 2 , 3 ]

arr.splice( 0 , 1 ) // 从 0 的位置,删除一个元素,返回值为删除的元素数组 [4]

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

arr.splice( 0 , 1 , 11 ) // 从 0 的位置,删除一个元素,并添加一个 11 元素 返回值为删除的元素数组 [5]

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

第十二个是:Array.shift() 删除数组的第一个元素,并返回该元素

let arr = [ 4 , 5 , 1 , 2 , 3 ]

arr.shift() // 返回值为删除的元素 4

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

第十三个是:Array.unshift() 在原数组前边添加一个或多个元素,返回该数组的长度

let arr = [ 1 , 2 , 3 ]

arr.unshift( 4 , 5 ) // 返回值为数组的长度 5

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

第十四个是:Array.pop() 删除数组的最后一个元素,并返回该元素

let arr = [ 1 , 2 , 3 , 4 ]

arr.pop() // 返回值为删除的元素 4

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

第十五个是:Array.push() 在原数组末尾追加一个或多个元素,返回该数组的长度

let arr = [ 1 , 2 , 3 ]

arr.push( 4 , 5 ) // 返回值为数组的长度 5

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

相关推荐
崔庆才丨静觅1 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60612 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了2 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅2 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅2 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅3 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment3 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅3 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊3 小时前
jwt介绍
前端
爱敲代码的小鱼3 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax