ES6 SET & MAP

分享

Set

ES6 提供了新的数据结构 Set 。它类似于数组,但其成员的值是唯一的,不会重复。

Set 的简单使用:

// 单个添加
const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4

// 将数组转换为 set 对象
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

方法

方法 作用
对内容的操作 -
add(value) 添加某个值,返回 Set 结构本身。
delete(value) 删除某个值,返回一个布尔值,表示删除是否成功。
has(value) 返回一个布尔值,表示该值是否为 Set 的成员。
clear() 清除所有成员,没有返回值。
size() 返回 Set 实例的成员总数。
遍历操作 -
keys() 返回键名的遍历器
values() 返回键值的遍历器
entries() 返回键值对的遍历器
forEach() 使用回调函数遍历每个成员

注: 由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以 keys 方法和 values 方法的行为完全一致。

Map

Map 类似于对象,也是键值对的集合,但是 的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了 字符串—值 的对应,Map 结构提供了 值—值 的对应,是一种更完善的 Hash 结构实现。当你需要 键值对 的数据结构,MapObject 更合适。

Map 的简单使用:

const m = new Map();
const o = 'keyName';

m.set(o, 'content');
m.get(o);               // "content"

m.has(o);               // true
m.delete(o);            // true
m.has(o);               // false

const map = new Map([
    ['name', '张三'],
    ['title', 'Author']
]);

map.size;               // 2
map.has('name');        // true
map.get('name');        // "张三"
map.has('title');       // true
map.get('title');       // "Author"

方法

方法 作用
对内容的操作 -
size 返回 Map 结构成员数
set(key, value) Map 设置键名为 key 键值为 value
get(key) 读取键名为 key 的键值
has(key) 判断某个键名是否在 Map 中存在,返回 Boolean
delete(key) 删除某个键
clear() 清空整个 Map

Map 的结构和 Set 类似,遍历方法和 set 一致。唯一不同的是:map 存的键值对,拥有正确的 keys 方法和 values 方法。

Weak

ES6 在推出 SetMap 的同时,也推出了两个类似的类:WeakSetWeakMap

这两个对象仅有 SetMap 的部分效果,并且其内部使用到的对象会直接被 JavaScriptGC 忽略。

需要注意的点:

  1. WeakSet 不能添加基础类型,仅能添加对象(引用类型)。
  2. WeakMap 的键不能为基础类型,仅能使用对象(引用类型)。
  3. WeakSet 仅有 adddeletehas 三个方法,且是不可迭代对象(不能被 for...of、扩展运算符使用)。
  4. WeakMap 仅有 getsethasdelete 四个方法,且是不可迭代对象。

由于会直接被 GC 所忽略,因此在某些方面会有特殊的用途。

阅读更多

ES6 Proxy

简单谈谈 Proxy:在目标对象之前架设一层 拦截 ,当对该对象进行 访问/赋值 时,必须先通过这层拦截,从而实现对属性进行 访问/赋值 时的过滤和改写。 一个简单的例子 let obj = new Proxy({}, { get(target, key, receiver) { console.log(`getting ${key}!`); return Reflect.get(target, key, receiver); }, set(target, key, value, receiver) { console.log(`setting ${key}!`); return Reflect.set(target, key, value, receiver); } }); obj.count

By Breeze

ES6 变量解构

简单说说 假设有这样一个场景:你需要向你的服务器获取一些基本的数据(config 对象)来初始化页面。当你需要去获取其中的配置项时, ES5 是这么写的: var config = { params1: 520, params2: 1314 }; // 为了确保下方的代码不依赖于 config 对象,重新赋值为一个更有意义的名称。 var params1 = config.params1, params2 = config.params2 console.log(params1 + ' !! ' + params2) // 520 !! 1314 看着代码量也不是很大,但这只有两个配置项,万一要有几十个呢,不得一直 congif.xxx 了。不得不得这的确很烦,那有没更简单的方式呢? ES6 提出了以下方式: var config = { params1: 520, params2:

By Breeze

ES6 Array

简单谈谈 ES5 中原本就提供了数组,这里谈谈数组下都有哪些方法新增,哪些方法进行了变更。 Array.from 在 javascript 中有这样一类的存在:类数组,它不是数组,却能像数组那么操作,如下便是一个类数组结构。 let arrayLike = { "0": "a", "1": "b", "2": "c", length: 3 }; 类数组结构:可以像数组那样取值、 for 循环,但是却不能适用数组 forEach/splice 等数组特定的方法,在 ES5 中必须使用一些特殊的方法来将一个类数组结构转化成数组,而在 ES6 中,

By Breeze