新增的静态方法
数组新增的静态方法有如下:
Array.from()
基本使用
Array.from()
可以将类数组或者ES6
新增的Set
和Map
转换为数组对象。
const arrLike = {
0: 'a',
1: 'b',
2: 'c',
length: 3
}
console.log(Array.from(arrLike));
// [ 'a', 'b', 'c' ]
- 同时,
Array.from()
还可以接收第二个回调函数参数,用以对每个元素进行预处理。
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
简单实现
function MyArray() {}
MyArray.form = function(arrLike, cb) {
var res = [];
for (var i = 0; i < arrLike.length; i++) {
res.push(arrLike[i]);
}
return cb ? res.map(cb) : res;
}
const arrLike = {
0: 'a',
1: 'b',
2: 'c',
length: 3
}
console.log(MyArray.form(arrLike));
// [ 'a', 'b', 'c' ]
console.log(MyArray.form(arrLike, (item) => item.toUpperCase()));
// [ 'A', 'B', 'C' ]
Array.of()
用于将一组值,转换为数组,没有参数的时候,返回一个空数组
基本使用
console.log(Array.of(1, 2, 3));
// [ 1, 2, 3 ]
console.log(Array.of());
// []
简单实现
MyArray.of = function() {
return MyArray.form(arguments);
}
console.log(MyArray.of(1, 2, 3));
// [ 1, 2, 3 ]
console.log(MyArray.of());
// []
实例对象新增的方法
关于数组实例对象新增的方法有如下:
copyWithin()
find()
findIndex()
fill()
entries()
keys()
values()
includes()
flat()
flatMap()
copyWithin()
将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组,不会修改数组的长度
参数:
target
目标位置,必需start
被复制内容的起始位置,可选,默认为0end
被复制内容的结束位置,可选,默认为数组长度
基本使用
console.log([1, 2, 3, 4, 5].copyWithin(0, 3));
// 将从 3 号位直到数组结束的成员(4 和 5),复制到从 0 号位开始的位置,结果覆盖了原来的 1 和 2
// [4, 5, 3, 4, 5]
简单实现
Array.prototype.copyWithinDemo = function(target, start, end) {
target = target > this.length - 1 ? this.length - 1 : target;
start = start || 0;
end = end ? end > this.length ? this.length : end : this.length;
for (var i = start; i < end; i++) {
this[target] = this[i];
++target;
}
return this;
}
console.log([1, 2, 3, 4, 5].copyWithinDemo(0, 3));
// [4, 5, 3, 4, 5]
find()
find()
用于找出第一个符合条件的数组成员,接收一个回调函数作为参数
基本使用
console.log([1, 2, 3].find((item) => item < 2));
// 1
简单实现
Array.prototype.findDemo = function(cb) {
for (var i = 0; i < this.length; i++) {
if (cb(this[i], i, this)) {
return this[i];
}
}
}
console.log([1, 2, 3].findDemo((item) => item < 2));
// 1
findIndex()
findIndex()
与find()
的使用方式 相同,不过返回值为第一个符合条件的数组成员的索引值
console.log([1, 2, 3].findIndex((item) => item < 2));
// 0
fill()
fill()
可以填充一个数组
基本使用
console.log(new Array(3).fill(6));
// [ 6, 6, 6 ]
console.log(['a', 'a', 'a'].fill(6));
// [ 6, 6, 6 ]
- 还可以通过第二个
start
和第三个参数end
限制填充的范围
console.log(['a', 'a', 'a'].fill(6, 1, 2));
// [ 'a', 6, 'a' ]
如果填充的类型是引用数据类型,则是浅拷贝
简单实现
Array.prototype.fillDemo = function(val, start, end) {
start = start || 0;
end = end ? end > this.length ? this.length : end : this.length;
for (var i = start; i < end; i++) {
this[i] = val;
}
return this;
}
console.log(new Array(3).fillDemo(6));
// [ 6, 6, 6 ]
console.log(['a', 'a', 'a'].fillDemo(6));
// [ 6, 6, 6 ]
console.log(['a', 'a', 'a'].fillDemo(6, 1, 2));
// [ 'a', 6, 'a' ]
entries()
、keys()
、values()
- 这三个方法返回的都是
ES6
新增的迭代器对象Iterator
entries()
返回的每个元素都是一个包含索引值和元素值的数组keys()
返回的每个元素是所操作数组的索引值values()
返回的每个元素是所操作数组的元素值
基本使用
for (const key of [1, 2, 3].keys()) {
console.log(key);
}
// 0 1 2
for (const val of [1, 2, 3].values()) {
console.log(val);
}
// 1 2 3
for (const [key, val] of [1, 2, 3].entries()) {
console.log(key, val);
}
// 0 1
// 1 2
// 2 3
简单实现
Array.prototype.keysDemo = function * () {
for (let i = 0; i < this.length; i++) {
yield i;
}
}
Array.prototype.valuesDemo = function * () {
yield * this;
}
Array.prototype.entriesDemo = function * () {
for (let i = 0; i < this.length; i++) {
yield [i, this[i]];
}
}
for (const key of [1, 2, 3].keysDemo()) {
console.log(key);
}
// 0 1 2
for (const val of [1, 2, 3].valuesDemo()) {
console.log(val);
}
// 1 2 3
for (const [key, val] of [1, 2, 3].entriesDemo()) {
console.log(key, val);
}
// 0 1
// 1 2
// 2 3
includes()
基本使用
- 用于判断数组是否包含给定的值
console.log([1, 2, NaN].includes(1));
// true
console.log([1, 2, NaN].includes(3));
// false
console.log([1, 2, NaN].includes(NaN));
// true
- 第二个参数表示搜索的起始位置,默认为
0
console.log([1, 2, NaN].includes(1, 1));
// false
简单实现
Array.prototype.includesDemo = function(val, start) {
start = start || 0;
for (var i = start; i < this.length; i++) {
if(Object.is(val, this[i])) {
return true;
}
}
return false;
}
console.log([1, 2, NaN].includesDemo(1));
// true
console.log([1, 2, NaN].includesDemo(3));
// false
console.log([1, 2, NaN].includesDemo(NaN));
// true
console.log([1, 2, NaN].includesDemo(1, 1));
// false
flat()
数组打平,返回一个新数组,对原数据没有影响。flat()
默认只会打平一层,可以传递一个整数参数,表示打平的层次。如果想全部打平,传递Infinity
即可。
基本使用
console.log([1, [2, [3, [4, [5]]]]].flat(Infinity));
// [ 1, 2, 3, 4, 5 ]
简单实现
Array.prototype.flatDemo = function (depth) {
depth = depth || 1;
let res = this;
for (let i = 0; i < depth; i++) {
res = res.reduce((a, b) => a.concat(b), []);
if (!res.some(function(item) {
return Array.isArray(item);
})) break;
}
return res;
}
console.log([1, [2, [3, [4, [5]]]], 6].flatDemo());
// [ 1, 2, [ 3, [ 4, [5] ] ], 6 ]
console.log([1, [2, [3, [4, [5]]]], 6].flatDemo(2));
// [ 1, 2, 3, [ 4, [ 5 ] ], 6 ]
console.log([1, [2, [3, [4, [5]]]], 6].flatDemo(Infinity));
// [ 1, 2, 3, 4, 5, 6 ]
flatMap()
flatMap()
方法对原数组的每个成员执行一次map()
方法,然后对返回值组成的数组执行flat()
方法(只打平一个层次)。
基本使用
console.log([1, 2, 3, 4].flatMap(x => [x * 2]));
// [2, 4, 6, 8]
// 先map
// [[2], [4], [6], [8]]
// 再打平
// [2, 4, 6, 8]
简单实现
Array.prototype.flatMapDemo = function (cb) {
return this.map(cb).flatDemo();
}
console.log([1, 2, 3, 4].flatMapDemo(x => [x * 2]));
// [2, 4, 6, 8]