请选择 进入手机版 | 继续访问电脑版
查看: 73|回复: 0

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

[复制链接]
  • TA的每日心情
    开心
    前天 19:06
  • 签到天数: 1469 天

    [LV.10]以坛为家III

    1177

    主题

    3082

    帖子

    9万

    积分

    管理员

    IBC编程社区-原道楠

    Rank: 9Rank: 9Rank: 9

    积分
    94058

    推广达人突出贡献优秀版主荣誉管理论坛元老

    发表于 2019-8-16 17:53:20 | 显示全部楼层 |阅读模式

    马上加入IBC,查看更多教程

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    定场诗
    1. 守法朝朝忧闷,强梁夜夜欢歌;损人利己骑马骡,正值公平挨饿;修桥补路瞎眼,杀人放火儿多;我到西天问我佛,佛说:我也没辙!
    复制代码
    前言

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

    ES5和ES6数组新方法

    方法描述@@iterator返回一个包罗数组键值对的迭代器对象,可以通过同步调用得到数组元素的键值对copyWithin复制数组中一系列元素到同一数组指定的起始位置entries返回包罗数组所有键值对的@@iteratorincludes如果数组中存在某个元素则返回true,否则返回falsefind根据回调函数给定的条件从数组中查找元素,如果找到返回该元素findIndex根据回调函数给定的条件从数组中查找元素,如果找到则返回该元素在数组中的索引fill用静态值填充数组from根据已有数组创建一个新数组keys返回包罗数组所有索引的@@iteratorof根据传入的参数创建新数组value返回包罗数组所有值得@@iterator
    除了以上新方法外,增加了for...of循环迭代数组以及从数组实例得到迭代器对象
    for...of
    迭代数组
    1. let roles = ['宋江', '吴用', '卢俊义']for (let v of roles) {  console.log(v)}
    复制代码
    @@iterator
    需要通过Symbol.iterator来访问
    1. let iterator = roles[Symbol.iterator]()// .next()读取一次,依次迭代即可; 当迭代结束时,iterator.next().value返回undefinedconsole.log(iterator.next().value)// 迭代for (let v of iterator) {    console.log(v)}
    复制代码
    entries
    返回包罗键值对的@@iterator
    1. let rolesEntries = roles.entries()console.log(rolesEntries.next().value) // [ 0, '宋江' ]for (v of rolesEntries) {    console.log(v)}
    复制代码
    keys
    返回包罗数组索引的@@iterator
    1. let rolesKeys = roles.keys()console.log(rolesKeys)for (v of rolesKeys) {    console.log(v)}
    复制代码
    values
    返回包罗数组值的@@iterator
    1. let rolesValues = roles.values()console.log(rolesValues)for (v of rolesValues) {    console.log(v)}
    复制代码
    Array.from
    根据已有数组创建新数组
    1. let newRoles = Array.from(roles)console.log(newRoles) // ['宋江', '吴用', '卢俊义']
    复制代码
    Array.of
    根据传入的参数创建一个新数组
    1. let roles = Array.of('宋江', '李顺', '阮小七')console.log(roles) // [ '宋江', '李顺', '阮小七' ]
    复制代码
    Array.fill
    使用静态值填充
    1. let numbers = new Array(6)numbers = Array.fill(1)console.log(numbers) // [ 1, 1, 1, 1, 1, 1 ]
    复制代码
    copyWithin
    复制数组的一系列元素到同一数组指定的起始位置
    1. 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
    反转数组元素
    1. let numbers = [1, 2, 3]numbers.reverse()console.log(numbers) // [ 3, 2, 1 ]
    复制代码
    sort
    按照字母顺序对数组进行排序,支持传入指定排序算法的函数作为参数
    1. let arr = ['a', 'b', 'd', 'c', 'f', 'e']arr.sort()console.log(arr) // [ 'a', 'b', 'c', 'd', 'e', 'f' ]
    复制代码
    那么问题来了!下面的代码console.log()输出什么?
    1. let numbers = [1, 2, 3, 10, 11, 12, 13]numbers.sort()console.log(numbers) // ??? 思考10秒钟.....
    复制代码
    答案:[ 1, 10, 11, 12, 13, 2, 3 ] 手动疑问.gif
    剖析:sort()方法在进行数组元素排序时,把元素默认成字符串进行相互比较。
    那如何解决实际问题,得到我们想要的结果呢?
    1. 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 ]
    复制代码
    思考升级:字符串比较-大小写比较
    1. 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
    解决问题
    1. let users = [&#39;Ana&#39;, &#39;ana&#39;, &#39;John&#39;, &#39;john&#39;]users.sort((a, b) => {  if (a.toLocaleLowerCase() > b.toLocaleLowerCase()) {    return 1  }  if (a.toLocaleLowerCase() < b.toLocaleLowerCase()) {    return -1  }  return 0})console.log(users) // [ &#39;Ana&#39;, &#39;ana&#39;, &#39;John&#39;, &#39;john&#39; ]
    复制代码
    如果想要实现小写字母排序在前,可使用localCompare方法
    users.sort((a, b) => a.localeCompare(b))
    实际业务场景:一系列数据排序:如按年龄、级别等
    1. let users = [  {    name: &#39;王二狗&#39;,      age: 20  },  {    name: &#39;张三炮&#39;,    age: 30  },  {    name: &#39;李四&#39;,    age: 15  }]users.sort((a, b) => a.age > b.age)console.log(users) // [ { name: &#39;李四&#39;, age: 15 }, { name: &#39;王二狗&#39;, age: 20 }, { name: &#39;张三炮&#39;, age: 30 } ]
    复制代码
    数组搜索

    ES5中为我们提供了indexOf()和lastIndexOf()方法查找元素,但是该二者方法只能查询字符串数据,如查询对象数组中的某个元素就力有不逮了。
    业务场景: 购物车添加商品操作
    当我们向购物车中添加一件商品时,要考虑该商品是否已经在购物车中存在了。
    已存在,则购买数量+1;否则为新增购物车操作。
    原先处置惩罚方式:遍历购物车数组myCart,判定待添加购物车商品tmpGoods的id和已有商品的id进行比对,若相同,则获取当前元素索引,执行操作
    拥抱ES6的新变化吧!- findIndex
    1. // 已有购物车商品信息let myCart = [  {    id: 1001,    name: &#39;xxx-范冰冰版&#39;,    num: 1  },  {    id: 1002,    name: &#39;xxx-志玲姐姐版&#39;,    num: 2  },  {    id: 1003,    name: &#39;xxx-小岳岳版&#39;,    num: 1  }]// 待加入购物车的商品let tmpGoods = {  id: 1003,  name: &#39;xxx-小岳岳版&#39;,  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
    1. let roles = [&#39;诸葛亮&#39;, &#39;荆轲&#39;, &#39;虞姬&#39;, &#39;亚瑟&#39;]console.log(roles.includes(&#39;荆轲&#39;)) // trueconsole.log(roles.includes(&#39;哪吒&#39;)) // false
    复制代码
    输出数组为字符串

    toString()和join()方法
    toString
    将数组所有元素输出为字符串
    1. let numbers = [1, 2, 3, 4]console.log(numbers.toString()) // 1,2,3,4
    复制代码
    join
    将数组元素使用指定的字符进行拼接,默认使用,
    1. let numbers = [1, 2, 3, 4]console.log(numbers.join(&#39;-&#39;)) // 1-2-3-4
    复制代码
    后记

    以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得收藏转发、点击右下角按钮在看,推荐给更多小伙伴呦,欢迎多多留言交流...
    胡哥有话说,一个有技术,有情怀的胡哥!京东开放平台首席前端攻城狮。与你一起聊聊大前端,分享前端系统架构,框架实现原理,最新最高效的技术实践!
    长按扫码关注,更帅更漂亮呦!关注胡哥有话说公众号,可与胡哥继续深入交流呦!
    175504nc9q0307q5fh0hfb.png






    来源:https://www.cnblogs.com/justbecoder/archive/2019/08/16/11364218.html
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则