摘要:定场诗守法朝朝忧闷,强梁夜夜欢歌损人利己骑马骡,正值公平挨饿修桥补路瞎眼,杀人放火儿多我到西天问我佛,佛说我也没辙前言读学习数据结构与算法第章数组,本小节将继续为各位小伙伴分享数组的相关知识数组的新功能。
定场诗
守法朝朝忧闷,强梁夜夜欢歌; 损人利己骑马骡,正值公平挨饿; 修桥补路瞎眼,杀人放火儿多; 我到西天问我佛,佛说:我也没辙!前言
读《学习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 支持传入指定的函数作为筛选条件,返回第一个匹配元素的索引位置,如果不存在则返回-1find 支持传入指定的函数作为条件,返回第一个匹配元素的值
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://www.ucloud.cn/yun/109975.html
摘要:此处应该有掌声前言读学习数据结构与算法第章数组,本节将为各位小伙伴分享数组的相关知识概念创建方式常见方法以及数组的新功能。数组数组是最简单的内存数据结构,用于存储一系列同一种数据类型的值。 定场诗 大将生来胆气豪,腰横秋水雁翎刀。 风吹鼍鼓山河动,电闪旌旗日月高。 天上麒麟原有种,穴中蝼蚁岂能逃。 太平待诏归来日,朕与先生解战袍。 此处应该有掌声... 前言 读《学习JavaScrip...
摘要:前言本章为重读学习数据结构与算法的系列文章,该章节主要讲述数据结构链表,以及实现链表的过程和原理。链表,是存储有序的元素集合。链表中的元素在内存中并不是连续放置的,每个元素由一个存储自身的元素节点和一个指向下一个元素的引用指针或链接组成。 定场诗 伤情最是晚凉天,憔悴厮人不堪言; 邀酒摧肠三杯醉.寻香惊梦五更寒。 钗头凤斜卿有泪,荼蘼花了我无缘; 小楼寂寞新雨月.也难如钩也难圆。 前言...
摘要:第二种接口的概念和面向对象编程相关接口视为一份合约,在合约里可以定义这份合约的类或接口的行为接口告诉类,它需要实现一个叫做的方法,并且该方法接收一个参数。 定场诗 八月中秋白露,路上行人凄凉; 小桥流水桂花香,日夜千思万想。 心中不得宁静,清早览罢文章, 十年寒苦在书房,方显才高志广。 前言 洛伊安妮·格罗纳女士所著的《学习JavaScript数据结构与算法》第三版于2019年的5月份...
摘要:定场诗马瘦毛长蹄子肥,儿子偷爹不算贼,瞎大爷娶个瞎大奶奶,老两口过了多半辈,谁也没看见谁前言本章为重读学习数据结构与算法第三版的系列文章,主要讲述队列数据结构双端队列数据结构以及队列相关应用。 定场诗 马瘦毛长蹄子肥,儿子偷爹不算贼,瞎大爷娶个瞎大奶奶,老两口过了多半辈,谁也没看见谁! 前言 本章为重读《学习JavaScript数据结构与算法-第三版》的系列文章,主要讲述队列数据结构、...
摘要:前言今天和大家一起聊聊的推荐书籍,每一本都是精选,做前端开发的朋友们如果没读过,可以尝试一下。如果怕麻烦,也可以关注晓舟报告,发送获取书籍,四个字,就可以得到电子书的提取码。 前言 今天和大家一起聊聊JavaScript的推荐书籍,每一本都是精选,做前端开发的朋友们如果没读过,可以尝试一下。下面给大家简单介绍了书的内容,还有读书的方法,希望可以帮大家提升读书效率。 一、《JavaScr...
阅读 3092·2023-04-25 15:44
阅读 1878·2019-08-30 13:11
阅读 2832·2019-08-30 11:11
阅读 3008·2019-08-29 17:21
阅读 1308·2019-08-29 15:38
阅读 899·2019-08-29 12:49
阅读 1795·2019-08-28 18:19
阅读 3224·2019-08-26 14:01