数组
Posted justbecoder
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了数组相关的知识,希望对你有一定的参考价值。
定场诗
守法朝朝忧闷,强梁夜夜欢歌;
损人利己骑马骡,正值公平挨饿;
修桥补路瞎眼,杀人放火儿多;
我到西天问我佛,佛说:我也没辙!
前言
读《学习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
后记
以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得收藏
、转发
、点击右下角按钮在看
,推荐给更多小伙伴呦,欢迎多多留言交流...
胡哥有话说,一个有技术,有情怀的胡哥!京东开放平台首席前端攻城狮。与你一起聊聊大前端,分享前端系统架构,框架实现原理,最新最高效的技术实践!
长按扫码关注,更帅更漂亮呦!关注胡哥有话说公众号,可与胡哥继续深入交流呦!
以上是关于数组的主要内容,如果未能解决你的问题,请参考以下文章