一、ES6数组新功能
ES5和ES6数组新方法
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
