ES6新特性:增加新类型:Symbol

时间:2022-09-05 10:15:39

  本文所有Demo的运行环境都为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 

  ES6新增了一种数据类型:SymbolSymbol是用来定义对象的唯一属性名的不二之选;

  Symbol如何使用

  Symbol如何使用呢, Symbol不是一个构造函数哦, 如果用new Symbol的话, 会报错的:

var sym1 = Symbol();
var sym2 = Symbol("foo");
var sym3 = Symbol("foo");
console.log(sym1, sym2, sym3) //输出Symbol() Symbol(foo) Symbol(foo)

  连自己都不等于自己:

//用同样的参数创建两次, 也是不相等的:
Symbol("foo") === Symbol("foo"); //输出:false

  作为属性名的Symbol;使用Symbol给对象添加唯一的属性, Symbol也能作为对象的函数名;

let obj = {};
let sAttr0 = Symbol("hehe");
let sAttr1 = Symbol("meme");
obj[sAttr1] = ;
console.log(obj[sAttr1]); obj[sAttr0] = () => {
return ++obj[sAttr0];;
};

  我们可以用typeof判断某一个变量类型为Symbol类型:

typeof Symbol() === 'symbol' //输出:true
typeof Symbol('foo') === 'symbol' //输出: true
typeof Symbol.iterator === 'symbol' //输出 : true

  如果我们不知道Symbol的实例名字是什么,我们怎么获取到Symbol值的呢, Symbol无法被for infor of循环,以及Object.keys, Object.values 等都无法遍历到Symbol的属性; Object下给我们提供了一个getOwnPropertySymbols

let sym0 = Symbol("o_o?");
let obj = {
[sym0] : "heheda"
}
for( let prop of Object.getOwnPropertySymbols(obj) ) {
//prop就是Symbol的名字
console.log( obj[prop] ); //输出:heheda
};

  或者用ES6提供的反射 : Reflect.ownKeys, 反射?

let sym0 = Symbol("o_o?");
let obj = {
[sym0] : "heheda"
}
console.log( Reflect.ownKeys(obj) ); //输出:[ Symbol(o_o?) ]

  Symbol.for和 Symbol.keyFor

  Symbol.for和Symbol的唯一区别是 Symbol.for创建的两个实例可能相等, 根据Symbol的参数生成实例, 如果参数一样, 那么会返回同一个实例;

let foo = Symbol.for( "" );
let bar = Symbol.for("");
console.log( foo === bar ); //输出: true
//只有通过Symbol.for创建的对象,才能用keyFor找到原来的参数;
console.log(Symbol.keyFor(foo)) //会输出:1111

  

  Symbol的属性以及这些属性的用处:

  Symbol.prototype: Symbol有指向的原型:

console.log(Symbol.prototype); //输出Symbol的原型

  Symbol.length: Symbol的length为1, 也就是说调用Symbol需要一个参数, 当然不给参数也没啥事。

  Symbol.Iterator:对象的Symbol.Iterator属性, 指向这个对象的默认遍历器:

var myIterable = {};
myIterable[Symbol.iterator] = function* () {
yield ;
yield ;
yield ;
};
console.log([...myIterable]); // [1, 2, 3]

  Symbol.match:ES6中字符串去匹配对象的Symbol.match方法, 匹配的结果完全可控, 以下Demo,相当于把字符串"strstring"作为obj[Symbol.match]方法的参数, 然后返回用户设定的值, chrome和FF目前还不支持:

let obj = {
[Symbol.match](string) {
console.log(string);
return "heheda";
}
};;
console.log("strstring".match(obj));

    ES6新特性:增加新类型:Symbol

  Symbol.replace:和上面的道理一样:

let obj = {
[Symbol.replace](string) {
console.log(string);
return "replllll";
}
};
console.log( "sssss".replace(obj) ); //输出: sssss replllll

  Symbol.split:和上面的道理一样。

  Symbol.toPrimitive:对象的Symbol.toPrimitive指向一个方法, 当对象转化为原始值得话, 会调用这个方法, 一个对象转为原始值由三种情况:string, number, default

    var obj1 = {};
console.log(+obj1); // NaN
console.log(`${obj1}`); // "[object Object]"
console.log(obj1 + ""); // "[object Object]" // obj2有定义Symbol.toPrimitive属性;
var obj2 = {
[Symbol.toPrimitive](hint) {
if (hint == "number") {
return ;
}
if (hint == "string") {
return "hello";
}
return true;
}
};
console.log(+obj2); // 10 -- 转化 为 "number"
console.log(`${obj2}`); // "hello" -- 转化 为 "string"
console.log(obj2 + ""); // "true" -- 转化 为 "default"

  Symbol.toStringTag:Symbol.toStringTag, 这个玩意儿厉害了, 连对象的toString方法都给改了,而且用Object.prototype.toString.call这个对象 输出也是一样的, 这个情何以堪, 以后判断元素类型必须用别的方法了, 改动大了.... :

console.log({ [Symbol.toStringTag] : "str "}.toString()); //输出:[object str ]
console.log(Object.prototype.toString.call({ [Symbol.toStringTag] : "str "}))
//输出:[object str ]
class Collection { get [Symbol.toStringTag]() { return 'xxx'; } } var x = new Collection(); console.log(x.toString())// 输出:"[object xxx]"

  参考:

    mdn:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol

    阮一峰ECMAScript 6 入门:http://es6.ruanyifeng.com/#docs/symbol

作者: NONO
出处:http://www.cnblogs.com/diligenceday/

QQ:287101329

微信:18101055830

ES6新特性:增加新类型:Symbol的更多相关文章

  1. C# 9.0 新特性预览 - 类型推导的 new

    C# 9.0 新特性预览 - 类型推导的 new 前言 随着 .NET 5 发布日期的日益临近,其对应的 C# 新版本已确定为 C# 9.0,其中新增加的特性(或语法糖)也已基本锁定,本系列文章将向大 ...

  2. JDK1.8新特性——使用新的方式遍历集合

    JDK1.8新特性——使用新的方式遍历集合 摘要:本文主要学习了在JDK1.8中新增的遍历集合的方式. 遍历List 方法: default void forEach(Consumer<? su ...

  3. JDK1&period;8之后的新特性和新接口

    接口的旧特性: 就特性下接口中只有: 常量(必须赋值) 抽象方法abstract(和final static private三个关键字冲突) interface Inter { //int a ; / ...

  4. ES6的新特性(13)——Symbol

    Symbol 概述 ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突. ...

  5. C&plus;&plus;&lowbar;新特性2-RTTI运行阶段类型识别

    这部分属于C++的新特性,感觉比较高阶的特性.我把它归于属于奇技淫巧的范畴.了解即可. RTTI是运行阶段类型识别(Runtime Type Identification)的简称. 这是添加到C++中 ...

  6. &lbrack;PHP7&period;0-PHP7&period;2&rsqb;的新特性和新变更

    php7发布已经升级到7.2.里面发生了很多的变化.本文整理php7.0至php7.2的新特性和一些变化. 参考资料: http://php.net/manual/zh/migration70.new ...

  7. Kubernetes1&period;3新特性:新的资源回收控制器

    (一)  核心概念 在kubernetes1.3中新增了一个资源回收控制器GarbaseCollector,用这个控制器来替代kubernetes1.3中的资源回收控制器GC. 如下为kubernet ...

  8. 再来看看Java的新特性——其他新特性

    关于剩余Java8新特性知识点总结,包含:默认方法.Optional.CompletableFuture.时间相关. 默认方法 默认方法皆在帮助Java新功能可以兼容低版本JDK已开发的程序. 比如说 ...

  9. HTML5 的新特性以及新标签的浏览器兼容问题

    新特性: HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加. 1)  拖拽释放(Drag and drop) API 2)  语义化更好的内容标签(heade ...

  10. hadoop3&period;0新特性及新功能

    Hadoop-3.0.0-alpha2版本发布,相比之前的hadoop-2.x有一系列的功能增强.但目前还是个alpha版本,有很多bug,且不能保证API的稳定和质量. 主要变化 Java最低版本要 ...

随机推荐

  1. hdu 5269 ZYB loves Xor I&lpar;字典树&rpar;

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5269 思路分析:当lowbit(AxorB)=2p 时,表示A与B的二进制表示的0-p-1位相等,第p ...

  2. map &amp&semi; flatMap 浅析

    我之前一直以为我是懂 map 和 flatMap 的.但是直到我看到别人说:「一个实现了 flatMap 方法的类型其实就是 monad.」我又发现这个熟悉的东西变得陌生起来,本节烧脑体操打算更细致一 ...

  3. 完美的js运动框架

    //完美运动框架, 对象,json,函数function move(obj,json,funEnd){clearInterval(obj.timer);//清除定时器obj.timer= setInt ...

  4. JFinal配合Shiro权限控制在FreeMarker模板引擎中控制到按钮粒度的使用

    实现在FreeMarker模板中控制对应按钮的显示隐藏主要用到了Shiro中的hasRole, hasAnyRoles, hasPermission以及Authenticated等方法,我们可以实现T ...

  5. json对象和json字符串

    Javascript字符串与JSON字符串的最大区别在于,JSON字符串必须使用双引号(单引号会导致语法错误) 与Javascript的对象字面量相比,JSON对象有两个地方不一样.首先,没有声明变量 ...

  6. 关于CentOS7&period;2 控制面板不显示输入法,或者无法调出输入的问题。&lpar;已解决&rpar;

    问题描述: CentOS7.2 桌面系统控制面板突然就不显示输入法的图标,快捷键也调不出输入法. 解决方法: test@base0200: ~ $ ibus-setup 调出ibus首选项--> ...

  7. 最简单的cmd命令行取得系统路径和python的安装路径(适用于winxp&period;win7和win10)

    @echo off::pip install seleniumpython -c"import sys;print(sys.prefix)" >temp.txtfor /f ...

  8. pandas&lowbar;1

    大熊猫10分钟 这是对熊猫的简短介绍,主要面向新用户.您可以在Cookbook中看到更复杂的食谱. 通常,我们导入如下: In [1]: import numpy as np In [2]: impo ...

  9. 我收藏的技术知识图(每张都是大图)关于XX背后的知识、技术图,例如:Linux、Nginx架构、PHP知识卡、机会、HTML5移动、Android系统架构、YII架构的典型流程、Css知识表

    我收藏的技术知识图(每张都是大图) HTML5Linux/Unix系统设计思想读书笔记 LinuxMVCJava线程MVCSpring MVCCSS3Nginx架构VimCliCommandsPHP知 ...

  10. Flink源码分析

    http://vinoyang.com/ http://wuchong.me Apache Flink源码解析之stream-source https://yq.aliyun.com/articles ...