ES6新特性-Symbol類型

ES6新特性的學習

• 一.基礎概念
• 二.用法
• 三. Symbol常用的内置值
• • 1.Symbol.match
  • 2.Symbol.replace
  • 3.Symbol.search
  • 4.Symbol.split

一.基礎概念

Symbol表示獨一無二的值，是原始資料類型，不是對象。可以接受一個字元串作為參數，同時symbol建立的值也不能進行相應的加減運算。

二.用法

1.Symbol的建立

let sy = Symbol(“kk”);
console.log(sy); // Symbol(KK) 
typeof(sy); // "symbol" 
// 注意的是當兩個參數相同時，他們傳回的結果時不一緻的，因為symbol類型時獨一無二的。
let sy1 = Symbol("kk"); sy === sy1; // false
           

2.Symbol向對象中添加方法

先建立一個對象，接着在對象中定義一個[Symbol(“say”)]方法，這樣可以防止方法重名。注意的是定義Symbol類型方法需要使用[]。

情況一：對象中不存在同名方法

let game = {
	name: '狼人殺',
	[Symbol('say')]: function() {
		console.log('發言');
	},
	[Symbol('zibao')]: function() {
		console.log('自爆');
	}
}
console.log(game); // {name: "狼人殺", Symbol(say): ƒ, Symbol(zibao): ƒ}
           

情況二：對象中存在同名方法（需要先定義一個對象來存放Symbol對象）

// 向game對象中添加方法up, down
let game = { 
	name: '俄羅斯方塊',
	up: function(){ console.log('上升')},
	down: function(){ console.log('下降') }
};

// 聲明一個對象
let methods = {
	up: Symbol('up'),
	down: Symbol('down')
};
// 添加方法
game[methods.up] = function() {
	console.log('methods.up改變形狀');
}
game[methods.down] = function() {
	console.log('methods.down快速下降');
}

console.log(game);
// down: ƒ ()
// name: "俄羅斯方塊"
// up: ƒ ()
// Symbol(down): ƒ ()
// Symbol(up): ƒ ()

           

3.調用Symbol向對象中的方法

調用方法：

情況一：（利用getOwnPropertySymbols擷取symbol對象，接着按數組格式輸出）

const langrensha = Object.getOwnPropertySymbols(game);
console.log(langrensha);
ganme[langrensha[0]]();
           

情況二：（調用之前存放symbol類型的對象中方法）

gamemethods.down;

三. Symbol常用的内置值

1.Symbol.match

對象的Symbol.match屬性，指向一個函數。當執行str.match(myObject)時，如果該屬性存在，會調用它，傳回該方法的傳回值。

class MyMatcher {
    [Symbol.match] (str){
        return "Hello World!".indexOf(str);
    }
}
console.log('e'.match(new MyMatcher())); //1
           

2.Symbol.replace

對象的Symbol.replace屬性，指向一個方法，當該對象被String.prototype.replace方法調用時，會傳回該方法的傳回值。

const x = {
    [Symbol.replace] (...s) {
        return console.log(s);
    }
}
'Hello'.replace(x, 'World') // ["Hello", "World"]
           

3.Symbol.search

對象的Symbol.search屬性，指向一個方法，當該對象被String.prototype.search方法調用時，會傳回該方法的傳回值。

class MySearch {
    constructor(value) {
        this.value = value;
    }
    [Symbol.search](str){
        return str.includes(this.value);
    }
}
console.log("foobar".search(new MySearch("foo"))); //true
           

4.Symbol.split

對象的Symbol.split屬性，指向一個方法，當該對象被String.prototype.split方法調用時傳回該方法的傳回值。

class MySplit {
    constructor(value){
        this.value = value;
    }
    [Symbol.split](str) {
        let index = str.indexOf(this.value);
        if(index === -1){
            return str;
        }
        return [
            str.substr(0,index),
            str.substr(index + this.value.length),
        ]
    }
}
console.log("foobar".split(new MySplit("foo"))); //["","bar"]
console.log("foobar".split(new MySplit("bar"))); //["foo",""]
console.log("foobar".split(new MySplit("baz"))); //foobar