欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

浅谈 ES6之新原始数据类型--Symbol

程序员文章站 2023-12-21 13:15:16
...

Symbol的基本使用

@ ES6引入了一种新的原始数据类型 Symbol,表示独一无二的值.他是javascript 语言的第七种数据类型,是一种类似于字符串的数据类型.

Symbol的特点

1.Symbol 的值是唯一的,用来解决命名冲突的问题
2. Symbol 值不能与其他数据进行运算(包括与自己运算)
3. Symbol 定义的对象属性不能使用 for…in 循环遍历,但是可以使用 Reflect.ownKeys来获取对象的所有键名

Symbol的创建与使用

创建Symbol

//创建Symbol
let s = Symbol();
console.log(s);		//Symbol()
console.log(typeof s);		//symbol
//虽然说Symbol 的值是唯一的,但是对我们来说是不可见的,在内部实现了唯一性
let y = Symbol();
console.log(s === y);	//false

传入字符串

//可以传入一个字符串
  // 传入字符串
let s1 = Symbol('张三')
let s2 = Symbol('张三')
//虽然传入的字符串一样,返回的值是不一样的
console.log(s1 === s2);     //false
//这个传入的字符串只是一个描述字符串,没有其他特殊作用,只是为了让我们在开发的时候方便的知到这个值的作用,类似于注释

Symbol.for()创建

//上面创建方式是一个函数  Symbol.for()是一个函数对象
let s2 = Symbol.for('李四')
let s3 = Symbol.for('李四')
console.log(s2 === s3); //true

//这两种创建方式的不同之处在于以函数对象方式创建的Symbol值可以根据传入字符串得到唯一的Symbol值

Symbol的作用----给对象添加方法

//向对象中添加方法   与up,down相关的方法   
 let game = {
       up() {
        console.log('up方法');
       },
       down() {
         console.log('down方法');
        },
       name: '张三'
        }
        //或许可以使用这个方法,但是入如果想要用这种方式添加的话
        //前提是要确保game对象中没有这个方法,简单的额对象一眼可以看出,但如果对于比较复杂的对象的话
        //查找起来就相对比较耗时且储出错率较高
        // game.up=function(){}
        //但如果利用Symbol值的唯一的特性来添加的话会更加的就简单高效且安全
        // 自己声明一个对象
        let methods = {
            up: Symbol(),
            down: Symbol()
        }
        // 向game中添加方法
        game[methods.up] = function () {
            console.log('新增的up相关方法');
        };

        game[methods.down] = function () {
            console.log('新增的dowm相关方法');
        }
        
        //调用方式
        game[methods.down]();
        
        console.log(game);

打印game 可见game内部原来就是有这两个方法
浅谈 ES6之新原始数据类型--Symbol
给对象添加唯一的方法

// 给对象添加一个唯一的方法
        let home = {
            name: '阿巴阿巴',
            [Symbol('me')]() {
                console.log('我爱你');
            },
            [Symbol('you')]() {
                console.log('我也爱你');
            }
        };
        // home.[Symbol('me')]();
        // 调用方式  这里需要用到Reflect.ownKeys方法获取到home 对象的属性名
        let love = Reflect.ownKeys(home)[1];
        home[love]();	//我爱你

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

Symbol.hasInstance
	//当其他对象使用 instanceof 运算符,判断是否为该对象的实例时,会调用这个方法
	
Symbol.isConcatSpreadable
  //对象的 Symbol.isConcatSpreadable 属性等于的是一个布尔值,表示该对象用于 Array.prototype.concat()时,是否可以展开。
  
Symbol.species
 //创建衍生对象时,会使用该属性
 
Symbol.match
 //当执行 str.match(myObject) 时,如果该属性存在,会调用它,返回该方法的返回值。
 
Symbol.replace
  //当该对象被 str.replace(myObject)方法调用时,会返回该方法的返回值。
  
Symbol.search
  //当该对象被 str.search(myObject)方法调用时,会返回该方法的返回值。
  
Symbol.split
 //当该对象被 str.split(myObject)方法调用时,会返回该方法的返回值。
 
Symbol.iterator
 //对象进行 for...of 循环时,会调用 Symbol.iterator 方法,返回该对象的默认遍历器
 
Symbol.toPrimitive
  //该对象被转为原始类型的值时,会调用这个方法,返回该对象对应的原始类型值。
  
Symbol.toStringTag
 //在该对象上面调用 toString 方法时,返回该方法的返回值
 
Symbol.unscopables
  //该对象指定了使用 with 关键字时,哪些属性会被 with环境排除

简单示例

//Symbol.hasInstance
class Person{
	static [Symbol.hasInstance](param){
//{}  传进来的是调用instanceof的那个对象 在这里也就是 p 这个对象
		console.log(param);
		console.log("我被用来检测类型了");
		//这边还可以决定返回的值
		//return false/true;
}
}

//声明一个对象
let p = {}
//在打印false之前会先打印  我被用来检测类型了 
//说明每当其他对象使用instanceof时他就会调用
console.log(p indtanceof Person);  //false/true   取决于上面返回的值


//Symbol.isConcatSpreadable
		const arr1 = [1, 2, 3]
        const arr2 = [4, 5, 6]
        // console.log(arr1.concat(arr2)); //[1, 2, 3, 4, 5, 6]
        //将arr2设置成不可展开
        arr2[Symbol.isConcatSpreadable] = false;
        console.log(arr1.concat(arr2)); //[1, 2, 3, Array(3)]

总结

Symbol作为一种新的数据类型,有着与String相似的特性,与String不同的是它是独一无二的,因此适合作为对象属性的键值,防止该属性被覆盖。除了自定义的Symbol值外,灵活掌握内置的Symbol,对ES6的学习有带来极大帮助,特别是Symbol.iterator,它是ES6中的一个非常重要的概念,之后会继续探讨!

相关标签: ES6 es6 vue.js

上一篇:

下一篇: