- Set
基本用法
ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成Set数据结构。
// 例一 var set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] // 例二 var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]); items.size // 5 // 例三 function divs () { return [...document.querySelectorAll('div')]; } var set = new Set(divs()); set.size // 56 // 类似于 divs().forEach(div => set.add(div)); set.size // 56
向Set加入值的时候,不会发生类型转换,所以
5
和"5"
是两个不同的值。Set内部判断两个值是否不同,使用的算法叫做“Same-value equality”,它类似于精确相等运算符(===
),主要的区别是NaN
等于自身,而精确相等运算符认为NaN
不等于自身。另外,两个对象总是不相等的。let set = new Set(); let a = NaN; let b = NaN; set.add(a); set.add(b); set // Set {NaN}
Set实例的属性和方法
Set结构的实例有以下属性。
Set.prototype.constructor:构造函数,默认就是Set函数
Set.prototype.size:返回Set实例的成员总数。
Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。
- add(value):添加某个值,返回Set结构本身。
- delete(value):删除某个值,返回一个布尔值,表示删除是否成功
- has(value):返回一个布尔值,表示该值是否为Set的成员。
- clear():清除所有成员,没有返回值。
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)); } dedupe([1, 1, 2, 3]) // [1, 2, 3]
遍历操作
Set结构的实例有四个遍历方法,可以用于遍历成员。特别说明:由于Set结构没有键名,只有键值(或者说键名和键值是同一个值),所以key方法和value方法的行为完全一致。
keys():返回键名的遍历器
values():返回键值的遍历器
let set = new Set(['red', 'green', 'blue']); for (let item of set.keys()) { console.log(item); } // red // green // blue for (let item of set.values()) { console.log(item); } // red // green // blue for (let item of set.entries()) { console.log(item); } // ["red", "red"] // ["green", "green"] // ["blue", "blue"]
可以省略
values
方法,直接用for...of
循环遍历Setlet set = new Set(['red', 'green', 'blue']); for (let x of set) { console.log(x); } // red // green // blue
entries():返回键值对的遍历器
forEach():使用回调函数遍历每个成员
Set结构的实例的
forEach
方法,用于对每个成员执行某种操作,没有返回值。let set = new Set([1, 2, 3]); set.forEach((value, key) => console.log(value * 2) ) // 2 // 4 // 6
上面代码说明,
forEach
方法的参数就是一个处理函数。该函数的参数依次为键值、键名、集合本身(上例省略了该参数)。另外,forEach
方法还可以有第二个参数,表示绑定的this对象。
遍历的应用
去重
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}
因此使用Set可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)。
let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]); // 并集 let union = new Set([...a, ...b]); // Set {1, 2, 3, 4} // 交集 let intersect = new Set([...a].filter(x => b.has(x))); // set {2, 3} // 差集 let difference = new Set([...a].filter(x => !b.has(x))); // Set {1}
- Map
- Map结构的目的和基本用法
- ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构,Map比Object更合适。
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
- 作为构造函数,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结构才将其视为同一个键。这一点要非常小心。
注意,只有对同一个对象的引用,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) .set(k2, 222); map.get(k1) // 111 map.get(k2) // 222
上面代码中,变量
k1
和k2
的值是一样的,但是它们在Map结构中被视为两个键。由上可知,Map的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键。这就解决了同名属性碰撞(clash)的问题,我们扩展别人的库的时候,如果使用对象作为键名,就不用担心自己的属性与原作者的属性同名。
- ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构,Map比Object更合适。
- 实例的属性和操作方法
- size属性
- set(key, value)
var m = new Map(); m.set("edition", 6) // 键是字符串 m.set(262, "standard") // 键是数值 m.set(undefined, "nah") // 键是undefined set方法返回的是Map本身,因此可以采用链式写法。 let map = new Map() .set(1, 'a') .set(2, 'b') .set(3, 'c');
- get(key)
- has(key)
- delete(key)
- clear()
- 遍历方法
Map原生提供三个遍历器生成函数和一个遍历方法。需要特别注意的是,Map的遍历顺序就是插入顺序。
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); }
keys():返回键名的遍历器。
values():返回键值的遍历器。
entries():返回所有成员的遍历器。
forEach():遍历Map的所有成员。
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转为数组
let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']); [...myMap] // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
- 数组转为Map
new Map([[true, 7], [{foo: 3}, ['abc']]]) // Map {true => 7, Object {foo: 3} => ['abc']}
- Map转为对象
function strMapToObj(strMap) { let obj = Object.create(null); for (let [k,v] of strMap) { obj[k] = v; } return obj; } let myMap = new Map().set('yes', true).set('no', false); strMapToObj(myMap) // { yes: true, no: false }
- 对象转为Map
function objToStrMap(obj) { let strMap = new Map(); for (let k of Object.keys(obj)) { strMap.set(k, obj[k]); } return strMap; } objToStrMap({yes: true, no: false}) // [ [ 'yes', true ], [ 'no', false ] ]
- Map转为JSON
function strMapToJson(strMap) { return JSON.stringify(strMapToObj(strMap)); } let myMap = new Map().set('yes', true).set('no', false); strMapToJson(myMap) // '{"yes":true,"no":false}'
- JSON转为Map
function jsonToStrMap(jsonStr) { return objToStrMap(JSON.parse(jsonStr)); } jsonToStrMap('{"yes":true,"no":false}') // Map {'yes' => true, 'no' => false}
- Map转为数组
- Map结构的目的和基本用法
ES6基础6
2024-03-15 14:26:04 38 阅读