面试中喜闻乐见的问题就是问我们的ES6新增了哪些个新特性 这篇文章一起学习一下新增的数据类型:Symbol

JS的原始数据类型:6种
Boolean,String,Undefined,NULL,Number,Symbol(ES6新增)

原始的数据类型种不包含object这点需要注意。
Symbol是用来干什么的:用来区分我们的属性名的,用来定义对象的唯一属性名。

console.log(typeof Symbol("Alice")) // 输出:symbol

我们通过Symbol函数来生成symbol;

var symbol1=Symbol();

var symbol2=Symbol("Zhangxin");

Symbol类型的值是一个独一无二的值,Symbol函数的参数只是表示对当前Symbol值的描述,因此相同参数的Symbol函数的返回值是不相等的。

  1. console.log(Symbol() === Symbol()); // 输出:false

 console.log(Symbol("Zhangxin") === Symbol("Zhangxin")); // 输出:false
Symbol不是一个构造函数 所以不能使用newSymbol方法来创建
var symbol=new Symbol();
这就会报错:
 

Symbol定义的属性 也不能直接去和String类型的属性进行连接操作:

console(Symbol('aa')+"bb");

另外的 下面是Symbol类型和其他类型的转换结果;

var symbol=Symbol("zhangxin");

console.log(symbol.toString());

console.log(Boolean(symbol));

if(symbol)

{

console.log("Y");

}

else{

console.log("N");

}

console.log(Number(symbol));

作为对象属性名的Symbol:

由于每一个Symbol值都是不相等的,这意味着Symbol值可以用于对象的属性名,保证不会出现同名的属性,这对于一个对象由多个模块构成的情况非常有用,能防止某一个键被不小心改写或覆盖。

对象的属性名可以有两种类型,一种是原来的字符串,另一种是新增的Symbol类型。凡是属性名属于Symbol类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。

通过方括号结构和Object.defineProperty,将对象的属性名指定为一个Symbol值。

方法一:

var name=Symbol():

var obj={[name]:"Zhangxin"};

方法二:

var name=Symbol();

var obj={};

obj[name]="Zhangxin"

方法三:

var obj = {};

Object.defineProperty(obj, name, { value: 'Zhangxin' });
参考文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

在对象的内部,使用Symbol值定义属性时,Symbol值必须放在方括号之中,如果不放在方括号中,该属性名就是字符串,而不是代表的Symbol值。

var name = Symbol();

var obj1 = {

[name]: "Zhangxin"

};

console.log(obj1.name); // 输出:undefined

console.log(obj1[name]); // 输出:Zhangxin

Symbol值作为对象属性名时,不能用点运算符。由于点运算符后面总是字符串,所以不会读取name作为标识名所指代的那个值,导致属性名实际上是一个字符串,而不是一个Symbol值。

var obj = {};

var name = Symbol();

obj.name = 'Zhangxin';

console.log(obj.name);

console.log(obj[name]);

console.log(obj['name']);

3、作为对象函数名的Symbol

var func = Symbol();

var obj = {

func: function() {

console.log("YES");

}

};

obj.func(); // 输出:YES

4、获取对象属性的两种方法

1) Object.getOwnPropertySymbols()方法

返回只包含Symbol类型的属性名的数组

2) Object.getOwnPropertyNames()方法

返回只包含字符串类型的属性名的数组

var obj = {};

var age = Symbol("age");

var job = Symbol("job");

obj[age] = "Zhangxin";

obj[job] = "student";

obj.age = 23;

var symbols = Object.getOwnPropertySymbols(obj);

var names = Object.getOwnPropertyNames(obj);

console.log(symbols.length); // 输出:2

console.log(symbols); // 输出:[Symbol(age), Symbol(job)]

console.log(obj[symbols[0]]); // 输出:Zhangxin

console.log(names.length); // 输出:1

console.log(obj[names[0]]); // 输出:23

5、Symbol.for()和Symbol.keyFor()方法

1) Symbol.for()方法

类似于单例模式,首先在全局中搜索有没有以该参数为名称的Symbol值,如果有则返回该Symbol值,否则新建并返回一个以该参数为名称的Symbol值。

var symbol1 = Symbol.for('Zhangxin');

var symbol2 = Symbol.for('Zhangxin');

console.log(symbol1 === symbol2) // 输出:true

2) Symbol.keyFor()方法

返回一个已创建的Symbol类型值的key,实质是检测该Symbol是否已创建。

var symbol1 = Symbol.for("Zhangxin");

console.log(Symbol.keyFor(symbol1)); // 输出:"Zhangxin"

var symbol2 = Symbol("Zhangxin");

console.log(Symbol.keyFor(symbol2)); // 输出:undefined

 

浅谈ES6新增数据类型:Symbol的更多相关文章

  1. ES6新增数据类型Symbol

    Symbol的含义? ES6(2015) 引入了第七种原始数据类型Symbol,Symbol英文文意思为 符号.象征.标记.记号,在 js 中更确切的翻译应该为独一无二的 Symbol的使用? Sym ...

  2. es6 新增数据类型Symbol

    es6在string number boolean null undefined object之外又新增了一种Symbol类型. Symbol意思是符号,有一个特性—每次创建一个Symbol值都是不一 ...

  3. 浅谈ES6新特性

    ES6的了解 新增模板字符串(为JavaScript提供了简单的字符串插值功能).箭头函数(操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs.).for-o ...

  4. 浅谈ES6原生Promise

    浅谈ES6原生Promise 转载 作者:samchowgo 链接:https://segmentfault.com/a/1190000006708151 ES6标准出炉之前,一个幽灵,回调的幽灵,游 ...

  5. ES6的新增数据类型:Symbol

    简介:Symbol类型是es6新增的一个数据类型,Es5的基本数据类型(undefined,null,Object,function,Number,string) Symbol值通过Symbol函数生 ...

  6. 浅谈ES6

    ECMAScript6.0(简称ES6)是javaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,使得javaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 ...

  7. ES6新数据类型Symbol

    Symbol 需计算字面量属性时使用 const benz = Symbol('benz'); const car = { [benz]: 'benz car' }; const info = Sym ...

  8. 浅谈ES6中的Class

    转载地址:https://www.cnblogs.com/sghy/p/8005857.html 一.定义类(ES6的类,完全可以看做是构造函数的另一种写法) class Greet { constr ...

  9. 浅谈 es6 箭头函数, reduce函数介绍

    今天来谈一下箭头函数, es6的新特性 首先我们来看下箭头函数长什么样子, let result = (param1, param2) => param1+param2; 上述代码 按照以前书写 ...

随机推荐

  1. redist命令操作(二)--哈希Hash,列表List

    1.Redis 哈希(Hash) 参考菜鸟教程:http://www.runoob.com/redis/redis-hashes.html Redis hash 是一个string类型的field和v ...

  2. Rhel6.6---执行命令df -h卡住不动

    问题描述 nfs服务宕掉后,df -h卡住不动,使用xftp也无法打开文档路径 -bash-4.1# mount /dev/mapper/vg_root-LogVol00 on / type ext4 ...

  3. ArrayList类源码解析——ArrayList动态数组的实现细节(基于JDK8)

    一.基本概念 ArrayList是一个可以添加对象元素,并进行元素的修改查询删除等操作的容器类.ArrayList底层是由数组实现的,所以和数组一样可以根据索引对容器对象所包含的元素进行快速随机的查询 ...

  4. apm固定翼调试方法

    APM飞控传说是大神的神器新手的噩梦,APM是个便宜又好用的飞控~刚开始给我的天行者X5按APM飞控的时候也查询搜索了很多,参数值,修改和混控和混控量的修改翻遍了资料发现咱们论坛教程比较少,所以开帖总 ...

  5. 列举至少3种Support包中提供的布局或工具

    android.support.v7.widget.CardView 继承自FrameLayout并实现了圆角和阴影效果,常用于ListView或RecyclerView中Item布局的根节点 示例代 ...

  6. jmeter遇到问题及解决办法

    1.要得到前一个sampler的响应信息,是加beanshell sampler 还是加beanshell postprocessor?   答:在http取样器后添加beanshell sample ...

  7. Java第一个程序之HelloWorld

    代码实现如下图: 讲解: 1.主方法入口main():public static void main(string[] args){}是Java应用程序执行的入口点,必须提供该方法才能被执行: 2.打 ...

  8. mysql 数据库主从同步

    1.简介 写这篇文章是网上找到的相关主从同步的都不够完全,本人第一次搭建主从同步,完全看着网上的文章来搭建的,结果你懂的,踩了很多坑.所以特地把踩到的坑写出来,新手切勿直接布置到正式环境,请于测试环境 ...

  9. JS中的加减乘除和比较赋值

    隐式类型转换 使用Boolean(), Number(), String()去转换数据类型的方法叫显示类型转换,而与它相对的就是隐式类型转换,隐式类型转换并没有明显的标志,而是JS解释器觉得做这样一个 ...

  10. c语言头文件的认识

    c头文件的作用是什么,和.c文件是怎么联系的,该怎么样编写头文件呢?这些问题我一直没搞明白,在阅读uCOS-II(邵贝贝)“全局变量”部分有些疑惑,今天终于搞清楚了头文件的一些基础知识,特地分享一下. ...