ES6 扩展运算符

1. 扩展运算符可以将数组拆分成以逗号分隔的序列

  let arr = ['blue', 'pink', 'green'];
  ...arr  // blue, pink, green
  console.log(...arr); // blue pink green

联想到 join() 方法

  console.log(arr.join(' ')); // blue pink green

2. 扩展运算符简单应用:

(1)合并数组

  let arr1 = ['blue', 'pink', 'green'];
  let arr2 = [1, 2, 3];
  let arr3 = [...arr2, ...arr1];
  arr1.push(...arr2);
  console.log(arr1); // ["blue", "pink", "green", 1, 2, 3]
  console.log(arr3); //[1, 2, 3, "blue", "pink", "green"]

(2)将伪数组转换为真正的数组【目的是可以使伪数组中的元素调用Array对象中的方法】

  let pseudo_divs = document.querySelectorAll('div'); // 伪数组形式
  console.log(...pseudo_divs); 
  let real_divs = [...pseudo_divs]; // Array数组形式 
  real_divs.push('a'); // 可以调用Array中的任何方法
  console.log(...real_divs);

扩展:Array.from() 也可以将【伪数组】或【可遍历对象】转化为数组

  let real_divs = Array.from(pseudo_divs);

Array.from()将可遍历对象转化为数组形式举例:

第一个参数为需要转换的伪数组或对象,第二个参数为一个函数,

类似于map方法,对遍历获取到的每一个值都进行某些操作,并返回其值,

如下将每个元素都乘2返回.

  let iterator_obj = {
    '0': '2',
    '1': '4',
    'length': 2
  };
  let real_divs = Array.from(iterator_obj, value => value * 2); // Array数组形式
  real_divs.push('a'); // 可以调用Array中的任何方法
  console.log(...real_divs);

 

posted @ 2021-08-10 14:09  TwinkleG  Views(208)  Comments(0)    收藏  举报