关于前端:JavaScript之Set与Map

Set

// set 对象示意值得汇合，且每个值得都是惟一的（根本类型）（援用类型只有地址不一样即可）// 申明
const s1 = new Set();
console.log(typeof s1,s1);  // object Set {}
// set 办法
// 增 add
s1.add(1);
console.log(s1);   // Set {1}
const obj1 = {name:'xuwen'};
const obj2 = {name:'xuwen'};
s1.add(obj1);
s1.add(obj2);    //  阐明援用类型  地址不一样  值是能够一样的
console.log(s1);   // Set {1, { name: 'xuwen'}, {name: 'xuwen'} }
// 删  delete clear
console.log(s1.add(2));   // Set {1, { name: 'xuwen'}, {name: 'xuwen'}, 2 } 返回 s1
console.log(s1.delete(1));  // true  返回布尔值  删除胜利返回 true
console.log(s1);   // Set {{ name: 'xuwen'}, {name: 'xuwen'}, 2 }
s1.clear();
console.log(s1);   // Set {}
// 查 has
s1.add(2);
s1.add('a');
s1.add([1,23]);
console.log(s1);  // Set {2, 'a', [ 1, 23] }
console.log(s1.has(2)); // true
// 迭代
console.log(s1.keys());  // [Set Iterator] {2, 'a', [ 1, 23] }
console.log(s1.values());  // [Set Iterator] {2, 'a', [ 1, 23] }
console.log(s1.entries());  // [Set Entries] {[ 2, 2], ['a', 'a'], [[ 1, 23], [1, 23] ] }
s1.forEach((value,key,s1) => {console.log(value,key);
});
// 2 2
// a a
// [1, 23] [1, 23]

// set 属性
// size set 长度
console.log(s1.size);    // 3

// set 实例
// 超级典型的就是数组去重   在数组章节有过实例
const arr1 = [1,2,4,5,6,4,5,6];
const newArr1 = [...new Set(arr1)];
console.log(newArr1);  // [1, 2, 4, 5, 6]
// 数组去重的变异实例   字符串去重
let str1 = "xxwenxxxsdwexx";
let newStr1 = [...new Set(str1)].join('')
console.log(newStr1);   // xwensd
// 汇合类型  并集   交加   差集
// set 并集
const s2 = new Set(['x','w','e']);
const s3 = new Set(['x','w','y']);
const s4 = new Set([...s2,...s3]);
console.log(s4);   // Set {'x', 'w', 'e', 'y'}
// set 交加
const s5 = new Set([...s2].filter(item => 
    s3.has(item)
))
console.log(s5);   // Set {'x', 'w'}
// set 差集
const s6 = new Set([...s2].filter(item => !s3.has(item)))
console.log(s6);
const s7 = new Set([...s3].filter(item => !s2.has(item)));
const s8 = new Set([...s6,...s7]);
console.log(s8);   // Set {'e', 'y'}

Map

// 在 ES6 之前   对象中的 key 值只能是字符串   不论是数值类型还是援用类型都会转换成字符串
// 在 es6 中  引入了 map 类型   他能够让 key 值为任何类型而不必去转换
// map 属性  size   示意 map 的长度
const map = new Map();
console.log(map.size);  // 0
// map 的办法
// 增 set
const arr1 = [1,2,4];
const obj1 = {name:'xuwen'};
const num1 = 2020;
const str1 = "xuwen";
const n1 = null;
const u1 = undefined;
map.set(arr1,'x')
    .set(obj1,'u')
    .set(num1,'w')
    .set(str1,'e')
    .set(n1,'n')
    .set(u1,'u');
console.log(map,map.size);
// Map {//     [ 1, 2, 4] => 'x',
//     {name: 'xuwen'} => 'u',
//     2020 => 'w',
//     'xuwen' => 'e',
//     null => 'n',
//     undefined => 'u'
//   } 6

// 删 delete clear
console.log(map.delete(arr1));  // true
console.log(map);
// clear 会革除所有的 key 和值   就不演示了
// 查 has  get
console.log(map.has(u1));   // true
console.log(map.get(num1));  // w  get 是返回 key 对应的值
let year = 2007;
console.log(map.get(year));    // undefined  如果没有就返回 undefined
// 迭代
console.log(map.keys());  // [Map Iterator] {{ name: 'xuwen'}, 2020, 'xuwen', null, undefined }
console.log(map.values());  // [Map Iterator] {'u', 'w', 'e', 'n', 'u'}
console.log(map.entries());
// [Map Entries] {//     [ { name: 'xuwen'}, 'u' ],
//     [2020, 'w'],
//     ['xuwen', 'e'],
//     [null, 'n'],
//     [undefined, 'u']
//   }