JS每日一题:Es6中新增的数据类型有哪些？使用场景？

jsummer 发布于2019-08-02 14:12 / 1070人阅读

摘要：问中新增的数据类型有哪些使用场景中新增一种原始数据类型最大的特点是唯一性，值通过函数生成在中对象的属性都是字符串，我们使用他人定义的对象，然后去新增自己的属性，这样容易起冲突覆盖原有的属性也可以看成为一个字符串，不过这个字符能保证是独一无二

20190125问:

Es6中新增的数据类型有哪些？使用场景？

es6中新增一种原始数据类型Symbol,最大的特点是唯一性，Symbol值通过Symbol函数生成, 在es5中对象的属性都是字符串，我们使用他人定义的对象，然后去新增自己的属性，这样容易起冲突覆盖原有的属性, Symbol也可以看成为一个字符串，不过这个字符能保证是独一无二的

基本示例:

// Object

const obj = {
    name: "JS"
}

obj.name = "JS每日一题" 

// Symbol

const name = Symbol("name") // 这里的参数没有特殊意义，可以看成为Symbol加了一个标记

obj[name] = "JS每日一题"

Symbol用法

Symbol 目前有多种写法

// 一
const title = Symbol()

const obj = {}
obj[title] = "JS每日一题"

// 二
const obj = {
    [title]: "JS每日一题"
}

// 三
Object.defineProperty(obj, title, { value: "JS每日一题"})


obj[title] // 输出的结果都为JS每日一题

这里注意一下，Symbol 做为属性名时，不能用点去读取

obj.title // undefined

Symbol作为属性名，只有通过Object.getOwnPropertySymbols 方法返回

const attrs = Object.getOwnPropertySymbols(obj)

// [Symbol[title]]

Symbol.for()

如果我们想要重复Symbol可以使用Symbol.for， Smybol.for()及Smybol()的区别在于Symbol.for()会先去查找全局下有没有声明过，如果有就返回该值，没有就新建一个，Symbol()每一次调用都会新建一个

代码理解:

const title = Symbol.for("JS每日一题") 

....Symbol.for("JS每日一题") //调用多次都是使用的第一次声明的值

Symbol.for("JS每日一题")  === Symbol.for("JS每日一题")  // true

const title = Symbol("JS每日一题")

Symbol("JS每日一题") === Symbol("JS每日一题") // false

总结

Symbol的特点

独一无二

不能隐式转换

不能与其它数据类型做运算

不能使用点运算符进行操作

ps: 今天答题的小伙伴多次都提到了map,set，，补充一下，新增的数据类型只有Symbol一种，map,set是新增的数据结构 ~_~

关于JS每日一题

JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案

注绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路

点击加入答题

私有云专线服务 js有哪些类型数据 js数据类型有哪些 js有哪些数据类型 js+复杂数据类型有哪些

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53639.html

JS每日一题:Es6中新增的数据类型有哪些？使用场景？

摘要：问中新增的数据类型有哪些使用场景中新增一种原始数据类型最大的特点是唯一性，值通过函数生成在中对象的属性都是字符串，我们使用他人定义的对象，然后去新增自己的属性，这样容易起冲突覆盖原有的属性也可以看成为一个字符串，不过这个字符能保证是独一无二 20190125问: Es6中新增的数据类型有哪些？使用场景？ es6中新增一种原始数据类型Symbol,最大的特点是唯一性，Symbol值通过S...

DataPipeline 2019-08-26 13:28 评论0 收藏0
前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

zacklee 2019-08-30 15:55 评论0 收藏0
前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

lbool 2019-08-23 14:52 评论0 收藏0
前端知识点(二)

摘要：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行时。 1、元素上下垂直居中的方式有哪些？元素水平垂直居中的方式有哪些？ absolute加margin方案 fixed 加 margin 方案 display:table 方案行内元素line-height方案 flex 弹性布局方案 transform 未知元素宽高解决方案 absolute加mar...

Alex 2019-08-02 14:09 评论0 收藏0
JS每日一题：如何理解es6中的Proxy？

20190124问: 如何理解es6中的Proxy？试题解析:对proxy的理解，可能会延伸到vue的双向绑定 Proxy（代理）定义可以理解为为目标对象架设一层拦截，外界对该对象的访问，都必须通过这层拦截简单示例: const obj = new Proxy({}, { get: (target, key, receiver) => { return JS ...

tinysun1234 2019-08-23 14:58 评论0 收藏0