ES6+ 数组方法扩展

2021-04-13 | 2024-05-15 | 2.1k | 9 分钟

Array.from()

Array.from() 方法于将类数组对象和可迭代的对象转化真正的数组，返回的数组可以调用数组的所有方法；

/**
 * arrayLike：想要转换成数组的类数组对象或可迭代对象
 * mapFn：如果指定了该参数，新数组中的每个元素会执行该回调函数
 * thisArg：可选参数，执行回调函数 mapFn 时 this 对象
 */
Array.from(arrayLike[, mapFn[, thisArg]]);

使用示例：

JavaScript

// 两个参数
var arr = Array.from([1, 2, 3], function (x) {
  return 2 * x;
});
// 等价
var arr = Array.from([1, 2, 3]).map(function (x) {
  return 2 * x;
});

//arr: [2, 4, 6]

// 三个参数
let obj = {
  handle: function (n) {
    return n + 2
  }
}

Array.from([1, 2, 3, 4, 5], function (x) {
  return this.handle(x)
}, obj)
// [3, 4, 5, 6, 7]

// 类数组转化
var arrLike = {
  '0': 'apple',
  '1': 'banana',
  '2': 'orange',
  length: 3
};

// 从字符串里生成数组
Array.from('hello'); 
// [ "h", "e", "l", "l", "o" ]

// 从 Set 中生成数组
const set = new Set(['a', 'b', 'c', 'd']);

Array.from(set);
// [ "a", "b", "c", "d" ]

// 从 Map 中生成数组
const map = new Map([[1, 2], [2, 4], [4, 8]]);

Array.from(map);  // [[1, 2], [2, 4], [4, 8]]

Array.of()

Array.of() 主要是弥补数组构造函数 Array() 的不足；
1. Array.of() 是创建数组的方法，它接收若干个参数，返回一个新的 Array 实例；
2. Array() 因为参数个数的不同，导致 Array() 的重载，Array.of 不存在由于参数不同而导致的重载，并且基本上可以用来替代 Array() 或 new Array()；

基本语法

/**
 * elementN：数组元素，可以是任意个参数，将按顺序成为返回数组中的元素
*/
Array.of(element0[, element1[, ...[, elementN]]])

对比 Array()

Array() 会根据接收的参数不同从而返回不同的数组；
Array 方法在没有参数、一个参数、两个参数时，返回结果都不一样；

JavaScript

// 没有参数的时候返回一个空数组
Array()               // []
// 有一个参数的时候，返回一个长度为此参数的空数组，并且此数组不能被迭代
Array(3)              // [, , ,]
// 有两个参数的时候，才会把参数当成数组的每一项返回
Array(2, 12)          // [2, 12]

Array.of()            // []
Array.of(3)           // [3]
Array.of(2, 12, 'a')  // [2, 12, "a"]

includes()

和字符串中的 includes() 方法一样，当没有参数时，includes() 方法会把第一个参数置成 undefined；

/**
 * valueToFind：需要查找的目标值
 * fromIndex：（可选）
 *    - 从 fromIndex 索引处开始查找 valueToFind
 *    - 如果为负值，从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻，默认为 0
 */
arr.includes(valueToFind[, fromIndex]);

使用示例：

JavaScript

[undefined].includes();		// true
['undefined'].includes();	// false

var arr = ['a', 'b', 'c'];

// arr 的数组长度是 3，第二个参数是 - 10，计算之和为 -7 小于 0，则整个数组都会被搜索
arr.includes('a', -10);   // true
arr.includes('b', -10);   // true
arr.includes('a', -2);    // false

indexOf 不能判断数组中是否有 NaN，对于数组中的空项也不能判断，ES6 的 includes() 可以完美解决；

JavaScript

var arr1 = [, , , , ,];
var arr2 = [null, undefined, NaN];

arr1.indexOf(undefined);  // -1
arr2.indexOf(NaN);        // -1

[, , , , ,].includes(undefined);        // true
[null, undefined, NaN].includes(NaN)];  // true

find() 和 findIndex()

find() 和 findIndex() 这两个方法的使用基本相同，只是它们的返回结果不同；
1. find 方法返回的是数组中符合条件的第一个值，findIndex 方法则返回符合条件的第一个索引的位置；
2. 它们都只是关注第一个查找到的结果，在查找到结果以后就不会继续查找了；

基本语法

/**
 * callback：一个回调函数，有三个参数：当前元素的值、当前元素的索引，以及数组本身；接受数组的每一项并执行该函数，当主动返回 true 时，则终止调用
 * thisArg：（可选）执行 callback 时作为 this 对象的值
 */
arr.find(callback[, thisArg])
arr.findIndex(callback[, thisArg])

方法示例

var arr = [1, 6, 3, 4, 5]
var target = arr.find(function(item) {
  return item % 2 === 0
})
console.log(target)   // 6


var target = arr.findIndex(function(item) {
  return item % 2 === 0
})
console.log(target)   // 1

copyWithin()

copyWithin() 复制原数组指定的项，从 start 到 end 之间的元素；然后替换原数组指定的位置，从 target 开始替换，原数组的长度不会被改变；

/**
 * target：（必须，可以不填）开始替换数据的起始索引位置，复制元素到该位置；如果是负数时，target 将从末尾开始计算
 * start：（可选）开始复制的起始位置；如果是负数时，start 将从末尾开始计算。如果被省略，则会从 0 开始复制
 * end：（可选）开始复制元素的结束位置，不包括 end 位置；如果是负数，end 将从末尾开始计算
 */
arr.copyWithin(target[, start[, end]]);

使用示例：

JavaScript

// 一个参数：当第一个参数是 0 或者没有参数时会复制整个数组，并从起始位置开始替换复制的数据

[1, 2, 3, 4, 5].copyWithin(2);      // [1, 2, 1, 2, 3]
[1, 2, 3, 4, 5].copyWithin(6);      // [1, 2, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(-2);     // [1, 2, 3, 1, 2]

//两个参数：第二个参数是开始复制数组的开始位置，因为没有第三个参数，所以结尾是数组的最后一项

// 起始位置是 3 则复制的数组是 [4, 5]，替换的起始位置是 0，所以替换数组中的第一项和第二项的值
[1, 2, 3, 4, 5].copyWithin(0, 3);     // [4, 5, 3, 4, 5]
// 代码第二个参数是 - 3，start 将从末尾开始计算，会复制 [3, 4, 5]，然后从数组的起始位置开始替换
[1, 2, 3, 4, 5].copyWithin(0, -3);     // [3, 4, 5, 4, 5]

// 三个参数：第三个参数是开始复制元素的结束位置，但是不包括这个位置
[1, 2, 3, 4, 5].copyWithin(1, 3, 4);     // [1, 4, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(1, 3, -4);     // [1, 2, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, -2, -1);    // [4, 2, 3, 4, 5]

fill()

fill() 接收一个指定的值，替换数组中的指定位置的值，可以用于初始化默认值的数组；

/**
 * value：用来填充数组元素的值
 * start：可选）起始的索引，默认值是从 0 开始的，如是负值时则是从结尾开始计算
 * start：（可选）结束的索引，默认是数组的长度 this.length，如是负值时则是从结尾开始计算
 */
arr.fill(value[, start[, end]]);

使用示例：

JavaScript

// 一个参数时
let arr = Array(5).fill(1)
console.log(arr)    // [1, 1, 1, 1, 1]

// 两个参数时
[1, 2, 3].fill(0, 0);      // [0, 0, 0]
[1, 2, 3].fill(0, 1);      // [1, 0, 0]
[1, 2, 3].fill(0, -1);     // [1, 2, 0]
[1, 2, 3].fill(0, -3);     // [0, 0, 0]

['a', 'b', 'c'].fill(4, 1, 2);    // ["a", 4, "c"]
['a', 'b', 'c'].fill(4, -3, -2);  // [4, "b", "c"]
['a', 'b', 'c'].fill(4, -3, 1);   // [4, "b", "c"]
['a', 'b', 'c'].fill(4, -2, 1);   // ["a", "b", "c"]

填充对象问题：对象是引用类型，更改其中一项其他项的值也会跟着改变；

var arr = Array(3).fill({})  // [{}, {}, {}]
arr[1].name = 'china';       // [{name: 'china'}, {name: 'china'}, {name: 'china'}]

Array.isArray()

判断 JS 对象值是否是 Array，是则为 true，否则为 false；

Array.isArray() 的使用；

// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([10]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c'))
// 鲜为人知的事实：其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype); 

// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray(new Uint8Array(32))
Array.isArray({ __proto__: Array.prototype });

不支持 ES6 语法的环境下可以使用下面的方法给 Array 上添加 isArray 方法；

if (!Array.isArray){
  Array.isArray = function(arg){
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

flat()

ES6 提供的 flat() 方法，对多维数组进行扁平化操作，而且可以对数组中的空项进行移除；
```
// depth 指定要提取嵌套数组结构的深度，默认值为 1
var newArray = arr.flat([depth])
```

使用：

JavaScript

// 扁平化
var arr = [1, 2, [3, 4, [5, 6]]];
arr.flat();      // [1, 2, 3, 4, [5, 6]]
arr.flat(2);     // [1, 2, 3, 4, 5, 6]

var arr = [1, 2, [3, 4, [5, 6, [7, 8]]]];
arr.flat(Infinity);  // [1, 2, 3, 4, 5, 6, 7, 8]

// 去掉数组空项
var arr = [1, 2, , 4, 5];
arr.flat();      // [1, 2, 4, 5]

数组深拷贝

var arr1 = [1, 2, [3, 4, [5, 6]]];
var arr2 = arr1.flat(0);
console.log(arr1 === arr2)	// false

打赏作者

您的打赏是我前进的动力

微信

支付宝

ES6+ 字符串方法扩展

ES6+ 对象的扩展

中午好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

1. Array.from()
2. Array.of()
3. includes()
4. find() 和 findIndex()
5. copyWithin()
6. fill()
7. Array.isArray()
8. flat()