ES6的Map类型

来源:http://www.chinese-glasses.com 作者:Web前端 人气:64 发布时间:2020-03-24
摘要:时间: 2019-11-02阅读: 122标签: 类型 时间: 2019-10-29阅读: 125标签: map Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。 本文内容 基本使用 Map的基本使用Map支持的数据

时间: 2019-11-02阅读: 122标签: 类型

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

Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。

本文内容

基本使用

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

newSet([iterator])

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

iterator Iterator 与Map类似,Set接收一个可选的Iterator对象,所有元素将按照顺序不重复地添加到Set中。传递null或者undefined将返回一个空Set

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

const set = new Set();// 添加元素set.add(1);// 移除元素set.delete(1);// 检测元素是否存在set.has(1);// 清空Setset.clear();
newMap([iterator])

数据类型的唯一性判定

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

const set = new Set(undefined);set. add("string").add("string"). add(1).add(1). add(true).add(true). add(null).add(null). add(undefined).add(undefined) .add(NaN).add(NaN) .add({}).add({}) .add([]).add([]) .add(function () { }).add(function () { });console.log(set);
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);

输出如下:

数据类型测试

Set { 'string', 1, true, null, undefined, NaN, {}, {}, [], [], [Function], [Function]}

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

结论

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");

string/number/boolean/null/undefined/NaN是使用值判重

输出如下

NaN!==NaN,但是Set也只会存一份,所以值判定应该不完全是用===做的object/array/function等object类型使用引用判重Set的迭代

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

for...of

结论

由于Set实现了Symol.iteator方法,所以可以使用for...of迭代

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

const set = new Set(undefined);set.add("string").add("string");for (const v of set.entries()) { console.log(v);}

同时迭代键值

forEach

// 普通版本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);}
const set = new Set(undefined);set.add("string").add("string");set.forEach(function(value) { console.log(value);});

迭代键

使用场景

// 普通版本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));}

10bet,Set和数组相互转化

迭代值

const array = [1,2];const set = new Set(array); // 数组转化为setconst newArray = [...set]; // set转化为数组
// 普通版本const map = new Map();map.set("1", 1);map.set("2", 2);for (const v of map.values()) { console.log(v);}// 迭代器版本const map = new Map();map.set("1", 1);map.set("2", 2);for (const [,v] of map.entries()) { console.log(v);}

去除字符串重复字符

forEach()

本文由10bet发布于Web前端,转载请注明出处:ES6的Map类型

关键词:

上一篇:instanceof与constructor的区别

下一篇:没有了

最火资讯