ES6 数组的扩展, Array.from()方法,数组实例的flat()方法

ES6数组的扩展

1.0 扩展运算符

含义: 扩展运算符(spread)是三个点 ... . 它好比 rest 参数的逆运算. 将一个数组转为用逗号分隔的参数序列.

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

该运算主要用于函数的调用

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

扩展运算符 替代函数的 apply 方法

// ES5 的写法
function f(x, y, z) {
    // ...
}
var args = [0, 1, 2];
f.apply(null, args)

// ES6的写法
function f(x, y, z) {
    // ...
}
let args = [0, 1, 2];
f(...args);

1.1.1 扩展运算符的应用

1. 复制数组

   扩展运算符提供了复制数组的简便写法

   const a1 = [1, 2];
   // 写法一
   const a2 = [...a1];
   console.log(a2); // [ 1, 2 ]
   // 写法二
   const [...a2] = a1;
   console.log(a2); // [ 1, 2 ]
   

2. 合并数组

   扩展运算符提供了数组合并的心写法

   const arr1 = ['a', 'b'];
   const arr2 = ['c'];
   const arr3 = ['d', 'e'];
   
   // ES5 的合并数组
   arr1.concat(arr2, arr3);
   // [ 'a', 'b', 'c', 'd', 'e' ]
   
   // ES6 的合并数组
   [...arr1, ...arr2, ...arr3]
   // [ 'a', 'b', 'c', 'd', 'e' ]
   

3. 扩展运算符与解构赋值结合

   扩展运算符可以与解构赋值结合起来，用于生成数组。

   const [first, ...rest] = [1, 2, 3, 4, 5];
   first // 1
   rest  // [2, 3, 4, 5]
   
   const [first, ...rest] = [];
   first // undefined
   rest  // []
   
   const [first, ...rest] = ["foo"];
   first  // "foo"
   rest   // []
   

   如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错

4. 扩展运算符把字符串转为字符数组

   扩展运算符还可以将字符串转为真正的数组。

   [...'hello']
   // [ "h", "e", "l", "l", "o" ]
   

2.0 Array.from() 方法

Array.from 方法用于将两类对象转换为真正的数组:

1. 类数组对象.
2. 可遍历对象.

下面是一个类数组对象, Array.from 将它转换为真正的数组.

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

实际应用中, 常见的类数组对象是 DOM 操作返回的 NodeList集合, 以及函数内部的 arguments 对象. Array.from 都可以将他们转换为真正的数组.

// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
  return p.textContent.length > 100;
});

// arguments对象
function foo() {
  var args = Array.from(arguments);
  // ...
}

如果参数是一个真正的数组, 那么Array.from() 会返回一个一样的新数组

Array.from([1, 2, 3])
// [1, 2, 3]

值得注意的是: 扩展运算符（...）也可以将某些数据结构转为数组。

// arguments对象
function foo() {
  const args = [...arguments];
}

// NodeList对象
[...document.querySelectorAll('div')]

3.0 Array.of() 方法

Array.of 方法用于将一组值转化为数组.

const result = Array.of('Gene', 1, 2, 'me')
console.log(result); // [ 'Gene', 1, 2, 'me' ]

这个方法的主要目的, 是弥补数组构造函数 Array() 的不足. 因为参数个数的不同, 会导致Array() 的行为有差异.

console.log(Array()); // []
console.log(Array(2)); // [ <2 empty items> ]
console.log(Array(3, 6, 9)); // [ 3, 6, 9 ]

上面代码中, Array 方法 没有参数, 一个参数, 三个参数 时, 返回结果都不一样. 只有当参数不少于 2 个时, Array() 才会返回由参数组成的新数组. 参数个数只有一个时, 实际上是制定数组的长度.

Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。

Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

4.0 数组实例的 find() 和 findIndex()方法

1. 数组实例 find()方法

find()方法返回第一个符合条件的数组的元素

数组实例的 find方法, 用于找出第一个符合条件的数组成员 , 它的参数是一个回调函数, 所有数组成员依次执行该回调函数, 直到找出第一个返回值为 true 的成员, 然后返回该成员, 如果没有符合条件的成员, 则返回 undefined

const arr = [1, 3, 5, 7, 9, 2, -4, -6, 8];
const result = arr.find((item, index,arr) => item < 0)
console.log(result); // 返回第一个符合条件的  元素 -4

2. 数组实例 findIndex() 方法

数组实例的 findIndex() 方法的用法 与 find方法非常类似, 返回第一个符合条件的 数组成员的位置, 如果所有成员都不符合条件, 则返回 -1

const arr = [1, 3, 5, 7, 9, 2, -4, -6, 8];
const result = arr.findIndex((item) => item < 0)
console.log(result); // 返回第一个符合条件的元素的位置 6

🏴 这两个方法都可以接收第二个参数, 用来绑定回调函数的 this对象

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

上面的代码中，find函数接收了第二个参数person对象，回调函数中的this对象指向person对象。

5.0 数组实例的 includes()方法

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。ES2016 引入了该方法。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

6.0 数组实例的 flat() 和 flatMap()方法

1. flat() 方法

数组的成员有时还是数组, Array.prototype.flat() 用于将嵌套的数组拉平, 变成一维的数组.

const arr = [1,2,[3]]
console.log(arr.flat()); // [1, 2, 3]

上面代码中，原数组的成员里面有一个数组，flat()方法将子数组的成员取出来，添加在原来的位置。

flat() 默认只会 “拉平” 一层嵌套数组, 如果想要 “拉平” 多层的嵌套数组, 可以将 flat方法的参数写成一个整数, 表示想要拉平的层数, 默认为 1

const arr = [1, 2, [3, [4, 5]]]
console.log(arr.flat(1)); // [1, 2, 3,[4,5]
console.log(arr.flat(2)); // [1, 2, 3, 4, 5]

如果不管数组嵌套多少层, 都要转换为 一维素组, 可以使用Infinity 关键字作为参数.

const arr = [1, 2, [3, [4, 5,[6,7,[8,9,[10,11,[12,13]]]]]]]
console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]

如果原数组有空位, flat() 方法会跳过空位.

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

2. flatMap() 方法

   flatMap() 方法对 原数组的每个成员执行一个函数(相当于执行Array.prototype.map() ), 然后对返回值组成的 新数组执行 `flat() 方法. 该方法返回一个新数组, 不改变原数组.

   // 相当于 [[2, 4], [3, 6], [4, 8]].flat()
   [2, 3, 4].flatMap((x) => [x, x * 2])
   // [2, 4, 3, 6, 4, 8]
   

   flatMap() 只能展开一层数组.

7.0 数组的空位

数组的空位指，数组的某一个位置没有任何值。比如，Array构造函数返回的数组都是空位。

Array(3) // [, , ,]

, 不改变原数组.

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

flatMap() 只能展开一层数组.

7.0 数组的空位

数组的空位指，数组的某一个位置没有任何值。比如，Array构造函数返回的数组都是空位。

Array(3) // [, , ,]

总结:

上一章: ES6函数扩展,箭头函数, 函数参数默认值作用域
下一章: ES6对象扩展, 对象链式判断, Object.assign()方法

交流学习添加微信(备注技术交流学习): Gene199302

该博客为学习阮一峰 ES6入门课所做的笔记记录, 仅用来留作笔记记录和学习理解