es6中symbol的用法是什麼

在es6中，Symbol可用於作為屬性名稱、定義變數或常數，表示獨一無二的值，是es6中新增的資料類型，透過Symbol聲明的兩個變數永遠不可能相等，語法為「const name=Symbol("value")」。

本教學操作環境：windows10系統、ECMAScript 6.0版、Dell G3電腦。

es6中symbol的用法是什麼

什麼是Symbol?

Symbol是es6中一種新增加的資料類型，它表示獨一無二的值。 es5中我們把資料型別分成基本資料型別（字串、數字、布林、undefined、null）和引用資料型別(Object),在es6中新增的Symbol資料型別劃分到基本資料型別

為什麼會有這樣一種資料型呢？

//别人给了你一个定义好的对象
var obj = {
    name: "xiaoqiang",
    showName: function(){alert(1)}
}
//你拿到对象想给这对象添加新的属性和方法的时候，可能会创建出一个name属性和showName方法
obj.name = "nodeing"
obj.showName = function(){alert(2)}

//这个时候，新增加的方法和属性就会去把原有的方法覆盖，这样就产生了冲突

由於物件的屬性和方法是字串組成，這樣新增方法和屬性的時候有可能衝突，在es6中就新增了一種資料類型，表示獨一無二的值

透過Symbol函數可以創建一個獨一無二的值,每一次執行Symbol函數的時候返回的都是一個物件

let s1 = Symbol()
let s2 = Symbol()

console.log(s1 === s2) //false 说明创建出来的s1和s2 并不是相同的
console.log(s1, s2); //Symbol() Symbol()

上述程式碼中，列印出來的值都是Symbol() , 怎樣才能區分誰是s1，誰是s2呢？我們可以透過傳參的形式來解決

//传入的参数就是对当前Symbol的描述，用来区分Symbol
let s1 = Symbol("s1")
let s2 = Symbol("s2")
console.log(s1, s2);  //Symbol(s1) Symbol(s2)

應用場景

Symbol通常用於設定物件的屬性名稱或方法，防止新加入的屬性或方法與原來屬性或方法衝突

let name = Symbol("name");
let show = Symbol("show");

let obj = {
    //设置属性
    [name]: 'xiaoqiang',
    [show](){alert(1)}
};
//取值
console.log(obj[name]);
//调用方法
obj[show]()

這裡要注意的是name的值必須是在[]中表示是可以改變的是一個變數

注意事項

注意1: Symbol裡面的參數只是對Symbol的描述，沒有其他意義，因此，即使描述相同，Symbol也是不同的

這裡可以猜測Symbol這個函數的回傳值是一個對象

console.log(Symbol("nodeing") === Symbol("nodeing")) //false

注意2：Symbol函數不能使用New關鍵字呼叫

let s1 = new Symbol(); //报错

注意3: Symbol型別在做型別轉換的時候不能轉換成數字

let s1 = Symbol("s1");
console.log(String(s1));  //Symbol(s1)
console.log(Boolean(s1));  //true
console.log(Number(s1)) //报错

注意4: Symbol不能做任何運算（可能是回傳值不可以運算）

console.log(Symbol("s1") + "nodeing") //报错
console.log(Symbol("s1") - 100) //报错

注意5: Symbol在作為物件屬性或方法的時候，如果不賦值給一個變數的話，沒有辦法取值

let obj = {
    //设置属性
    [Symbol("name")]: 'xiaoqiang'
};
//取值
console.log(obj[Symbol("name")]);

注意6: Symbol沒有辦法被for in循環遍歷

let name = Symbol('name')
let age = Symbol('age')
let obj = {
    a: 1,
    b: 2,
    [name]: 'xiaoqiang',
    [age]: 18
};
for(let attr in obj){
    console.log(attr,obj[attr])  //a b
}

可以使用Object.getOwnPropertySymbols查看物件上所有的symbol屬性

console.log(Object.getOwnPropertySymbols(obj))

【相關推薦：javascript影片教學、web前端】

#

以上是es6中symbol的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！