精彩文章免费看

你理解js中map,set,array.from()吗

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]])

从 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来实现数据分组: