홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

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

저자：Eve Cole 업데이트 시간：2022-07-27 09:16:55
이 글은 ES6의 새로운 데이터 유형인 Symbol에 대해 설명합니다. Symbol 유형의 선언 방법과 사용법에 대해 이야기해 보겠습니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.

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

선언 방식

입니다

. Symbol 값은 Symbol 함수를 통해 생성됩니다. 객체의 속성 이름에는 두 가지 유형이 있습니다. 하나는 원래 문자열이고 다른 하나는 새로운 기호 유형입니다 . 속성 이름은 기호 유형이며 고유하므로 다른 속성 이름과 충돌하지 않습니다.

s1=기호()를 지정합니다.
s2=기호()를 설정하세요.
console.log(s1)
//상징()
console.log(s2)
//상징()
console.log(s1===s2)
//거짓

//Symbol 함수는 문자열을 매개변수로 받아들일 수 있으며, 이는 Symbol 인스턴스의 설명을 나타냅니다. let s1=Symbol('xxx')
s2=기호('hhh')를 허용합니다.
console.log(s1)
//심볼(xxx)
console.log(s2)
//기호(hhh)
console.log(s1===s2)
//false코드

기호 함수를 복사하기 전에는 새 명령을 사용할 수 없으며 오류가 보고됩니다. 이는 생성된 Symbol이 객체가 아닌 기본 유형 값이기 때문입니다. 즉, Symbol 값은 객체가 아니기 때문에 속성을 추가할 수 없습니다. 특수 문자열과 동일합니다.

Symbol.for() 기호의 전역 정의

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

s1 = Symbol.for('xxx')로 설정
s2 = Symbol.for('xxx')로 설정
console.log(s1 === s2) // 참


함수 foo(){
    Symbol.for('안녕하세요')를 반환합니다.
}
const x=foo()
const y=Symbol.for('안녕하세요')
console.log(x === y)//true

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

Symbol.keyFor()

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

const s1 = 기호('foo')
console.log(Symbol.keyFor(s1)) // 정의되지 않음

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

애플리케이션 시나리오는

속성 이름으로 사용됩니다

. 기호 값이 동일하지 않으므로 이는 기호 값을 식별자로 사용할 수 있으며 속성 이름에 사용할 수 있음 을 의미합니다. 같은 이름의 속성이 나타나지 않도록 주의 하세요. 이는 객체가 여러 모듈로 구성된 경우 실수로 키를 덮어쓰거나 덮어쓰는 것을 방지하는 데 유용합니다.

const 등급={
    장산:{주소:'qqq',전화번호:'111'},
    리 시:{주소:'aaa',전화:'222'},
    리 시:{주소:'sss',전화:'333'},
}
console.log(등급)
//장산: {주소: "qqq", 전화번호: "111"} 리시: {주소: "sss", 전화번호: "333"}
//객체의 키 값은 반복될 수 없습니다. 반복이 있는 경우 후속 값 값은 이전 //기호를 사용하여 해결하며 이는 고유한 문자열과 동일합니다. const stu1=Symbol('Li思')
const stu2=기호('이思')
console.log(stu1===stu2)
//거짓
const 등급={
    [stu1]:{주소:'aaa',전화번호:'222'},
    [stu2]:{주소:'sss',전화:'333'},
}
console.log(등급)
//John Doe: {주소:'sss',tel:'222'} John Doe: {주소:'sss',tel:'333'}
console.log(등급[stu1])
//리시: {주소:'sss',전화번호:'222'}
console.log(등급[stu2])
//Li Si: {address:'sss',tel:'333'}

속성 순회

const sym=Symbol('imooc')
클래스 사용자{
    생성자(이름){
        this.name=이름
        이것[sym]='imooc.com'
    }
    getName(){
        this.name+this[sym] 반환
    }
}
const user=새 사용자('www')

//for in 메소드는 숨겨져 있으므로 Symbol 속성을 탐색할 수 없습니다. for(let key in user){
    console.log(키)//이름 
}

//Object.keys(obj) 메서드는 Symbol 속성으로 이동할 수 없습니다. for(let key of Object.keys(user)){
    console.log(키)//이름 
}

//Object.getOwnPropertySymbols(obj)는 Symbol 속성만 가져올 수 있습니다. for(let key of Object.getOwnPropertySymbols(user)){
    console.log(키)//Symbol(imooc) 
}

//Reflect.ownKeys(obj) 객체 속성은 (let key of Reflect.ownKeys(user)){에 대해 얻을 수 있습니다.
    console.log(키)
    //이름 
    //심볼(imooc) 
}

매직 스트링 제거

매직 스트링은 코드에 여러 번 나타나고 코드와 강력한 결합을 형성하는 특정 문자열 또는 값을 참조합니다. 좋은 스타일의 코드는 마법 문자열을 제거하고 이를 명확한 의미를 가진 변수로 대체해야 합니다.

함수 getArea(모양) {
    면적 = 0으로 놔두세요
    스위치 (모양) {
        '삼각형'의 경우:
            면적=1
            부서지다
        '원'의 경우:
            면적=2
            부서지다
    }
    반환 지역
}
console.log(getArea('삼각형'))
//Triangle과 Circle은 매직 스트링입니다. 이는 여러 번 나타나며 코드와 "강력한 결합"을 형성하므로 후속 수정 및 유지 관리에 도움이 되지 않습니다.

const 모양 유형 = {
    삼각형: 기호(),
    원: 기호()
}

함수 getArea(모양) {
    면적 = 0으로 놔두세요
    스위치 (모양) {
        케이스 모양 유형.삼각형:
            면적=1
            부서지다
        케이스 모양유형.원:
            면적=2
            부서지다
    }
    반환 지역
}
console.log(getArea(shapeType.triangle))

저는 프론트엔드 초보자입니다. 글에 오류가 있으면 조언과 토론 부탁드립니다!

[관련 영상 튜토리얼 추천 : 웹 프론트엔드]

위 내용은 자바스크립트 데이터 타입 학습에 대한 자세한 내용과 심볼 타입에 대한 간략한 분석입니다. 자세한 내용은 PHP 중국어 홈페이지의 다른 관련 글을 참고해주세요!
관련 기사