前端面试题 - 如何将 Set 集合转化为一个数组

什么是 Set 集合：

Set 集合类似于一个数组，但是它要求里面是元素不可以有重复。

const set =  new Set(['welcome', 'you', '!', 'you']);
console.log(set);                      // Set { 'welcome', 'you', '!' }

可以看到，Set 的实例是一个对象，这个对象的内部结构很像一个数组，传递给 Set 构造函数的数组，其内部重复的元素最终只会保留一个。

 

将 Set 集合转化为一个数组的方法：

 

1. 使用 Array.from() 方法

let set = new Set([12, 45, 97, 9797, 564, 134, 45642, 12, 564])
console.log(set)             // Set { 12, 45, 97, 9797, 564, 134, 45642 }
console.log(Array.from(set)) // [ 12, 45, 97, 9797, 564, 134, 45642 ]

 

简单地介绍一下 Array.from() 这个函数：

 

Array.from() 方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

那么什么是类数组对象呢？所谓类数组对象，要具备两个要求：

• 最基本的要求就是具有 length 属性，
• 其次就是属性名要是非负整数或者字符串类型的非负整数。

虽然它表现出了数组的一些性质，但是该对象并不是由 Array 构造函数所创建的。

Array.from(obj, mapFun, thisArg) 有三个参数：

• obj：被转化为数组的对象；
• mapFun：作用类似于数组的 map 方法，可以对每个元素进行处理，将处理后的值放入返回的数组；
• thisArg：this关键字的指向（通常都不用它）。

var arr = [12, 45, 97, 9797, 564, 134, 45642]
var set = new Set(arr)
var resultArr = Array.from(set, function(item){ 
  return (item + 1);
})
console.log(resultArr)     // [ 13, 46, 98, 9798, 565, 135, 45643 ]

 

传递给 Array.length 的类数组对象属性名可以不连续，也不一定非要从小到大，其次还可以重复。

最终，Array.from() 会将这些属性按照从小到大的顺序存放在数组对应位置中，下标没有出现过的位置将被赋予 undefined，属性名重复时，后一个属性值会覆盖前一个属性值。

一定要牢记：length 一定要大于所定义的最大属性名，而不能仅仅等于属性个数，否则属性名超过 lenth-1 的属性值将不会被添加到数组中去。

var arrayLike = {
  3: 'tom', 
  1: '65',
  3: '男',
  "4": ['jane','john','Mary'],
  'length': 5
}
var arr = Array.from(arrayLike)
console.log(arr) // [ undefined, '65', undefined, '男', [ 'jane', 'john', 'Mary' ] ]

 

其次也可以传递一个字符串（可遍历对象，Set 实例对象也是一个可遍历对象）：

var str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

 

2. 使用三点运算符 " ... "

const set =  new Set(['HELLO', 'JS']);
console.log(set);         // Set { 'HELLO', 'JS' }
const array = [...set];
console.log(array);       // [ 'HELLO', 'JS' ]

 

简单的介绍一下三点运算符"..."

 

在 ES6 规范中三点运算符有两个用途

1. 参数使用，
2. 拓展运算符使用。

参数使用

• 作为参数使用的三点运算符，也可称为剩余参数，就是将剩余的所有参数放至一个数组内；
• 剩余参数传入的参数可不限数量；
• 剩余参数只能出现在最末尾，否则报错。（当然以扩展运算的身份出现时另当别论）

(function foo(param1, param2, ...params){
  console.log(param1 + ", " + param2 + ", " + params + ", " + Object.prototype.toString.call(params));
  //a, b, 1,2,3,456, [object Array]
})("a", "b", 1, 2, 3, "456");

拓展运算符使用

• 返回数组中的各项数组拆解

返回数组中的各项，作为扩展运算符身份使用时，可以放在中间

var a = [2, 3];
console.log(1, ...a, 4);      //1 2 3 4

返回字符串的每个字符：

var str = "abcde";
arr = [...str];            // 分解字符串，并放入数组
console.log(arr);          // ["a", "b", "c", "d", "e"]

 

3. 使用 forEach

var set = new Set();
set.add("Hello").add("World").add("!");
console.log(set);     // Set { 'Hello', 'World', '!' }

var Array = [];

set.forEach(function(item, index, arr) {
  Array.push(item);
});
console.log(Array);   // [ 'Hello', 'World', '!' ]