乐趣区

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

jiezi

定场诗

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

前言

读《学习 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

后记

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

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

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

退出移动版