ES6的Array.from()，Array.of()1、如果给你一个类数组的对象，如何转化为一个真正的数组只要是部署

Array.from()

1、如果给你一个类数组的对象，如何转化为一个真正的数组


let add = { '0':'a', '1':'b', '2':'c' } 
//es5 
let arr = [].slice.call(add); //[a,b,c] 
//es6
let arr = Array.from(add); //[a,b,c]

只要是部署了Iterator接口的数据结构，Array.from都能将其转为数组。

2、实际的应用场景

获取函数内部的arguments对象。

arguments对象其实就是函数传进来的参数。箭头函数没有arguments对象。

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

DOM操作返回的NodeList集合


let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function (p){
    console.log(p);
})

3、`提一个问题，字符串和set可以用Array.from转化为真正的数组吗？`

可以哒。因为只要具有Iterator接口就可以。数组、字符串、Map 和 Set 等。这些对象都实现了 [Symbol.iterator] 方法，因此你可以使用诸如 for...of 循环和扩展运算符等语法糖来遍历它们

4、Array.from还可以接收第二个参数，是用来做什么的呢？

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

由上面的例子可以看出，第二个参数是用作对每个元素进行处理，将处理后的值放入返回的数组中

Array.of()

Array.of() // []
Array.of(3,11,8)  //[3,11,8]
Array.of(3) //[3]
Array.of(3).length() // 1

由上面的例子可以看出，Array.of总是返回参数值组成的数组，如果没有值，就是一个空数组。

官方一些的解释。主要是用作将一组数值转化为数组，这个方法的主要目的，是为了弥补数组构造函数Array()的不足。因为参数个数的不同会导致Array的行为有差异。

接下来我们看一下，参数个数不同导致的Array行为差异到底是什么。

Array() //[]
Array(3) // [, , ,]
Array(2,5,9) // [2,5,9]

上述例子不难看出来，如果Array()参数只有一个时，是指定数组的长度，只有参数大于一个的时候，但是返回由参数组成的新数组。

提问一个问题，怎么实现一个Array.of

function ArrayOf(){
    return [].slice.call(arguments)
}

5、Array.reduce

// 数组去重

let a = [1,2,3,5,5,6,7,8,9]
a = a.reduce((acc,cur)=>{
  if(!acc.includes(cur)){
    acc.push(cur)
  }
  return acc
},[])
console.log(a) // [1,2,3,5,6,7,8,9];


let array = [1, 2, 3, 4, 3, 2, 1];
let uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 输出: [1, 2, 3, 4]

扩展：什么是Iterator接口？？？

在JavaScript中，Iterator接口是一种用于定义对象的迭代行为（即可以遍历其元素的方式）的协议。一个对象要被认为是可迭代的，它必须实现以下两个方法之一：

[Symbol.iterator]：返回一个新的迭代器对象。
next()：这个方法返回一个结果对象，该对象包含两个属性：
- value: 迭代器返回的下一个值。
- done: 一个布尔值，表示迭代是否已经完成。

实现 Iterator 接口

下面是一个简单的例子，展示如何创建一个自定义的迭代器对象：

const myIterable = {
  [Symbol.iterator]: function() {
    let step = 0;
    return {
      next: function() {
        step++;
        if (step === 1) {
          return { value: 'Hello', done: false };
        } else if (step === 2) {
          return { value: 'World', done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

// 使用 for...of 循环来遍历 myIterable 对象
for (const word of myIterable) {
  console.log(word);
}

// 输出:
// Hello
// World

内置的可迭代对象

JavaScript 中有许多内置的可迭代对象，例如数组、字符串、Map 和 Set 等。这些对象都实现了 [Symbol.iterator] 方法，因此你可以使用诸如 for...of 循环和扩展运算符等语法糖来遍历它们。例如：

const arr = [1, 2, 3];
for (const num of arr) {
  console.log(num);
}

// 输出:
// 1
// 2
// 3

手动使用迭代器

你也可以手动调用迭代器的方法来遍历一个可迭代对象：

const iterator = arr[Symbol.iterator]();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

通过了解并使用 Iterator 接口，你可以更好地控制和定制 JavaScript 对象的迭代行为，使代码更加灵活和强大。

ES6的Array.from()，Array.of()