Map 和 Set 两数据结构在ES6的作用

来源:http://www.chinese-glasses.com 作者:Web前端 人气:81 发布时间:2020-03-31
摘要:总结 Set.prototype:表示 Set 构造器的原型,允许想所有 Set对象添加新的属性。 Set.prototype.constructor:返回实例的构造函数,默认是 Set。 Set.prototype.size:返回 Set 对象的值的个数。 forEac

总结

Set.prototype:表示 Set 构造器的原型,允许想所有 Set 对象添加新的属性。
Set.prototype.constructor:返回实例的构造函数,默认是 Set。
Set.prototype.size:返回 Set 对象的值的个数。

forEach()

2、属性
length 属性:

结论

var mySet = new Set();
mySet.add('foo');
mySet.add('bar');
mySet.add('baz');

var setIter = mySet.values();

console.log(setIter.next().value); // "foo"
console.log(setIter.next().value); // "bar"
console.log(setIter.next().value); // "baz"

本文内容

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
// 并集
let union = new Set([...a, ...b]); // Set {1, 2, 3, 4} 
// 交集
let intersect = new Set([...a].filter (x => b.has(x))); // Set { 2, 3} 
// 差集
let difference = new Set([...a].filter (x => !b.has(x))); // Set { 1 }

Map的出现解决了传统object无法直接解决的问题,更好地向标准编程语言靠近(标准编程语言一般会提供Map集合),使用的坑也比较少(比如没有object作为key时转换为[object Object]的问题)。

entries():

const map = new Map([ [1, 1], [2, 2]]);const map2 = new Map([ [1, 2]]);const map3 = new Map([...map, ...map2]);console.log(map3); // Map { 1 = 2, 2 = 2 }

(8)、Map.prototype.get(key)
返回键对应的值,如果不存在,则返回undefined。

在Map出现之前,要实现类似需求,只能使用Object,但是Object还是存在一些问题的。

10bet,4、应用
(1)、Map 与 数组之间的相互转换

Map与其他类型的转换Map与Object

4、应用
(1)Array 与 Set 相互转换

const map = new Map();map.set("1", 1);map.set("2", 2);map.forEach((value, key) = { console.log(value, key);});
var myMap = new Map();
myMap.set("bar", "foo");

myMap.delete("bar"); // 返回 true。成功地移除元素
myMap.has("bar");    // 返回 false。"bar" 元素将不再存在于 Map 实例中

只支持[[key, value]]这种二维数组。二维数组的每一个元素包含key和value两个子元素

(2)、清楚 Set 中所有的元素:Set.prototype.clear()
(3)、判断值是否存在于 Set 中:Set.prototype.has(value);

string/number/boolean/null/undefined/NaN 按值存储,值一致即可访问symbol必须是同一个Symbol才能访问object/array/function等Object类型按照引用访问,必须是同一个引用才可以访问Map是有序的,按照插入顺序Map.set方法支持链式操作Map的迭代for...of

function logMapElements(value, key, map) {
    console.log("m[" + key + "] = " + value);
}
Map([["foo", 3], ["bar", {}], ["baz", undefined]]).forEach(logMapElements);
// logs:
// "m[foo] = 3"
// "m[bar] = [object Object]"
// "m[baz] = undefined"
const obj = { name: 'xialei', site: ''};const map = new Map(obj);console.log(map);
var myMap = new Map();
myMap.set("a", "alpha");
myMap.set("b", "beta");
myMap.set("g", "gamma");
myMap.size; // 3
const map = new Map();// Createmap.set('name','xialei');map.set('site', '');// Updatemap.set('name', 'xialeistudio');// Readmap.get('name');// Deletemap.delete('name');// 清空map.clear();// map大小console.log(map.size);
var mySet1 = new Set([NaN, NaN, 2, 3, 5, 5]);
mySet1.size; // 4
// 普通版本const map = new Map();map.set("1", 1);map.set("2", 2);for (const [k, v] of map) { console.log(k, v);}// 迭代器版本const map = new Map();map.set("1", 1);map.set("2", 2);for (const [k, v] of map.entries()) { console.log(k, v);}

(3)、Map 与 JSON 相互转换

时间: 2019-10-29阅读: 125标签: map

// Map 转对象
function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k, v] of strMap) {
    obj[k] = v;
  }
  return obj;
}
 const myMap = new Map();
myMap.set("bar", "foo")
.set(1, "ooo");

strMapToObj(myMap ); // Object {1: "ooo", bar: "foo"}

// 对象转 Map
function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}
objToStrMap({1: "ooo", bar: "foo"}); // Map {"1" => "ooo", "bar" => "foo"}
// 普通版本const map = new Map();map.set("1", 1);map.set("2", 2);for (const k of map.keys()) { console.log(k, map.get(k));}// 迭代器版本const map = new Map();map.set("1", 1);map.set("2", 2);for (const [k] of map.entries()) { // 解构赋值 console.log(k, map.get(k));}

(4)Map.prototype.delete(key)
移除任何与键相关联的值,并且返回该值,该值在之前会被

Map的基本使用Map支持的数据类型Map的迭代Map与其他对象的转化

var mySet = new Set();
mySet.add("foo");
mySet.delete("bar"); // 返回 false,不包含 "bar" 这个元素
mySet.delete("foo"); // 返回 true,删除成功
mySet.has("foo");    // 返回 false,"bar" 已经成功删除

JS中基本数据类型有string、number、boolean、null、undefined、symbol,复杂数据类型有object(包括object,array,function等),还有个特殊的NaN(typeof结果是number),分别对这些类型进行测试

// 用数组静态方法 Array.from
let array1 = Array.from(new Set([1, 1, 1, 2, 3, 2, 4]));
console.log(array1);
// => [1, 2, 3, 4]
// 或用扩展运算符(...)
let array2 = [...new Set([1, 1, 1, 2, 3, 2, 4])];
console.log(array2);
// => [1, 2, 3, 4]

执行报错TypeError: object is not iterable,因为Object不是可迭代对象。

现行的编程语言都会提供几种类型的数据集合支持,在ES6 之前,JavaScript 仅提供了对数组的支持。在以数组和对象为编程主力的JavaScript 语言,ES6 中引入了4种新的数据结构,分别是:集合(Set)、若集合(WeakSet)、映射(Map)、若映射(WeakMap)。下面,我们看一下它们各自的表现方式吧。
一、Set
1、概述
Set 对象是值的集合,可以按照插入的顺序迭代它的元素。Set 中的元素只会出现一次,即 Set 中的元素是唯一的。
使用方式: new Set([ iterable ]);
参数 iterable :是一个可迭代的对象,它的所有元素将被添加到新的 Set 中。
由于 Set 中的值总是唯一的,所以需要判断两个值是否相等。在对象的扩展章节中,我们讲到可以通过Object.is() 来判断是否严格相等,在 Set 中,-0 和 +0 是两个不同的值,NaN 和 undefined 是可以被存储在 Set 中的,因为 NaN 在ES6中是严格相等的。

Map { 'key' = 'string', 1 = 'number', true = 'boolean', null = 'null', undefined = 'undefined', Symbol(key) = 'symbol', {} = 'object', [] = 'array', [Function: fKey] = 'function', NaN = 'NaN'}true truetrue truetrue truetrue truetrue truetruetrue false truetrue falsetrue falsetrue true

(4)、删除 Set 中的某个值: Set.prototype.delete(value);

可迭代对象:ES6新出的语法,对象或对象的原型链实现了Symbol.iterator方法,关于迭代器的内容将在下一篇文章中详细介绍

(3)、字符串转成 Set

两个Map的元素是一样的,不是Map不相等,因为不是同一个对象

// Map 转 JSON
// Map 的键名为字符串
function strMapToJson(jsonStr) {
  return JSON.stringify(strMapToObj(jsonStr));
}
const myMap = new Map();
myMap.set("bar", "foo")
.set(1, "ooo");
strMapToJson(myMap); // "{"1":"ooo","bar":"foo"}"

// Map 的键名为非字符串
function mapToArrayJson(map) {
  return JSON.stringify([...map]);
}
mapToArrayJson(myMap); // "[["bar","foo"],[1,"ooo"]]"

// Json 转 Map
// 正常情况下所有键名都为字符串
function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap("{"1":"ooo","bar":"foo"}"); // Map {"1" => "ooo", "bar" => "foo"}

// 整个JSON 是数组
function jsonToMap(jsronStr) {
  return new Map(JSON.parse(jsronStr)); 
}
jsonToMap([["bar","foo"],[1,"ooo"]]); // Map {"1" => "ooo", "bar" => "foo"}

Map与Map

章节目录

1、ES6中啥是块级作用域?运用在哪些地方?
2、ES6中使用解构赋值能带给我们什么?
3、ES6字符串扩展增加了哪些?
4、ES6对正则做了哪些扩展?
5、ES6数值多了哪些扩展?
6、ES6函数扩展(箭头函数)
7、ES6 数组给我们带来哪些操作便利?
8、ES6 对象扩展
9、Symbol 数据类型在 ES6 中起什么作用?
10、Map 和 Set 两数据结构在ES6的作用
11、ES6 中的Proxy 和 Reflect 到底是什么鬼?
12、从 Promise 开始踏入异步操作之旅
13、ES6 迭代器(Iterator)和 for...of循环使用方法
14、ES6 异步进阶第二步:Generator 函数
15、JavaScript 异步操作进阶第三步:async 函数
16、ES6 构造函数语法糖:class 类

iterator Iterator 可以是一个数组或者其他iterator对象,其元素为键值对(如['key', 'value'])。null或undefined不会生效,返回一个空的Map非iterator会抛出错误TypeError: object is not iterable

四、WeakMap
1、含义
WeakMap 结构与 Map结构类似,也是用于生成键值对的集合。
2、与 Map 区别
(1)、WeakMap 只接受对象作为键名(null 除外),不接受其他类型的值作为键名。
(2)、WeakMap 的键名所指向的对象不计入垃圾回收机制。
(3)、没有keys()、values()、entries() 遍历操作。
(4)、没有size 属性。
(5)、不支持clear() 方法。
3、应用
(1)、以DOM 节点作为键名的场景应用

const obj = { name: 'xialei', site: ''};Object.prototype[Symbol.iterator] = function () { // Symbol.iterator可以理解为全局唯一的标识 const keys = Object.keys(this); let keyIndex = 0; return { next() { if (keyIndex  keys.length) { const key = keys[keyIndex++]; return { value: [key, obj[key]] }; // 迭代值 } return { done: true }; // 迭代结束 } }};const map = new Map(obj);console.log(map);
new Set([NaN, NaN, 2, 3, 5, 5]); // Set(4) {NaN, 2, 3, 5}

如果使用Object作为key存储在{}中,key最终是当做[object Object]来使用的Object的keys是无序的无法安全遍历Object无法直接获取Object大小Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。基本操作

Set.length; // 0

同时迭代键值

// Map 转数组
var myMap = new Map();
myMap.set("bar", "foo");
myMap.set(1, "bar");
[...myMap]; //  [ ["bar", "foo"], [1, "bar"] ]

// 数组转Map
const arr = new Map( [ ["bar", "foo"], [1, "bar"] ]);
console.log(arr);  // Map {"bar" => "foo", 1 => "bar"}
const map = new Map();const sKey = 'key', nKey = 1, bKey = true, nullKey = null, uKey = undefined, symbolKey = Symbol("key"), oKey = {}, ooKey = oKey, aKey = [], fKey = function () { }, nanKey = NaN;map.set(sKey, "string") .set(nKey, "number") .set(bKey, "boolean") .set(nullKey, "null") .set(uKey, "undefined") .set(symbolKey, "symbol") .set(oKey, "object") .set(aKey, "array") .set(fKey, "function") .set(nanKey, "NaN");console.log(map);console.log(map.get(sKey) === "string", map.get("key") === "string");console.log(map.get(nKey) === "number", map.get(1) === "number");console.log(map.get(bKey) === "boolean", map.get(true) === "boolean");console.log(map.get(nullKey) === "null", map.get(null) === "null");console.log(map.get(uKey) === "undefined", map.get(undefined) === "undefined");console.log(map.get(symbolKey) === "symbol");console.log(map.get(oKey) === "object", map.get({}) === "object", map.get(oKey) === map.get(ooKey));console.log(map.get(aKey) === "array", map.get([]) === "array");console.log(map.get(fKey) === "function", map.get(function () { }) === "function");console.log(map.get(nanKey) === "NaN", map.get(NaN) === "NaN");

(2)、部署私有属性

本文由10bet发布于Web前端,转载请注明出处:Map 和 Set 两数据结构在ES6的作用

关键词:

最火资讯