记事本 Array.from()方法

1.Array.from 简介

Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。--来源 MDN
语法：
Array.from(arrayLike,mapFn,thisArg])
参数：
arrayLike--必选
想要转换成数组的伪数组对象或可迭代对象。
mapFn--可选
如果指定了该参数，新数组中的每个元素都会执行该回调函数。
thisArg--可选
可选参数，执行回调函数 mapFn 时 this 对象。

2.描述

Array.from()方法可以通过以下方式来创建数组对象：

伪数组对象(拥有一个 length 属性和若干索引属性的任意对象)

let fakeArr = {
    0:'Bleach',
    1:'Kurosaki Ichigo',
    2:'Kazui Kurosaki',
    3:'Bleach',
    length:3
};// fakeArr里面有两个相同的字段 Bleach
let arr1 = Array.from(fakeArr);
//  arr1==>['Bleach', 'Kurosaki Ichigo', 'Kazui Kurosaki']

可迭代对象(可以获取对象中的元素，如 Map 和 Set 等) Set// 将 Set 结构转换为数组结构:

let set = new Set(['Metpoid','Megpoid','Metroid','Metroid']) // 这里存了两个 'Metroid'
let arr2 = Array.from(set)
//  arr2==>['Metpoid', 'Megpoid', 'Metroid']

Map // 将 Map 结构转换为数组及结构:

let map = new Map([['name', 'metpoid'], ['age', '99'], ['hobby', 'bailan'],['age',99]]);// 这里的map有重复键值对
let arr3 = Array.from(map);
//  arr3==>[['name', 'metpoid'],['age', '99'],['hobby', 'bailan']]

Array.from()方法有一个可选参数mapFn,让你可以在最后生成的数组上再执行一次 map 方法后再返回。
也就是说Array.from(obj,mapFn,thisArg) 就相当于Array.from(obj).map(mapFn,thisArg),除非创建的不是可用的中间数组。

from() 的 length 属性为 1 ，即Array.from.length === 1。
在 ES2015/ES6 中，Class 语法允许我们为内置类型 (比如Array)和自定义类新建子类(比如叫SubArray) 。这些子类也会继承父类的静态方法，比如SubArray.from()，调用该方法后会返回子类SubArray 的一个实例，而不是Array 的实例。

3.用法

将伪数组转换为真数组（上文已经提过，这里重复叙述方便快速查询）

let fakeArr = {
    0:'Bleach',
    1:'Kurosaki Ichigo',
    2:'Kazui Kurosaki',
    3:'Bleach',
    length:3
};// fakeArr里面有两个相同的字段 Bleach
let arr1 = Array.from(fakeArr);
//  arr1==>['Bleach', 'Kurosaki Ichigo', 'Kazui Kurosaki']

转换Set 和 Map 的数据结构为真数组（上文已经提过，这里重复叙述方便快速查询）

Set// 将 Set 结构转换为数组结构:

let set = new Set(['Metpoid','Megpoid','Metroid','Metroid']) // 这里存了两个 'Metroid'
let arr2 = Array.from(set)
//  arr2==>['Metpoid', 'Megpoid', 'Metroid']

Map // 将 Map 结构转换为数组及结构:

let map = new Map([['name', 'metpoid'], ['age', '99'], ['hobby', 'bailan'],['age',99]]);// 这里的map有重复键值对
let arr3 = Array.from(map);
//  arr3==>[['name', 'metpoid'],['age', '99'],['hobby', 'bailan']]

将字符串转换为数组

let str = 'Hello,World'
let strArr = Array.from(str)
//  strArr==>['H', 'e', 'l', 'l', 'o', ',', 'W', 'o', 'r', 'l', 'd']

浅克隆一个数组

let arr4 = ['克隆','数组',1,2,3]
let arr5 = Array.from(arr4)
//  arr5==>['克隆','数组',1,2,3]

使用伪数组的 length 特性，在Array.from()中搭配箭头函数

let arr6 = Array.from({length:6},(value,index)=>index)
//  arr6==>[0,1,2,3,4,5]
浅析： Array.from的第二个参数为map回调，上式等价于
// let arr6 = Array.from({length:6}).map((value,index)=>index)
而 map 方法的三个参数为：1.currentValue 必须 ， 当前元素的值 2. index 可选 ， 当前元素的索引值 3. arr 可选 ， 当前元素属于的数组对象
所以这里你甚至可以在箭头函数内加上第三个参数 arr
例如：// let arr6 = Array.from({length:6},(value,index,arr)=>index)

利用Array.from() 配合 set 实现数组去重

let arr7 = Array.from(new Set([1,2,3,4,4,3,2,1]))
//  arr7==>[1,2,3,4]

补一下 Set 和 Map 简介

set结构介绍

1.Set数据结构，类似于数组，但是成员的值都是唯一的，

没有重复的值，Set不能提供的则是索引

  let set = new Set();  //创建一个新的，空的Set结构对象
        set.add({});    //添加元素，如果已经存在，则不产生作用
        set.size; //set.size获取集合大小，即其中元素的个数
        set.add({}); //添加一个空对象，两个空对象不相等，被视为两个数据
        set.add('Set'); //添加元素
        set.add('Map');

2.Map 数据结构，键值对的集合

ES6提供了Map数据结构，类似于对象，也是键值对的集合，但是“键”的范围，不限于字符串，各种类型的值(包括对象)都可以当作键， Object结构提供了“字符串——值”的对应，Map结构提供了“值——值”的对应，是一种更完善的Hash结构实现，如果你需要"键值对"的数据结构，Map比Object更合适

  const map = new Map();
        const obj = {p:'hello world'};
        map.set(obj,'content'); //键名是一个对象 ，设置或更新key值，set方法返回的是当前的map对象，因此可以采用链式写法。
        map.get(obj);  //content  ，读取key对应的减值
        map.has(obj); //true   ，has(key)表示某个键是否在当前Map对象之中

Set 及 Map 参考

MDN>>>>Set||MDN>>>>Map||阮一峰>>>>Set & Map
本文参考>>>>going