ES(七) Array 的扩展

  • 1、扩展运算符
  • 2、Array.from()
  • 3、Array.of()
  • 4、数组实例的 copeWithin()
  • 5、数组实例的 find()和 findIndex()
  • 6、数组实例的 fill()
  • 7、数组实例的 includes()
  • 8、数组实例的 flat()、flatMap()

#一、扩展运算符

1. 含义

扩展运算符–好比 rest 参数的逆运算,讲一个数组转为用逗号分隔的参数序列

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

主要用于函数调用

var arg = [1, 2, 3];
f(1, 2, ...arg, 56);

一:简化求出数组的最大最小值

// ES5
Math.max.apply(null, [14, 3, 77]);

// ES6
Math.max(...[14, 3, 77]);

// 等同于
Math.max(14, 3, 77);

二:因为 push 不能 push 数组 ES5 中使用 apply 变通写法

// ES5
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
Array.prototype.push.apply(arr1, arr2);

// ES6
arr1.push(...arr2);

2.应用

  • 复制数组

    // ES5中变通的方式
    const a1 = [1, 2];
    const a2 = a1.concat();
    a2[0] = 2;
    a1; // [1,2]
    

// ES6 const a2 = […a1]; // 或者 const […a2] = a1;

- 合并数组(浅拷贝)

```js
// ES5
arr1.concat(arr2)

//ES6
[...arr1,...arr2]
  • 与解构赋值结合
// ES5
const [first, ...rest] = [1, 2, 3, 4, 5, 6];
first; // 1
rest; // [2,3,4,5,6]
  • 字符串
[...'hi']  // ['h','i']
  • 将 Iterator 接口的对象转为真正的数组
let nodeList = document.querySelectorAll("div");
let array = [...nodeList];
  • Map 和 Set 结构,Generator 函数

    凡具有 Iterator 接口的对象,都可以使用扩展运算符,如 Map 结构

let map = new Map([
  [1, "one"],
  [2, "two"],
  [3, "three"]
]);
let arr = [...map.keys()]; // [1,2,3]
let arr = [...map.values()]; // ['one','two','three']

Generator 函数运行后,也会返回一个遍历器对象,因此也可以使用

const go = function*() {
     
  yield 1;
  yield 2;
  yield 3;
};
[...go()]; // [1,2,3]

#二、Array.from()

Array from方法将两类对象转化为真正的数组:类似数组的对象和可遍历的对象(包括 Map 和 Set)

let arrayLike = {
     
  "0": "a",
  "1": "b",
  length: 2
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a','b']

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

第二个参数,类似 map 对数据进行处理放回返回的数组

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], x => x * x);
// [1, 4, 9]

#三、Array.of()

用于将一组值,转化为数组,弥补 Array() 因为参数个数不同造成的行为差异

Array(2); // [empty x 2]
Array(1, 2); // [1,2]

Array.of(3, 4, 5, 6); // [3,4,5,6]
Array.of(1); // [1]

实现方式

Array.prototype.of = function() {
     
  return [].slice.call(arguments);
};

#四、数组实例的 copyWithin()

copyWithin() 将制定位置的成员复制覆盖到其他位置的值

Array.prototype.copyWithin(target, (start = 0), (end = this.length));

-target(必需):从该位置开始替换,负值为倒数

-start(可选):该位置开始读取数据

-end(可选):到该位置停止读取,默认时数组长度

实现该方法

[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4,2,3,4,5]
[1, 2, 3, 4, 5]
  .copyWithin(0, 1, 2) // [2,2,3,4,5]
  [(1, 2, 3, 4, 5)].copyWithin(1, 5); // [1, 2, 3, 4, 5]

#五、数组实例的 find()和 findIndex()

find() 用来找出第一个符合条件的数组成员(未找到返回 undefined),第一个参数是一个回调函数, 第二个参数是绑定回调函数的this对象

[1, 2, -3, 2]
  .find(n => n > 0)
  [
    // 1
    (1, 2, -3, 2)
  ].find(n => n < 0);
// -3

回调函数可以接受三个参数,当前值,当前位置,原数组。

[1, 2, 3, 10].find(function(value, index, arr) {
     
  return value > 9;
});

findIndex和 find 用法类似,返回符合条件的数组成员的位置,不符合条件的话,返回-1

[1, 2, -3, 2].findIndex(n => n < 0);
// 2

第二个参数是绑定回调函数的this对象

let person1 = {
      name: "John", age: 20 };
let person2 = {
      name: "LiMing", age: 41 }[(1, 2, 12, 17, 22, 35)]
  .find(function(v) {
     
    return v > this.age;
  }, person1) //  22
  [(1, 2, 12, 17, 22, 35, 45)].find(function(v) {
     
    return v > this.age;
  }, person2); //  45

#六、数组实例的 fill()

fill方法使用给定植,填充一个数组。第一个参数是要填充的内容,第二个参数开始位置,第三个是结束位置。默认全部填充

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

如果填充的类型是对象,被复制的是同一个内存地址的对象,而不是深拷贝对象。

let arr = new Array(3).fill({
      name: "Mile" });
arr[0].name = "Ben";
arr; // [{name:'Ben'},{name:'Ben'},{name:'Ben'}]

#七、数组实例的 includes()

Array.porototype.includes方法返回一个布尔值,相比字符串的 includes 方法新增

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

代替indexOf 使用

indexOf 的不足

1、不够语义化

2、不能检查 NaN [NaN].indexOf(NaN) //. -1

Array.prototype.includes 实现的方式

const contains = (() => {
     
  Array.prototype.includes
    ? (arr, value) => arr.includes(value)
    : (arr, value) => arr.some(el => el === value);
})();

#八、数组实例的 flat() , flatMap()

flat() 用于数组拍平,多维数组变成一维数组,返回新数组,不影响原数据, 参数默认为 1 拉平的是嵌套一层的数组 ,Infinity 多少层都可以拉伸,如果原数组有空位,flat()方法会跳过空位。

[1, 2, [3, 4]].flat();
// [1,2,3,4]

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

flatMap() 是遍历,再 flat() , 只能拍平一次

[1, 2, 3].flatMap(x => [x, x * 2]);
// 相当于[[1,1],[2,4],[3,9]].flat()
// 结果为 [1,1,2,4,3,9]

你可能感兴趣的:(ES6)