之前整理过 string 和 array 的API,最近发现好多没有总结到的。ES6新出,用的比较少的,在这里补充一下。
话不多说,我们开始吧。
es6数组新增API
ES6新增数组的方法
- Array.from()
Array.from 方法用于将两类对象转为真正的数组:
类似数组的对象(array-like object)
可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)
1 | let arrayLike = { |
Array.of()
Array.of 方法用于将一组值,转换为数组。弥补数组构造函数 Array()的不足。因为参数个数的不同,会导致 Array()的行为有差异1
2
3
4
5
6
7
8
9
10
11//如下代码看出差异
Array.of(3); // [3]
Array.of(3, 11, 8); // [3,11,8]
new Array(3); // [, , ,]
new Array(3, 11, 8); // [3, 11, 8]
// Array.of方法可以用下面的代码模拟实现。
function ArrayOf() {
return [].slice.call(arguments)
}数组实例的 find() 和 findIndex()
=> find()方法找到第一个符合条件的成员,没有符合的则返回 undefined
=> findIndex 方法的用法与 find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-11
2
3
4
5
6
7
8
9
10
11
12
13
14// find()
var item = [1, 4, -5, 10].find(n => n < 0);
console.log(item); // -5
// find 也支持这种复杂的查找
var points = [
{ x: 10, y: 20 },
{ x: 20, y: 30 },
{ x: 30, y: 40 },
{ x: 40, y: 50 },
{ x: 50, y: 60 }
];
points.find(function macther(point){
return point.x % 3 === 0 && point.y % 4 === 0
})
=> findIndex()返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
=> indexOf(..) 会提供这些,但是无法控制匹配逻辑;它总是使用 === 严格相等。所以 ES6 的 findIndex(..) 才是解决方案
1 | var points = [ |
数组实例的 fill()
=> fill()方法使用给定值, 填充一个数组
=> fill 方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置// fill方法使用给定值, 填充一个数组 var fillArray = new Array(6).fill(1) console.log(fillArray) //[1,1,1,1,1,1] //fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。 ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c'] // 注意,如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象。 let arr = new Array(3).fill({ name: "Mike" }) arr[0].name = 'Ben' console.log(arr) // [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]
数组实例的 entries(),keys() 和 values()
entries(),keys()和 values()——用于遍历数组,可以用 for…of 循环进行遍历
唯一的区别是 keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历for (let index of ["a",
for (let index of ["a", "b"].keys()) { console.log(index); } // 0 1 for (let elem of ["a", "b"].values()) { console.log(elem); } // a b for (let [index, elem] of ["a", "b"].entries()) { console.log(index, elem); } // 0 "a" // 1 "b" var a = [1, 2, 3]; [...a.values()]; // [1,2,3] [...a.keys()]; // [0,1,2] [...a.entries()]; // [ [0,1], [1,2], [2,3] ]
includes()方法返回一个布尔值
[1, 2, 3].includes(2)
[1, 2, 3].includes(2) // true [(1, 2, 3)].includes(4) // false [(1, 2, NaN)].includes(NaN); // true
includes 方法弥补了 indexOf 方法不够语义化和误判 NaN 的缺点
- 数组实例的 flat(),flatMap()
=> flat()用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。传参数代表拉平几层默认是一层
=> flatMap()只能展开一层数组。方法对原数组的每个成员执行一个函数(相当于执行 Array.prototype.map()),然后对返回值组成的数组执行 flat()方法。该方法返回一个新数组,不改变原数组// flat() [1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]] [1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5] //flatMap() [2, 3, 4].flatMap((x) => [x, x * 2]) //map执行完后是[[2, 4], [3, 6], [4, 8]] // 然后在执行flat()方法得到下边的结果 // [2, 4, 3, 6, 4, 8] // flatMap()只能展开一层数组 // 相当于 .flat() [1, 2, 3, 4].flatMap(x => [ [x * 2] ]) // map执行完后是[[[2]], [[4]], [[6]], [[8]]] // 然后在执行flat()方法得到如下结果 // [[2], [4], [6], [8]]
字符串API比较少
- includes(), startsWith(), endsWith()(常用)
- repeat()
- padStart(), padEnd() –作用联想padding
- 模板字符串
- 本文作者: Jambo
- 版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!