摘要：定場(chǎng)詩(shī)守法朝朝憂悶，強(qiáng)梁夜夜歡歌損人利己騎馬騾，正值公平挨餓修橋補(bǔ)路瞎眼，殺人放火兒多我到西天問我佛，佛說我也沒轍前言讀學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)與算法第章數(shù)組，本小節(jié)將繼續(xù)為各位小伙伴分享數(shù)組的相關(guān)知識(shí)數(shù)組的新功能。

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

讀《學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)與算法》- 第3章 數(shù)組，本小節(jié)將繼續(xù)為各位小伙伴分享數(shù)組的相關(guān)知識(shí)：ES6數(shù)組的新功能。

除了以上新方法外，增加了for...of循環(huán)迭代數(shù)組以及從數(shù)組實(shí)例得到迭代器對(duì)象

for...of

迭代數(shù)組

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

@@iterator

需要通過Symbol.iterator來訪問

let iterator = roles[Symbol.iterator]()
// .next()讀取一次，依次迭代即可; 當(dāng)?shù)Y(jié)束時(shí)，iterator.next().value返回undefined
console.log(iterator.next().value)

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

entries

返回包含鍵值對(duì)的@@iterator

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

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

keys

返回包含數(shù)組索引的@@iterator

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

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

values

返回包含數(shù)組值的@@iterator

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

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

Array.from

根據(jù)已有數(shù)組創(chuàng)建新數(shù)組

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

Array.of

根據(jù)傳入的參數(shù)創(chuàng)建一個(gè)新數(shù)組

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

Array.fill

使用靜態(tài)值填充

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

copyWithin

復(fù)制數(shù)組的一系列元素到同一數(shù)組指定的起始位置

let numbers = [1, 2, 3, 4, 5, 6]
// 將索引3到索引5位置之間的數(shù)據(jù)，復(fù)制到索引1位置
numbers.copyWithin(1, 3, 5)
console.log(numbers) // [ 1, 4, 5, 4, 5, 6 ]

rerverse

反轉(zhuǎn)數(shù)組元素

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

sort

按照字母順序?qū)?shù)組進(jìn)行排序，支持傳入指定排序算法的函數(shù)作為參數(shù)

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 ] 手動(dòng)疑問.gif
解析：sort()方法在進(jìn)行數(shù)組元素排序時(shí)，把元素默認(rèn)成字符串進(jìn)行相互比較。

那如何解決實(shí)際問題，得到我們想要的結(jié)果呢？

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 ]

思考升級(jí)：字符串比較-大小寫比較

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

答案：[ "Ana", "John", "ana", "john" ] 手動(dòng)疑問.gif
解析：JS中做字符串比較時(shí)，根據(jù)字符對(duì)應(yīng)的ASCII碼值來進(jìn)行比較。A、J、a、j的ASCII碼對(duì)應(yīng)的是：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" ]

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

實(shí)際業(yè)務(wù)場(chǎng)景：一系列數(shù)據(jù)排序：如按年齡、級(jí)別等

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()方法查找元素，但是該二者方法只能查詢字符串?dāng)?shù)據(jù)，如查詢對(duì)象數(shù)組中的某個(gè)元素就力有不逮了。

業(yè)務(wù)場(chǎng)景： 購(gòu)物車添加商品操作

當(dāng)我們向購(gòu)物車中添加一件商品時(shí)，要考慮該商品是否已經(jīng)在購(gòu)物車中存在了。
已存在，則購(gòu)買數(shù)量+1；否則為新增購(gòu)物車操作。

原先處理方式：遍歷購(gòu)物車數(shù)組myCart，判斷待添加購(gòu)物車商品tmpGoods的id和已有商品的id進(jìn)行比對(duì)，若相同，則獲取當(dāng)前元素索引，執(zhí)行操作

擁抱ES6的新變化吧！- findIndex

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

// 待加入購(gòu)物車的商品
let tmpGoods = {
  id: 1003,
  name: "xxx-小岳岳版",
  num: 1
}

// 檢測(cè)該商品是否已經(jīng)存在于購(gòu)物車 
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 支持傳入指定的函數(shù)作為篩選條件，返回第一個(gè)匹配元素的索引位置，如果不存在則返回-1
find 支持傳入指定的函數(shù)作為條件，返回第一個(gè)匹配元素的值

ES7 - includes

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

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

toString()和join()方法

toString

將數(shù)組所有元素輸出為字符串

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

join

將數(shù)組元素使用指定的字符進(jìn)行拼接，默認(rèn)使用,

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

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

胡哥有話說，一個(gè)有技術(shù)，有情懷的胡哥！京東開放平臺(tái)首席前端攻城獅。與你一起聊聊大前端，分享前端系統(tǒng)架構(gòu)，框架實(shí)現(xiàn)原理，最新最高效的技術(shù)實(shí)踐！

長(zhǎng)按掃碼關(guān)注，更帥更漂亮呦！關(guān)注胡哥有話說公眾號(hào)，可與胡哥繼續(xù)深入交流呦！