JS 진급(ES6 객체 set map Symbol)

Symbol

중복되지 않고 같지 않다.Symbol 함수 앞에서는 new 명령을 사용할 수 없으며 Symbol 값은 객체가 아니므로 속성을 추가할 수 없습니다.Symbol 값은 객체의 속성 이름에 사용되는 식별자로서 동일한 이름의 속성이 나타나지 않도록 보장합니다.이것은 한 대상이 여러 모듈로 구성된 경우에 매우 유용하며, 어떤 키가 부주의로 바뀌거나 덮어쓰는 것을 방지할 수 있다.

//  
let s1 = Symbol();
let s2 = Symbol();
s1 === s2 // false
//  
let s1 = Symbol('foo');
let s2 = Symbol('foo');
s1 === s2 // false

추출 속성 값: Object.getOwnPropertySymbols () 에서symbol 속성 Reflect를 가져옵니다.ownKeys().forEach()

대상

1. 속성의 간결한 표현인 ES6에서는 객체의 속성과 방법으로 변수와 함수를 직접 쓸 수 있습니다.이런 책은 더욱 간결하다.위 코드는 ES6가 객체 내에서 변수를 직접 쓸 수 있음을 나타냅니다.이때 속성 이름은 변수 이름이고 속성 값은 변수의 값이다.다음은 또 다른 예다.

const foo = 'bar';
const baz = {foo};
const o = {
  method() {
    return "Hello!";
  }
};

속성 이름 표현식

//  
obj.foo = true;
//  
obj['a' + 'bc'] = 123;

ES6에서는 표현식을 대괄호 안에 포함하는 객체의 속성 이름으로 허용(표현식)합니다.표현식은 방법명을 정의하는 데도 사용할 수 있다.속성명 표현식과 간결한 표현을 동시에 사용할 수 없으며 오류가 발생합니다.

let obj = {
  ['h' + 'ello']() {
    return 'hi';  }};
obj.hello() // hi
 ， ， ， 。

메서드name 속성

함수의name 속성입니다. 함수 이름을 되돌려줍니다.대상 방법도 함수이기 때문에name 속성도 있습니다.만약 대상의 방법이 수치 함수 (Getter) 와 저장 함수 (setter) 를 사용한다면,name 속성은 이 방법 위에 있는 것이 아니라, 이 방법의 속성에 대한 설명 대상의 get과 set 속성 위에 있으며, 되돌아오는 값은 방법 이름 앞에 get과 set을 붙이는 것이다.

const obj = {
  get foo() {},
  set foo(x) {}
};
obj.foo.name// TypeError: Cannot read property 'name' of undefined
const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');
descriptor.get.name // "get foo"
descriptor.set.name // "set foo"

두 가지 특수한 상황이 있다. bind 방법으로 만든 함수,name 속성은bound에 원 함수의 이름을 되돌려준다.Function 구조 함수가 만든 함수,name 속성이 anonymous를 반환합니다.

(new Function()).name // "anonymous"
var doSomething = function() {
  // ...
};
doSomething.bind().name // "bound doSomething"  Symbol  ， name  Symbol  。

속성의 반복

ES6에는 모두 5가지 방법으로 객체의 속성을 이동할 수 있습니다.(1) for...in for...in은 객체 자체와 상속을 반복하는 열거 가능한 속성(Symbol 속성 제외) (2) Object.키 (obj) 는 대상 자체의 (계승되지 않은) 모든 매개 속성 (Symbol 속성이 없는) 키 이름을 포함하는 그룹을 되돌려줍니다.(3)Object.getOwnPropertyNames(obj)는 객체 자체의 모든 속성(Symbol 속성은 없지만 열거할 수 없는 속성이 포함)을 포함하는 키 이름을 포함하는 그룹을 반환합니다.(4)Object.getOwnPropertySymbols(obj)는 객체 자체의 모든 Symbol 속성의 키 이름을 포함하는 배열을 반환합니다.(5)Reflect.ownKeys(obj)는 키 이름이 Symbol이든 문자열이든 열거 가능하든 상관없이 객체 자체의 모든 키 이름을 포함하는 배열을 반환합니다.상기 5가지 방법은 대상의 키 이름을 옮겨다니며 같은 속성을 옮겨다니는 순서 규칙을 준수한다.우선 모든 수치 키를 옮겨다니며 수치 상승 순서에 따라 배열합니다.그 다음에 모든 문자열 키를 옮겨다니며, 가입 시간에 따라 순서대로 배열합니다.마지막으로 모든 Symbol 키를 누비고 오름차순으로 정렬합니다.

할당 해제

대상의 해체 값의 복사는 얕은 복사이다. 즉, 키의 값이 복합 유형의 값 (수조, 대상, 함수) 이라면 해체 값의 복사는 이 값의 인용이지, 이 값의 복사가 아니다.

객체의 새로운 방법

Object.is는 바로 이 알고리즘을 배치하는 새로운 방법이다.이것은 두 값이 엄격하게 같은지 비교하는 데 사용되며, 연산자(===)를 엄격하게 비교하는 행위와 기본적으로 일치한다.Object.assign 방법은 대상의 합병에 사용되며 원본 대상(source)의 모든 열거 가능한 속성을 대상 대상(target)으로 복사합니다.Object.assign 방법은 깊이 있는 복사가 아니라 얕은 복사를 실행한다.즉, 원본 대상의 어떤 속성의 값이 대상이라면 목표 대상이 복사한 것은 이 대상의 인용이다.이러한 중첩된 객체에 대해 같은 이름의 속성이 있는 경우 Object.assign의 처리 방법은 추가가 아니라 교체입니다.Object가 도입되었습니다.getOwnPropertyDescriptors() 방법으로 지정된 객체의 모든 자체 속성(비상속 속성)에 대한 설명 객체를 반환합니다.Object.setPrototypeOf 방법의 역할과proto__마찬가지로 하나의 대상의prototype 대상을 설정하고 매개 변수의 대상 자체를 되돌려줍니다.ES6에서 공식적으로 권장하는 원형 객체를 설정하는 방법입니다.

Object.setPrototypeOf(object, prototype)
const o = Object.setPrototypeOf({}, null);
 。
function setPrototypeOf(obj, proto) {
  obj.__proto__ = proto;
  return obj;
}
 。
let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);
proto.y = 20;
proto.z = 40;
obj.x // 10
obj.y // 20
obj.z // 40

Object.getPrototypeOf () 이 방법은 Object와 같습니다.setPrototypeOf 메서드는 객체의 원형 객체를 읽는 데 사용됩니다.

function Rectangle() {
  // ...
}
const rec = new Rectangle();
Object.getPrototypeOf(rec) === Rectangle.prototype// true
Object.setPrototypeOf(rec, Object.prototype);
Object.getPrototypeOf(rec) === Rectangle.prototype// false

Set 객체

Set 대상은 원시 값이나 대상 인용 등 모든 종류의 유일한 값을 저장할 수 있습니다.구성원의 값은 모두 유일하며 중복된 값이 없다.Set 자체는 Set 데이터 구조를 생성하는 데 사용되는 구조 함수입니다. +0과-0은 저장이 유일성을 판단할 때 항등하기 때문에 중복하지 않는다.undefined와 undefined는 항등하기 때문에 중복되지 않습니다.NaN과 NaN은 불항등하지만 Set에는 중복되지 않고 하나만 저장할 수 있습니다.

const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
  console.log(i);
}
// 2 3 5 4

let mySet = new Set();
mySet.add(1); // Set(1) {1}
mySet.add(5); // Set(2) {1, 5}
mySet.add(5); // Set(2) {1, 5}  
mySet.add("some text"); 
// Set(3) {1, 5, "some text"}  
var o = {a: 1, b: 2}; 
mySet.add(o);
mySet.add({a: 1, b: 2}); 
// Set(5) {1, 5, "some text", {…}, {…}} 
//  ， ，Set  

[...new Set(array)]
 ， 。
[...new Set('ababbc')].join('')

Set.prototype.constructor: 구조 함수, 기본값은 Set 함수입니다.Set.prototype.size: Set 실례의 구성원 수를 되돌려줍니다.Set 실례의 방법은 두 가지로 나뉘는데 그것이 바로 조작 방법(조작 데이터에 사용)과 역행 방법(구성원을 역행하는 데 사용)이다.다음은 먼저 네 가지 조작 방법을 소개한다.
add (value): 값을 추가하여 Set 구조 자체를 되돌려줍니다.delete(value): 어떤 값을 삭제하고 브리 값을 되돌려줍니다. 삭제가 성공했는지 여부를 나타냅니다.has (value): 이 값이 Set의 구성원인지 여부를 표시하는 브리 값을 되돌려줍니다.clear (): 모든 구성원을 삭제합니다. 되돌아오는 값이 없습니다.Set 구조의 실례는 구성원을 훑어보는 데 사용할 수 있는 네 가지 방법이 있다.
키 (): 키 이름을 되돌려주는 범람기values (): 키 값을 되돌려주는 범람기entries (): 키 값이 맞는 범람기forEach (): 모든 구성원을 범람하기 위해 리셋 함수를 사용합니다. 매개 변수는 함수입니다. Set의 범람 순서는 삽입 순서입니다.이 기능은 때때로 매우 유용하다. 예를 들어 Set을 사용하여 리셋 함수 목록을 저장하면 호출할 때 추가 순서에 따라 호출할 수 있다.(1) 키스 방법,values 방법,entries 방법이 되돌아오는 것은 모두 범람기 대상이다( 1장 참조).Set 구조는 키 이름이 없고 키 값(또는 키 이름과 키 값이 같은 값)만 있기 때문에 키 방법과values 방법의 행위는 완전히 일치합니다.

Set 및 Array 비교

1.set.add({t:1}) array.push({t:1}) 2.set.has(a(저장된 대상))array.find(item=>item.t) 3.set.forEach(item=>item.t?item.t=3:’’) array.forEach(item=>item.t?item.t=3:’’) 4.set.forEach(item=>item.t?set.delete(item):’’) let index=array.findIndex(item=>item.t) array.splice(index,1)

맵과 Array 비교

(첨삭고사) 1.map.set(‘t’,1) array.push({t:1}) 2.map.has(‘t’) array.find(item=>item.t) 3.map.set(‘t’,2) array.forEach(item=>item.t?item.t=3:’’) 4.map.delete(‘t’) let index=array.findIndex(item=>item.t) array.splice(index,1)

WeakSet 및 Set

1. 유형에 따라 weakSet은 대상만 저장할 수 있습니다.WeakSet에는 크기 속성이 없으며 구성원을 옮겨다닐 수 없습니다.WeakSet이 범람할 수 없는 것은 구성원들이 약한 인용이기 때문에 언제든지 사라질 수 있고 범람 메커니즘이 구성원의 존재를 보장할 수 없기 때문이다.3. foos가 실례에 대한 인용은 메모리 회수 메커니즘에 포함되지 않기 때문에 실례를 삭제할 때 foos를 고려하지 않아도 메모리 유출이 발생하지 않는다.

Map

대상은 키 값 쌍을 저장합니다.모든 값(객체 또는 원래 값)은 키 또는 값으로 사용할 수 있습니다.이것은 대상과 유사하고 키 값 쌍의 집합이지만, '키' 의 범위는 문자열에 국한되지 않으며, 각종 종류의 값 (대상 포함) 은 모두 키로 쓸 수 있다.

const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true

키 (): 키 이름을 되돌려주는 범람기values (): 키 값을 되돌려주는 범람기entries (): 키 값이 맞는 범람기 forEach (): 구성원마다 리셋 함수를 사용합니다. 인자는 함수 set Maps와 Objects의 차이점입니다. 맵을 추가합니다.set(‘t’,1) set.add (item) obj ['t'] = 1 맵 찾기.has(‘t’) set.has(a(저장된 대상)'t'in obj 맵을 변경합니다.set(‘t’,2) item.t=2 obj[‘t’]=2; 맵을 삭제합니다.delete(‘t’) set.delete(item) delete obj[t] Object의 키(key)는 문자열이나 Symbols만 가능하지만 맵의 키는 임의의 값일 수 있습니다.Map의 키 값은 순차적(FIFO 원칙)이지만 객체에 추가된 키는 그렇지 않습니다.Map의 키 값 쌍 수는 size 속성에서 가져올 수 있지만 Object의 키 값 쌍 수는 수동으로만 계산할 수 있습니다.Object는 모두 자신의 원형을 가지고 있으며, 원형 체인의 키 이름은 당신이 대상에 설정한 키 이름과 충돌할 수 있습니다.같은 키에 여러 번 값을 부여하면, 뒤의 값이 앞의 값을 덮어씁니다.

 ， ，Map  。 。
const map = new Map();
map.set(['a'], 555);
map.get(['a']) // undefined
 set get ， ， ， ， get ， undefined。

WeakMap과 Map

1. 유형에 따라 weakSet은 대상만 저장할 수 있습니다.WeakSet에는 크기 속성이 없으며 구성원을 옮겨다닐 수 없습니다.WeakSet이 범람할 수 없는 것은 구성원들이 약한 인용이기 때문에 언제든지 사라질 수 있고 범람 메커니즘이 구성원의 존재를 보장할 수 없기 때문이다.3. foos가 실례에 대한 인용은 메모리 회수 메커니즘에 포함되지 않기 때문에 실례를 삭제할 때 foos를 고려하지 않아도 메모리 유출이 발생하지 않는다.