首页 > 其他分享 >ES6:Symbol

ES6:Symbol

时间:2023-04-20 14:36:12浏览次数:64  
标签:ES6 console log Symbol 打印 let obj

publish: false

Symbol

概述

背景:ES5中对象的属性名都是字符串,容易造成重名,污染环境。

概念:ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。

特点:

  • Symbol属性对应的值是唯一的,解决命名冲突问题

  • Symbol值不能与其他数据进行计算,包括同字符串拼串

  • for in、for of 遍历时不会遍历Symbol属性。

创建Symbol属性值

Symbol是函数,但并不是构造函数。创建一个Symbol数据类型:

    let mySymbol = Symbol();

    console.log(typeof mySymbol);  //打印结果:symbol
    console.log(mySymbol);         //打印结果:Symbol()

打印结果:

下面来讲一下Symbol的使用。

1、将Symbol作为对象的属性值

    let mySymbol = Symbol();

    let obj = {
        name: 'smyhvae',
        age: 26
    };

    //obj.mySymbol = 'male'; //错误:不能用 . 这个符号给对象添加 Symbol 属性。
    obj[mySymbol] = 'hello';    //正确:通过**属性选择器**给对象添加 Symbol 属性。后面的属性值随便写。

    console.log(obj);

上面的代码中,我们尝试给obj添加一个Symbol类型的属性值,但是添加的时候,不能采用.这个符号,而是应该用属性选择器的方式。打印结果:

现在我们用for in尝试对上面的obj进行遍历:

    let mySymbol = Symbol();

    let obj = {
        name: 'smyhvae',
        age: 26
    };

    obj[mySymbol] = 'hello';

    console.log(obj);

    //遍历obj
    for (let i in obj) {
        console.log(i);
    }

打印结果:

从打印结果中可以看到:for in、for of 遍历时不会遍历Symbol属性。

创建Symbol属性值时,传参作为标识

如果我通过 Symbol()函数创建了两个值,这两个值是不一样的:

    let mySymbol1 = Symbol();
    let mySymbol2 = Symbol();

    console.log(mySymbol1 == mySymbol2); //打印结果:false
    console.log(mySymbol1);         //打印结果:Symbol()
    console.log(mySymbol2);         //打印结果:Symbol()

上面代码中,倒数第三行的打印结果也就表明了,二者的值确实是不相等的。

最后两行的打印结果却发现,二者的打印输出,肉眼看到的却相同。那该怎么区分它们呢?

既然Symbol()是函数,函数就可以传入参数,我们可以通过参数的不同来作为标识。比如:

    //在括号里加入参数,来标识不同的Symbol
    let mySymbol1 = Symbol('one');
    let mySymbol2 = Symbol('two');

    console.log(mySymbol1 == mySymbol2); //打印结果:false
    console.log(mySymbol1);         //打印结果:Symbol(one)
    console.log(mySymbol2);         //打印结果:Symbol(two)。颜色为红色。
    console.log(mySymbol2.toString());//打印结果:Symbol(two)。颜色为黑色。

打印结果:

定义常量

Symbol 可以用来定义常量:

    const MY_NAME = Symbol('my_name');

内置的 Symbol 值

除了定义自己使用的 Symbol 值以外,ES6 还提供了 11 个内置的 Symbol 值,指向语言内部使用的方法。

  • Symbol.iterator属性

对象的Symbol.iterator属性,指向该对象的默认遍历器方法。

标签:ES6,console,log,Symbol,打印,let,obj
From: https://www.cnblogs.com/full-stack-linux-new/p/17336711.html

相关文章

  • es6
    发展ECMAScrip是浏览器脚本语言的规范,而各种我们熟知的js语言,如JavaScript是es的具体实现。1997年,为了统一各种不同script脚本语言,ECMA欧洲计算机制造商协会以JavaScript为基础,制定了ECMAScript标准规范。1998年6月,2.0版本发布。1999年12月,3.0.2007年10月,4.0草案发布2009......
  • web前端tips:ES6部分常用新特性介绍
    ES6(ECMAScript6,也称为ES2015)是JavaScript的一个重要更新版本,于2015年发布。它引入了许多新的语言特性和改进,使得JavaScript变得更加现代化、易读、易维护和更适合大型应用程序的开发。ES6主要的新特性包括:1.块级作用域:ES6引入了let和const关键字,可以用来声明块级作用域的变量和......
  • ES6 拼接字符串(angular)
    angular 拼接字符串有没有什么好办法呢,发现es6可以。拼接方式:用反引号(`)包裹起来特点:模板中的内容可以有格式并可以定义多行通过${}方式填充数据大括号里面可以进行运算和调用函数例子: //例1constcontent1='helloboys!';this.message=`helloworld!${content1}`;//......
  • es6 数组对象求和
    letlist=[{id:1,price:2},{id:2,price:4},{id:3,price:6},{id:4,price:8},];letres=list.reduce((sumData,key,index,arrData)=>{console.log('a',sumData);//上⼀次调⽤回调时返回的累积值c......
  • ES6 NO.1( var、let 和 const 命令 )| 前端小白的的第一篇博客~
    varvar声明的变量存在变量提升即在声明该变量之前就可以使用,值为undefined,其作用域为全局;let和constlet用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效;const只能用来声明常量,一旦赋值,不能修改,故使用const不能只声明不赋值;区别var和let......
  • Linux input and ouput command < symbol & > symbol All In One
    Linuxinputandouputcommand<symbol&>symbolAllInOneleftinput/rightoutput<向左侧输入#把文件内容复制到剪贴板中✅$pbcopy<filename.txt>向右侧输出#把剪贴板内容粘贴到文件中✅$pbpaste>filename.txtdemos$echo"helloworld">......
  • 第137篇:重学ES6模块化
    好家伙, 我原本以为学完模块化之后,就能非常顺利的完成我的项目分包,然而并没有,这是非常重要的知识,而我没有学好所以我决定重学一遍 本篇为《阮一峰ECMAScript6(ES6)标准入门教程第三版》第23章"Module的语法"学习笔记  1.概述历史上,JavaScript一直没有模块(modu......
  • ImportError: /usr/1ib64/1ibldap,so,2: undefined symbol: EVP-md2, version OPENSSL_
    问题:升级openssl后,依赖库显示还是使用旧的版本修改ld.so.conf使得库指向最新的版本了,但yum会报错一个函数缺失的错误,像是python没有对应依赖库。   解决:./configsharedenable-ssl3enable-ssl3-methodenable-mdc2enable-md2--prefix=/opt/openssl-1.1.1t重新编译......
  • 解决Flutter_Boost,在Android Studio 出现“Cannot resolve symbol” 的问题
    今天在调试的时候,Android Studio报了一个莫名其妙的错误Cannot resolve symbol'R'让人不知所措,怎么会出现 Cannot resolve symbol 这种错误呢?下面给大家分享Android Studio 出现“Cannot resolve symbol”解决方案,需要的朋友可以参考下一:AndroidStudio无法识别同......
  • JavaScript ES6中class的用法
    实例代码如下classPerson{constructor(name){if(!arguments.length){console.log("我是个人")}else{console.log(`我是${name}`)}}......