> 웹 프론트엔드 > 프런트엔드 Q&A > es6에서 기호의 사용법은 무엇입니까

es6에서 기호의 사용법은 무엇입니까

WBOY
풀어 주다: 2022-04-25 18:27:11
원래의
1930명이 탐색했습니다.

Es6에서는 Symbol을 속성 이름, 정의된 변수 또는 상수로 사용하여 고유한 값을 나타낼 수 있습니다. 이는 es6의 새로운 데이터 유형입니다. Symbol을 통해 선언된 두 변수는 "const name="입니다. 기호("값")".

es6에서 기호의 사용법은 무엇입니까

이 튜토리얼의 운영 환경: Windows 10 시스템, ECMAScript 버전 6.0, Dell G3 컴퓨터.

es6에서 심볼의 사용법은 무엇인가요?

심볼이란?

Symbol은 es6에 새로 추가된 데이터 유형으로 고유한 값을 나타냅니다. es5에서는 데이터 유형을 기본 데이터 유형(문자열, 숫자, 불리언, 정의되지 않음, null)과 참조 데이터 유형(객체)으로 나눕니다. es6의 새로운 기호 데이터 유형은 기본 데이터 유형으로 나뉩니다

왜 존재합니까? 그런 데이터 유형?

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

//这个时候,新增加的方法和属性就会去把原有的方法覆盖,这样就产生了冲突
로그인 후 복사

객체의 속성과 메소드가 문자열로 구성되어 있기 때문에 메소드와 속성을 추가할 때 충돌이 발생할 수 있습니다. es6에서는 고유한 값을 나타내는 새로운 데이터 유형이 추가됩니다

Symbol 함수를 통해 생성할 수 있습니다. value.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)
로그인 후 복사

애플리케이션 시나리오

기호는 일반적으로 개체의 속성 이름 또는 메서드를 설정하여 새로 추가된 속성이나 메서드가 원래 속성이나 메서드와 충돌하는 것을 방지하는 데 사용됩니다

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

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

여기 참고로 name의 값은 반드시 []로 표현되어야 하며 변경이 가능한 변수입니다

Notes

Note 1: 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)) //报错
로그인 후 복사

Note 4: Symbol은 어떤 연산도 수행할 수 없습니다(반환 값이 연산되지 않을 수도 있습니다)

console.log(Symbol("s1") + "nodeing") //报错
console.log(Symbol("s1") - 100) //报错
로그인 후 복사

Note 5: Symbol을 객체 속성이나 메소드로 사용할 때 할당되지 않으면 변수에 추가하면 값을 얻을 수 있는 방법이 없습니다

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

참고 6: 기호는 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
}
로그인 후 복사
로 순회할 수 없습니다

console.log(Object.getOwnPropertySymbols(obj))
로그인 후 복사
Object.getOwnPropertySymbols를 사용하여 객체의 모든 기호 속성을 볼 수 있습니다

rrreee[관련 권장 사항: javascript 비디오 튜토리얼, 웹 프론트엔드

]🎜

위 내용은 es6에서 기호의 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
es6
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿