JavaScript 맵 소개

소개

JavaScript 프로그래밍 언어는 시간의 흐름에 따라 끊임없이 발전하여 많은 새로운 특성을 가져왔다.A significant update was made in 2015은 개발자가 이 언어를 사용하는 방식을 바꾸었다.JavaScript 2015(ES6)는 Map이라는 특성을 도입했습니다..map() 수조 방법과 혼동하지 마세요. 내장된 맵 대상은 데이터를 구축하는 또 다른 방법입니다.맵은 서로 다르고 질서정연한 키 값이 맞는 집합입니다.
이 강좌는 자바스크립트 응용 프로그램을 이해하고 새로운 맵 대상을 만드는 데 도움을 줄 개념을 소개합니다.

선결 조건

이 강좌를 계속 공부하려면 자바스크립트와 대상 데이터 형식에 대해 대체적으로 알아야 합니다.JavaScript에 대한 자세한 내용은 JavaScript tutorial series 및 JavaScript Objects specifically in this tutorial에서 확인할 수 있습니다.
웹 브라우저나 가장 좋아하는 텍스트 편집기에서 JavaScript Developer Console을 사용하여 자바스크립트 코드 예시를 실행할 수 있어야 합니다.이 강좌의 예제에서는 Chrome JavaScript 콘솔을 사용하여 코드를 실행합니다.너는 네가 좋아하는 어떤 도구를 사용할 수 있다.

새 맵 만들기

먼저 웹 브라우저에서 텍스트 편집기나 JavaScript 콘솔을 엽니다.items 값을 사용하여 new Map()이라는 변수를 초기화하여 새 매핑 객체를 만듭니다.

let items = new Map();

생성한 items 변수는 빈 맵 대상을 포함합니다.다음 내용을 입력하여 콘솔에서 items 변수의 내용을 관찰할 수 있습니다.

items;

OutputMap(0) {size: 0}

맵 객체의 크기는 0으로 표시됩니다.지도 대상에 그것을 업데이트하는 데 사용할 수 있는 방법이 있다.지도 대상에는 지도에 대한 정보를 수집하는 데 사용할 수 있는 속성이 있다.

맵 방법 사용

매핑 대상에는 키 값 쌍을 조작하는 데 사용할 수 있는 방법이 포함되어 있습니다.

.set () 메서드

.set() 방법으로 빈 지도 대상을 채울 수 있습니다..set() 방법은 두 가지 파라미터를 포함한다. 하나는 표지 항목에 사용할 수 있는 키와 항목의 값이다.대상 문자와 달리 키와 값 쌍은 data type이 될 수 있습니다.
이것은 .set() 메서드를 사용하여 매핑 객체를 키 값으로 채우는 구문입니다.

your_data.set(key, value);

예를 들어, 새 키 값을 사용하여 items 매핑 객체를 채우려면 콘솔에서 다음 행을 사용하여 items 변수를 추가합니다.

items.set('item-1','Car');
items.set('item-2', 'Lawn Mower');
items.set('item-3', 'Bicycle');
items.set('item-4', 'Rake');

이렇게 키 값을 서로 연결할 수도 있습니다.

items.set('item-1', 'Car')
      .set('item-2', 'Lawn Mower')
      .set('item-3', 'Bicycle')
      .set('item-4','Rake');

items 매핑 객체를 키 값으로 채우면 콘솔에 해당 객체를 입력하여 채우기가 올바른지 다시 확인할 수 있습니다.그러면 전체 items 맵 객체가 반환됩니다.

items;

OutputMap(4) {'item-1' => 'Car', 'item-2' => 'Lawn Mower', 'item-3' => 'Bicycle', 'item-4' => 'Rake'}

.get () 메서드

맵 객체에서 값을 읽어들이려면 .get() 메서드를 사용합니다.값을 검색하려면 키를 알아야 합니다.
알려진 키를 사용하여 items 메서드를 추가하여 .get() 매핑 객체에서 값을 검색합니다.

items.get('item-1');

Output'Car'

입력한 키가 잘못되었거나 검색할 키를 찾지 못하면 undefined으로 돌아갑니다.

items.get('item-5');

Outputundefined

.has () 메서드

.has() 메서드를 사용하여 맵 객체에서 특정 키가 있는지 확인할 수 있습니다.

items.has('item-4');

Outputtrue

출력은 부울 값입니다.매핑 객체에서 키를 찾으면 true, 키를 찾지 못하면 false을 반환합니다.

items.has('item-10');

Outputfalse

.delete () 메서드

.delete() 방법으로 맵 객체에서 항목을 제거할 수 있습니다.

items.delete('item-2');

Outputtrue

출력을 true으로 되돌려 항목을 성공적으로 삭제했습니다.맵 대상에서 지정한 키가 있는 항목을 찾을 수 없으면 false을 되돌려줍니다.

.clear () 방법

.clear() 방법으로 맵 객체에서 모든 항목을 제거할 수 있습니다.

items.clear();

Outputundefined

예상 반환값은 undefined입니다..clear() 메서드를 사용한 후 콘솔에 items 매핑 객체를 입력하면 항목이 더 이상 포함되지 않습니다.

items;

OutputMap(0) {size: 0}

사용하다.크기 매핑 속성

맵 객체의 현재 크기를 보려면 .size 속성을 사용하여 포함된 항목 수를 내보낼 수 있습니다.

items.size;

Output0

() 이후에는 .size이 없습니다..size은 하나의 방법이 아니라 지도 대상에 접근하여 정보를 수집할 수 있는 속성이기 때문이다.특정 데이터 세트에서 처리되는 항목 수를 확인하지 못할 경우 .size 속성을 사용하면 도움이 될 수 있습니다.

배열에서 매핑 초기화

다차원 그룹을 가진 데이터 집합을 만날 수 있습니다. 다차원 그룹은 그룹의 그룹입니다.만약 내부 수조에 두 개의 값이 있다면, 이 수조의 첫 번째 값을 키 식별자로, 두 번째 수조의 값을 맵값으로 사용할 수 있다.
이를 설명하려면 콘솔 또는 텍스트 편집기에서 다음 행을 입력합니다.

const food = [
  ['food-item-1', 'Pizza'],
  ['food-item-2', 'Burger'],
  ['food-item-3', 'Taco'],
];

let menu = new Map(food);

menu.get('food-item-2');

Output'Burger'

이 예에서 다차원 그룹에는 두 개의 다른 값을 가진 그룹이 포함되어 있다.첫 번째 값 food-item-1은 키로 하고, 그룹 Pizza의 두 번째 값은 새 지도 대상의 값으로 사용합니다.
배열에서 새 맵 객체를 만들면 배열이 매개 변수로 전송됩니다.
참고: 중요한 것은 새 맵 객체를 만들 때 원본 배열을 변경하지 않는다는 것입니다.원본 패턴의 복사본을 새 맵 객체에 만들고 있습니다.새 맵 객체에 대한 변경 사항은 원래 패턴에 영향을 주지 않습니다.
패턴 복사본을 작성한 후에는 맵 방법(예: .get())을 사용하여 맵 객체를 변경하고 편집할 수 있습니다.

맵 객체에서 교체

for…of 같은 순환을 사용하여 맵 객체를 교체할 수 있습니다.
새 activities 매핑 대상을 만들고 4개의 다른 키 값 쌍으로 설정합니다.그리고 for...of 순환을 사용하여 객체 항목을 반복해서 매핑할 수 있습니다.

let activities = new Map();

activities.set(1, 'Snowboarding');
activities.set(2, 'Car Racing');
activities.set(3, 'Canoeing');
activities.set(4, 'Tennis');

for (let [number, activity] of activities) {
  console.log(`Activity ${number} is ${activity}`);
}

OutputActivity 1 is Snowboarding
Activity 2 is Car Racing
Activity 3 is Canoeing
Activity 4 is Tennis

.forEach() 방법을 사용하여 같은 방식으로 반복해서 비출 수 있습니다.
주의: 주의 forEach() 리셋 함수 중의 첫 번째 매개 변수는 value이고 두 번째는 key입니다.this syntax structure on Mozilla’s helpful MDN reference site에 대한 더 많은 정보를 얻을 수 있습니다.
다음 결과는 for...of 예와 같습니다.

activities.forEach((value, key) => {
  console.log(`Activity ${key} is ${value}`);
});

OutputActivity 1 is Snowboarding
Activity 2 is Car Racing
Activity 3 is Canoeing
Activity 4 is Tennis

결론

이 강좌에서 새 맵 대상을 만들고 다른 방법을 배웠습니다.JavaScript 내부 작업에 대한 자세한 내용을 보려면 How to Code in JavaScript series을 계속 탐색할 수 있습니다.