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

第一个是: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

相关推荐
竹林8187 分钟前
Solana前端开发:我在一个NFT铸造页面上被@solana/web3.js的Connection和Transaction签名坑了两天
前端
冬奇Lab25 分钟前
每日一个开源项目(第144篇):ai-website-cloner-template - 一条命令、多 Agent 并行,把任意网站逆向成 Next.js 代码
前端·人工智能·开源
玄玄子40 分钟前
webpack publicPath作用原理
前端·webpack·程序员
HduSy40 分钟前
帮 Claude Code 做了个菜单栏 Token 看板,聊聊里面的一些实现逻辑
前端
用户0595401744644 分钟前
用了6个月LangChain,才发现AI Agent的记忆存储一直有坑——写了23个Pytest用例才彻底修好
前端·css
奶油mm1 小时前
我偷偷把公司的祖传 jQuery 项目改成了 Vue3,CTO 没发现,但全组都来抄我的代码了
前端
用户2136610035721 小时前
Vue2非父子通信与动态组件
前端·vue.js
PedroQue991 小时前
Vite插件体系1.0.0:API稳定,生产就绪
前端·vite
用户059540174461 小时前
把LLM记忆测试从手工脚本换成Pytest参数化,回归时间从2小时降到10分钟
前端·css
donecoding1 小时前
3 条命令搞定闭环 Monorepo:Lerna 版本管理 + 拓扑构建 + 自定义分发
前端·前端框架·node.js