数组扁平化去重用到的ES6

数组扁平化

//arr.flat()
//arr.toString().split(",")
复制代码

数组去重

// Array.from(new Set(arr))
// [...new Set(arr)]
复制代码

数组元素变为number类型

// arr.map(Number)
复制代码

总而言之，上结果

Array.from(new Set(arr.flat(Infinity)));
[...new Set(arr.flat(Infinity))];
[...new Set(arr.toString().split(','))];
Array.from(new Set(arr.toString().split(',')));
复制代码

理解涉及到的ES6数组方法

flat()

用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
[1, 2, [3, 4]].toString().split(",")
// [1, 2, 3, 4]
复制代码

Set 用法

ES6 提供的新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。利用这个属性我们可以实现数据的去重。Set本身是一个构造函数，用来生成 Set 数据结构。

const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
console.log(s) // Set(4) {2, 3, 5, 4}

console.log(new Set([2, 3, 5, 4, 5, 2, 2])) // Set(4) {2, 3, 5, 4}
复制代码

扩展运算符 ...

含义

可以将一个数组，转换为用逗号隔开的参数序列。

console.log(...[1,2,3]) // 1,2,3
console.log(1,...[2,3,4],5) // 1,2,3,4,5

// 函数调用
var items = [1,2,3]
arr.push(...items) // 将1,2,3从后添加到数组arr中
function add(x,y){
    return x+y;
}
add(...[1,2]) // 3

// 与函数参数结合使用
function f(w,x,y,z){}
f(1,...[2,3],4) 

// 替代apply方法
Math.max.apply(null,[2,3,4]) // 4
Math.max(...[2,3,4]) // 4
// 等同于
Math.max(2,3,4)

// 扩展元素后面可以放置表达式
var arr = [
    ...(x>0?['a']:[]), // ...[]不产生任何效果
    'b'
]
复制代码

应用

复制数组

// ES5
var arr1 = [1,2,3];
var arr2 = arr1.concat();
// ES6
var arr3 = [...arr1];
复制代码

合并数组

var a1 = [{name:'张三'}];
var a2 = [{name:'李四'}];
// ES5
var a3 = a1.concat(a2);
//ES6
var a4 = [...a1,...a2];
复制代码

需要注意的是以上代码实现的都是浅拷贝

字符串

扩展运算符可以将字符串转换为真正的字符

console.log([...'hello']) //['h','e','e','l','l','o']
// 这种做法可以正确识别四个字节的Unicode字符
'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3
//上面代码的第一种写法，JavaScript 会将四个字节的 Unicode 字符，识别为 2 个字符。

// 实现获取字符串长度
[...str].length
复制代码

实现了 Iterator 接口的对象

任何定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组。

let nodeList = document.querySelectorAll('div');
let array = [...nodeList];
// 作为一个类数组对象，扩展运算符可以将其转为真正的数组，原因就在于NodeList对象实现了 Iterator 。

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};
// 因为没有部署Iterator接口，扩展运算符无法将其转化为数组
let arr = [...arrayLike]; // TypeError: Cannot spread non-iterable object.
复制代码

Map 和 Set 结构，Generator 函数

具备Iterator接口

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]
复制代码

对于那些不含Iterator接口的类数组对象可以利用Array.from()将其转换为数组

Array.from()

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

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
复制代码

所谓类数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。

Array.from({ length: 3 });// [ undefined, undefined, undefined ]
复制代码

对于还没有部署该方法的浏览器，可以用Array.prototype.slice方法替代

const toArray = (() =>
  Array.from ? Array.from : obj => [].slice.call(obj)
)();
复制代码

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

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x); // [1, 4, 9]

// 取出一组 DOM 节点的文本内容。
let spans = document.querySelectorAll('span.name');
// map()
let names1 = Array.prototype.map.call(spans, s => s.textContent);
// Array.from()
let names2 = Array.from(spans, s => s.textContent)

// 返回各种数据的类型。
function typesof(){
    return Array.from(arguments,value=>typeof value)
}
typesOf(null, [], NaN)// ['object', 'object', 'number']

// 获取字符串长度 避免Unicode问题
Array.from(str).length
复制代码

关于Array.of()

Array.of方法用于将一组值，转换为数组。这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
// Array
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
// ES5实现Array.of()
function ArrayOf(){
  return [].slice.call(arguments);
}
复制代码

参考文章:阮一峰ES6入门

最近算是终于找到了一份算是非常详尽基础的ES6教程，再也不用担心学不会ES6了。强烈推荐！

转载于:https://juejin.im/post/5c8253e8e51d453e3576414e