자바스크립트 데이터형 학습 심볼형에 대한 간략한 분석

이 글에서는 ES6의 새로운 데이터 유형인 Symbol에 대해 설명하겠습니다. Symbol 유형의 선언 방법과 사용법에 대해 이야기해 보겠습니다. 모두에게 도움이 되기를 바랍니다.

Symbol은 고유성을 나타내는 새로운 기본 데이터 유형입니다. JavaScript의 일곱 번째 데이터 유형입니다. 나머지 6개는 undefine, null, String, Number, Object

Declaration method

Symbol 값은 Symbol 함수를 통해 생성됩니다. 객체의 속성 이름에는 두 가지 유형이 있을 수 있습니다. 하나는 원래 문자열이고 다른 하나는 새로운 기호 유형입니다. 속성 이름은 기호 유형이며 고유하므로 다른 속성 이름과 충돌하지 않습니다. [관련 권장사항: 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 값은 객체가 아니기 때문에 속성을 추가할 수 없습니다. 특수 문자열과 동일합니다.

Symbol.for()는 Symbol을 전역적으로 정의합니다

Symbol.for()는 문자열을 매개변수로 받아들인 다음 이 매개변수를 이름으로 사용하여 Symbol 값을 검색합니다. 있는 경우 이 기호 값을 반환하고, 그렇지 않으면 이 문자열로 명명된 새 기호 값을 만들고 전역적으로 등록합니다.

let s1 = Symbol.for('xxx')
let s2 = Symbol.for('xxx')
console.log(s1 === s2) // true


function foo(){
    return Symbol.for('hello')
}
const x=foo()
const y=Symbol.for('hello')
console.log(x === y)//true

Symbol.for() 및 Symbol()은 새로운 기호를 생성합니다. 차이점은 전자는 검색을 위해 글로벌 환경에 등록되지만 후자는 검색되지 않는다는 점입니다. Symbol.for()는 호출될 때마다 새로운 Symbol 유형 값을 반환하지 않습니다. 대신, 먼저 주어진 키가 이미 존재하는지 확인한 다음, 존재하지 않으면 새 값을 생성합니다.

Symbol.keyFor()

Symbol.keyFor() 메소드는 등록된 Symbol 유형 값 키를 반환합니다.

const s1 = Symbol('foo')
console.log(Symbol.keyFor(s1)) // undefined

const s2 = Symbol.for('foo')
console.log(Symbol.keyFor(s2)) // foo

애플리케이션 시나리오

속성 이름

기호 값이 동일하지 않기 때문에 이는 기호 값을 식별자로 사용할 수 있고 개체 속성 이름에 사용할 수 있음을 의미합니다. 동일한 이름의 속성이 표시되지 않습니다. 이는 객체가 여러 모듈로 구성된 경우 실수로 키를 덮어쓰거나 덮어쓰는 것을 방지하는 데 유용합니다.

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


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

속성 순회

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

//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 'Triangle':
            area = 1
            break
        case 'Circle':
            area = 2
            break
    }
    return area
}
console.log(getArea('Triangle'))
//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))

저는 프론트엔드 초보자입니다. 만약 기사에 잘못된 내용이 있다면 조언과 토론 부탁드립니다!

【추천 관련 동영상 튜토리얼: 웹 프론트엔드】

위 내용은 자바스크립트 데이터형 학습 심볼형에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!