[javascript] 연관 배열 객체의 Javascript foreach 루프

Program / 글쓴이

for-each 루프가 JavaScript 연관 배열 객체를 반복하지 않는 이유는 무엇입니까?

// defining an array
var array = [];

// assigning values to corresponding keys
array["Main"] = "Main page";
array["Guide"] = "Guide page";
array["Articles"] = "Articles page";
array["Forum"] = "Forum board";

// expected: loop over every item,
// yet it logs only "last" assigned value - "Forum"
for (var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

편집 : jQuery each()가 도움이 될 수 있습니다 : https://api.jquery.com/jQuery.each/

답변

이 .length속성은 숫자 인덱스 (키)가 있는 속성 만 추적합니다. 키에 문자열을 사용하고 있습니다.

당신은 이것을 할 수 있습니다 :

var arr_jq_TabContents = {}; // no need for an array

arr_jq_TabContents["Main"] = jq_TabContents_Main;
arr_jq_TabContents["Guide"] = jq_TabContents_Guide;
arr_jq_TabContents["Articles"] = jq_TabContents_Articles;
arr_jq_TabContents["Forum"] = jq_TabContents_Forum;

for (var key in arr_jq_TabContents) {
    console.log(arr_jq_TabContents[key]);
}

안전을 위해 예기치 않은 상속 결과가없는 속성이 있는지 확인하는 것이 좋습니다.

for (var key in arr_jq_TabContents) {
  if (arr_jq_TabContents.hasOwnProperty(key))
    console.log(arr_jq_TabContents[key]);
}

편집 – Object.keys()현대 브라우저와 노드 등에서이 기능을 사용할 수 있습니다.이 기능은 객체의 “자체”키를 배열로 반환합니다.

Object.keys(arr_jq_TabContents).forEach(function(key, index) {
  console.log(this[key]);
}, arr_jq_TabContents);

에 전달 된 콜백 함수는에서 .forEach()반환 된 배열의 각 키와 키 색인으로 호출됩니다 Object.keys(). 또한 함수가 반복되는 배열을 전달했지만 해당 배열은 실제로 우리에게 유용하지 않습니다. 우리는 원래 객체 가 필요 합니다 . 이름으로 직접 액세스 할 수는 있지만 명시 적으로 전달하는 것이 조금 더 좋습니다. 콜백 내부에 .forEach()바인딩 될 원래 객체에 두 번째 인수를 전달하면 됩니다 this. (이것이 아래 주석에서 언급 된 것을 보았습니다.)

답변

이것은 매우 간단한 접근법입니다. 장점은 키도 얻을 수 있다는 것입니다.

for (var key in array) {
    var value = array[key];
    console.log(key, value);
}

ES6의 경우 :

array.forEach(value => {
  console.log(value)
})

ES6의 경우 : (값, 색인 및 배열 자체를 원하는 경우)

array.forEach((value, index, self) => {
  console.log(value, index, self)
})

답변

이미 몇 가지 간단한 예가 있지만 PHP 배경에서 나온 것 같은 질문에 대해 어떻게 말했는지 알았으며 JavaScript가 동일한 방식으로 작동한다고 기대합니다. PHP array는 JavaScript와 매우 다릅니다 Array.

PHP에서 연관 배열은 숫자 인덱스 배열이 할 수있는 대부분의 array_*기능을 수행 할 수 있습니다 ( 함수 작동, count()배열 등) 단순히 배열을 만들고 숫자 대신 문자열 인덱스에 할당하기 시작합니다.

JavaScript에서 모든 것은 객체 (기본 요소를 제외하고 : 문자열, 숫자, 부울)이며 배열은 숫자 색인을 가질 수있는 특정 구현입니다. 배열에 푸시 아무것도 그 영향을 것 length, 그리고 (배열 방법을 사용하여 이상 반복 할 수있다 map, forEach, reduce, filter, find즉 당신이 무언가 때문에 모든 객체이기 때문에, 당신은 단순히 할당 특성에 무료로 항상있어, 그러나, 등) 모든 개체. 대괄호 표기법은 단순히 속성에 액세스하는 또 다른 방법이므로 귀하의 경우 :

array['Main'] = 'Main Page';

실제로 다음과 같습니다.

array.Main = 'Main Page';

귀하의 설명에서 필자는 ‘연관 배열’을 원하지만 JavaScript의 경우 객체를 해시 맵으로 사용하는 간단한 경우입니다. 또한 나는 그것이 예라는 것을 알고 있지만 변수 유형 만 설명하는 의미가없는 이름 (예 🙂 array과 포함해야 할 내용 (예 :)을 기반으로 한 이름은 피하십시오 pages. 간단한 객체는 너무 자주 우리는 먼저 사용하여 배열에 차례로 것, 반복 많은 좋은 직접적인 방법이 없습니다 Object(방법 Object.keys이 경우에 – 또한 거기 entries와 values지금 일부 브라우저에 추가)하는 우리는 루프 수 있습니다.

// assigning values to corresponding keys
const pages = {
  Main: 'Main page',
  Guide: 'Guide page',
  Articles: 'Articles page',
  Forum: 'Forum board',
};

Object.keys(pages).forEach((page) => console.log(page));

답변

arr_jq_TabContents[key] 배열을 0 인덱스 형식으로 본다.

답변

연관 배열을 일반 객체 유형으로 사용하는 간단한 방법은 다음과 같습니다.

Object.prototype.forEach = function(cb){
   if(this instanceof Array) return this.forEach(cb);
   let self = this;
   Object.getOwnPropertyNames(this).forEach(
      (k)=>{ cb.call(self, self[k], k); }
   );
};

Object({a:1,b:2,c:3}).forEach((value, key)=>{
    console.log(`key/value pair: ${key}/${value}`);
});

스 니펫 확장

답변

node.js 또는 브라우저가 지원되는 경우 ( https://stackoverflow.com/a/18804596/225291 ) Object.entries()대신 사용할 수 있습니다 .Object.keys()

const h = {
  a: 1,
  b: 2
};

Object.entries(h).forEach(([key, value]) => console.log(value));
// logs 1, 2

스 니펫 확장

이 예 forEach에서는 배열 할당 제거를 사용합니다 .

답변

이것은 대부분의 경우 (본질적으로) 부정확합니다.

var array = [];
array["Main"] = "Main page";

그러면 배열에 이름이없는 비 요소 속성이 만들어집니다 Main. 배열은 객체이지만 일반적으로 요소가 아닌 속성을 만들고 싶지 않습니다.

array이러한 이름 으로 색인을 생성 하려면 일반적으로 Map배열이 아닌 일반 객체를 사용합니다 .

창의적이기 때문에 Map전화 할 (ES2015 +)를 사용하십시오 map.

let map = new Map();
map.set("Main", "Main page");

당신은 그것에서 반복자를 사용하여 반복 values, keys또는 entries예를 들어, 방법 :

for (const value of map.values()) {
    // Here, `value` will be `"Main page"`, etc.
}

창의적으로 부르는 일반 객체를 사용합니다 obj.

let obj = Object.create(null); // Creates an object with no prototype
obj.Main = "Main page"; // Or: `obj["Main"] = "Main page";`

당신은 그 사용 내용을 반복하는 것 Object.keys, Object.values또는 Object.entries예를 들어 :

for (const value of Object.values(proches_X)) {
    // Here, `value` will be `"Main page"`, etc.
}