> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 키 => 값 배열을 저장하는 방법은 무엇입니까?

JavaScript에서 키 => 값 배열을 저장하는 방법은 무엇입니까?

PHPz
풀어 주다: 2023-09-09 09:45:09
앞으로
1021명이 탐색했습니다.

如何在 JavaScript 中存储 key => 값 배열?

때로는 JavaScript의 일부 데이터 구조를 사용하여 키를 특정 값에 매핑해야 할 때가 있습니다. 예를 들어 JavaScript의 키-값 쌍에 사용자 세부 정보를 저장하는 것은 매우 유용합니다.

JavaScript의 객체나 맵과 같은 다양한 데이터 구조를 사용하여 키-값 형식으로 데이터를 저장할 수 있습니다.

객체를 사용하여 JavaScript에 키 => 값 저장

JavaScript에서 객체를 사용하면 키-값 형식으로 데이터를 저장할 수 있습니다. 키와 객체를 사용하여 객체에서 데이터를 가져올 수 있습니다.

문법

사용자는 JavaScript의 개체를 사용하여 다음 구문에 따라 키-값 쌍을 저장할 수 있습니다

으아악

위 구문에서는 빈 객체를 생성했습니다. 또한 특정 키의 값을 객체에 저장합니다

예 1

아래 예에서는 숫자가 포함된 keyArray를 만들었습니다. valueArray에는 숫자를 나타내는 다양한 문자열이 포함되어 있습니다.

그런 다음 for 루프를 사용하여 keyArray를 반복합니다. keyArray의 i번째 인덱스에서 키를 가져오고, valueArray의 i번째 인덱스에서 값을 가져옵니다. 각 키에 대해 값을 객체에 저장합니다.

마지막으로 객체의 모든 키와 값을 인쇄합니다.

으아악

매핑을 사용하여 JavaScript에 키 => 값 저장

매핑을 사용하여 키-값 형식으로 데이터를 저장할 수도 있습니다. Map 클래스에는 키와 값을 매개변수로 사용하여 데이터를 설정하는 set() 메서드가 포함되어 있습니다. 또한 지도 클래스에는 키를 매개변수로 사용하고 매핑된 값을 반환하는 get() 메서드가 포함되어 있습니다.

문법

사용자는 매핑을 사용하여 다음 구문에 따라 JavaScript에 키-값 쌍을 저장할 수 있습니다.

으아악

위 구문에서 Map() 생성자를 사용하여 새 지도 객체를 만들었습니다. 또한 set() 메서드를 사용하여 키와 값을 설정합니다.

예 2

아래 예에서 mapKeys 배열에는 숫자 문자열이 포함되어 있습니다. 배열을 반복하고 키 값 쌍을 맵으로 설정합니다. for 루프에서는 set() 메서드를 사용하여 맵의 키 값을 설정합니다. 또한 mapKeys 배열의 키를 첫 번째 매개변수로 전달하고 인덱스를 두 번째 매개변수로 전달했습니다.

으아악

JavaScript의 array.reduce() 메소드를 사용하여 키 => 값 저장

array.reduce() 메서드는 배열을 줄여서 단일 요소로 변환합니다. Reduce() 메소드를 사용하면 객체 내부에 배열 데이터를 키-값 쌍 형식으로 저장하여 전체 배열을 단일 객체로 변환할 수 있습니다.

문법

사용자는 array.reduce() 메서드를 사용하여 아래 구문에 따라 객체에 배열 데이터를 저장할 수 있습니다.

으아악

위 구문에서는 {}(빈 객체)를 사용하여 객체를 초기화했습니다. 배열의 각 요소를 obj 객체에 저장하고 이를 array.reduce() 메서드에서 반환합니다.

예 3

아래 예에는 문자열 형식의 다양한 프로그래밍 언어를 포함하는 arrayOfValues ​​변수가 있습니다. 배열을 키-값 형식으로 배열 데이터를 저장하는 객체 형식으로 변환했습니다.

array.reduce() 메서드에서 obj 객체에는 마지막 반복에서 업데이트된 키 값이 포함되어 있습니다. 현재 반복에서는 인덱스 *2를 키로 사용하고 배열 요소를 객체 요소의 값으로 사용합니다. 그 후에는 obj를 반환합니다.

으아악

JavaScript에서는 map, object 및 array.reduce() 메서드를 사용하여 키-값 형식으로 데이터를 저장했습니다. 맵은 데이터를 키-값 형식으로 저장하는 가장 좋은 방법입니다.

위 내용은 JavaScript에서 키 => 값 배열을 저장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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