10.symbol

编程之家收集整理的这篇文章主要介绍了10.symbol编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Symbol基本使用

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

Symbol特点

  1. Symbol的值是唯一的,用来解决命名冲突的问题
  2. Symbol值不能与其他数据进行运算
  3. Symbol定义的对象属性不能使用for...in循环遍历,但是可以使用Reflect.ownKeys来获取对象的所有键名
//创建Symbol
let s= Symbol();
console.log(s,typeof s);//Symbol() "symbol"
let s2 = Symbol('Study');
let s3 = Symbol('Study');
console.log(s2 === s3);//false;

//Symbol.for 创建
let s4 = Symbol.for('Study');
let s5 = Symbol.for('Study');
console.log(s4,typeof s4);//Symbol('Study') "symbol"
console.log(s4 === s5);//true;

//不能与其他数据进行运算
//let result = s + 100;
//let result = s > 100;
//let result = s + s;

七种数据类型

USONB //记忆点you are so niubility

u undefined
s string symbol
o object
n null number
b boolean

Symbol创建对象属性

//面向对象中添加方法 up down
let game = {
    
}

//声明一个对象
let methods = {
    up:Symbol(),dowm:Symbol()
};

game[methods.up] = function(){
    console.log("我可以上升");
}
game[methods.down] = function(){
    console.log("我可以下降");
}
console.log(game);//出现up,down对象



let youxi = {
    name:'狼人杀',[Symbol('say')]:function(){
        console.log('我可以发言')
    },[Symbol('zibao')]:function(){
        console.log('我可以自爆')
    }
    
}

Symbol内置值

Symbol.hasInstance

// Symbol.hasInstance
class MyClass {
    [Symbol.hasInstance] (foo) {
        return foo instanceof Array;
    }
}
[1,2,3] instanceof new MyClass() // true

// symbol.hasInstance:会在[1,3]  instanceof 时 自动调用 [Symbol.hasInstance] (foo) 方法...
// 等价于. ([1,3]) => { return [1,3] instanceof Array}

Symbol.isConcatSpreadable

class A1 extends Array {
    construcor(args) {
        super(args);
        this[Symbol.isConcatSpreadable] = true;
    }
}
class A2 extends Array {
    constructor(args) {
        super(args);
        this[Symbol.isConcatSpreadable] = false;
    }
}
let a1 = new A1();
a1[0] = 3;
a1[1] = 4;
let a2 = new A2();
a2[0] = 5;
a2[1] = 6;
[1,2].concat(a1).concat(a2)
// [1,3,4,[5,6]]
// Symbol.isConcatSpreadable:表示对象使用Array.prototype.concat()时,是否可以展开

Symbol.species

// Symbol.species
// 使用格式
class MyArray extends Array {
    // 覆盖父类 Array 的构造函数
    static get [Symbol.species] () { return Array; }
}

// 实例.
class MyArray extends Array {
    static get [Symbol.species] () { return Array; }
}
var a = new MyArray(1,3);
var mapped = a.map (x => x * x);

mapped instanceof MyArray // false
mapped instanceof Array // true

// 注:在static get[Symbol.species] () 中 将构造函数改为了 返回Array类,故使用instance MyArray 返回 false.

Symbol.match

// Symbol.match
class MyMatcher {
    [Symbol.match] (string) {
        return 'hello world'.indexOf(string);
    }
}
'e'.match(new MyMatcher))  // 1
// 注:等同于 [Symbol.match] ('e') { return 'hello world'.indexOf('e')}

Symbol.replace

// Symbol.replace
const x= {};
x[Symbol.replace] = (...s) => console.log(s);
'Hello'.replace(x,'World') 
// 注:在执行'Hello'.replace操作时,实际上执行:(['Hello','World']) => console.log ('["Hello","World"]');
// Symbol.replace会在执行String.prototype.replace方法调用函数.

在这里插入图片描述


Symbol.search

// Symbol.search
class MySearch {
    constructor (value) {
        this.value = value;
    }
    [Symbol.search] (string) {
        return string.indexOf(this.value);
    }
}
'foobar'.search(new MySearch('foo')) // 0
// 注: [Symbol.search] (string),在执行String.prototype.search方法调用.
// 本例相当于执行: ('foobar') { return 'foobar'.indexOf('foo')}
}

Symbol.split

// Symbol.split
class MySplitter {
    constructor (value) {
        this.value = value;
    }
    [Symbol.split] (string) {
        var index = string.indexOf(this.value);
        if (index = -1){
            return string;
        }
        return [
            string.substr(0,index),string.substr(index + this.value.length)
        ];
    }
}
'foobar'.split(new MySplitter('foo'))   // ['','bar']
'foobar'.split(new MySplitter('bar'))   // ['foo','']
'foobar'.split(new MySplitter('baz'))   // ['foobar'] 
// 注: [Symbol.split]](string) 在执行String.prototypr.string方法时触发
// 本例改写了split方法,将string分为2部分,一部分(未匹配的)不变,另一部分(匹配到的)置为空,若string中无匹配值,则完整返回...

Symbol.iterator

// Symbol.iterator
class Collection {
    *[Symbol.iterator] () {
        let i = 0;
        while (this[i] !== undefined) {
            yield this[i];
            ++i;
        }
    }
}
let myCollection = new Collection();
myCollection[0] = 1;
myCollection[1] = 2;
for (let value of myCollection) {
    console.log (value);
} 
// 1 
// 2
// 注:在执行for ... of 循环时 触发Symbol.iterator方法
// yield 在for循环时会保存当前的元素...

Symbol.toPrimitive

// Symbol.toPrimitive
let obj = {
    [Symbol.toPrimitive] (hint) {
        swtich (hint) {
            case 'number':
                return 123;
            case 'string':
                return 'str';
            case 'default':
                return ‘default';
            default:
                throw new Error ();
        }
    }
}
2 * obj ;  // 246
3 + obj ;   // '3default'
obj == 'default'   // true
String(obj)    // 'str'
// 注:在对象被转为原始类型的值时,会调用这个方法

Symbol.toStringTag

// Symbol.toStringTag
class Collection {
    get [Symbol.toStringTag] () {
        return 'xxx',}
}
var x = new Collection();
Object.prototype.toString.call(x);     // "[object xxx]"
// 注:当执行Object.prototype.toString方法时,触发Symbol.toStringTag

Symbol.unscopables

// Symbol.unscopables
// 无unscopables
class MyClass {
    foo() { return 1;}
}
var foo = function () { return 2;};
with (MyClass.prototype) {
    foo();    // 1
}
// 有unscopables
class MyClass {
    foo() { return 1; }
    get [Symbol.unscopables] () {
        return { foo: true};
    }
}
var foo = function () { return 2;};
with (MyClass.prototype) {
    foo();     // 2
}
// 注:unscopables属性指定了使用with关键字时哪些属性会被with环境排除.
// 在本例中指定了foo属性被排除....

总结

以上是编程之家为你收集整理的10.symbol全部内容,希望文章能够帮你解决10.symbol所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的ES6相关文章

ES6转ES5(Babel转码器) 前提:必须在VScode中已经安装了Node.js 官网:https://nodejs.org/en/ 一、安装命令行转码工具 npm install --glob
Map介绍 ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map也实现了iterator接口,所以可以使用【扩展
Object.fromEntries //二维数组 const result = Object.fromEntries([ ['name','Study
扩展运算符 [...]扩展运算符能将【数组】转换为逗号分隔的【参数序列】 //声明一个数组 const tfboys = ['y','w&#39
简化对象写法 ES6允许再大括号里面,直接写入变量和函数,作为对象的属性和方法。 遮眼法的书写更加简洁 let name = 'study'; let change =
函数参数默认值 ES6允许给函数参数赋值初始值 //1.形参初始值 具有默认值的参数,一般位置要靠后(潜规则) function add(a,b,c=10){ return aʻʼ } let
数值扩展 //0. Number.EPSILON 是 JavaScript 表示的最小精度 EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
ES6引入rest参数,用于获取函数的实参,用来替代arguments //ES5获取实参的方式 function date(){ console.log(arguments);//对象 } date
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注