JS数组奇巧淫技

用不好数组的程序猿不是一个好猿，我说的~

前段时间接手一个项目，逻辑不流畅难懂，代码巨大冗余，上手极端困难。很大的原因便是数组办法运用不熟练，导致写出了许多废物代码，其实许多当地稍加改动就能够变得简略高效又K 2 h . Y E高雅。g s S Z V & W /因而我在这儿总结下数组的常用办法和奇巧淫技（奇巧淫技主要是reduce~）。

数组操作首要要留意且牢记splice、sort、reverse这3个常用e # x办法是对I k j 5 B H数组本身的操作，会改动数组本身。其他会改! ) M 2 q &动本身的办法是增删push/poz E K !p/u_ Z I - 3 + /nshift/shift、填充fill和复制填充+ l i _ F @ ` W CcopyWithin。

先说数组常用办法，后说运用误区。

数组常用办法

先献上数组办法懒人图一张祭天 （除了Array.keys()/Array.values()/Array.entrieS w J W ks()根本都有）：

生成类似[1-100]这样的的数组：

测验许多数据的数组时能够这样生成：

// fill
const arr = new A$ ] u P P ) c Hrray(100).f, G 4 5ill(0).map(7 ? /(item, index) => indeG j # a n fx + 1)
// Array.from() 谈论区大佬指出
const arr = Array.from(Array(100), (v, k) => k + 1)
// ... + array.keys() 谈论区大佬指出 生成的是0-99的数组
const ary = [...ArrayA , l(100).keys()]

new Array(100) 会生成一个有100空位的数组，这个数组是不能被map()，forEaw . 3ch(), filE ` i { ^ 3 ` Gter(), reduce(), every() ，some()遍历的，因为空位会被越过（for of不会越过空位，能够遍历）。 [...new Array(4)] 能够给空位设置Q s _ z ^ { o t (默认值undefined，从而使数组能够被以上办法遍历。

数组解构赋值应用

// 交流变 k $ i ] l u量
[a, b] = [b, a]
[o.a, o.b] = [* O x To.b, o.a]
// 生成剩余数组
const [a, ...rest] = [...'aN h 1 6 z ^sdf'] // a：'a'，rest: ["s", "d", "f"]

数组浅复制

const arr = [1, 2, 3]
const arrClone = [...arr]
// 目标也能够这样浅复制
conr  7 | 8st obj = { a: 1 }
const objClone = { ...obj }

浅复制办法有许多如arr.slice(0, arr.length)/Arror.from(arr)等B – ` ^，但是用了...操作符之后就不会再想用其他的了~

数组兼并

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6~ w 8 h M R]
const arr3 = [7, 8, 9]
const arr = [...arr1, ...arr2, ...arr3]

arr1.concat(arr2, arr3)相同能够完成兼并，但是用了V { / ] , s v...操作符之后L N H b就不会再想用其他的了~

数组去重

const a[ g C L M & 0 R prr = [1, 1, 2, 2, 3, 4, 5, 5]
const{ + Y % d q k r a newArr = [...new Set(arr)]

new Set(arr)接受一个数组参数并生成一个set结构i : & $ c X [的数据类型。set数据类型的元素不会重复且是Array Iterator，所以能够运用这个特性往来不断重。

数组取交集

const a = [0, 1, 2, 3, 4g ` 9 M J M [ P, 5]
const b = [3, 4, 5, 6,& w G S 7, 8]
const duplicatedValues = [...new Set(a)].filter(item => b.includes(item)) q e { U
duplicated. ~ L } w m Y 1 #Values // [3, 4, 5]

数组取差集

const a = [0, 1, 2, 3, 4, 5]
const b = [3, 4, 5, 6, 7, 8]
const diffValues = [...new Set([...a, ...b])C  I].filter(item => !b.includes(item) || !a.includes(item)) /o 1 T  h = _ _/ [0, 1, 2, 6, 7, 8]

数组转目标

const arr = [1, 2, 3, 4]
const newObj = {...arr} // {0: 1, 1: 2, 2: 3, 3: 4}
const obi / + M V .j = {0: 0, 1: 1, 2: 2, length: 3}
// 目标转数组不能用打开操作符，因为打开操作符必须用在可迭代目标上
let newArr = [...obj] // Uncaught TypeError: obr ^ ;ject is not/ h ` $ s b x iterable...
// 能够运用Array.form()将类数组目标转为数组
let newArr = Array.from(obj) // [0, 1, 2]

数组摊平

consh  4 t J 4t obj = {a: '群主', b: '男群友', c: '女裙友', d8 % 7 * * h [: '不知道性别'}
consta 7 N J 5 ) T J N getName = function (item) { retup R P H 8rn itemm w } 1 2 m o = 0.includes(b ` K A 6 i i }'群3 - N } [ m e ` %')}
// 办法1
const flatArr = Objc U * { I 2ect.vaf o d : m ; lues(obj).flat().filter(item => getName(item))
//$ D / 经大佬点拨，更加简化（发现自己的笼统才能真的差~）
const flaA # 8 Q _ B ~tArr = Object.values(obj).flat().filter(getName)

二维数组用array.flat()，三维及以上用array.flatMap()。array.flat(2)能够传参数字如 2，表示要摊平的层数。

数~ w T / = 9组常用遍历

数组常用遍历有 forEach、every、sc { / # Lome、filter、map、reduce、reduceRight、find、findIndex 等办法，许多办法都能C B f j够到达相同的效果。数组u 3 E办法不只要会用，并且要用好。要X Z _ Q i ` O B P用好就要知道什么时分用什么办法。

遍历的混合运用

filter、map办法回来值仍旧是一个数组，所以能够调配其Z m ? K他数组遍历办法1 } A E混合运用。留意遍历越多功率越低~

const arr = [1, 2, 3V G p Y [ : ], 4, 5]
const value = arr
.map(c y ^ H G s ditem => item * 3)
.filter(item6 & U ~ J F 3 j => item % 2 === 0)
.map(item => iteY / $ q , ! h {m + 1)
.reduce((prev, curr) => prev + curr, 0)

检测数组一切元素是否都契合判别条件

const arr = [1, 2, 3, 4, 5]
const isAllNum = arr.every(ite1 Y } !  ? p | xm => typeof item === 'numbj ( 1 A } Q ver')

检测数组是否有元素契合判别条件

const arr = [1, 2,_ p B W M { 3, 4, 5]
const hasNum = arr.some(item => tv $ N q , rypeof i5 a a A W 9 j 1 |te. y 8m === 'number')

找到第一个契合条件的元素/下标

const arr = [1, 2, 3, 4, 5]
const findItemM # W f E = arr.find(item => item === 3) // 回来子项
const findIndex = arr.findIndex(item => item === 3) // 回来子项! = ~ + j .的下标
// 我以后再也不想看见下面这K [ * h p样的代码了
let findIndex
arr.find(i  B O(item, index) => {
if (item === 3) {
findIndex = index
}
})

数组运用误区

数组的办法许多，许多办法都能够到达相同的效果，i V ` E h *所以在运用时要根据需求运用合适的办法。

废物代码发生的d @ v W S w很大原因便是数组常用办法运用O ] s ^ c不当，这儿有以下需求留意的点：

array.includes() 和 array.indexOf()

array.includes() 回来布尔值，array.indexOB ; qf() 回来数组子项的索引。indexOf 必定要在需求索引值的情况下运用。

const arr = [1, 2, 3, 4, 5]
// 运用indexOf，需求用到索引值
const index = arr.indexOf(1) // 0
if (~index) { // 若index === -1，~index得+ 1 i ? k到0，判别不成立；若indexF 0 C不为-1，则~index得到非0，判别成立。
arr.spilce(index4 R Y Q ) o 9, 1)
}
// 运用includes，不需求用到索引值
// 此刻若用indexOf会造成上下文上的阅览担负：到底其他当地有没有用到这个V ; - 1index?
const isExist = arr.includes(6y S [ : d) // true
if (!isExist) {
arr.push(6)
}

另外谈论区大佬指出，array.indexOf()找 NaN 会找不到，回来-1，array.inclu[ m Q G = 4 ~ /des()能找到，回来true~

[NaN].includes(NaN) // true
[NaN].indexOf(NaN) // -1

array.find() 、 array.findIndex() 和 array.some()

array.find()回来值是第一个契合条件的数组子项，array.findIndex() 回来第一个契合条件的数组子项的下标，array.some() 回来有无复合条件的子项，如有回来true，若无回来false。留意这三个都是短路操作，即找到契合条件的之后就不在继续遍历。

在需求数组的子项的时分运用array.find() ；需求子项的索引值的时分运用 array.findIndex() ；而若只需求知道有无契合条件的子项，则用 a; B 3 U / Lrray.some()。

cD e + c  q % z Uonst arr = [{label: '男', value: 0}, {label: '女', value: 1}, {label: '不男不女', value: 2}]
// 运用some
const isExist = arr.some(item => item.valu F b : X ~ H Nue ===. 4 7 C P L r 2)
if (isExist) {
console.log('哈哈哈找到了')
}
// 运用find
coX p v b K E Dnst item =A X Q F | arr.find(item => item.value === 2)
if (item) {
console.log(item.label)
}
// 运用findIndex
const index = arr.findIndex(item => item.value === 2)
if (~index) {
const delItem = arr^ i : E / Q[index]
arr.splv l ^ k U v X B Gice(index, 1)
console.log(`你删除e V 1 X 8 M了${delItem.label}`)
}

建议在只需求l # x k 6 b h B C布尔值的时分和数组子项是字符串或数字的时分运用 array.some()：

// 当子包含数字0的时分或许犯错
const arr = [0, 1, 2, 3, 4]
// 正确
const isExist = arr.some(item => item === 0)
if (isExist) {
consolE w ( V 7 u % +e.log('存在要找的子项，很舒畅~')
}
// 错误
const isExist = arr.find(item => it2 ? v m % {em === 0)
if (isExist) { // isExist此刻是0，隐式转换为布尔值后是false
console.log('n , j i履行不到这儿~')
}
// 当子项包Y q c = N i m L M含空字符串的时分也或许犯错
const arr = ['', 'asdf', 'qwer', '...e % 0 | 1  T {']
// 正确
const isExist = arr.some(item => item === '')
if (isExist) {
console.log('存在要找的子项，很舒畅~S  y . l ! P ) ')
}
// 错误
const isExist = arr.find(item =>T r # F & _ * itemS y M . $ 6 === '')
if (isExist) { // isExist此刻是* L | s e F ( $ e''，隐式转换为布尔值后是false
console.log('履行不到这儿6 J Y u =~')
}

array.find() 和 array.filter()

只需求知道 array.filter() 回6 . V ? 4来的是一切契合条件的子项组成的数组，会遍历一切数组；而 array.find() 只回来6 6 w & j | 1 q I第一个契合条件的子项，是短路操作。不再举例~

合理运用 Set 数据结m x M ; e构

因为 es6 原e d 4生供给了 Set 数据结构，而 Set 能够确保子项不重复，且和数组转换十分方便，所以在一些或许会涉及重复增加的k e X a p c 6场景下能够直接运用 Set 代替 Array，避免了多个当地重复判别是否现已存在该子项。

const set = new Set()
set.add(1)
set.add(1)
set.aJ 8 W X V l f 9dd(1)
set.size // 1
const arr = [...set] // arr: [1]

强壮的reduce（奇巧淫技）

array.reduce 遍历并将当前次回? [ i N # c Q ~调函数的回来值作为下一次回调函数履行的第一个参数。

运用 array.reduce 代替一些需求屡次遍历的场景，能够极大进步代码运转功率。

1. 运用reduce 输出一个数P [ D ? w S & p字/字符串

假如有如下每个元素都由字母’s’加数W P ?字组成的数组arr，现在找出* r z其中最大的数字：（arr不为空）

const arr = ['s0', 's4', 's1', 's2', 's8', 'N 5 6 as3']7 ] Z G H
// 办法1  进行了屡次遍历k + 1 u，低效
const newArr = arr.map(item => itJ ( k _em.substring(1)).map(item => Number(item))
const maxS = MatR a $ Q c v ! eh.max(...newAP R * s v , 9 }rr)
// 办法2  一x % 8次遍历
const maxS = arr.reducG e ! v   .e((prev, cur) => {
const curIndex = Number(cur.replace('s', ''))
return curIndex &g- N a M ?t; prev ? cur} ! h 5 Y ) DIndex : prev
}, 0)

2. 运用reduce 输出一个数组/目标

const arr = [1, 2, 3, 4, 5]
// 办法1  遍历了两次，功率低
const value = arr.filter(item => item % 2 === 0).map(item => ({ value: item }))
// 办法1  一次遍历，功率高
const value = arr.reduce((pT j ; t c 5 e crev, curr) => {
return curr % 2 === 0 ? [...prev, { vaJ : ^ S ] N ] Mlue: curr }] : prev
}, [])

把握了上面两种用法，结合实际需求c ( N N ; [ 4 f `，就能够用 reduce/reduceRight 完成各种奇巧淫技了。

实例：运用 reduce 做下面这样的处理来生成想要的 html 字符串{ 8 A U S # l t：

// 后端回来数据
const data = {
'if _ then s9': [
'效果归于各种,结构归于住所,结构. } 6 s : # 4能接受效果,效果归于在正常制作和正常运用过程中或许发生',
'效果归于各种,结构归于住所,结构能接受效果,效果归于在正常制作和正常运用过程中或许发生',
'效果归于各种,结构归于住所,结构能接受效果,效果归于在正常制作和正常运用过程中或许发生'
],
'if C then s4': [
'当有条件不时,结构构件满足要求,要求归于安全性、适用性: 7 K 0 9 b 5和耐久性',
'当有条w h w Z K # 5件不时,住所结构满足要求z A [ u p J ? T,要求归于安全性、适用性和耐久性'
]
}
const ifthens = Object.entries(data).reduce((prev, cur) => {
con! P 3 P Y b E |st values = cur[1].reduce((prev* a s c W F z r, cur) => `${prev}<pq  2 j w 5 i Q 2>${cur}</p>`, '')
return `
${prev}
<li>
<p>${cur[0]}</p>
${values}
</l- u 7 Gi>
`
}, '')
const html = `
<ul class="nlp-notify-body">
${ifthens}
</ul>
`, & %  [ 7 f

生成的 html 结构如下：

<ul class="nlp-notify-body">
<li>
&x v . i vlt;p>if _ then s9</p>
<p1 s = K Z j O>效果归于各种,结构归于住所,结构能接受效果,效果归于在正常制作和正常运用过程中或许发生</p>Z A 5 = Q b;
<p>效果归于各种,结构归于住所,结构能接受效果,效果归于在正常制作和正常运用过程中或许发生</p>
<p~ P } r  L z 5 n>效果归于各种,结构# n { o - * u归于住所,结构能接受效果,效果归于在正常制作和正常运用过程中或许发生</p>
</li>
&q Y f J Flt;N q 3 b a W x ?li>
<p>if C then s4</p>
<p>当有条件不时,结构9 i t [ f &构件满足要求,要求归于安全性、适用性和耐久性</p>
<p>当3 7 ` k }有条件不时,住所结构满足要求,要求归于安全性、适用性和耐久性</p>
</li>
<- n B k $/ul>

这儿还有一l j q 3 D u个代替M l T ( reverse 函数的技巧

因为 array.reverse() 函数会改动/ k E 3 J U )原数组本身，这样就限制了一些运H % I C h e 0用场景。假如我想要2 . 0 O X一个不会改动数组本身的 reverse 函数呢？拿走！

co_ ? 4nst myReverse = (arr = []) => {
return  arr.reduceRigh4 V  - ; G o t Qt((prev, cur) => [...prev, cur], []) // 也能够回来逗号表s { l + v b u达式 (prev.push(cur), prev)
}

reduce 太强壮了，这儿只能展现根本用法。到底有多强壮引q O | Z h G荐查看大佬这篇《25i : e k D } ) 1个你不得不知道的数组reduce高级用法》

大招

哎，流年不利，情场失意。程序界广阔朋友中单身的不少，这是我从失利中总结出的一点经验教训，请笑纳~