ES6: Symbol概念与用法举例

这篇具有很好参考价值的文章主要介绍了ES6: Symbol概念与用法举例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

概念: ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。

1-使用Symbol作为对象属性名

let name = Symbol()
let age = Symbol()
var obj = {
    [name]:"kerwin",
    [age]:100
}

举例理解:

a.给对象添加独一无二的属性

let obj = {
  name: 'Jack'
}

let name = Symbol()
obj[name] = "Mike"

console.log(obj); // {name: 'Jack', Symbol(): 'Mike'}
console.log(obj[name]); // Mike

b. 便于定义公共库

这里封装属性和方法时, 全部采取Symbol类型, 这样别人就算往里面加name、age等同名的属性或方法, 也不会影响对象原本使用

let keys = {
  name: Symbol(),
  age: Symbol(),
  location: Symbol(),
  test: Symbol(),
}
let obj = {
  [keys.name]: "Mike",
  [keys.age]: 100,
  [keys.location]: "WUXI",
  [keys.test](){
    console.log("test");
  }
}
console.log(obj); // {Symbol(): 'Mike', Symbol(): 100, Symbol(): 'WUXI'}
obj[keys.test]() // test

注意:

let s1 = Symbol()

//1. 不能进行运算
console.log(s1>2); // Uncaught TypeError: Cannot convert a Symbol value to a number

//2. 显示调用toString()
console.log(s1.toString() + "aaa");

//3. 隐式转换boolean
if(s1){
  console.log("执行");
}

2-Symbol()函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述。这主要是为了在控制台显示,比较容易区分。

let keys = {
  name: Symbol("name"),
  age: Symbol("age"),
  location: Symbol("localtion"),
  test: Symbol("test"),
}
let obj = {
  [keys.name]: "Mike",
  [keys.age]: 100,
  [keys.location]: "WUXI",
  [keys.test](){
    console.log("test");
  }
}
console.log(obj); 
// {Symbol(name): 'Mike', Symbol(age): 100, Symbol(localtion): 'WUXI', Symbol(test): ƒ}

3-遍历问题

Symbol的值无法被for in进行遍历

let keys = {
    name:Symbol("name"),
    age:Symbol("age")
}
var obj = {
  [keys.name]:"kerwin",
  [keys.age]:100,
  a:1,
  b:2,
  c:3
}

// 输出对象中的普通属性
for(let i in obj) {
  console.log(i); // a b c
}

// 输出对象中的Symbol属性
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(name), Symbol(age)]

// 遍历输出 Reflect.ownKeys(obj) 可以找到对象中所有的属性,并返回一个数组
Reflect.ownKeys(obj).forEach(item=>{
  console.log(item,obj[item])
})
/**
 * Symbol(name) 'kerwin'
 * test.html:32 Symbol(age) 100
*/

补充: 拿到Symbol的属性Object.getOwnPropertySymbols(obj)

4-Symbol.for()可以重新使用同一个 Symbol 值

var obj  ={
    [Symbol.for("name")]:"kerwin",
    [Symbol.for("age")]:100
}

console.log(obj[Symbol.for("name")]) // kerwin

5-Symbol表示独一无二的常量

case只能使用规定常量

const VIDEO = Symbol();
const AUDIO = Symbol();
const IMAGE = Symbol();

function play(type) {
  switch(type) {
    case VIDEO:
      console.log("VIDEO");
      break;
    case AUDIO:
      console.log("AUDIO");
      break;
    case IMAGE:
      console.log("IMAGE");
      break;
  }
}

play(VIDEO) // VIDEO

参考: 千锋 011-ES6-Symbol_哔哩哔哩_bilibili 文章来源地址https://www.toymoban.com/news/detail-557299.html

到了这里,关于ES6: Symbol概念与用法举例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ES6 中 Symbol 怎么用?示例详解

    还是大剑师兰特 :曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。 No. 内容链接 1 Openlayers 【入门教

    2024年04月22日
    浏览(32)
  • ES6类-继承-Symbol-模版字符串

    目录 类  继承 ES5 如何继承 ES6继承 Symbol 用途 可以产生唯一的值,独一无二的值 解决命名冲突 getOwnPropertySymbols()  作为全局注册表 缓存  Symbol.for()  消除魔术字符串  模版字符串 在javascript语言中,生成实例对象使用构造函数;ES6提供了类Class这个概念,作为对象的模板。定

    2024年02月16日
    浏览(50)
  • 后端程序员的前端必备【Vue】 - 07 ES6新语法

    使用let定义变量能更加精准的确定变量的作用域 使用const定义常量,常量一旦定义不可以改变 使用模板字符串可以避免大量的字符串拼接 类似于springmvc中接受参数拥有默认值 使用箭头函数可以简化复杂的代码结构(类似于java中lambda表达式) 箭头函数应用 定义:从一个大的数

    2024年02月04日
    浏览(48)
  • Vue2和vue3中双向数据绑定的原理,ES6的Proxy对象代理和JavaScript的Object.defineProperty,使用详细

    简介: Object.defineProperty大家都知道,是vue2中双向数据绑定的原理,它 是 JavaScript 中一个强大且常用的方法,用于定义对象属性,允许我们精确地控制属性的行为,包括读取、写入和删除等操作; 而Proxy是vue3中双向数据绑定的原理,是ES6中一种用于创建代理对象的特殊对象,

    2024年02月15日
    浏览(47)
  • 【前端知识】JavaScript——Symbol类型

    什么是Symbol(符号)类型? ​ Symbol是原始值,且Symbol实例是唯一、不可变的。Symbol的用途是确保对象属性使用唯一标识符,不会发生属性冲突的危险。Symbol创建唯一记号,进而用作非字符串形式的对象属性。 如何使用Symbol? 全局符号注册表 使用符号作为属性 常用内置符号

    2024年02月16日
    浏览(45)
  • ES6相关概念

    ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。 每一次标准的诞生都意味着语言的完善,功能的加强。JavaScript语言本身也有一些令人不满意的地方。 变量提升特性增加了程序运行时的不可预测性 语法过于松散,实现相同的功能,不同的

    2024年02月09日
    浏览(30)
  • 【ES6】Promise.all用法

    Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。 上面代码中,Promise.all()方法接受一个数组作为参数,p1、p2、p3都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。另外,Promise.all()方法的参数可以

    2024年02月09日
    浏览(35)
  • 【ES】笔记-ES6的函数rest参数用法

    es6中引入了rest参数,样式形如…xxx,用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的一个变量是一个数组,该变量将多余的参数放入数组中。例如: 上面代码的add函数是一个求和函数,利用rest参数,可以向该函数传入任意数目的参数。 下面是一

    2024年02月13日
    浏览(40)
  • 【JavaScript】数组方法 (ES6)

    arr.find(callback) 用于获取第 1 个符合要求的元素: callback : (item, index, arr) = boolean item -当前值、 index -当前索引、 arr -当前数组 返回值: callback 第一次返回 true 的对应 item ;如果没有符合的元素,则返回 undefined arr.findIndex(callback) 用于获取第 1 个符合要求的元素的下标: cal

    2024年02月14日
    浏览(59)
  • JavaScript ES6实现继承

    1 对象的方法补充 2 原型继承关系图 3 class方式定义类 4 extends实现继承 5 extends实现继承 6 多态概念的理 function 创建的名称如果开头是大写的,那这个创建的不是函数,是创建了类。 可以把class创建的类当做是function创建的类的一种语法糖。但是在直接使用的方面是有不同之处

    2024年02月16日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包