JavaScript數(shù)組方法持續(xù)更新

作為 js 的重要一員控嗜，一定要好好了解一番曾掂，若有理解不到之處，還望不吝指教许蓖。

何為數(shù)組，是有序的集合。

一赃额、如何判斷是否是數(shù)組

1. Array.isArray() 字面上的理解竹勉，是不是一個(gè)數(shù)組桨啃。

   let arr = []
   let str = '[]'
   Array.isArray(arr) // true
   Array.isArray(str) // false
   

2. instanceof 是不是 Array 的實(shí)例丧慈。

   let arr = []
   let str = '[]'
   arr instanceof Array // true
   str instanceof Array // false
   

3. constructor , 實(shí)例對(duì)象的隱式原型指向?qū)ο蟮臉?gòu)造函數(shù)簇搅。

   let arr = []
   arr.constructor === Array // true
   

4. Object.prototype.toString.call(arr) === '[object Array]'

   let arr = []
   Object.prototype.toString.call(arr) === '[object Array]' // true
   

二姿现、創(chuàng)建數(shù)組

• 字面量

  let arr = []
  

• new Array()

  let arr = new Array()
  

• split()

  let str = '1,2,3'
  let arr = str.split(',')
  

• Array.from()

  // 將字符串轉(zhuǎn)換成數(shù)組
  let str = '123'
  let arr = Array.from(str) // ["1","2","3"]
  
  // 將 arguments 偽數(shù)組轉(zhuǎn)換為數(shù)組
  Array.from(arguments)
  
  // 將 dom 元素偽數(shù)組轉(zhuǎn)換為數(shù)組
  Array.from(document.querySelectorAll('div'))
  

  Array.from 接受3個(gè)參數(shù)

  • 第一個(gè)參數(shù)必填提佣，需要轉(zhuǎn)換的對(duì)象
  • 第二個(gè)可選天试，接受一個(gè)回調(diào)函數(shù)槐壳，數(shù)組中的每一項(xiàng)都會(huì)回調(diào)該函數(shù)
  • 第三個(gè)可選，綁定回調(diào)函數(shù)的 this 指向

• Array.of() 無(wú)論什么類(lèi)型雳攘，包裹一層變成數(shù)組

  Array.of() 
  Array.of('') 
  Array.of(null)
  Array.of(undefined) 
  Array.of(NaN) 
  Array.of(()=>{}) 
  Array.of({}) 
  Array.of(123) 
  

三吨灭、數(shù)組的方法

關(guān)注一個(gè)方法或者函數(shù)浑彰，主要關(guān)注以下幾點(diǎn)

1. 參數(shù)
2. 返回值

常用的數(shù)組方法

? 不改變?cè)瓟?shù)組

? forEach map filter some every find findIndex concat indexOf lastindexOf slice flat includes

? join reduce

? 改變?cè)瓟?shù)組

? push unshift pop shift splice fill sort reverse

• forEach()

  /*  接受 2 個(gè)參數(shù)
   *    第一個(gè)參數(shù)必填周伦，回調(diào)函數(shù)
   *    第二個(gè)參數(shù)，綁定回調(diào)函數(shù)的 this 指向, (例子里的 obj)
   */
  Array.forEach( (item,index,Array) => {
    // item 表示數(shù)組當(dāng)前循環(huán)到的項(xiàng)
    // index 表示數(shù)組當(dāng)前循環(huán)項(xiàng)的下標(biāo)值
    // Array 表示原數(shù)組
  },obj)
  

  forEach 不能中斷循環(huán)（break）,只能跳過(guò)當(dāng)前循環(huán)項(xiàng)未荒，進(jìn)入下一項(xiàng)的循環(huán)寨腔。

  該方法返回值為 undefined

• map() , 參數(shù)同 forEach 方法。

  // 不能直接跳出循環(huán) break 會(huì)報(bào)錯(cuò)划纽， return 也不行
  let arr = [1,2,3]
  let res = arr.map((item)=>{
   return item + 1
  })
  

  返回值為一個(gè)新的數(shù)組脆侮，不改變?cè)瓉?lái)的數(shù)組。

• filter(), 一般用來(lái)過(guò)濾數(shù)組中的元素,參數(shù)同 forEach 方法

  let obj = {}
  let arr = [
    {
      id: 1,
    },
    {
      id: 2,
    },
    {
      id: 3,
    },
  ]
  let newArr = arr.filter((item, index, Array) => {
    // 必須 return ,且新數(shù)組只會(huì)含有條件為 true 的項(xiàng)
    return item.id == 2
  }, obj)
  console.log(newArr) // [{id: 2}]
  

  返回值為一個(gè)新數(shù)組勇劣，不改變?cè)瓟?shù)組

• some() 靖避，參數(shù)同 forEach

  arr.some( (item, index, Array) => {
     // 有一項(xiàng)滿(mǎn)足條件，則返回 true ,剩余的項(xiàng)不在參與循環(huán)比默；沒(méi)有滿(mǎn)足條件幻捏，返回 false
     // 有點(diǎn) 邏輯 || 的意思,只是參與的項(xiàng)不同。
     return item.id === 2
  }, obj)
  

  返回值 Boolean 類(lèi)型命咐， true or false

• every()篡九，參數(shù)同 forEach

  /* 和 some() 方法相似，有一項(xiàng)是 false 則終止循環(huán)醋奠，返回 false榛臼，每一項(xiàng)都是 true ,返回 true
   * 這個(gè)完全和 && 的思想一致
   */
  

  返回值 Boolean 類(lèi)型， true or false

  tips: 空數(shù)組是個(gè)特例窜司，始終返回 true

• find()沛善，參數(shù)同 forEach

  /* 
   *  找到匹配的項(xiàng)則返回第一個(gè)匹配項(xiàng)，循環(huán)終止塞祈；找不到則返回 undefined
   */
  

  返回值金刁，匹配的項(xiàng) 或者 undefined

• findIndex()，參數(shù)同forEach

  // 匹配到選項(xiàng)則返回第一個(gè)匹配項(xiàng)的索引议薪，循環(huán)終止尤蛮，否則返回 -1
  

  返回值，匹配到的下標(biāo)值 或者 -1

• push()

  // 在數(shù)組的最后增加元素
  let arr = [1,2]
  arr.push(3) // 一個(gè)參數(shù)
  let res = arr.push(4,5,6) // 多個(gè)參數(shù)
  console.log(res) // [1, 2, 3, 4, 5, 6]
  console.log(arr) // 6
  

  返回?cái)?shù)組的長(zhǎng)度斯议，并改變?cè)瓟?shù)組

• unshift()

  let arr = [1,2]
  arr.unshift(0) // 3
  

  返回?cái)?shù)組的長(zhǎng)度产捞，并改變?cè)瓟?shù)組

• pop(), 不需要參數(shù)

  // 從數(shù)組的最后開(kāi)始刪除一個(gè)元素
  let arr = [1,2]
  arr.pop()  // 2
  

  返回被刪除元素，空數(shù)組刪除返回 undefined捅位，改變?cè)瓟?shù)組轧葛，

• shift(), 不需要參數(shù)

  // 從數(shù)組的開(kāi)頭開(kāi)始刪除一個(gè)元素
  let arr = [1,2]
  arr.shift() // 1
  

  返回被刪除元素搂抒，空數(shù)組刪除返回 undefined，改變?cè)瓟?shù)組尿扯，

• concat(), 拼接數(shù)組

  let arr = [1, 2]
  let arr1 = [3, 4]
  let arr2 = [5, 6]
  let newArr = arr.concat(arr1, arr2) // 數(shù)組的拼接
  let newArr2 = newArr.concat() // 數(shù)組的淺拷貝
  

  返回值為新的數(shù)組求晶， 不改變?cè)瓉?lái)的數(shù)組

• indexOf() 與 lastIndexOf()

  // 找到第一次匹配元素的索引值，否則返回 -1
  let arr = [1,2,3,4]
  arr.indexOf(2, 0) // 從索引為 0 的位置開(kāi)始向數(shù)組的末尾查找
  arr.lastIndexOf(2, arr.length-1) // 從索引為 arr.length-1 的位置開(kāi)始向數(shù)組的開(kāi)頭查找
  

  返回值為匹配的下標(biāo) 或者 -1

• slice(), 淺拷貝數(shù)組

  let arr = [1,2,3,4,5,6]
  // 包含開(kāi)始位置衷笋， 不包含結(jié)束位置
  arr.slice(1,2) // [2]
  

  返回值 新的數(shù)組芳杏， 不改變?cè)瓟?shù)組

• splice()， 萬(wàn)金油的存在辟宗，增爵赵、刪、改功能泊脐。

  let arr = [1, 2, 3]
  
  /*  刪除功能空幻，任意位置刪除
   *  參數(shù)1. 開(kāi)始的索引位置，包含該位置
   *  參數(shù)2. 刪除的個(gè)數(shù)
   *  返回值：返回刪除的元素的一個(gè)數(shù)組容客，改變?cè)瓟?shù)組
   */
  arr.splice(0, 1)  // [1]
  console.log(arr)  // [2, 3]
  
  /*  增加功能秕铛，任意位置增加元素
   *  參數(shù)1. 開(kāi)始的索引位置，也可以理解為新數(shù)組的索引位置上插入新的項(xiàng)缩挑。
   *  參數(shù)2. 刪除個(gè)數(shù)為 0
   *  參數(shù)3. 增加的項(xiàng)
   *  返回值：空數(shù)組但两，改變?cè)瓟?shù)組
   */
  arr.splice(1, 0, 1, 2, 3)  // []
  console.log(arr)  // [2, 1, 2, 3, 3]
  
  /*  修改功能，任意位置修改供置，這個(gè)就是增加功能的變形
   *  參數(shù)1. 開(kāi)始索引位置谨湘，包含該位置
   *  參數(shù)2. 替換的個(gè)數(shù) n，包含從索引參數(shù)1開(kāi)始在內(nèi)的向后 n 項(xiàng)將會(huì)從數(shù)組去除
   *  參數(shù)3. 替換的項(xiàng)芥丧， 在數(shù)組索引參數(shù)1位置紧阔，向后插入替換的項(xiàng)
   *  返回值： 空數(shù)組，改變?cè)瓟?shù)組
   */
  arr.splice(1, 2 ,{id:1},{id:2})
  
  

  主要是參數(shù)的靈活運(yùn)用续担，組成不同的功能寓辱，很實(shí)用。

• copyWithin()

  /* 從數(shù)組內(nèi)部替換自身項(xiàng)
   * 參數(shù)1. 替換元素開(kāi)始的位置
   * 參數(shù)2. 從該索引開(kāi)始復(fù)制數(shù)據(jù)赤拒，默認(rèn)是0
   * 參數(shù)3. 復(fù)制數(shù)據(jù)結(jié)束的索引值，不包含該位置诱鞠，默認(rèn)到數(shù)組的結(jié)束
   * 返回值：修改后的新數(shù)組
   */
  let arr = [1, 2, 3, 4]
  arr.copyWithin(0,1,2) // [2,2,3,4]
  

  返回值為新的數(shù)組挎挖，改變?cè)瓟?shù)組

• fill()

  /*  填充數(shù)組
   *  參數(shù)1. 用來(lái)填充數(shù)組的值
   *  參數(shù)2. 起始索引值，默認(rèn)是 0 
   *  參數(shù)3. 終止索引值航夺，不包含該項(xiàng)蕉朵，默認(rèn)是數(shù)組的長(zhǎng)度
   */
  let arr = []
  arr.fill(1, 0, 10) // 無(wú)法改變空數(shù)組，只能改變已有的項(xiàng)
  arr = [1, 2, 3, 4]
  arr.fill(5, 1 ,2) // [1,5,3,4]
  

  返回值為改變后的數(shù)組阳掐，改變?cè)瓟?shù)組

• flat()

  /*  多維數(shù)組變成一維數(shù)組
   *  參數(shù) 指定展開(kāi)嵌套數(shù)組的深度始衅，Infinity 表示任意深度
   *  不傳可以去除數(shù)組中的空項(xiàng)
   *  返回值：新的的數(shù)組冷蚂，不改變?cè)瓟?shù)組
   */
  let arr = [1, 2, [3, 4]]
  arr.flat(1)   // [1, 2, 3, 4]
  
  let arr1 = [1, 2, 3, , ,4]
  arr1.flat() // [1, 2, 3, 4]
  

  返回值：新的的數(shù)組，不改變?cè)瓟?shù)組

• flatMap(),參數(shù)同 forEach

  /*  循環(huán)數(shù)組汛闸，每一項(xiàng)執(zhí)行一個(gè)函數(shù)蝙茶，最終執(zhí)行以下flat()方法
   *  返回值：新的數(shù)組，不會(huì)改變?cè)瓟?shù)組 
   */
  let arr = [1, 2]
  arr.flatMap( (item) => {
      [item, item * 2]
  }) // [1,2,2,4]
  

  flatMap 只能展開(kāi)一層數(shù)組

• includes()

  /*  判斷數(shù)組是否含有某個(gè)指定的值
   *  參數(shù)1. 包含項(xiàng)
   *  參數(shù)2. 檢索的開(kāi)始位置诸老，包含該位置
   *  返回值：包含返回 true , 不包含返回 false
   */
  console.log([1, 2, 3].includes(3));    // true
  console.log([1, 2, 3].includes(3, 3))  // false
  console.log([1, 2, 3].includes(3, 2))  // true
  

  也可用于字符串的檢索隆夯，區(qū)分大小寫(xiě)

• sort()

  /*  排序
   *  參數(shù)1. 
   *  參數(shù)2. 
   *  規(guī)則
   *    - 不傳值，則是轉(zhuǎn)化為字符串逐位比較 ASCII 大小
   *    - 接收一個(gè)函數(shù)别伏，函數(shù)有個(gè)兩個(gè)參數(shù) a b
   *        若 a 小于 b蹄衷，在排序后的數(shù)組中 a 應(yīng)該出現(xiàn)在 b 之前，則返回一個(gè)小于 0 的值厘肮。
   *        若 a 等于 b愧口，則返回 0。
   *        若 a 大于 b类茂，則返回一個(gè)大于 0 的值耍属。
   *  返回值：新的排序后的數(shù)組
   */
  let arr = [1,5,2,10]
  arr.sort((a, b) => {
      // a - b 返回值為正數(shù)，則交換兩項(xiàng)的位置
      return a - b
  }) // [1,2,5,10] 從小到大
  arr.sort((a, b) => {
      return b - a
  }) // [10,5,2,1] 從大到小
  

  返回值為有序的新數(shù)組大咱，改變?cè)瓟?shù)組

• reverse()

  let arr = [1, 2, 3]
  arr.reverse() // [3, 2, 1]
  

  反轉(zhuǎn)數(shù)組恬涧，改變?cè)瓟?shù)組

• toLocaleString() 和 toString()

  /*  將數(shù)組的每一項(xiàng)使用 toLocaleString 或者 toString
   *  不同點(diǎn)是語(yǔ)言環(huán)境的不同
   *  返回值：字符串，不改變?cè)瓟?shù)組
   */
  let arr = [1, 'a', { id: 1 }, new Date()]
  // 1,a,[object Object],2020/5/22 下午2:44:40
  console.log(arr.toLocaleString())
  // 1,a,[object Object],Fri May 22 2020 14:44:40 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
  console.log(arr.toString())
  

  返回值：字符串碴巾，不改變?cè)瓟?shù)組

• join()

  /*  將數(shù)組使用特定的符號(hào)進(jìn)行分割
   *  返回值：字符串溯捆，不改變?cè)瓟?shù)組
   */
  let arr = [1, 2, 3]
  arr.join() // 1,2,3
  arr.join('') //123
  arr.join('*') //1*2*3
  

  和 split 更配哦

• reduce()， 實(shí)用且重要的方法厦瓢。

  /*  累加和累計(jì)這種描述特貼切
   *  參數(shù)1. 一個(gè)處理函數(shù),接收 4 個(gè)參數(shù)
   *      - pre 第一次為參數(shù)2的值提揍，然后是每次 處理函數(shù) 返回的值
   *    — val 當(dāng)前循環(huán)項(xiàng)
   *    - index 當(dāng)前循環(huán)項(xiàng)索引
   *    — arr 當(dāng)前數(shù)組
   *  參數(shù)2. 第一次 pre 的值，默認(rèn)是數(shù)組的第一個(gè)值煮仇。
   */
  let str = '好好學(xué)習(xí)天天向上'
  let arr = str.split('')
  let i = 0
  let res = arr.reduce((pre, val, index, arr) => {
    console.log(i++)
    console.log(`pre：${pre}`)
    console.log(`val：${val}`)
    return pre + val
  }, '我會(huì)')
  console.log(res) // 我會(huì)好好學(xué)習(xí)天天向上
  

  返回值為累計(jì)的結(jié)果劳跃，不會(huì)改變?cè)瓟?shù)組

• reduceRight()

  和 reduce 的結(jié)果一樣，不同的是從數(shù)組的最后開(kāi)始浙垫。

參考

[ MDN ]:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
[ 掘金 ]: https://juejin.im/post/5d1ff6def265da1b855c777f#heading-22