개체를 사용한지도 함수 이해 : 키 및 값

Question

안녕하세요,지도가있는 MDN에 대한 예를 보았습니다. 일반 배열로도 이해할 수 있지만이 예에서는 루프가 발생했습니다.

var kvArray = [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}]; 
var reformattedArray = kvArray.map(function(obj){ 
    var rObj = {}; 
    rObj[obj.key] = obj.value; 
    return rObj; 
}); 
// reformattedArray is now [{1:10}, {2:20}, {3:30}], 
// kvArray is still [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}] 

본질적으로 "키"및 "값"속성이 "사라지는"방법을 이해하지 못합니다. 나는 rObj [obj.key] = obj.value라고 생각했다. 원래 배열에서 의미있는 라인은 키의 값을 찾고 원래 키를 해당 키의 값으로 대체합니다.이 시점에서 나는 정말로 혼란스러워합니다. 누군가이 값들을 어떻게 얻었는지 설명해 주시겠습니까?

Answer 1

당신은 말했다 :

는 생각이 rObj [obj.key] = obj.value; 원래 배열에서 의미있는 행은 키의 값을 찾고 은 원래 키를 해당 키의 값으로 바꿉니다.

---

Array.prototype.map

는 대체하지 않습니다. 원래 배열의 각 요소에 대해 사용자가 제공 한 콜백 함수를 적용하고 결과 출력을 새 배열로 푸시합니다. docs에서 :

맵() 메소드는이 어레이의 모든 요소에 대해 제공되는 함수 호출의 결과와 새로운 배열을 생성한다.

원래의 배열 인 것이 중요합니다은 map에 의해 변경 될 것을 의미하지. (1) 라인 대 라인에서

Answer 2

// kvArray is source array 
var kvArray = [{key:1, value:10}, 
       {key:2, value:20}, 
       {key:3, value: 30}]; 

var reformattedArray = kvArray.map(function(obj){ 
    var rObj = {}; // --------- line (1) 
    rObj[obj.key] = obj.value; // --------- line (2) 
    return rObj; // --------- line (3) 
}); 

1. (3) (따라서 kvArray가 동일하게 유지되고지도 작업 라인에

2. 후에 변형되지 않으며 1 kvArray 전혀 언급이 없다), var rObj = {}는 kvArray에있는 모든 항목에 대해 새로운 객체를 생성합니다. kvArray의 각 요소에 대해 요소의 키가 rObj에 대한 속성으로 할당되고 값이 0으로 설정됩니다 (kvArray의 모든 항목에 대해

3. 요소의 값이 값으로 지정됩니다. 라인에서

   -- during interation 1, 1st element {key:1, value:10} becomes 
        rObj[1] = 10 
       -- during interation 2, 2nd element {key:2, value:20} becomes 
        rObj[2] = 20 
       -- during interation 3, 3rd element {key:3, value:30} becomes 
        rObj[3] = 30 
   

4. (3) rObj가 를 반환 - interation 1 동안, 반환 { '1': 10} - interation 2 동안, 반환 { '2': 20} - - 3 번 작업 중에 { '3': 30}을 반환합니다.

5. map 작업은 각 작업에 대해 반환되는 모든 항목을 새 배열에 배치하므로 반환합니다. [{ '1': 10}, { '2': 20}, { '3': 30}]