重讀《學習JavaScript數據結構與算法-第三版》- 第3章 數組（二）

定場詩

守法朝朝憂悶，強梁夜夜歡歌；
損人利己騎馬騾，正值公平捱餓；
修橋補路瞎眼，殺人放火兒多；
我到西天問我佛，佛說：我也沒轍！

前言

讀《學習JavaScript數據結構與算法》- 第3章 數組，本小節將繼續爲各位小夥伴分享數組的相關知識：ES6數組的新功能。

一、ES6數組新功能

ES5和ES6數組新方法

方法	描述
@@iterator	返回一個包含數組鍵值對的迭代器對象，可以通過同步調用得到數組元素的鍵值對
copyWithin	複製數組中一系列元素到同一數組指定的起始位置
entries	返回包含數組所有鍵值對的@@iterator
includes	如果數組中存在某個元素則返回true，否則返回false
find	根據回調函數給定的條件從數組中查找元素，如果找到返回該元素
findIndex	根據回調函數給定的條件從數組中查找元素，如果找到則返回該元素在數組中的索引
fill	用靜態值填充數組
from	根據已有數組創建一個新數組
keys	返回包含數組所有索引的@@iterator
of	根據傳入的參數創建新數組
value	返回包含數組所有值得@@iterator

除了以上新方法外，增加了for...of循環迭代數組以及從數組實例得到迭代器對象

for...of

迭代數組

let roles = ['宋江', '吳用', '盧俊義']
for (let v of roles) {
  console.log(v)
}

@@iterator

需要通過Symbol.iterator來訪問

let iterator = roles[Symbol.iterator]()
// .next()讀取一次，依次迭代即可; 當迭代結束時，iterator.next().value返回undefined
console.log(iterator.next().value)

// 迭代
for (let v of iterator) {
    console.log(v)
}

entries

返回包含鍵值對的@@iterator

let rolesEntries = roles.entries()
console.log(rolesEntries.next().value) // [ 0, '宋江' ]

for (v of rolesEntries) {
    console.log(v)
}

keys

返回包含數組索引的@@iterator

let rolesKeys = roles.keys()
console.log(rolesKeys)

for (v of rolesKeys) {
    console.log(v)
}

values

返回包含數組值的@@iterator

let rolesValues = roles.values()
console.log(rolesValues)

for (v of rolesValues) {
    console.log(v)
}

Array.from

根據已有數組創建新數組

let newRoles = Array.from(roles)
console.log(newRoles) // ['宋江', '吳用', '盧俊義']

Array.of

根據傳入的參數創建一個新數組

let roles = Array.of('宋江', '李順', '阮小七')
console.log(roles) // [ '宋江', '李順', '阮小七' ]

Array.fill

使用靜態值填充

let numbers = new Array(6)
numbers = Array.fill(1)
console.log(numbers) // [ 1, 1, 1, 1, 1, 1 ]

copyWithin

複製數組的一系列元素到同一數組指定的起始位置

let numbers = [1, 2, 3, 4, 5, 6]
// 將索引3到索引5位置之間的數據，複製到索引1位置
numbers.copyWithin(1, 3, 5)
console.log(numbers) // [ 1, 4, 5, 4, 5, 6 ]

數組排序

rerverse

反轉數組元素

let numbers = [1, 2, 3]
numbers.reverse()
console.log(numbers) // [ 3, 2, 1 ]

sort

按照字母順序對數組進行排序，支持傳入指定排序算法的函數作爲參數

let arr = ['a', 'b', 'd', 'c', 'f', 'e']
arr.sort()
console.log(arr) // [ 'a', 'b', 'c', 'd', 'e', 'f' ]

那麼問題來了！下面的代碼console.log()輸出什麼?

let numbers = [1, 2, 3, 10, 11, 12, 13]
numbers.sort()
console.log(numbers) // ??? 思考10秒鐘.....

答案：[ 1, 10, 11, 12, 13, 2, 3 ] 手動疑問.gif

解析：sort()方法在進行數組元素排序時，把元素默認成字符串進行相互比較。

那如何解決實際問題，得到我們想要的結果呢？

let numbers = [1, 2, 3, 10, 11, 12, 13]
numbers.sort((a, b) => a - b)
console.log(numbers) // [ 1, 2, 3, 10, 11, 12, 13 ]

思考升級：字符串比較-大小寫比較

let users = ['Ana', 'ana', 'John', 'john']
users.sort()
console.log(users) // ???

答案：[ 'Ana', 'John', 'ana', 'john' ] 手動疑問.gif

解析：JS中做字符串比較時，根據字符對應的ASCII碼值來進行比較。A、J、a、j的ASCII碼對應的是：65、74、97、106

解決問題

let users = ['Ana', 'ana', 'John', 'john']
users.sort((a, b) => {
  if (a.toLocaleLowerCase() > b.toLocaleLowerCase()) {
    return 1
  }
  if (a.toLocaleLowerCase() < b.toLocaleLowerCase()) {
    return -1
  }
  return 0
})
console.log(users) // [ 'Ana', 'ana', 'John', 'john' ]

如果想要實現小寫字母排序在前，可使用localCompare方法
users.sort((a, b) => a.localeCompare(b))

實際業務場景：一系列數據排序：如按年齡、級別等

let users = [
  {
    name: '王二狗',
      age: 20
  },
  {
    name: '張三炮',
    age: 30
  },
  {
    name: '李四',
    age: 15
  }
]
users.sort((a, b) => a.age > b.age)
console.log(users) // [ { name: '李四', age: 15 }, { name: '王二狗', age: 20 }, { name: '張三炮', age: 30 } ]

數組搜索

ES5中爲我們提供了indexOf()和lastIndexOf()方法查找元素，但是該二者方法只能查詢字符串數據，如查詢對象數組中的某個元素就力有不逮了。

業務場景： 購物車添加商品操作

當我們向購物車中添加一件商品時，要考慮該商品是否已經在購物車中存在了。

已存在，則購買數量+1；否則爲新增購物車操作。

原先處理方式：遍歷購物車數組myCart，判斷待添加購物車商品tmpGoods的id和已有商品的id進行比對，若相同，則獲取當前元素索引，執行操作

擁抱ES6的新變化吧！- findIndex

// 已有購物車商品信息
let myCart = [
  {
    id: 1001,
    name: 'xxx-范冰冰版',
    num: 1
  },
  {
    id: 1002,
    name: 'xxx-志玲姐姐版',
    num: 2
  },
  {
    id: 1003,
    name: 'xxx-小嶽嶽版',
    num: 1
  }
]

// 待加入購物車的商品
let tmpGoods = {
  id: 1003,
  name: 'xxx-小嶽嶽版',
  num: 1
}

// 檢測該商品是否已經存在於購物車 
let index = myCart.findIndex(item => item.id === tmpGoods.id)
console.log(index)
if (index !== -1) {
  myCart[index].num += tmpGoods.num
} else {
  myCart.push(tmpGoods)
}
console.log(myCart)

findIndex 支持傳入指定的函數作爲篩選條件，返回第一個匹配元素的索引位置，如果不存在則返回-1

find 支持傳入指定的函數作爲條件，返回第一個匹配元素的值

ES7 - includes

includes 方法會根據條件查詢數組中是否有匹配元素，如果存在則返回true；否則返回false

let roles = ['諸葛亮', '荊軻', '虞姬', '亞瑟']
console.log(roles.includes('荊軻')) // true
console.log(roles.includes('哪吒')) // false

輸出數組爲字符串

toString()和join()方法

toString

將數組所有元素輸出爲字符串

let numbers = [1, 2, 3, 4]
console.log(numbers.toString()) // 1,2,3,4

join

將數組元素使用指定的字符進行拼接，默認使用,

let numbers = [1, 2, 3, 4]
console.log(numbers.join('-')) // 1-2-3-4

後記

以上就是胡哥今天給大家分享的內容，喜歡的小夥伴記得收藏、轉發、點擊右下角按鈕在看，推薦給更多小夥伴呦，歡迎多多留言交流...

胡哥有話說，一個有技術，有情懷的胡哥！京東開放平臺首席前端攻城獅。與你一起聊聊大前端，分享前端系統架構，框架實現原理，最新最高效的技術實踐！

長按掃碼關注，更帥更漂亮呦！關注胡哥有話說公衆號，可與胡哥繼續深入交流呦！