Javascript ES6의 매핑

소개하다.
ES6는 많은 새로운 것을 도입했다.나는 이미 썼기 때문에 오늘 우리는 지도를 탐색할 것이다.저것들은 무엇입니까?매핑은 키 - 값 쌍의 무질서한 목록이며 키 및 값은 모든 유형이 될 수 있습니다.

해결된 문제
개발자가 ES6 이전에 매핑을 시도했지만 Javascript가 객체 속성을 처리하는 방식 때문에 문제가 발생했습니다.객체의 각 속성은 문자열이어야 합니다.따라서 대상에게 다른 종류의 키를 주면 문자열로 강제로 변환됩니다.

let map = {}

map[5] = 4
map[{}] = 'An object'

// { '5': 4, '[object Object]': 'An object' }

보시다시피 우리의 5는'5'가 되고, 우리의 빈 대상은'[object object]'이 됩니다.이것은 몇 가지 심각한 제한이다!
ES6에서 맵은 객체를 사용합니다.키를 비교하는 방법은 집합이 그 값에 대한 것처럼 한다.지도도 모든 키를 문자열로 만들지 않고, 모든 종류가 허용된다.

Object.is(5, '5') // false
Object.is({}, {}) // false

건조사
그럼 어떻게 새 지도를 만듭니까?사용new Map().배열을 사용하여 매핑을 초기화할 수도 있습니다.

const map = new Map()
// Map {}

const map = new Map([[5, 42], ["name", "Paul"], ["age", 45]])
// Map { 5 => 42, 'name' => 'Paul', 'age' => 45 }

수조 수조에서, 각 수조는 키 값이 맞다는 것을 대표한다.모든 그룹의 첫 번째 항목은 키가 되고 두 번째 항목은 값이 됩니다.이 구조는 이상하게 보일 수도 있지만, 모든 종류의 키 데이터를 허용할 수 있도록 하는 가장 좋은 방법입니다.

매핑 방법
지도와 상호작용을 하려면 몇 가지 방법을 사용할 수 있습니다.

set(key, value) 방법으로 지도에 한 쌍을 추가합니다.

get(key) 방법은 맵에서 값을 검색합니다.아무 것도 찾지 못하면 get 방법은 undefined 되돌아옵니다.

has(key) 방법은 키가 지도에 존재하는지 검사합니다.true 또는 false를 반환합니다.

delete(key) 방법은 맵에서 키와 값을 삭제합니다.

clear() 방법은 맵에서 모든 키와 값을 삭제합니다.

마지막으로 맵은 size 속성을 가지고 맵의 키/값 쌍의 수량을 되돌려줍니다.

const map = new Map()

map.set(5, "Hello")
map.set("5", "World")
map.set("John", "The revelator")
map.size // 3
// Map { 5 => 'Hello', '5' => 'World', 'John' => 'The revelator' }

map.get(5) // Hello
map.has('5') // true
map.get('Random') // undefined
map.has('John') // true

map.delete('5')
map.size // 2
// Map { 5 => 'Hello', 'John' => 'The revelator' }

map.clear()
map.size // 0
// Map {}

지도의 대상 관건
앞에서 말한 바와 같이 대상은 지도의 관건으로 사용할 수 있다.

const map = new Map()
let obj1 = {}
let obj2 = {}

map.set(obj1, 12)
map.set(obj2, "OBJECT")
map.size // 2
// Map { {} => 12, {} => 'OBJECT' }

보시다시피, 비록 우리가 두 개의 빈 대상을 키로 사용하더라도, 우리는 지도에서 이 대상들의 인용을 사용합니다.그래서 반대한다.비교 키의 is () 에서false를 되돌려줍니다.다시 한 번 주의하십시오. 대상이 문자열로 강제로 변환되지 않았습니다.

번갈아
forEach()를 사용하여 매핑을 반복할 수 있습니다.전달된 리셋 함수는 세 가지 인자를 수신합니다. 값, 키, 우리가 사용하고 있는 맵입니다.

const map = new Map([[5, 42], ["name", "Paul"], ["age", 45]])

map.forEach((value, key, thisMap) => {
    console.log(`${key} => ${value}`)
    console.log(thisMap === map)
})

//5 => 42
//true

//name => Paul
//true

//age => 45
//true

약영사
약영사는 약집의 동일한 원리를 따른다.약한 맵에서 키마다 대상이 되어야 합니다.비고정 맵은 비고정 객체 참조를 저장하는 데 사용됩니다.이게 무슨 뜻이죠?

const map = new Map()
let obj1 = {}
map.set(obj1, 12)
//Map { {} => 12 }
obj1 = null // I remove the obj1 reference
// Map { {} => 12 } // But the reference still exists in the map anyway

이런 상황에서 우리의 대상의 인용은 여전히 지도에 존재한다.다른 곳의 인용을 삭제하면 지도에서 삭제하지 않습니다.그것은 쓰레기 수집으로 메모리를 방출하는 것이 아니다.어떤 경우, 메모리 사용을 최적화하고 메모리 유출을 피하기를 원할 수도 있습니다.이게 겁쟁이가 해준 거야.프로그램의 다른 곳에서 대상의 인용이 사라지면, 위크셋에서도 삭제됩니다.

const map = new WeakMap()

let obj = {} // creates a reference to obj
map.set(obj, 12) // stores the reference inside the WeakMap as a key
map.has(obj) // true
map.get(obj) // 12

obj = null /* removes the reference. Will also remove it from the WeakMap because there are no other references to this object */

map.has(obj) // false
map.get(obj) // undefined
console.log(map) // WeakMap {}

// obj is gone from the WeakMap

참고: 객체가 값이 아닌 키로 저장된 경우에만 유효합니다.대상이 하나의 값으로 저장되고 모든 다른 인용이 사라지면 위크맵에서 사라지지 않습니다.약영사 키는 약영사 값이 아니라 약영사 키입니다.
배열 배열을 사용하여 맵처럼 WeakMap을 초기화할 수도 있습니다.다른 점은 모든 키가 하나의 대상이어야 하기 때문에 모든 그룹의 첫 번째 항목은 하나의 대상이어야 한다는 것이다.객체가 아닌 키를 WeakMap에 넣으려고 하면 오류가 발생합니다.
참고: WeakMap에는 크기 속성이 없습니다.

약영사 용례
WeakMap의 한 예는 DOM 요소를 추적하는 것입니다.WeakMap을 사용하여 DOM 요소를 키로 저장할 수 있습니다.원소가 제거되면 대상은 메모리를 방출하기 위해 쓰레기로 수집됩니다.

const map = new WeakMap()
const element = document.querySelector(".button")

map.set(element, "Buttons")

map.get(element) // "Buttons"

element.parentNode.removeChild(element) // remove the element
element = null // removes reference

// WeakMap now empty!

WeakMap의 또 다른 실제 용도는 개인 대상 데이터를 저장하는 것이다.모든 객체 속성은 ES6에서 공통입니다.그럼 어떻게 할 거예요?ES5에서는 다음을 수행할 수 있습니다.

var Car = (function(){

    var privateCarsData = {}
    var privateId = 0

    function Car(name, color){
        Object.defineProperty(this, "_id", {value: privateId++})

        privateCarsData[this._id] = {
            name: name,
            color: color
        }
    }

    Car.prototype.getCarName = function(){
        return privateCarsData[this._id].name
    }

    Car.prototype.getCarColor = function(){
        return privateCarsData[this._id].color
    }

    return Car
}())

이것은 네가 ES5에서 진정한 사유 데이터를 얻은 가장 가까운 곳이다.Car 정의는 즉시 호출되는 함수 표현식 (IIFE) 에 포장되어 있습니다.우리는 두 개의 사유 변수가 있는데, 그것이 바로private Cars Data와private Id이다.private CarsData는 모든 자동차 실례에 대한 개인 정보를 저장하고 private Id는 모든 실례에 유일한 id를 생성합니다.Car(name, color)를 호출할 때 id 속성은privateCarsData에 추가되며, 이름과 색 속성을 가진 대상을 수신합니다.getCarName 및 getCarColor는 이 함수를 사용하여 데이터를 검색합니다.신분증은 열쇠입니다.
이 데이터는 안전합니다. 왜냐하면 개인 카드 데이터는 생명 이외에 접근할 수 없기 때문입니다하지만 신분증은 공개됐다.문제는 자동차 실례가 언제 소각될지 알 방법이 없다는 점이다.따라서, 실례가 사라질 때,privateCarsData를 적절하게 업데이트할 수 없습니다. 이 데이터는 항상 추가 데이터를 포함합니다.

const Car = (function(){

    const privateCarsData = new WeakMap()

    function Car(name, color){
        // this => Car instance
        privateCarsData.set(this, {name, color})
    }

    Car.prototype.getCarName = function(){
        return privateCarsData.get(this).name
    }

    Car.prototype.getCarColor = function(){
        return privateCarsData.get(this).color
    }

    return Car
}())

이 버전은 대상이 아닌privateCarsData에 대한 약한 맵을 사용합니다.우리는 카드 실례를 키로 사용할 것이기 때문에 모든 실례에 유일한 id를 생성할 필요가 없습니다.키는 this이고 값은 이름과 색상을 포함하는 객체입니다.getcarName과 getcarColor는 this get 방법에 전달해서 값을 검색합니다.현재, 카드 실례가 삭제될 때마다privateCarsData에서 이 실례를 인용한 키는 메모리를 방출하기 위해 쓰레기로 수집됩니다.

결론
대상 포인트만 사용하고 싶다면 약한 스티커가 최선의 선택이 될 것이다.메모리는 최적화되고 메모리 유출을 피할 수 있다.그러나 약한 지도는 그들이 가지고 있는 것을 거의 볼 수 없게 한다.forEach (), 크기 속성 없음,clear 없음 () 방법을 사용할 수 없습니다.내용을 검사할 필요가 있으면 일반 지도를 사용하세요.객체 이외의 키포인트를 사용하려면 일반 맵도 사용해야 합니다.