学习了es6语法的symbol类型,整理笔记,闲时复习。

Symbol

是es6新增的第七种原始数据类型(null,string,number,undefined,boolean,object),是为了在对象中对属性名滥用而导致的冲突问题。

ps: 既然是数据类型,不是对象,那么就不能用new命令,因此不能添加属性

let a = Symbol('a')
console.log(a) // Symbol(a)
console.log(typeof a) // symbol

简单来说:一旦声明一个变量为symbo类型,说明这个变量是唯一的,独一无二的,覆盖不了的

let a = Symbol('abc')
let b = Symbol('abc') let c = 'abc'
let d = 'abc' console.log(a === b) // false
console.log(c === d) // true
现在,在对象的属性名有两种类型,一个是以字符串的形式,另一个以Symbol的形式
若以symbol的形式去写,那么就要按照规范去写,加上中括号[],来表明使用了symbol类型,获取时,而不是按照字符串类型的属性名去获取,而以中括号去获取。
let name = Symbol()
let obj = {
[name]: 'peter',
age: 25,
name: 'Peter'
}
console.log(obj) // {age: 25, name: "Peter", Symbol(): "peter"}
console.log(obj.name) // Peter
console.log(obj[name]) // peter
通过例子可知:获取对象时,得到是两个不一样的name属性名,说明symbo和字符串是两种不一样的值,获取方式也不一样,按照点获取的是字符串,中括号是symbol类型的值。

关于在对象声明时对symbol类型的写法有三种:

let sy = Symbol();
// 第一种写法
let a = {};
a[sy] = 'Hello!';
console.log(a) // {Symbol(): "Hello!"}
//第二种写法
let a = {
[sy]: 'Hello!'
};
console.log(a) // {Symbol(): "Hello!"}
// 第三种写法
let a = {};
Object.defineProperty(a, sy, { value: 'Hello!' });
console.log(a) // {Symbol(): "Hello!"}
实例:

const shapeType = {
triangle: Symbol(),
rectangle: Symbol(),
}; function getArea(shape, options) {
let area = 0;
switch (shape) {
case shapeType.triangle:
area = .5 * options.width * options.height;
break;
case shapeType.rectangle:
area = options.width * options.height;
break;
}
return area;
} let a = getArea(shapeType.triangle, { width: 100, height: 100 });
let b = getArea(shapeType.rectangle, { width: 100, height: 100 });
console.log(a) //
console.log(b) //

Symbol方法:

Object.getOwnPropertySymbols() 返回一个数组,成员是当前对象的所有用作属性名的 Symbol 值
symbol在对象上作为一个属性名,不会被循环的方法所识别,不会出现在for...in、for...of循环中,不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回,所以它有自己获取symbol值的方法。

let name = Symbol('name');
let age = Symbol('age')
let obj = {
[name]: 'peter',
[age]: 25
}
let a = Object.getOwnPropertySymbols(obj)
console.log(a) // [Symbol(name), Symbol(age)]

Reflect.ownKeys() 返回所有类型的键名,包括常规键名和 Symbol 键名

let name = Symbol('name');
let obj = {
[name]: 'peter',
age: 25,
enum: 2
}
console.log(Reflect.ownKeys(obj)) // ["age", "enum", Symbol(name)]

Symbol.for() 接受一个字符串作为参数,然后搜索有没有以该参数作为名称的 Symbol 值。如果有,就返回这个 Symbol 值,否则就新建并返回一个以该字符串为名称的 Symbol 值。

这个方法就是重新使用已有symbol的值,在遍历判断时常用

let a = Symbol.for('abc');
let b = Symbol.for('abc');
let c = Symbol.for('ab');
console.log(a === b) // true
let a = Symbol.for('abc')
let b = Symbol('abc')
console.log(a) // Symbol(abc)
console.log(a === b) // false
由此可知:a虽然用Symbol.for声明了symbol类型,但是却和symbol声明不一样,说明两者不是同一个值。
 
 

对应的笔记和实例,我放到了GitHub,https://github.com/sqh17/notes

有什么问题请私信或留下评论,一起加油。

 
 
参考资料:
阮一峰大大的es6标准入门:http://es6.ruanyifeng.com

es6学习笔记--新数据类型Symbol的更多相关文章

  1. ES6学习笔记三:Symbol、Set、Map

    一:Symbol ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值.它是 JavaScript 语言的第七种数据类型,前六种是:undefined.null.布尔值(Boolean). ...

  2. ES6中的新数据类型——Symbol

    今天小编和大家来聊一聊es6中新增的一个原始数据类型Symbol.在es5中原始数据类型(基本数据类型)有以下六种:Undefind.Null.Bool. String.Number.Object.今 ...

  3. es6学习笔记--新数据结构Set,Map以及WeakSet,WeakMap

    在javascript中,存储数据的方式大部分就是以数组或者对象形式存储的,es6出现了4种新集合Set,Map,WeakSet,WeakMap来存储数据,简化了编程. 集合--Set 类似于数组,但 ...

  4. es6学习笔记-class之一概念

    前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...

  5. JS&ES6学习笔记(持续更新)

    ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...

  6. ES6学习笔记<一> let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

  7. ES6学习笔记之块级作用域

    ES6学习笔记:块级作用域 作用域分类 全局作用域 局部作用域 块级作用域 全局作用域示例 var i=2; for (var i = 0; i < 10; i++) { } console.l ...

  8. ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能

    前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...

  9. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

随机推荐

  1. java并发 - 自底向上的原理分析

    [TOC] 事先声明,我只是java并发的新手,这篇文章也只是我阅读<java并发编程的艺术>一书(内容主要涉及前3章)的一些总结和感悟.希望大家能多多讨论,对于错误的地方还请指出. 0. ...

  2. 项目实战14—ELK 企业内部日志分析系统

    一.els.elk 的介绍 1.els,elk els:ElasticSearch,Logstash,Kibana,Beats elk:ElasticSearch,Logstash,Kibana ① ...

  3. windows系统php配置redis

    网上各种找教程各种不行,最后东拼西凑的终于把redis弄出来了. PHP版本:7.1.0: Redis版本:3.2.10: Windows版本:Windows7: 一.Windows下安装Redis ...

  4. eclipse中添加Java代码注释模板

    eclipse中添加Java代码注释模板 1.Window->Preference->Java->Code Style->Code Template,进入注释编辑界面 2.文件 ...

  5. Flex和Java通信报错

    1.错误描述 11-30 18:15:52 ERROR [localhost-startStop-1] org.springframework.web.servlet.FrameworkServlet ...

  6. lvs简单使用

    LB集群实现 硬件 F5 BIG-IP Citrix NetScaler A10 Redware 软件 1 lvs 2 haproxy 3 nginx 4 ats apache traffic ser ...

  7. Java 8 Date-Time API 详解

    从Java版本1.0开始就支持日期和时间,主要通过java.util.Date类. 但是,Date类设计不佳. 例如,Date中的月份从1开始,但从日期却从0开始.在JDK 1.1中使用它的许多方法已 ...

  8. Keras常见问题及解答

    Keras官方中文版文档 如何引用 Keras? 如何在 GPU 上运行 Keras? 如何在多 GPU 上运行 Keras 模型? "sample", "batch&q ...

  9. Xcode 9.0 新增功能大全

    Xcode是用于为Apple TV,Apple Watch,iPad,iPhone和Mac创建应用程序的完整开发人员工具集.Xcode开发环境采用tvOS SDK,watchOS SDK,iOS SD ...

  10. 【BZOJ1857】传送带(三分)

    [BZOJ1857]传送带(三分) 题面 Description 在一个2维平面上有两条传送带,每一条传送带可以看成是一条线段.两条传送带分别为线段AB和线段CD.lxhgww在AB上的移动速度为P, ...