新对象的追加
Symbol
ES6引入了一种新的原始数据类型Symbol,表示独一无二的ID。它通过Symbol函数生成。
let symbol1 = Symbol(); typeof symbol // "symbol"
上面代码中,变量symbol1就是一个独一无二的ID。typeof运算符的结果,表明变量symbol1是Symbol数据类型,而不是字符串之类的其他类型。
Symbol函数可以接受一个字符串作为参数,表示Symbol实例的名称。
var mySymbol = Symbol('Test'); mySymbol.name // Test
上面代码表示,Symbol函数的字符串参数,用来指定生成的Symbol的名称,可以通过name属性读取。之所以要新增name属性,是因为键名是Symbol类型,而有些场合需要一个字符串类型的值来指代这个键。
注意,Symbol函数前不能使用new命令,否则会报错。这是因为生成的Symbol是一个原始类型的值,不是对象。
Symbol类型的值不能与其他类型的值进行运算,会报错。
var sym = Symbol('My symbol'); '' + sym // TypeError: Cannot convert a Symbol value to a string
但是,Symbol类型的值可以转为字符串。
String(sym) // 'Symbol(My symbol)' sym.toString() // 'Symbol(My symbol)'
symbol的最大特点,就是每一个Symbol都是不相等的,保证产生一个独一无二的值。
let w1 = Symbol(); let w2 = Symbol(); let w3 = Symbol(); w1 === w2 // false w1 === w3 // false w2 === w3 // false function f(w) { switch (w) { case w1: ... case w2: ... case w3: ... } }
上面代码中,w1、w2、w3三个变量都等于Symbol(),但是它们的值是不相等的。
由于这种特点,Symbol类型适合作为标识符,用于对象的属性名,保证了属性名之间不会发生冲突。如果一个对象由多个模块构成,这样就不会出现同名的属性,也就防止了键值被不小心改写或覆盖。Symbol类型还可以用于定义一组常量,防止它们的值发生冲突。
var mySymbol = Symbol(); // 第一种写法 var a = {}; a[mySymbol] = 'Hello!'; // 第二种写法 var a = { [mySymbol]: 123 }; // 第三种写法 var a = {}; Object.defineProperty(a, mySymbol, { value: 'Hello!' }); a[mySymbol] // "Hello!"
上面代码通过方括号结构和Object.defineProperty两种方法,将对象的属性名指定为一个Symbol值。
注意,不能使用点结构,将Symbol值作为对象的属性名。
var a = {}; var mySymbol = Symbol(); a.mySymbol = 'Hello!'; a[mySymbol] // undefined
上面代码中,mySymbol属性的值为未定义,原因在于a.mySymbol这样的写法,并不是把一个Symbol值当作属性名,而是把mySymbol这个字符串当作属性名进行赋值,这是因为点结构中的属性名永远都是字符串。
下面的写法为Map结构添加了一个成员,但是该成员永远无法被引用。
let a = Map(); a.set(Symbol(), 'Noise'); a.size // 1
为Symbol函数添加一个参数,就可以引用了。
let a = Map(); a.set(Symbol('my_key'), 'Noise');
如果要在对象内部使用Symbol属性名,必须采用属性名表达式。
let specialMethod = Symbol(); let obj = { [specialMethod]: function (arg) { ... } }; obj[specialMethod](123);
采用增强的对象写法,上面代码的obj对象可以写得更简洁一些。
let obj = { [specialMethod](arg) { ... } };
Symbol类型作为属性名,不会出现在for…in循环中,也不会被Object.keys()、Object.getOwnPropertyNames()返回,但是有一个对应的Object.getOwnPropertySymbols方法,以及Object.getOwnPropertyKeys方法都可以获取Symbol属性名。
var obj = {}; var foo = Symbol("foo"); Object.defineProperty(obj, foo, { value: "foobar", }); Object.getOwnPropertyNames(obj) // [] Object.getOwnPropertySymbols(obj) // [Symbol(foo)]
上面代码中,使用Object.getOwnPropertyNames方法得不到Symbol属性名,需要使用Object.getOwnPropertySymbols方法。
Reflect.ownKeys方法返回所有类型的键名。
let obj = { [Symbol('my_key')]: 1, enum: 2, nonEnum: 3 }; Reflect.ownKeys(obj) // [Symbol(my_key), 'enum', 'nonEnum']
Set
基本用法
ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。
Set本身是一个构造函数,用来生成Set数据结构。
var s = new Set(); [2,3,5,4,5,2,2].map(x => s.add(x)) for (i of s) {console.log(i)} // 2 3 4 5
上面代码通过add方法向Set结构加入成员,结果表明Set结构不会添加重复的值。
Set函数可以接受一个数组作为参数,用来初始化。
var items = new Set([1,2,3,4,5,5,5,5]); items.size // 5
向Set加入值的时候,不会发生类型转换,5和“5”是两个不同的值。Set内部判断两个值是否精确相等,使用的是精确相等运算符(===)。这意味着,两个对象总是不相等的。
let set = new Set(); set.add({}) set.size // 1 set.add({}) set.size // 2
上面代码表示,由于两个空对象不是精确相等,所以它们被视为两个值。
属性和方法
Set结构有以下属性:
- Set.prototype.constructor:构造函数,默认就是Set函数。
- Set.prototype.size:返回Set的成员总数。
Set数据结构有以下方法:
- add(value):添加某个值,返回Set结构本身。
- delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
- has(value):返回一个布尔值,表示该值是否为Set的成员。
- clear():清除所有成员,没有返回值。
下面是这些属性和方法的使用演示。
s.add(1).add(2).add(2); // 注意2被加入了两次 s.size // 2 s.has(1) // true s.has(2) // true s.has(3) // false s.delete(2); s.has(2) // false
下面是一个对比,看看在判断是否包括一个键上面,对象结构和Set结构的写法不同。
// 对象的写法 var properties = { "width": 1, "height": 1 }; if (properties[someName]) { // do something } // Set的写法 var properties = new Set(); properties.add("width"); properties.add("height"); if (properties.has(someName)) { // do something }
Array.from方法可以将Set结构转为数组。
var items = new Set([1, 2, 3, 4, 5]); var array = Array.from(items);
这就提供了一种去除数组中重复元素的方法。
function dedupe(array) { return Array.from(new Set(array)); }
遍历操作
Set结构有一个values方法,返回一个遍历器。
let set = new Set(['red', 'green', 'blue']); for ( let item of set.values() ){ console.log(item); } // red // green // blue
Set结构的默认遍历器就是它的values方法。
Set.prototype[Symbol.iterator] === Set.prototype.values // true
这意味着,可以省略values方法,直接用for…of循环遍历Set。
let set = new Set(['red', 'green', 'blue']); for (let x of set) { console.log(x); } // red // green // blue
Set结构的foreach方法,用于对每个成员执行某种操作,返回修改后的Set结构。
let set = new Set([1, 2, 3]); set.foreach((value, key) => value*2 ) // 返回Set结构{2, 4, 6}
上面代码说明,foreach方法的参数就是一个处理函数。该函数的参数依次为键值、键名、集合本身(上例省略了该参数)。另外,foreach方法还可以有第二个参数,表示绑定的this对象。
为了与Map结构保持一致,Set结构也有keys和entries方法,这时每个值的键名就是键值。
let set = new Set(['red', 'green', 'blue']); for ( let item of set.keys() ){ console.log(item); } // red // green // blue for ( let [key, value] of set.entries() ){ console.log(key, value); } // red, red // green, green // blue, blue
由于扩展运算符(…)内部使用for…of循环,所以也可以用于Set结构。
let set = new Set(['red', 'green', 'blue']); let arr = [...set]; // ['red', 'green', 'blue']
这就提供了另一种便捷的去除数组重复元素的方法。
let arr = [3, 5, 2, 2, 5, 5]; let unique = [...new Set(arr)]; // [3, 5, 2]
而且,数组的map和filter方法也可以用于Set了。
let set = new Set([1, 2, 3]); set = new Set([...set].map(x => x * 2)); // 返回Set结构:{2, 4, 6} let set = new Set([1, 2, 3, 4, 5]); set = new Set([...set].filter(x => (x % 2) == 0)); // 返回Set结构:{2, 4}
Map
ES6还提供了map数据结构。它类似于对象,就是一个键值对的集合,但是“键”的范围不限于字符串,甚至对象也可以当作键。
基本用法
JavaScript的对象,本质上是键值对的集合,但是只能用字符串当作键。这给它的使用带来了很大的限制。
var data = {}; var element = document.getElementById("myDiv"); data[element] = metadata;
上面代码原意是将一个DOM节点作为对象data的键,但是由于对象只接受字符串作为键名,所以element被自动转为字符串[Object HTMLDivElement]。
为了解决这个问题,ES6提供了map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应。
var m = new Map(); var o = {p: "Hello World"}; m.set(o, "content") m.get(o) // "content" m.has(o) // true m.delete(o) // true m.has(o) // false
上面代码使用set方法,将对象o当作m的一个键,然后又使用get方法读取这个键,接着使用delete方法删除了这个键。
作为构造函数,Map也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。
var map = new Map([ ["name", "张三"], ["title", "Author"]]); map.size // 2 map.has("name") // true map.get("name") // "张三" map.has("title") // true map.get("title") // "Author"
注意,只有对同一个对象的引用,Map结构才将其视为同一个键。这一点要非常小心。
var map = new Map(); map.set(['a'], 555); map.get(['a']) // undefined
上面代码的set和get方法,表面是针对同一个键,但实际上这是两个值,内存地址是不一样的,因此get方法无法读取该键,返回undefined。
同理,同样的值的两个实例,在Map结构中被视为两个键。
var map = new Map(); var k1 = ['a']; var k2 = ['a']; map.set(k1, 111); map.set(k2, 222); map.get(k1) // 111 map.get(k2) // 222
上面代码中,变量k1和k2的值是一样的,但是它们在Map结构中被视为两个键。
由上可知,Map的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键。这就解决了同名属性碰撞(clash)的问题,我们扩展别人的库的时候,如果使用对象作为键名,就不用担心自己的属性与原作者的属性同名。
如果Map的键是一个简单类型的值(数字、字符串、布尔值),则只要两个值严格相等,Map将其视为一个键。这对于NaN,以及+0和-0都成立。
let map = new Map(); map.set(NaN, 123); map.get(NaN) // 123 map.set(-0, 123); map.get(+0) // 123
如果读取一个未知的键,则返回undefined。
new Map().get('asfddfsasadf') // undefined
属性和方法
Map数据结构有以下属性和方法。
- size:返回成员总数。
- set(key, value):设置key所对应的键值,然后返回整个Map结构。如果key已经有值,则键值会被更新,否则就新生成该键。
- get(key):读取key对应的键值,如果找不到key,返回undefined。
- has(key):返回一个布尔值,表示某个键是否在Map数据结构中。
- delete(key):删除某个键,返回true。如果删除失败,返回false。
- clear():清除所有成员,没有返回值。
set()方法返回的是Map本身,因此可以采用链式写法。
let map = new Map() .set(1, 'a') .set(2, 'b') .set(3, 'c');
例子
下面是has()和delete()的例子。
var m = new Map(); m.set("edition", 6) // 键是字符串 m.set(262, "standard") // 键是数值 m.set(undefined, "nah") // 键是undefined var hello = function() {console.log("hello");} m.set(hello, "Hello ES6!") // 键是函数 m.has("edition") // true m.has("years") // false m.has(262) // true m.has(undefined) // true m.has(hello) // true m.delete(undefined) m.has(undefined) // false m.get(hello) // Hello ES6! m.get("edition") // 6
clear()
let map = new Map(); map.set('foo', true); map.set('bar', false); map.size // 2 map.clear() map.size // 0
遍历
Map原生提供三个遍历器。
- keys():返回键名的遍历器。
- values():返回键值的遍历器。
- entries():返回所有成员的遍历器。
下面是使用实例。
let map = new Map([ ['F', 'no'], ['T', 'yes'], ]); for (let key of map.keys()) { console.log(key); } // "F" // "T" for (let value of map.values()) { console.log(value); } // "no" // "yes" for (let item of map.entries()) { console.log(item[0], item[1]); } // "F" "no" // "T" "yes" // 或者 for (let [key, value] of map.entries()) { console.log(key, value); } // 等同于使用map.entries() for (let [key, value] of map) { console.log(key, value); }
上面代码最后的那个例子,表示Map结构的默认遍历器接口(Symbol.iterator属性),就是entries方法。
map[Symbol.iterator] === map.entries // true
Map结构转为数组结构,比较快速的方法是结合使用扩展运算符(…)。
let map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]); [...map.keys()] // [1, 2, 3] [...map.values()] // ['one', 'two', 'three'] [...map.entries()] // [[1,'one'], [2, 'two'], [3, 'three']] [...map] // [[1,'one'], [2, 'two'], [3, 'three']]
结合数组的map方法、filter方法,可以实现Map的遍历和过滤(Map本身没有map和filter方法)。
let map0 = new Map() .set(1, 'a') .set(2, 'b') .set(3, 'c'); let map1 = new Map( [...map0].filter(([k, v]) => k < 3) ); // 产生Map结构 {1 => 'a', 2 => 'b'} let map2 = new Map( [...map0].map(([k, v]) => [k * 2, '_' + v]) ); // 产生Map结构 {2 => '_a', 4 => '_b', 6 => '_c'}
此外,Map还有一个forEach方法,与数组的forEach方法类似,也可以实现遍历。
map.forEach(function(value, key, map)) { console.log("Key: %s, Value: %s", key, value); };
forEach方法还可以接受第二个参数,用来绑定this。
var reporter = { report: function(key, value) { console.log("Key: %s, Value: %s", key, value); } }; map.forEach(function(value, key, map) { this.report(key, value); }, reporter);
上面代码中,forEach方法的回调函数的this,就指向reporter。