數(shù)組技巧

生成類似[1-100]這樣的的數(shù)組：

測試大量數(shù)組數(shù)據(jù)時可以：

let arr = new Array(100).fill(0).map((item, index) => index + 1)

數(shù)組解構(gòu)賦值應用

// 交換變量
[a, b] = [b, a]
[o.a, o.b] = [o.b, o.a]
// 生成剩余數(shù)組
const [a, ...rest] = [...'asdf'] // a：'a'芬首，rest: ["s", "d", "f"]

數(shù)組淺拷貝

const arr = [1, 2, 3]
const arrClone = [...arr]
// 對象也可以這樣淺拷貝
const obj = { a: 1 }
const objClone = { ...obj }

淺拷貝方法有很多如arr.slice(0, arr.length)/Arror.from(arr)等如贷，但是用了...操作符之后就不會再想用其他的了~

數(shù)組合并

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = [7, 8, 9]
const arr = [...arr1, ...arr2, ...arr3]

arr1.concat(arr2, arr3)同樣可以實現(xiàn)合并，但是用了...操作符之后就不會再想用其他的了~

數(shù)組去重

const arr = [1, 1, 2, 2, 3, 4, 5, 5]
const newArr = [...new Set(arr)]

new Set(arr)接受一個數(shù)組參數(shù)并生成一個set結(jié)構(gòu)的數(shù)據(jù)類型霎烙。set數(shù)據(jù)類型的元素不會重復且是Array Iterator碑韵，所以可以利用這個特性來去重赡茸。

數(shù)組取交集

const a = [0, 1, 2, 3, 4, 5]
const b = [3, 4, 5, 6, 7, 8]
const duplicatedValues = [...new Set(a)].filter(item => b.includes(item))
duplicatedValues // [3, 4, 5]

數(shù)組取差集

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

數(shù)組轉(zhuǎn)對象

const arr = [1, 2, 3, 4]
const newObj = {...arr} // {0: 1, 1: 2, 2: 3, 3: 4}
const obj = {0: 0, 1: 1, 2: 2, length 3}
// 對象轉(zhuǎn)數(shù)組不能用展開操作符，因為展開操作符必須用在可迭代對象上
let newArr = [...obj] // Uncaught TypeError: object is not iterable...
// 可以使用Array.form()將類數(shù)組對象轉(zhuǎn)為數(shù)組
let newArr = Array.from(obj) // [0, 1, 2]

數(shù)組常用遍歷

數(shù)組常用遍歷有 forEach祝闻、every占卧、some、filter联喘、map华蜒、reduce、reduceRight耸袜、find友多、findIndex 等方法牲平，很多方法都可以達到同樣的效果堤框。數(shù)組方法不僅要會用，而且要用好纵柿。要用好就要知道什么時候用什么方法蜈抓。
遍歷的混合使用
filter、map方法返回值仍舊是一個數(shù)組昂儒，所以可以搭配其他數(shù)組遍歷方法混合使用沟使。注意遍歷越多效率越低~

const arr = [1, 2, 3, 4, 5]
const value = arr
    .map(item => item * 3)
    .filter(item => item % 2 === 0)
    .map(item => item + 1)
    .reduce((prev, curr) => prev + curr, 0)

檢測數(shù)組所有元素是否都符合判斷條件

const arr = [1, 2, 3, 4, 5]
const isAllNum = arr.every(item => typeof item === 'number')

檢測數(shù)組是否有元素符合判斷條件

const arr = [1, 2, 3, 4, 5]
const hasNum = arr.some(item => typeof item === 'number')
找到第一個符合條件的元素/下標
const arr = [1, 2, 3, 4, 5]
const findItem = arr.find(item => item === 3) // 返回子項
const findIndex = arr.findIndex(item => item === 3) // 返回子項的下標

數(shù)組使用誤區(qū)

數(shù)組的方法很多，很多方法都可以達到同樣的效果渊跋，所以在使用時要根據(jù)需求使用合適的方法腊嗡。
垃圾代碼產(chǎn)生的很大原因是數(shù)組常用方法使用不當，這里有一下需要注意的點：
array.includes() 和 array.indexOf()
array.includes() 返回布爾值拾酝，array.indexOf() 返回數(shù)組子項的索引燕少。indexOf 一定要在需要索引值的情況下使用。

const arr = [1, 2, 3, 4, 5]
// 使用indexOf蒿囤，需要用到索引值
const index = arr.indexOf(1) // 0
if (~index) { // 若index === -1客们，~index得到0，判斷不成立；若index不為-1底挫，則~index得到非0恒傻，判斷成立。
    arr.spilce(index, 1)
}

// 使用includes建邓，不需要用到索引值
// 此時若用indexOf會造成上下文上的閱讀負擔：到底其他地方有沒有用到這個index?
const isExist = arr.includes(6) // true
if (!isExist) {
    arr.push(6)
}

array.find()盈厘、 array.findIndex() 和 array.some()
array.find()返回值是第一個符合條件的數(shù)組子項，array.findIndex() 返回第一個符合條件的數(shù)組子項的下標官边，array.some()返回有無復合條件的子項扑庞，如有返回true，若無返回false拒逮。注意這三個都是短路操作罐氨，即找到符合條件的之后就不在繼續(xù)遍歷。
在需要數(shù)組的子項的時候使用array.find() 滩援；需要子項的索引值的時候使用 array.findIndex() 栅隐；而若只需要知道有無符合條件的子項，則用array.some()玩徊。

const arr = [{label: '男', value: 0}, {label: '女', value: 1}, {label: '不男不女', value: 2}]

// 使用some
const isExist = arr.some(item => item.value === 2)
if (isExist) {
    console.log('哈哈哈找到了')
}

// 使用find
const item = 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[index]
    arr.splice(index, 1)
    console.log(`你刪除了${delItem.label}`)
}
建議在只需要布爾值的時候和數(shù)組子項是字符串或數(shù)字的時候使用 array.some()：
// 當子包含數(shù)字0的時候可能出錯
const arr = [0, 1, 2, 3, 4]

// 正確
const isExist = arr.some(item => item === 0)
if (isExist) {
    console.log('存在要找的子項租悄，很舒服~')
}

// 錯誤
const isExist = arr.find(item => item === 0)
if (isExist) { // isExist此時是0，隱式轉(zhuǎn)換為布爾值后是false
    console.log('執(zhí)行不到這里~')
}


// 當子項包含空字符串的時候也可能出錯
const arr = ['', 'asdf', 'qwer', '...']

// 正確
const isExist = arr.some(item => item === '')
if (isExist) {
    console.log('存在要找的子項恩袱，很舒服~')
}

// 錯誤
const isExist = arr.find(item => item === '')
if (isExist) { // isExist此時是''泣棋，隱式轉(zhuǎn)換為布爾值后是false
    console.log('執(zhí)行不到這里~')
}

array.find()和 array.filter()
只需要知道 array.filter() 返回的是所有符合條件的子項組成的數(shù)組，會遍歷所有數(shù)組畔塔；而 array.find() 只返回第一個符合條件的子項潭辈，是短路操作。不再舉例~
合理使用 Set 數(shù)據(jù)結(jié)構(gòu)
由于 es6 原生提供了 Set 數(shù)據(jù)結(jié)構(gòu)澈吨，而 Set 可以保證子項不重復把敢，且和數(shù)組轉(zhuǎn)換十分方便，所以在一些可能會涉及重復添加的場景下可以直接使用 Set 代替 Array谅辣，避免了多個地方重復判斷是否已經(jīng)存在該子項修赞。

const set = new Set()
set.add(1)
set.add(1)
set.add(1)
set.size // 1
const arr = [...set] // arr: [1]

強大的reduce

array.reduce遍歷并將當前次回調(diào)函數(shù)的返回值作為下一次回調(diào)函數(shù)執(zhí)行的第一個參數(shù)。
利用 array.reduce 替代一些需要多次遍歷的場景桑阶，可以提高代碼運行效率柏副。
假如有如下每個元素都由字母's'加數(shù)字組成的數(shù)組arr，現(xiàn)在找出其中最大的數(shù)字：（arr不為空）

const arr = ['s0', 's4', 's1', 's2', 's8', 's3']

// 方法1  進行了多次遍歷蚣录，低效
const newArr = arr.map(item => item.substring(1)).map(item => Number(item))
const maxS = Math.max(...newArr)

// 方法2  一次遍歷
const maxS = arr.reduce((prev, cur) => {
  const curIndex = Number(cur.replace('s', ''))
  return curIndex > prev ? curIndex : prev
}, 0)
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((prev, curr) => {
    return curr % 2 === 0 ? [...prev, curr] : prev
}, [])

也可用 reduce 做下面這樣的處理來生成想要的 html 結(jié)構(gòu)：
// 后端返回數(shù)據(jù)

const data = {
  'if _ then s9': [
    '作用屬于各種,結(jié)構(gòu)屬于住宅,結(jié)構(gòu)能承受作用,作用屬于在正常建造和正常使用過程中可能發(fā)生',
    '作用屬于各種,結(jié)構(gòu)屬于住宅,結(jié)構(gòu)能承受作用,作用屬于在正常建造和正常使用過程中可能發(fā)生',
    '作用屬于各種,結(jié)構(gòu)屬于住宅,結(jié)構(gòu)能承受作用,作用屬于在正常建造和正常使用過程中可能發(fā)生'
    ],
  'if C then s4': [
    '當有條件時時,結(jié)構(gòu)構(gòu)件滿足要求,要求屬于安全性包归、適用性和耐久性',
    '當有條件時時,住宅結(jié)構(gòu)滿足要求,要求屬于安全性锨推、適用性和耐久性'
  ]
}

const ifthens = Object.entries(data).reduce((prev, cur) => {
  const values = cur[1].reduce((prev, cur) => `${prev}<p>${cur}</p>`, '')
  return `
    ${prev}
    <li>
      <p>${cur[0]}</p>
      ${values}
    </li>
  `
}, '')

const html = `
  <ul class="nlp-notify-body">
    ${ifthens}
  </ul>
`

生成的 html 結(jié)構(gòu)如下：

<ul class="nlp-notify-body">            
  <li>
    <p>if _ then s9</p>
    <p>作用屬于各種,結(jié)構(gòu)屬于住宅,結(jié)構(gòu)能承受作用,作用屬于在正常建造和正常使用過程中可能發(fā)生</p>
    <p>作用屬于各種,結(jié)構(gòu)屬于住宅,結(jié)構(gòu)能承受作用,作用屬于在正常建造和正常使用過程中可能發(fā)生</p>
    <p>作用屬于各種,結(jié)構(gòu)屬于住宅,結(jié)構(gòu)能承受作用,作用屬于在正常建造和正常使用過程中可能發(fā)生</p>
  </li>
  <li>
    <p>if C then s4</p>
    <p>當有條件時時,結(jié)構(gòu)構(gòu)件滿足要求,要求屬于安全性铅歼、適用性和耐久性</p>
    <p>當有條件時時,住宅結(jié)構(gòu)滿足要求,要求屬于安全性、適用性和耐久性</p>
  </li>
</ul>