0
点赞
收藏
分享

微信扫一扫

ES6新增数据结构Map与Set你都会用吗？

小贴贴纸happy 2022-03-10 阅读 42
jses6前端

Map与Set

Map（映射）

创建 Map 对象

let map1 = new Map();
console.log(map1);	// Map(0) {size: 0}
let gen = {gender: 'female'};
let map2 = new Map([['name', 'Taylor'], [1, 33], [gen, true]]);
console.log(map2);	// Map(3) {'name' => 'Taylor', 1 => 33, {gender: 'female'} => true}

let map = new Map();
console.log(typeof Map); // object
console.log(map instanceof Map); // true

Map 属性与方法

属性/方法含义返回值
size属性计算 Map 中元素个数\
get(key)获取 Map 对象中指定键的值键名存在则返回对应的值，否则返回 undefined
set(key, value)为 Map 对象中的键设置值返回设置后的 Map 对象
has(key)判断 Map 对象中是否存在指定键存在则返回 true，否则返回 false
entries()获取 Map 对象中所有键值对返回一个由 Map 中所有键值对组成的 Iterator 对象，迭代顺序按照 Map 中的顺序
keys()获取 Map 对象中所有元素的键名返回一个由 Map 中所有键名组成的 Iterator 对象，迭代顺序按照 Map中的顺序
values()获取 Map 对象中所有元素的值返回一个由 Map 中所有的值组成的 Iterator 对象，迭代顺序按照 Map 中的顺序
forEach(callback)根据 Map 中元素的顺序，对每个键值对都执行一次 callback 函数无返回值
delete(key)删除 Map 对象中指定键对应的元素键存在则将其删除并返回 true，否则返回 false
clear()清空 Map 对象无返回值

size属性

let map = new Map([[1, '1'], [2, '2'], [3, '3']]);
console.log(map.size);	// 3

get()

let map = new Map([[1, '1'], [2, '2'], [3, '3']]);
console.log(map.get(1));	// 1

set()

let obj = {name: 'Taylor'};
let map = new Map();
console.log(map.set(obj, '1'));	// Map(1) {{name: 'Taylor} => '1'}
console.log(map.get(obj));	// 1
console.log(map.set(obj, '2'));	// Map(1) {{name: 'Taylor} => '2'}
console.log(map.get(obj));	// 2

has()

let map = new Map([[1, '1'], [2, '2'], [3, '3']]);
console.log(map.has(1));	// true

entries()

let map = new Map([[1, '1'], [2, '2'], [3, '3']]);
console.log(map.entries());	// MapIterator {1 => '1', 2 => '2', 3 => '3'}

keys()

let map = new Map([[1, '1'], [2, '2'], [3, '3']]);
console.log(map.keys());	// MapIterator {1, 2, 3}

values()

let map = new Map([[1, '1'], [2, '2'], [3, '3']]);
console.log(map.values());	// MapIterator {'1', '2', '3'}

forEach(callback)

let map = new Map([['name', 'Taylor'], [2, '33'], [true, 'singer']]);
map.forEach(function(value, key, self){
  console.log("now key="+key+", value="+value);
});
// now key=name, value=Taylor
// now key=2, value=33
// now key=true, value=singer

delete()

let map = new Map([[1, '1'], [2, '2'], [3, '3']]);
console.log(map.delete(1));	// true
console.log(map.delete(1));	// flase
console.log(map);	// Map(2) {2 => '2', 3 => '3'}

clear()

let map = new Map([[1, '1'], [2, '2'], [3, '3']]);
console.log(map.clear());	// undefined
console.log(map);	// Map(0) {size:0}

Map 与其它数据类型相互转换

Map 与数组相互转换

let map = new Map();
map.set(1,'aaa').set(2,'bbb').set(3,'ccc');
console.log(map);	// Map(3) {1 => 'aaa', 2 => 'bbb', 3 => 'ccc'}
let arr = [...map];
console.log(arr);	// [[1, 'aaa'], [2, 'bbb'], [3, 'ccc']]

let arr = ['a', 1, 'b', 2];
let map = new Map();

let gen = {gender: 'female'};
let map2 = new Map([['name', 'Taylor'], [1, 33], [gen, true]]);
console.log(map2);	// Map(3) {'name' => 'Taylor', 1 => 33, {gender: 'female'} => true}

Map 与对象相互转换

let map = new Map();
map.set(1,'aaa').set(2,'bbb').set(3,'ccc');
console.log(map); // Map(3) {1 => 'aaa', 2 => 'bbb', 3 => 'ccc'}
let obj = {};
for(let [k, v] of map) {
  obj[k] = v;
}
console.log(obj); // {1: 'aaa', 2: 'bbb', 3: 'ccc'}

let obj = {
  name: 'Taylor',
  age: 33,
  job: 'singer'
};
let map = new Map();
for (let k in obj) {
  map.set(k, obj[k]);
}
console.log(map);	// Map(3) {'name' => 'Taylor', 'age' => 33, 'job' => 'singer'}

Map 与 JSON 数据相互转换

let map = new Map();
map.set(1,'aaa').set(2,'bbb').set(3,'ccc');
console.log(map); // Map(3) {1 => 'aaa', 2 => 'bbb', 3 => 'ccc'}
let obj = {};
for(let [k, v] of map) {
  obj[k] = v;
}
let json = JSON.stringify(obj);
console.log(json); // {"1": "aaa", "2": "bbb", "3": "ccc"}

let json = '{"name": "Taylor","age": 33,"gender": "female","job": "singer"}';
let obj = JSON.parse(json);
console.log(obj);  // {name: 'Taylor', age: 33, gender: 'female', job: 'singer'}
let map = new Map();
for (let k in obj) {
  map.set(k, obj[k]);
}
console.log(map);
// Map(4) {'name' => 'Taylor', 'age' => 33, 'gender' => 'female', 'job' => 'singer'}

Set（集合）

创建 Set 对象

let set1 = new Set();
console.log(set1);	// Map(0) {size: 0}
let gen = {gender: 'female'};
let gen1 = gen;
let set2 = new Set([['name', 'Taylor'], [1, 33], [gen, true]]);
console.log(set2);	// Set(3) {'name' => 'Taylor', 1 => 33, {gender: 'female'} => true}

let set = new Set();
console.log(typeof set); // object
console.log(set instanceof Set); // true

Set 的属性与方法

属性/方法含义返回值
size属性计算 Set 中元素个数\
add(value)向 Set 对象中添加元素返回设置后的 Set 对象
has(value)判断 Set 对象中是否存在指定值存在则返回 true，否则返回 false
entries()获取 Set 对象中所有元素的值返回一个由 Set 对象中所有值组成的 Iterator 对象，迭代顺序按照 Set 中的顺序
keys()获取 Set 对象中所有元素的值返回一个由 Set 对象中所有值组成的 Iterator 对象， 迭代顺序按照 Set 中的顺序
values()获取 Set 对象中所有元素的值返回一个由 Set 对象中所有值组成的 Iterator 对象， 迭代顺序按照 Set 中的顺序
forEach(callback)根据 Set 中元素的顺序，对每个元素都执行一次 callback 函数无返回值
delete(value)删除 Set 对象中指定值对应的元素存在则将其删除并返回 true，否则返回 false
clear()清空 Set 对象无返回值

size属性

let set = new Set(['a','b','c']);
console.log(set.size);  // 3

add()

let set = new Set(['a','b','c']);
console.log(set.add('d')); // Set(4) {'a', 'b', 'c', 'd'}
console.log(set.add('a')); // 添加重复元素无效

has()

let set = new Set(['a','b','c']);
console.log(set.has('a')); // true
console.log(set.has(1)); // false

entries()|keys()|values()

let set = new Set(['a','b','c']);
console.log(set2.entries());
// SetIterator {'a' => 'a', 'b' => 'b', 'c' => 'c'}
console.log(set2.keys());
// SetIterator {'a', 'b', 'c'}
console.log(set2.values());
// SetIterator {'a', 'b', 'c'}

forEach(callback)

let set = new Set(['a','b','c']);
set.forEach(function(value1, value2, set){
  console.log(`now value1=${value1},value2=${value2}`);
});
// now value1=a,value2=a
// now value1=b,value2=b
// now value1=c,value2=c

delete()

let set = new Set(['a','b','c']);
console.log(set.delete('a'));  // true
console.log(set.delete('a'));  // false

clear()

let set = new Set(['a','b','c']);
set.clear();
console.log(set);  // Set(0) {size: 0}

Set 与其它数据类型相互转换

Set 与数组相互转换

let set = new Set(['a','b','c']);
let arr = Array.from(set);
console.log(arr);  // ['a', 'b', 'c']
console.log([...set]); // ['a', 'b', 'c']

let arr = ['b', 'c', 'd'];
let set = new Set(arr);
console.log(set);  // Set(3) {'b', 'c', 'd'}

let arr = [1, 1, 2, 4, 3, 4, 6, 6];
let set = new Set(arr);
console.log(set);  // Set(5) {1, 2, 4, 3, 6}
let arr1 = [...set];
console.log(arr1);  // [1, 2, 4, 3, 6]
举报

相关推荐

es6新增数据结构Set()与WeakSet()

javascript数据结构前端

es6新增数据结构Map()与WeakMap()

javascript数据结构前端

ES6新增Set、Map两种数据结构

javascript开发语言前端es6键值Python后端开发

【es6】Set 和 Map 数据结构

前端

ES6 Set数据结构

javascript前端开发语言

ES6数据结构Set

数据结构数组添加数据虚拟化云计算

ES6: Set数据结构

javascript前端开发语言

JavaScript ES6 全新的Set、Map数据结构

es6前端ecmascript

es6中的Map和Set数据结构

linux服务器运维

ES6学习（七）—Set 和 Map 数据结构

javascriptes6数据结构键值对字符串云平台云计算
0 条评论