重读《学习JavaScript数据结构与算法-第三版》- 第3章 数组（二）

摘要：定场诗守法朝朝忧闷，强梁夜夜欢歌损人利己骑马骡，正值公平挨饿修桥补路瞎眼，杀人放火儿多我到西天问我佛，佛说我也没辙前言读学习数据结构与算法第章数组，本小节将继续为各位小伙伴分享数组的相关知识数组的新功能。

</>复制代码 
守法朝朝忧闷，强梁夜夜欢歌；
损人利己骑马骡，正值公平挨饿；
修桥补路瞎眼，杀人放火儿多；
我到西天问我佛，佛说：我也没辙！

读《学习JavaScript数据结构与算法》- 第3章 数组，本小节将继续为各位小伙伴分享数组的相关知识：ES6数组的新功能。

</>复制代码 
除了以上新方法外，增加了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

以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得收藏、转发、点击右下角按钮在看，推荐给更多小伙伴呦，欢迎多多留言交流...

</>复制代码 
胡哥有话说，一个有技术，有情怀的胡哥！京东开放平台首席前端攻城狮。与你一起聊聊大前端，分享前端系统架构，框架实现原理，最新最高效的技术实践！

长按扫码关注，更帅更漂亮呦！关注胡哥有话说公众号，可与胡哥继续深入交流呦！