es6新增的Symbol、Set 和 Map

本文介绍了ES6中的新特性。Symbol是新的原始数据类型,可作对象属性名保证不冲突;Set是成员唯一的数据结构,可用于数组去重,有多种操作和遍历方法;Map是更完善的Hash结构,键的范围更广,也有相应操作和遍历方法,还能与数组相互转换。
Symbol

    Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种分别是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object);

    Symbol 值通过Symbol函数生成,可以作为对象的属性名使用,保证不会与其他属性名产生冲突;

let s = Symbol();
typeof s  // symbol

注意:
    创建一个Symbol变量,Symbol函数前不能使用new命令,否则会报错,也就是说Symbol 是一个原始类型的值,不是对象,也不能添加属性;

    Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,主要用于区分不同的 Symbol 变量;

let s1 = Symbol('a');
let s2 = Symbol('b');
s1.toString()  // 'Symbol(a)'
s2.toString()  // 'Symbol(b)'

注意:
    Symbol函数的参数只是表示对当前 Symbol 值的描述,因此相同参数的Symbol函数的返回值是不相等的。
如下:

let s1 = Symbol('a');
let s2 = Symbol('a');

s1 === s2  //false

    Symbol 值不能与其他类型的值进行运算,但可以转为布尔值,但是不能转为数值;

let s = Symbol();
s + '2'       // Cannot convert a Symbol value to a string
Boolean(s)    // true
!s            // false
Set 和 Map

    ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值,它 本身是一个构造函数,用来生成 Set 数据结构。

let s = new Set([1,2,3,4,5,2,2,3,5]);
s // [1,2,3,4,5]

    可以使用add(key)方法可以添加元素到Set中,可以重复添加,但不会有效果,值得注意的是向Set加入值的时候,不会发生类型转换,即 5 和 “5” 是两个不同的值,但在 Set 内部,两个NaN是相等

let s = new Set([1,2,3]);
s.add(4)   //[1,2,3,4]
s.add(4)   //[1,2,3,4]
s.add(5)   //[1,2,3,4,5]
s.add('5') //[1,2,3,4,5,"5"]
s.add(NaN) //[1,2,3,4,5,"5",NaN]
s.add(NaN) //[1,2,3,4,5,"5",NaN]

    可以利用Set数据不重复的特性,提供一种新的数组去重方法

// 去除数组的重复成员
[...new Set(array)]

[...new Set([1,2,2,3,3,4,5,5])]  //[1,2,3,4,5]

    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 结构的实例有四个遍历方法,可以用于遍历成员。

  • keys():返回键名的遍历器
  • values():返回键值的遍历器
  • entries():返回键值对的遍历器
  • forEach():使用回调函数遍历每个成员需要特别指出的是,Set的遍历顺序就是插入顺序。这个特性有时非常有用,比如使用Set保存一个回调函数列表,调用时就能保证按照添加顺序调用。
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"]

    ES6 提供了 Map 数据结构,它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键,是一种更完善的 Hash 结构实现。

    Map常见的操作方法有:

  • set(key,val):添加某个值,返回Map结构本身。
  • get(key): 读取某个键,如果该键未知,则返回undefined
  • delete(key): 删除某个键,返回一个布尔值,表示删除是否成功。
  • has(key): 返回一个布尔值,表示该值是否为Map的键。
  • clear() : 清除所有成员,没有返回值。
    const m = new Map();
    const o = { str : 'Hello World'};
    m.set(o, 'content')
    m.get(o) // "content"
    m.has(o) // true
    m.delete(o) // true
    m.has(o) // false

    Map 结构原生提供三个遍历器生成函数和一个遍历方法

  • keys():返回键名的遍历器
  • values():返回键值的遍历器
  • entries():返回所有成员的遍历器。
  • forEach():遍历 Map 的所有成员。

    我们可以使用扩展运算符(…)将Map转换为数组,反过来,将数组传入 Map 构造函数,就可以转为 Map了
如下:

//Map转数组
const map = new Map();
map.set('name' , 'hello').set({},'world');

[...map] //[["name","hello"],[{},"world"]]

//数组转Map
const map = new Map([["name","hello"],[{},"world"]]);

map // {"name" => "hello", Object {} => "world"}
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值