Array.from()的使用方法～～～字符串变成数组、数组去重、伪数组变真数组、序列生成器

Array.from()静态方法从可迭代或类数组对象创建一个新的浅拷贝的数组实例。

语法

Array.from(arrayLike)

Array.from(arrayLike,mapFn)

Array.from(arrayLike,mapFn,thisArg)

参数

arrayLike：想要转换成数组的类数组(带有length属性和索引元素的对象)或可迭代对象(Map、Set对象)。

mapFn(元素，元素的索引)---(可选)：调用数组每个元素的函数，每个将要添加到数组中的值首先会传递给该函数，然后将mapFn的返回值增加到数组中。

thisArg(可选)：执行mapFn时用作this的值

返回值

一个新的数组实例

示例

1、字符串变成数组

console.log(Array.from('foo')) // ['f','o','o']

2、数组去重

console.log(Array.from(new Set(['foo','bar','banner','foo'])))
//['foo','bar','banner']

3、NodeList变成数组

 <div id="wrapper">
      <span class="span1">123</span>
      <span class="span2">123</span>
      <span class="span3">123</span>
      <span class="span4">123</span>
      <span class="span5">123</span>
 </div>
<script>
  const wrapper = document.getElementById("wrapper");
  const spans = wrapper.querySelectorAll("span");
  console.log(spans);
  console.log(
    Array.from(spans, (item, index) => {
      console.log(item.className, index);
      return item.className + "_" + index;
    })
  );
//NodeList(5) [span.span1, span.span2, span.span3, span.span4, span.span5]
//span1 0
//span2 1
//span3 2
//span4 3
//span5 4
//(5) ['span1_0', 'span2_1', 'span3_2', 'span4_3', 'span5_4']
</script>

4、类数组变成数组

 function f() {
    return Array.from(arguments);
  }
  console.log(f(1, 2, 3));
//(3) [1, 2, 3]

5、箭头函数和Array.from()

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

  console.log(
    Array.from({ length: 5 }, (item, i) => {
      console.log(item, i);
      return i;
    })
  );
  // undefined 0
  // undefined 1
  // undefined 2
  // undefined 3
  // undefined 4
  // (5) [0, 1, 2, 3, 4]

6、序列生成器

  function rang(start, stop, step) {
    return Array.from(
      { length: (stop - start) / step + 1 },
      (_, i) => start + i * step
    );
  }
  console.log(rang(0, 4, 1));
  // (5) [0, 1, 2, 3, 4]

  console.log(rang(2, 12, 2));
  // (6) [2, 4, 6, 8, 10, 12]