JavaScript Advanced Programming (4th Edition) 읽기 공유 노트 녹음
이제 막 시작하는 동지들에게 적용
지도
ECMAScript 6 의 새로운 기능인 Map은 진정한 키/값 스토리지를 언어에 제공하는 새로운 컬렉션 유형입니다. Map의 대부분의 기능은 Object 유형으로 구현할 수 있지만 둘 사이에는 여전히 약간의 미묘한 차이가 있습니다.
- new 키워드와 Map 생성자를 사용하여 빈 맵을 만들 수 있습니다.
const m = new Map()중첩 배열로 맵 초기화
// 使用嵌套数组初始化映射
const m1 = new Map([
["key1", "val1"],
["key2", "val2"],
["key3", "val3"]
]);-
방법: set(), get(), has(), delete(), clear()
- set() 메서드는 매핑 인스턴스를 반환하므로 여러 작업을 연결할 수 있습니다.
- 속성: 크기
const m = new Map()
m.set('age',18)
//has()方法，如果存在键值就返回发生true，不存在就返回false
console.log( m.has('firstName') ) //false
console.log( m.has('age') ) // true
//get()方法,如果存在键值就返回键对应的值，不存在就返回undefined
console.log( m.get('firstName') ) //undefained
console.log( m.get('age') ) //18
//set()方法可以链式操作，set(键，值)
m.set("firstName", "Matt").set("lastName", "Frisbie")
//size属性
console.log(m.size) // 3
//delete()方法，删除某个键值对
m.delete('age')
console.log( m.has('age') ) // false
console.log(m.size) // 2
//clear()方法，清空对象
m.clear()
console.log(m.size) // 0
- 숫자 값, 문자열 또는 기호만 키로 사용할 수 있는 Object 와 달리 Map 은 모든 JavaScript 데이터 유형을 키로 사용할 수 있습니다.
const m = new Map();
const functionKey = function() {};
const symbolKey = Symbol();
const objectKey = new Object();
m.set(functionKey, "functionValue");
m.set(symbolKey, "symbolValue");
m.set(objectKey, "objectValue");
alert(m.get(functionKey)); // functionValue
alert(m.get(symbolKey)); // symbolValue
alert(m.get(objectKey)); // objectValue-
시퀀스 및 반복
entry()
메서드(또는
entries() 를 참조하는
Symbol.iterator 속성)를
통해 이 반복자를 가져옵니다.
const m = new Map([
["key1", "val1"],
["key2", "val2"],
["key3", "val3"]
]);
alert(m.entries === m[Symbol.iterator]); // true
for (let pair of m.entries()) {
alert(pair);
}
// [key1,val1]
// [key2,val2]
// [key3,val3]
for (let pair of m[Symbol.iterator]()) {
alert(pair);
}
// [key1,val1]
// [key2,val2]
// [key3,val3]
keys()
및
values()는
각각 삽입 순서대로 키와 값을 생성하는 반복자를 반환합니다.
const m = new Map([
["key1", "val1"],
["key2", "val2"],
["key3", "val3"]
]);
for (let key of m.keys()) {
console.log(key);
}
// key1
// key2
// key3
for (let key of m.values()) {
console.log(key);
}
// value1
// value2
// value3객체와 지도의 비교
- 메모리 사용량
Object 및
Map
의 엔지니어링 수준 구현은 브라우저마다 크게 다르지만
단일 키/값 쌍을 저장하는 데 사용되는 메모리 양은 키 수에 따라 선형적으로 증가합니다
. 그러나 고정된 크기의 메모리가 주어지면
Map은 Object 보다 약 50% 더 많은 키 / 값 쌍을 저장할 수 있습니다 .
- 삽입 성능
Object 및
Map 에
새 키
/ 값 쌍을 삽입하는 비용은
거의 동일 하지만
Map
에 삽입하는 것이
일반적으로 모든 브라우저에서 약간 더 빠릅니다 .
코드에 많은 삽입 작업이 포함된 경우 분명히 Map의 성능이 더 좋습니다.
- 검색 속도
삽입과 달리 큰 Object
와 Map 에서 키 / 값 쌍을 찾는 성능 차이는 미미하지만 적은 수의 키 / 값 쌍만 포함하는 경우 Object 가 더 빠를 때도 있습니다.
- 실적 삭제
코드에 많은 삭제 작업이 포함된 경우
맵을 선택해야 한다는 데 의심의 여지가 없습니다.
세트
ECMAScript 6의 새로운
Set은
컬렉션 데이터 구조를 언어로 가져오는
새로운 컬렉션 유형입니다 .
집합은
대부분의 API 와 동작이 공통적
이라는 점에서 향상된 지도와 여러 면에서 비슷합니다 .
new
키워드와
Set 생성자를
사용하여 빈 컬렉션을 만들 수 있습니다
.
const m = new Set();
배열로 컬렉션 초기화
// 使用数组初始化集合
const s1 = new Set(["val1", "val2", "val3"]);메소드 속성
방법: add(), has(), delete(), clear()
속성: 크기
const s = new Set();
s.add('Tom')
//has()
console.log(s.has('Jerry')) //false
console.log(s.has('Tom')) //true
//size
console.log(s.size) // 1
//add()
s.add('Jerry').add('Mary')
console.log(s.size) // 3
//delete()
s.delete('Tom')
console.log(s.size) // 2
//clear()
s.clear()
console.log(s.size) // 0시퀀스 및 반복
호출된 반복 메서드는 맵과 일치합니다.
const s = new Set(["val1", "val2", "val3"]);
for (let pair of s.entries()) {
console.log(pair);
}
// ["val1", "val1"]
// ["val2", "val2"]
// ["val3", "val3"]