1.Js中Map对象的使用（es6新增）

Map对象保存键/值对，是键/值对的集合。任何值(对象或者原始值) 都可以作为一个键或一个值。Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应。

Map是一组键值对的结构，具有极快的查找速度。

var m = new Map([['ss', 95], ['kk', 75], ['ww', 85]]);
m.get('ss'); // 95

语法：

mapObj = new Map()

集合中的键和值可以是任何类型。如果使用现有密钥向集合添加值，则新值会替换旧值。

初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法：

var m = new Map(); // 空Map

m.set('苏苏', 100); // 添加新的key-value

m.set('kk', 88);

m.has('ss'); // 是否存在key 'ss': true

m.get('苏苏'); // 100

m.delete('苏苏'); // 删除key '苏苏'

m.get('苏苏'); // undefined

一个key只能对应一个value，所以，多次对一个key放入value，后面的会替换前面的值。

var m = new Map();

m.set('苏苏', 90);

m.set('苏苏', 100);

m.get('苏苏'); // 100

2.set是什么

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set：

var a = new Set(); // 空Set
var ab = new Set([1, 2, 3]); 

重复元素在Set中自动被过滤，这也是数组去重的方法之一。（注意：数字和字符串不是同个元素）

var c = new Set([1, 2, 5, 5, '5']);
c; // Set {1, 2, 5, "5"}

add(key)方法可以添加元素到Set中，可以重复添加，但只保留一个。

var a = new Set([1, 2, 3]);
a.add(4);
a; // Set {1, 2, 3, 4}
a.add(4);
a; // 仍然是 Set {1, 2, 3, 4}

delete(key)方法可以删除元素

var a = new Set([1, 2, 3]);
a.delete(3);
a; // Set {1, 2}

3. map和set的异同

Map和Set是ES6标准新增的数据类型。

Set和Map主要的应用场景在于数组去重和数据存储；

Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构；

集合是由一组无序且唯一(即不能重复)的项组成的，可以想象成集合是一个既没有重复元素，也没有顺序概念的数组
ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值
Set 本身是一个构造函数，用来生成 Set 数据结构

Set实例的属性和方法：

属性：

size：返回集合所包含元素的数量

方法：

操作方法：

add(value)：向集合添加一个新的项

delete(value)：从集合中移除一个值

has(value)：如果值在集合中存在，返回true,否则false

clear(): 移除集合里所有的项

遍历方法：

keys()：返回一个包含集合中所有键的数组

values()：返回一个包含集合中所有值的数组

entries：返回一个包含集合中所有键值对的数组(感觉没什么用就不实现了)

forEach()：用于对集合成员执行某种操作，没有返回值

4. Array.from()

Array.from()
ES6为Array增加了from函数用来将其他对象转换成数组,Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。可以将两种对象转换成数组。

1.部署了Iterator接口的对象，比如：Set，Map，Array。

2.类数组对象，什么叫类数组对象，就是一个对象必须有length属性，没有length，转出来的就是空数组。

语法：

Array.from(arrayLike[, mapFn[, thisArg]])

image

从 String 生成数组（可将ascii的字符串拆解成一个数据，亦可将unicode字符串拆解成数组）

Array.from('foo');
// [ "f", "o", "o" ]

从 Set 生成数组

const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// [ "foo", "bar", "baz" ]

从 Map 生成数组

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

从类数组对象（arguments）生成数组

function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

// [ 1, 2, 3 ]

在 Array.from 中使用箭头函数

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

Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

序列生成器(指定范围)

const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));

// Generate numbers range 0..4
range(0, 4, 1);
// [0, 1, 2, 3, 4]

// Generate numbers range 1..10 with step of 2
range(1, 10, 2);
// [1, 3, 5, 7, 9]

// Generate the alphabet using Array.from making use of it being ordered as a sequence
range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x));
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

数组去重合并

function combine(){
    let arr = [].concat.apply([], arguments);  //没有去重复的新数组
    return Array.from(new Set(arr));
}

var m = [1, 2, 2], n = [2,3,3];
console.log(combine(m,n));                     // [1, 2, 3]

5.用set实现数组去重：

let array = [1,1,1,4,5,3];
[...new Set(array)]     // [1, 4, 5, 3]

6.用map来实现数据分组：

原数组：

在这里插入图片描述

根据groupCode来进行分组：

let map = new Map();
arr.map((item) => {
    if (!map[item.groupCode]) {
        map[item.groupCode] = [item];
    } else {
        map[item.groupCode].push(item);
    }
});
let resData = [];
Object.keys(map).forEach((key) => {
    resData.push({
        groupCode: key,
        data: map[key],
    });
});

分组之后的数据：

在这里插入图片描述

7.更多资讯，关注公众号‘苏苏的bug’，欢迎订阅