JavaScript データ型学習の簡単な分析シンボル型-jsチュートリアル-php.cn

JavaScript データ型学習の簡単な分析シンボル型

青灯夜游

リリース： 2022-03-18 11:01:52

転載

1930 人が閲覧しました

この記事では、ES6 の新しいデータ型である Symbol について説明し、Symbol 型の宣言と使用法について説明します。皆様のお役に立てれば幸いです。

JavaScript データ型学習の簡単な分析シンボル型

Symbol は、一意性を表す新しいプリミティブデータ型です。これは、JavaScript の 7 番目のデータ型です。他の 6 つは次のとおりです: 未定義、null、文字列、数値、オブジェクト

宣言メソッド

シンボル値は Symbol 関数を通じて生成されます。 オブジェクトの属性名には 2 つのタイプがあります。1 つは元の文字列で、もう 1 つは新しいシンボルタイプです。属性名はシンボルタイプであり、一意であるため、他の属性名と競合しません。 [関連する推奨事項: javascript 学習チュートリアル]

let s1=Symbol()
let s2=Symbol()
console.log(s1)
//Symbol()
console.log(s2)
//Symbol()
console.log(s1===s2)
//false

//Symbol函数能接受字符串作为参数，表示对Symbol实例的描述
let s1=Symbol('xxx')
let s2=Symbol('hhh')
console.log(s1)
//Symbol(xxx)
console.log(s2)
//Symbol(hhh)
console.log(s1===s2)
//false复制代码

ログイン後にコピー

新しいコマンドを Symbol 関数の前に使用することはできず、エラーが報告されます。これは、生成されたシンボルがオブジェクトではなくプリミティブ型の値であるためです。つまり、Symbol値はオブジェクトではないため、プロパティを追加することはできません。特殊な文字列と同等です。

Symbol.for() Symbol のグローバル定義

Symbol.for() はパラメータとして文字列を受け取り、パラメータが次のとおりであるかどうかを検索します。名前シンボル値として使用されます。存在する場合は、この Symbol 値を返します。存在しない場合は、この文字列で名前を付けた新しい Symbol 値を作成し、グローバルに登録します。

let s1 = Symbol.for(&#39;xxx&#39;)
let s2 = Symbol.for(&#39;xxx&#39;)
console.log(s1 === s2) // true


function foo(){
    return Symbol.for(&#39;hello&#39;)
}
const x=foo()
const y=Symbol.for(&#39;hello&#39;)
console.log(x === y)//true

ログイン後にコピー

Symbol.for() と Symbol() の 2 つの記述メソッドにより、新しい Symbol が生成されます。違いは、前者は検索用にグローバル環境に登録されるのに対し、後者は登録されないことです。 Symbol.for() は、呼び出されるたびに新しい Symbol 型の値を返すのではなく、指定されたキーが既に存在するかどうかを最初に確認し、存在しない場合は新しい値を作成します。

Symbol.keyFor()

Symbol.keyFor() メソッドは、登録されたシンボルタイプの値キーを返します。

const s1 = Symbol(&#39;foo&#39;)
console.log(Symbol.keyFor(s1)) // undefined

const s2 = Symbol.for(&#39;foo&#39;)
console.log(Symbol.keyFor(s2)) // foo

ログイン後にコピー

アプリケーションシナリオ

属性名として

シンボル値が等しくないため、これは # を意味します# #Symbol 値を識別子として使用し、オブジェクトの属性名で使用して、同じ名前の属性が表示されないようにすることができます。これは、オブジェクトが複数のモジュールで構成されている場合に、キーが誤って上書きされたり上書きされたりするのを防ぐのに役立ちます。

const grade={
    张三:{address:&#39;qqq&#39;,tel:&#39;111&#39;},
    李四:{address:&#39;aaa&#39;,tel:&#39;222&#39;},
    李四:{address:&#39;sss&#39;,tel:&#39;333&#39;},
}
console.log(grade)
//张三: {address: "qqq", tel: "111"} 李四: {address: "sss", tel: "333"}
//对象的key值不能重复 如果有重复 后面的value值就会覆盖前面的


//使用Symbol解决，相当于一个独一无二的字符串
const stu1=Symbol(&#39;李四&#39;）
const stu2=Symbol(&#39;李四&#39;)
console.log(stu1===stu2)
//false
const grade={
    [stu1]:{address:&#39;aaa&#39;,tel:&#39;222&#39;},
    [stu2]:{address:&#39;sss&#39;,tel:&#39;333&#39;},
}
console.log(grade)
//李四：{address:&#39;sss&#39;,tel:&#39;222&#39;} 李四：{address:&#39;sss&#39;,tel:&#39;333&#39;}
console.log(grade[stu1])
//李四：{address:&#39;sss&#39;,tel:&#39;222&#39;}
console.log(grade[stu2])
//李四：{address:&#39;sss&#39;,tel:&#39;333&#39;}

ログイン後にコピー

属性トラバーサル

const sym=Symbol(&#39;imooc&#39;)
class User{
    constructor(name){
        this.name=name
        this[sym]=&#39;imooc.com&#39;
    }
    getName(){
        return this.name+this[sym]
    }
}
const user=new User(&#39;www&#39;)

//for in的方法不能遍历到Symbol属性 像被隐藏了
for(let key in user){
    console.log(key)//name 
}

//Object.keys(obj)方法也不能遍历到Symbol属性
for(let key of Object.keys(user)){
    console.log(key)//name 
}

//Object.getOwnPropertySymbols(obj)只能获取到Symbol属性
for(let key of Object.getOwnPropertySymbols(user)){
    console.log(key)//Symbol(imooc) 
}

//Reflect.ownKeys(obj)对象的属性都能获取到
for(let key of Reflect.ownKeys(user)){
    console.log(key)
    //name 
    //Symbol(imooc) 
}

ログイン後にコピー

マジック文字列の削除

マジック文字列がコード内で複数回参照している特定の文字列または、表示され、コードと

強い結合を形成する値。適切なスタイルのコードでは、マジック文字列を削除し、明確な意味を持つ変数に置き換えるように努める必要があります。

function getArea(shape) {
    let area = 0
    switch (shape) {
        case &#39;Triangle&#39;:
            area = 1
            break
        case &#39;Circle&#39;:
            area = 2
            break
    }
    return area
}
console.log(getArea(&#39;Triangle&#39;))
//Triangle和Circle就是魔术字符串。多次出现，与代码形成了“强耦合”，不利于后面的修改和维护。

const shapeType = {
    triangle: Symbol(),
    circle: Symbol()
}

function getArea(shape) {
    let area = 0
    switch (shape) {
        case shapeType.triangle:
            area = 1
            break
        case shapeType.circle:
            area = 2
            break
    }
    return area
}
console.log(getArea(shapeType.triangle))

ログイン後にコピー

私はフロントエンド初心者です。記事の内容が間違っている場合は、アドバイスや議論をお願いします。

[関連ビデオチュートリアルの推奨事項:

Web フロントエンド ]

以上がJavaScript データ型学習の簡単な分析シンボル型の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。