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

后记

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

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

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

胡哥有话说

转载于:https://my.oschina.net/u/4188011/blog/3093531

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
本书高清PDF 86M 收集自网络,请在资源下载后24H内删除,著作权归原书作者。如觉得图书非常有用,请自己购买纸质书籍。 《数据结构算法JavaScript描述》 推荐序  XI 前言  XII 第1 JavaScript的编程环境和模型  1 1.1 JavaScript环境  1 1.2 JavaScript编程实践  2 1.2.1 声明和初始化变量  3 1.2.2 JavaScript中的算术运算和数学库函数  3 1.2.3 判断结构  4 1.2.4 循环结构  6 1.2.5 函数  7 1.2.6 变量作用域  7 1.2.7 递归  9 1.3 对象和面向对象编程  10 1.4 小结  11 第2 数组  13 2.1 JavaScript中对数组的定义  13 2.2 使用数组  13 2.2.1 创建数组  14 2.2.2 读写数组  15 2.2.3 由字符串生成数组  15 2.2.4 对数组的整体性操作  16 2.3 存取函数  17 2.3.1 查找元素  17 2.3.2 数组的字符串表示  18 2.3.3 由已有数组创建新数组  18 2.4 可变函数  19 2.4.1 为数组添加元素  19 2.4.2 从数组中删除元素  20 2.4.3 从数组中间位置添加和删除元素  21 2.4.4 为数组排序  21 2.5 迭代器方法  22 2.5.1 不生成新数组的迭代器方法  22 2.5.2 生成新数组的迭代器方法  25 2.6 维和多维数组  27 2.6.1 创建数组  27 2.6.2 处理数组的元素  28 2.6.3 参差不齐的数组  29 2.7 对象数组  30 2.8 对象中的数组  31 2.9 练习  32 第3 列表  33 3.1 列表的抽象数据类型定义  33 3.2 实现列表类  34 3.2.1 append:给列表添加元素  35 3.2.2 remove:从列表中删除元素  35 3.2.3 find:在列表中查找某一元素  35 3.2.4 length:列表中有多少个元素  36 3.2.5 toString:显示列表中的元素  36 3.2.6 insert:向列表中插入一个元素  37 3.2.7 clear:清空列表中所有的元素  37 3.2.8 contains:判断给定值是否在列表中  37 3.2.9 遍历列表  38 3.3 使用迭代器访问列表  39 3.4 一个基于列表的应用  40 3.4.1 读取文本文件  40 3.4.2 使用列表管理影碟租赁  41 3.5 练习  44 第4 栈  45 4.1 对栈的操作  45 4.2 栈的实现  46 4.3 使用Stack类  48 4.3.1 数制间的相互转换  49 4.3.2 回文  50 4.3.3 递归演示  51 4.4 练习  52 第5 队列  53 5.1 对队列的操作  53 5.2 一个用数组实现的队列  54 5.3 使用队列:方块舞的舞伴分配问题  57 5.4 使用队列对数据进行排序  61 5.5 优先队列  63 5.6 练习  65 第6 链表  67 6.1 数组的缺点  67 6.2 定义链表  67 6.3 设计一个基于对象的链表  69 6.3.1 Node类  69 6.3.2 LinkedList类  69 6.3.3 插入新节点  69 6.3.4 从链表中删除一个节点  71 6.4 双向链表  74 6.5 循环链表  78 6.6 链表的其他方法  79 6.7 练习  79 第7 字典  81 7.1 Dictionary类  81 7.2 Dictionary类的辅助方法  83 7.3 为Dictionary类添加排序功能  85 7.4 练习  86 第8 散列  87 8.1 散列概览  87 8.2 HashTable类  88 8.2.1 选择一个散列函数  88 8.2.2 一个更好的散列函数  91 8.2.3 散列化整型键  93 8.2.4 对散列表排序、从散列表中取值  95 8.3 碰撞处理  96 8.3.1 开链法  96 8.3.2 线性探测法  99 8.4 练习  100 第9 集合  101 9.1 集合的定义、操作和属性  101 9.1.1 集合的定义  101 9.1.2 对集合的操作  102 9.2 Set类的实现  102 9.3 更多集合操作  104 9.4 练习  107 第10 叉树和叉查找树  109 10.1 树的定义  109 10.2 叉树和叉查找树  111 10.2.1 实现叉查找树  111 10.2.2 遍历叉查找树  113 10.3 在叉查找树上进行查找  116 10.3.1 查找最小值和最大值  116 10.3.2 查找给定值  117 10.4 从叉查找树上删除节点  118 10.5 计数  120 10.6 练习  123 第11 图和图算法  125 11.1 图的定义  125 11.2 用图对现实中的系统建模  127 11.3 图类  127 11.3.1 表示顶点  127 11.3.2 表示边  127 11.3.3 构建图  128 11.4 搜索图  130 11.4.1 深度优先搜索  130 11.4.2 广度优先搜索  133 11.5 查找最短路径  135 11.5.1 广度优先搜索对应的最短路径  135 11.5.2 确定路径  135 11.6 拓扑排序  137 11.6.1 拓扑排序算法  137 11.6.2 实现拓扑排序算法  137 11.7 练习  141 第12 排序算法  143 12.1 数组测试平台  143 12.2 基本排序算法  145 12.2.1 冒泡排序  145 12.2.2 选择排序  148 12.2.3 插入排序  150 12.2.4 基本排序算法的计时比较  151 12.3 高级排序算法  153 12.3.1 希尔排序  153 12.3.2 归并排序  158 12.3.3 快速排序  163 12.4 练习  167 第13 检索算法  169 13.1 顺序查找  169 13.1.1 查找最小值和最大值  172 13.1.2 使用自组织数据  175 13.2 分查找算法  177 13.3 查找文本数据  183 13.4 练习  185 第14 高级算法  187 14.1 动态规划  187 14.1.1 动态规划实例:计算斐波那契数列  188 14.1.2 寻找最长公共子串  191 14.1.3 背包问题:递归解决方案  194 14.1.4 背包问题:动态规划方案  195 14.2 贪心算法  196 14.2.1 第一个贪心算法案例:找零问题  196 14.2.2 背包问题的贪心算法解决方案  197 14.3 练习  199 封面介绍  200
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页