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

key=>value자바 스크립트 로 배열 을 저장하는 가장 좋은 방법은 무엇 이며 어떻게 반복 할 수 있습니까?

각 요소의 키는 {id}또는 태그와 같은 태그 id여야하며 값은 id의 숫자 값이어야합니다.

기존 자바 스크립트 클래스의 요소이거나 클래스를 통해 쉽게 참조 할 수있는 전역 변수 여야합니다.

jQuery를 사용할 수 있습니다.

이것이 바로 JavaScript 객체입니다.

var myArray = {id1: 100, id2: 200, "tag with spaces": 300};
myArray.id3 = 400;
myArray["id4"] = 500;

loop를 사용하여 for..in반복 할 수 있습니다 .

for (var key in myArray) {
  console.log("key " + key + " has value " + myArray[key]);
}

참조 : 객체 작업 (MDN).

ECMAScript6에는 다음도 있습니다 Map(브라우저 호환성 표 참조).

• 객체에는 프로토 타입이 있으므로 맵에 기본 키가 있습니다. ES5부터 map = Object.create (null)을 사용하여이를 우회 할 수 있지만 거의 수행되지 않았습니다.

• 객체의 키는 문자열 및 기호이며 맵의 모든 값이 될 수 있습니다.

• 오브젝트의 크기를 수동으로 추적해야하는 동안 맵의 크기를 쉽게 얻을 수 있습니다.

내가 당신을 올바르게 이해했다면 :

var hash = {};
hash['bob'] = 123;
hash['joe'] = 456;

var sum = 0;
for (var name in hash) {
    sum += hash[name];
}
alert(sum); // 579

Map 을 사용할 수 있습니다 .

• JavaScript ES6에 도입 된 새로운 데이터 구조.
• 키 / 값 쌍을 저장하기위한 JavaScript 객체의 대안입니다.
• 키 / 값 쌍을 반복하는 데 유용한 방법이 있습니다.

var map = new Map();
map.set('name', 'John');
map.set('id', 11);

// Get the full content of the Map
console.log(map); // Map { 'name' => 'John', 'id' => 11 }

키를 사용하여지도의 가치를 얻으십시오

console.log(map.get('name')); // John 
console.log(map.get('id')); // 11

지도의 크기를 가져옵니다

console.log(map.size); // 2

지도에 확인 키가 있습니다

console.log(map.has('name')); // true
console.log(map.has('age')); // false

열쇠 받기

console.log(map.keys()); // MapIterator { 'name', 'id' }

가치 얻기

console.log(map.values()); // MapIterator { 'John', 11 }

지도의 요소를 가져옵니다

for (let element of map) {
  console.log(element);
}

// Output:
// [ 'name', 'John' ]
// [ 'id', 11 ]

키 값 쌍 인쇄

for (let [key, value] of map) {
  console.log(key + " - " + value);
}

// Output: 
// name - John
// id - 11

지도의 키만 인쇄

for (let key of map.keys()) {
  console.log(key);
}

// Output:
// name
// id

지도 값만 인쇄

for (let value of map.values()) {
  console.log(value);
}

// Output:
// John
// 11

자바 스크립트에서 키 값 배열은 객체로 저장됩니다. 자바 스크립트에는 배열과 같은 것이 있지만 여전히 객체로 간주됩니다.이 사람들의 대답을 확인하십시오- 왜 명명 된 속성을 객체처럼 배열에 추가 할 수 있습니까?

배열은 일반적으로 대괄호 구문과 중괄호 구문을 사용하는 객체 ( "키 => 값"배열)를 사용하여 표시되지만 Alexey Romanov가 표시 한대로 대괄호 구문을 사용하여 객체 속성에 액세스하고 설정할 수 있습니다.

자바 스크립트의 배열은 일반적으로 숫자, 자동 증분 키에만 사용되지만, 자바 스크립트 객체는 명명 된 키 값 쌍, 함수 및 다른 객체도 보유 할 수 있습니다.

간단한 배열 예.

$(document).ready(function(){

    var countries = ['Canada','Us','France','Italy'];
    console.log('I am from '+countries[0]);
    $.each(countries, function(key, value) {
        console.log(key, value);
    });

});

출력-

0 "캐나다"

1 "미국"

2 "프랑스"

3 "이탈리아"

위에서 jQuery.each 함수를 사용하여 숫자 형 배열을 반복하고 숫자 키가있는 대괄호를 사용하여 루프 외부의 정보에 액세스 할 수 있습니다.

단순 객체 (JSON)

$(document).ready(function(){

    var person = {
        name: "James",
        occupation: "programmer",
        height: {
            feet: 6,
            inches: 1
        },
    }

    console.log("My name is "+person.name+" and I am a "+person.height.feet+" ft "+person.height.inches+" "+person.occupation);

    $.each(person, function(key, value) {
        console.log(key, value);
    });

});

출력-

제 이름은 제임스이고 저는 6 피트 1 프로그래머입니다.

제임스 이름

직업 프로그래머

높이 객체 {피트 : 6, 인치 : 1}

php와 같은 언어에서 이것은 키 값 쌍을 가진 다차원 배열 또는 배열 내의 배열로 간주됩니다. 키 값 배열을 반복하는 방법에 대해 질문했기 때문에 위의 person 객체와 같은 객체 (key => value array)를 얻는 방법을 알고 싶을 것입니다.

자, 우리는 자바 스크립트 배열이 일반적으로 숫자 인덱싱에 사용되며 객체를 연관 인덱싱에 더 유연하게 사용한다는 것을 알았으므로, 그것들을 함께 사용하여 반복 할 수있는 객체의 배열을 만들 것입니다-

JSON 배열 (객체 배열)-

$(document).ready(function(){

    var people = [
        {
            name: "James",
            occupation: "programmer",
            height: {
                feet: 6,
                inches: 1
            }
        }, {
            name: "Peter",
            occupation: "designer",
            height: {
                feet: 4,
                inches: 10
            }
        }, {
            name: "Joshua",
            occupation: "CEO",
            height: {
                feet: 5,
                inches: 11
            }
        }
    ];

    console.log("My name is "+people[2].name+" and I am a "+people[2].height.feet+" ft "+people[2].height.inches+" "+people[2].occupation+"\n");

    $.each(people, function(key, person) {
        console.log("My name is "+person.name+" and I am a "+person.height.feet+" ft "+person.height.inches+" "+person.occupation+"\n");
    });

});

출력-

저는 Joshua이고 5 ft 11 CEO입니다

제 이름은 제임스이고 저는 6 피트 1 프로그래머입니다.

제 이름은 Peter이고 저는 4 ft 10 디자이너입니다

저는 Joshua이고 5 ft 11 CEO입니다

루프 외부에서 숫자 키와 함께 대괄호 구문을 사용해야합니다. 이는 숫자로 인덱스 된 객체 배열이므로 물론 루프 내부에서 숫자 키가 암시됩니다.

배열 내부의 객체 :

var cars = [
        { "id": 1, brand: "Ferrari" }
        , { "id": 2, brand: "Lotus" }
        , { "id": 3, brand: "Lamborghini" }
    ];

간단히 이렇게

var key = "keyOne";
var obj = {};
obj[key] = someValue;

나는 그것이 늦다는 것을 알고 있지만 다른 방법을 원하는 사람들에게는 도움이 될 수 있습니다. array key => 값을 저장할 수있는 또 다른 방법은 map ()이라는 배열 메서드를 사용하는 것입니다. ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map ) 화살표 기능도 사용할 수 있습니다

 
    var countries = ['Canada','Us','France','Italy'];  

    // Arrow Function  

    countries.map((value, key) => key+ ' : ' + value );  

    // Anonomous Function  

    countries.map(function(value, key){  

         return key + " : " + value;  

    });  

    

오늘 우리는 laravel-blade-javascript라는 새로운 패키지를 출시했습니다. PHP 변수를 JavaScript로 내보내는 javascript Blade 지시문을 제공합니다. 따라서 기본적으로 Jeffrey Way의 인기있는 PHP-Vars-To-Js-Transformer 패키지와 동일하지만 컨트롤러에서 변수를 내보내는 대신 패키지에서 볼 수 있습니다.

사용 방법의 예는 다음과 같습니다.

@javascript('key', 'value')

렌더링 된 뷰는 다음을 출력합니다.

<script type="text/javascript">window['key'] = 'value';</script>

따라서 브라우저에서 주요 변수에 액세스 할 수 있습니다.

console.log(key); //outputs "value"

단일 인수를 사용할 수도 있습니다.

@javascript(['key' => 'value'])

첫 번째 예제와 동일하게 출력됩니다.

구성 파일을 사용하여 내 보낸 모든 JavaScript 변수가 있어야하는 네임 스페이스를 설정할 수도 있습니다.