详细了解数组form方法——es6新特性,结合set实现数组去重

 一、form方法介绍

1、定义：

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

两类对象：

1）类似数组的对象

        a.它必须是一个对象
        b.它有 length 属性

例如：

let arrAlik1 = {
    name: 'code',
    age: 20,
    gex: '男',
    length: 3
}
let arrAlik2 = {
    'name': 'web',
    'age': 18,
    'gex': '女',
    length: 3
}

2）可遍历iterable的对象（iterable的概念）

• Array
• Map
• Set
• String
• TypedArray
• 函数的 arguments 对象
• NodeList 对象

2、将一个类数组对象转换为一个真正的数组，必须具备以下条件：

　　1）该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。

　　2）该类数组对象的属性名必须为数值型或字符串型的数字，如：

let arrAlik1 = {
    0: 'code',
    1: 20,
    2: '男',
    length: 3
}
let arrAlik2 = {
    '0': 'web',
    '1': 18,
    '2': '女',
    length: 3
}

3、使用

1)案例

let arrAlik1 = {
    '0': 'code',
    '1': 20,
    '2': '男',
    length: 3
}
let arr = Array.from(arrAlik1);
console.log(arr,'arr')

结果：

2）如果只有length属性呢？

let arrAlik1 = {
    length: 3
}
let arr = Array.from(arrAlik1);
console.log(arr,'arr')

 结果：

3）如果属性名和下标不一致，或者属性名不为数值型或者字符串类型的数字呢？

let arrAlik1 = {
    '1': 'code',
     2 : 20,
     a : '男',
    'b': 'll',
    length: 4
}
let arr = Array.from(arrAlik1);

 结果：属性名对应了数组的下标，如果没有找到下标对应的属性名，则会默认生成undefined

　　ps: 该类数组对象的属性名可以加引号，也可以不加引号

4、Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

let arr = [2,13,43,21,33]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1))

二、set结构

1、定义

ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

2、与from方法结合，实现数组去重效果

例如：

let oldArr = [1,2,3,2,3,4,5]
let newArr = Array.from(new Set(oldArr));
console.log(newArr,'newArr')