ES6新数据类型 Symbol

ES6的出现,我个人认为,对js的发展会起到很大的作用。对前端的一些功能实现也起到了很大帮助。

我们都知道es5 为我们提供了六种数据类型。分别是: 对象(Object)、数字类型(Number) 、布尔类型(Boolean)、字符串类型(String)、空类型(Null)、未定义类型(Undefind)
E6又为我们增加了一种类型 symbol 类型,他表示独一无二的值。这样下来js 就有七种数据类型了。

一、symbol 用法

1.symbol 的用法很简单:

 let a = Symbol();       
 console.log(a); // symbol()
 console.log(typeof a) // 它的类型就是 symbol

 // 我们也可以为symbol 类型加一些参数(做一些标记号) 用来区分
let b = Symbol("b")
console.log(b)  // symbol(b)

因为symbol类型 表示的是独一无二的值,所以
即便变量都是symbol类型,那么也不相等。

 var a = Symbol();
 var b = Symbol();  
 console.log(a == b)   // fales

2.symbol数据注意点

① symbol 数据类型不能够转换为数值类型,否则会报错
② symbol 数据类型不能用new 操作符去声明,因为它本身是一个原始值,而不是对象
③ symbol 数据类型不能够和字符串进行拼接,否则会报错
④ symbol 数据类型可以转化为布尔类型

二、Symbol 的用途

ES6 新增一个这个数据类型有什么用处呢。首先我们它解决了我们在定义一个对象时,不小心把键改写或覆盖的问题。

1.作为属性名

var obj = {
      username:"jhon",
      age:23,
      sex:"man",
      username:"king"
  }
  console.log(obj.name) // king

上边 由于name 又一次出行将之前的name 值给覆盖了,你可能认为这种错误基本不能出现,但是如果但你处理的数据比较多时,这种错误出现的概率还是很大的。
我们这样写:

var username = Symbol();
var obj = {
     [username]: 'Jhone',
     age:23,
     sex:"man",
 }

 console.log(obj[username]) // hello

上边需要注意的是:
①usename 定义为symbol 类型后,如果在出现 username 的键 将会报错。
② 因为username 是变量,变量作为属性要用[] 中括号,如果使用. 默认会将属性变为字符串。
重点内容
③ 上边的 username 如果变成 name = Symbol() 将会报错Cannot convert a Symbol value to a string 不能将一个符号值转换为字符串 ,这里报这个错误我不是很明白,name 应该不会是关键词。如果有知道的,欢迎留言。

给对象填属相我们还可以用defineProperty()

var obj={};
Object.defineProperty(obj,username,{value:"Jhone"});

2.消除魔术变量
魔术字符串指的是,在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码,我们应该尽量消除魔术字符串。(这里我引用的是阮一峰的例子)

function getArea(shape, options) {
  var area = 0;

  switch (shape) {
    case 'Triangle': // 魔术字符串
      console.log(1);
      break;
    /* ... more code ... */
  }

  return area;
}

getArea('Triangle', { width: 100, height: 100 }); // 魔术字符串

上面的代码,字符串triangle 就是一个魔术字符串,它多次出现,与代码形成“强耦合”,不利于将来的修改和维护。

常用的消除魔术字符串的方法,就是把它写成一个变量:

var shapeType = {
  triangle: 'Triangle'
};

function getArea(shape, options) {
  var area = 0;
  switch (shape) {
    case shapeType.triangle:
      console.log(1);
      break;
  }
  return area;
}

getArea(shapeType.triangle, { width: 100, height: 100 });

上面代码中,我们把Triangle写成shapeType对象的triangle属性,这样就消除了强耦合。
如果仔细分析,可以发现shapeType.triangle等于哪个值并不重要,只要确保不会跟其他shapeType属性的值冲突即可。因此,这里就很适合改用 Symbol 值。

const shapeType = {
  triangle: Symbol()
};

上面代码中,除了将shapeType.triangle的值设为一个Symbol,其他地方都不用修改。

三、symbol 的一些方法

1.当symbol 作为属性名时,改属性不会被for....infor...of 遍历, 也不会被Object.keys()Object.getOwnPropertyNmaes()JSON.stringify() 返回

但是它也不是一个私有属性,它有以下方法:
Object.getOwnPropertySymbols() 方法返回一个数组,成员是当前对象的所有用作属性名的Symbol 值。

 var a = Symbol("a");
   var b = Symbol("b");
 var c = Symbol("c");
   obj = {
     [a]:"a",
     [b]:'b',
     [c]:'c'
   }

 console.log( Object.getOwnPropertySymbols(obj)) //[Symbol(a), Symbol(b), Symbol(c)]

② Symbol.for() 方法

有时候,我们希望重新使用同一个Symbol 值。而symbol.for 方法可以做到。
具体实现:它接收一个字符串作为参数,然后搜索有没有以该参数作为名称的symbol 值,如果有,返回这个值,否则就新建并返回一个以该字符串为名称 的Symbol 值。

var a = Symbol.for('one');
var b = Symbol.for('one');
console.log(a === b)  // true

③ Symbol.keyFor() 方法

返回一个已登记的Symbol 类型的key值
例如:

var a = Symbol.for('one');
var c = Symbol("two");

console.log(Symbol.keyFor(a));  // one
console.log(Symbol.keyFor(c));  // underfined

通过上面的例子可以看出,Symbol.keyFor() 方法返回一个登记的Symbol 类型值得 key,而直接声明的 Symbol() 没有。如果你Symbol.keyFor() 没有参数,那么也不会有key值

更多知识点,请看http://es6.ruanyifeng.com/#docs/symbol

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值