사전을 만들고 키-값 쌍을 동적으로 추가하는 방법은 무엇입니까?


323

게시물에서 :

Dictionary <문자열, 문자열>로 수신 할 JSON 배열 보내기

나는 그 게시물과 같은 일을하려고합니다. 유일한 문제는 키와 값이 무엇인지 모르는 것입니다. 따라서 키와 값 쌍을 동적으로 추가 할 수 있어야하며 어떻게해야할지 모르겠습니다.

누구든지 해당 객체를 만들고 키 값 쌍을 동적으로 추가하는 방법을 알고 있습니까?

난 노력 했어:

var vars = [{key:"key", value:"value"}];
vars[0].key = "newkey";
vars[0].value = "newvalue";

그러나 그것은 작동하지 않습니다.


2
잘 작동합니다. console.log (vars); show me [객체 키 : "newkey"값 : "newvalue" proto : Object]
— Alex Pliutau

그것을 제외하고 사전이 아닌 목록입니다 : \ 데이터가 "쌍"의 목록으로 더 잘 표현된다고 생각합니다 list = [["key1","value1"],["key2","value2"]]. 다른 언어에는 "쌍"또는 "튜플"유형이 있습니다. 실제 dict 추가를위한 tldr :dict['key'] = "value"
— Jordan Stewart

답변:


551
var dict = []; // create an empty array

dict.push({
    key:   "keyName",
    value: "the value"
});
// repeat this last part as needed to add more key/value pairs

기본적으로 두 속성 ( key및 value)을 사용하여 객체 리터럴을 만들고을 사용 push()하여 배열에 삽입합니다 .


편집 : 거의 5 년 후,이 대답은 "일반적인"JS 객체 리터럴 (일명 해시, 일명 사전)을 생성하지 않기 때문에 다운 투표를 받고 있습니다.
이 되어 있지만 OP가 요구되는 구조 생성 (그리고 이는 연결된 다른 문제에 도시)이며, 오브젝트 리터럴 배열 각각, key및 value특성. 왜 그 구조가 필요한지 묻지 말고 요청한 구조입니다.

그러나 OP가 요청한 구조가 아닌 일반 JS 객체에서 원하는 것이 있으면 tcll 's answer를 참조하십시오 . 유효한 JS 이름 인 간단한 키만 있으면 대괄호 표기법이 약간 번거 롭습니다. 당신은 이것을 할 수 있습니다 :

// object literal with properties
var dict = {
  key1: "value1",
  key2: "value2"
  // etc.
};

또는 객체를 만든 후 일반 점 표기법을 사용하여 속성을 설정하십시오.

// empty object literal with properties added afterward
var dict = {};
dict.key1 = "value1";
dict.key2 = "value2";
// etc.

당신은 할 당신이 그런 그들에 공백, 특수 문자, 또는 일이 키를 가지고있는 경우 브래킷 표기법을합니다. 예 :

var dict = {};

// this obviously won't work
dict.some invalid key (for multiple reasons) = "value1";

// but this will
dict["some invalid key (for multiple reasons)"] = "value1";

키가 동적 인 경우 대괄호 표기법도 필요합니다.

dict[firstName + " " + lastName] = "some value";

키 (속성 이름)는 항상 문자열이며 키로 사용될 때 문자열이 아닌 값은 문자열로 강제 변환됩니다. 예를 들어 Date객체는 문자열 표현으로 변환됩니다.

dict[new Date] = "today's value";

console.log(dict);
// => {
//      "Sat Nov 04 2016 16:15:31 GMT-0700 (PDT)": "today's value"
//    }

그러나 많은 객체가 "[object Object]"고유하지 않은 키를 만들지 않는 것과 같은 문자열 표현을 갖기 때문에 반드시 "작동하는" 것은 아닙니다. 따라서 다음과 같은 것에주의하십시오.

var objA = { a: 23 },
    objB = { b: 42 };

dict[objA] = "value for objA";
dict[objB] = "value for objB";

console.log(dict);
// => { "[object Object]": "value for objB" }

완전히 다르고 고유 한 요소 임에도 불구 objA하고 objB둘 다 동일한 기본 문자열 표현을 갖습니다 "[object Object]".

프로토 타입 에 기본 문자열 표현을 재정의 하는 사용자 지정 메서드 가 있기 때문에 Date이러한 동작이 발생하지 않습니다 . 그리고 당신도 똑같이 할 수 있습니다 :DatetoString

// a simple constructor with a toString prototypal method
function Foo() {
  this.myRandomNumber = Math.random() * 1000 | 0;
}

Foo.prototype.toString = function () {
  return "Foo instance #" + this.myRandomNumber;
};

dict[new Foo] = "some value";

console.log(dict);
// => {
//      "Foo instance #712": "some value"
//    }

(위의 난수를 사용하기 때문에 이름 충돌은 여전히 ​​매우 쉽게 발생할 수 있습니다. 구현은 단지 설명입니다 toString.)

따라서 객체를 키로 사용하려고 할 때 JS는 객체 자체 toString구현을 사용하거나 기본 문자열 표현을 사용합니다.


2
연관성이 있습니까?
— Csaba Toth

1
@CsabaToth No dict는 연관 사전이 아닙니다. "key"와 "value"라는 두 개의 키가있는 사전과 같은 객체 배열입니다.
— 로마 스타 코프

1
당신이 가진 것은 단지 'dict'라는 이름의 배열입니다.
— Jan Kyu Peblik

2
업데이트를 감사하고 추가 정보를 확인하십시오.
— Jacob

410
var dict = {};

dict['key'] = "testing";

console.log(dict);

파이썬처럼 작동합니다 :)

콘솔 출력 :

Object {key: "testing"} 

3
이것은 사전을 만드는 가장 좋은 방법이며 정답입니다!
— Roman

3
매우 중요한 대괄호로 초기화하는 {}대신 괄호보다
— Jaider

또한 기본 개체를 이와 같은 사전으로 사용합니다. 그것이 옳은 길임을 알게되어 기쁘다!
— TKoL

5
자바 스크립트의 '아름다움'! 객체는 실제로 키-값 쌍 사전 자체입니다.
— 100r

1
@Azurespot 키는 해시 가능한 것이 될 수 있으며 키는 결국 해시로 정렬되며 python3에서는 실행마다 다릅니다.
— Tcll

54

다음과 같이 간단합니다.

var blah = {}; // make a new dictionary (empty)

또는

var blah = {key: value, key2: value2}; // make a new dictionary with two pairs 

그때

blah.key3 = value3; // add a new key/value pair
blah.key2; // returns value2
blah['key2']; // also returns value2

1
@ KenEucker 이런 질문에 틀린 대답을하는 것이 유용하다고 생각합니다. 특히 누군가 왜 그들이 틀렸는 지 설명한다면 그것은 좋은 학습 자료입니다.
— CJBrew

32

사전 객체를 원한다고 말했기 때문에 (그리고 일부는 이해한다고 가정 하는 배열이 아닙니다 ) 나는 이것이 당신이 추구하는 것이라고 생각합니다.

var input = [{key:"key1", value:"value1"},{key:"key2", value:"value2"}];

var result = {};

for(var i = 0; i < input.length; i++)
{
    result[input[i].key] = input[i].value;
}

console.log(result); // Just for testing

배열에 .push를 사용하는 다른 솔루션은 내 용도로는 효과적이지만 시도해도 효과가 있다고 가정합니다.
— KenEucker

2
Dictionary 개체가 무엇인지 오해하지 않는 한 귀하의 질문은 오도됩니다. 배열에서 키로 값을 어떻게 검색합니까?
— ZenMaster

이 객체에서 JSON.stringify를 사용하고 MVC 3의 컨트롤러로 잡는 중입니다. 문자열을 지정하고 전송하기 전에 올바르게 형식화되도록합니다.
— KenEucker

23

JavaScript Object 는 그 자체가 사전과 같습니다. 바퀴를 재발 명할 필요가 없습니다.

var dict = {};

// Adding key-value -pairs
dict['key'] = 'value'; // Through indexer
dict.anotherKey = 'anotherValue'; // Through assignment

// Looping through
for (var item in dict) {
  console.log('key:' + item + ' value:' + dict[item]);
  // Output
  // key:key value:value
  // key:anotherKey value:anotherValue
}

// Non existent key
console.log(dict.notExist); // undefined

// Contains key?
if (dict.hasOwnProperty('key')) {
  // Remove item
  delete dict.key;
}

// Looping through
for (var item in dict) {
  console.log('key:' + item + ' value:' + dict[item]);
  // Output
  // key:anotherKey value:anotherValue
}

깡깡이


11

다음과 Map같이 지도를 사용할 수 있습니다 .

var sayings = new Map();
sayings.set('dog', 'woof');
sayings.set('cat', 'meow');

9

나는이 질문을 가로 질러 비슷한 것을 찾고있었습니다. 그것은 내가 원하는 대답을 얻기 위해 테스트를 실행하기에 충분한 정보를 주었다. 따라서 다른 사람이 JavaScript 객체에서 {key : 'value'} 쌍을 동적으로 추가하거나 조회하는 방법을 알고 싶다면이 테스트를 통해 알아야 할 모든 내용을 알 수 있습니다.

var dictionary = {initialkey: 'initialValue'};
var key = 'something';
var key2 =  'somethingElse';
var value = 'value1';
var value2 = 'value2';
var keyInitial = 'initialkey';

console.log(dictionary[keyInitial]);

dictionary[key] =value;
dictionary[key2] = value2;
console.log(dictionary);

산출

initialValue
{ initialkey: 'initialValue',
  something: 'value1',
  somethingElse: 'value2' }

2
이것은 질문이 아닙니다. 대신해야 할 일은 질문을 한 다음 스스로 대답하는 것입니다. 이해하고 정리하기가 훨씬 쉬울 것입니다.
— SalmonKiller

1
덕분에 @ SalmonKiller 내 자신의 질문을 작성하고 이해할 것으로 예상되는 적절한 용어를 확신하지 못했지만 검색 에서이 모든 정보가 있었지만 여러 답변 사이에 퍼져서이 질문의 개념에 대답했습니다. 나와 같은 것을 찾고있는이 질문을 우연히 발견 한 다른 사람에게 답을 줄 수있는 방법
— user2301449

1
LOL. 나는 이것을 검토하고 있었고 대답 대신 질문처럼 보였다. 미안하다!
— SalmonKiller

이것을 추가해 주셔서 감사합니다. 위의 답변과 같이 바이올린에 넣을 수도 있습니다.
— KenEucker

8
var dictionary = {};//create new object
dictionary["key1"] = value1;//set key1
var key1 = dictionary["key1"];//get key1

추가 된 성능을 위해서는 key1 = dictionary.key1인덱스 대신 참조해야합니다key1 = dictionary["key1"]
— Tcll

4

Dictionary 클래스를 만들어 Dictionary 목록과 쉽게 상호 작용할 수 있습니다.

class Dictionary {
  constructor() {
    this.items = {};
  }
  has(key) {
    return key in this.items;
  }
  set(key,value) {
    this.items[key] = value;
  }
  delete(key) {
    if( this.has(key) ){
      delete this.items[key]
      return true;
    }
    return false;
  }
}

var d = new Dictionary();
d.set(1, "value1")
d.set(2, "value2")
d.set(3, "value3")
console.log(d.has(2));
d.delete(2);
console.log(d.has(2));


3

키 값 쌍을 만들기위한 하나의 라이너는 어떻습니까?

let result = { ["foo"]: "some value" };

reduce배열을 사전으로 동적으로 변환하는 것과 같은 일부 반복자 함수

var options = [
  { key: "foo", value: 1 },
  { key: "bar", value: {id: 2, name: "two"} },
  { key: "baz", value: {["active"]: true} },
];

var result = options.reduce((accumulator, current) => {
  accumulator[current.key] = current.value;
  return accumulator;
}, {});

console.log(result);


3

현대 자바 스크립트 (ES6 / ES2015)에서는 사전에 맵 데이터 구조를 사용해야합니다. ES6의 맵 데이터 구조를 사용하면 임의의 값을 키로 사용할 수 있습니다.

const map = new Map();
map.set("true", 1);
map.set("false", 0);

ES5를 계속 사용하는 경우 사전을 작성하는 올바른 방법은 다음과 같은 방법으로 프로토 타입없이 객체를 작성하는 것입니다.

var map = Object.create(null);
map["true"]= 1;
map["false"]= 0;

프로토 타입 객체없이 사전을 만들면 많은 이점이 있습니다. 아래 블로그는이 주제에 대해 읽을 가치가 있습니다.

딕트 패턴

객체로서의지도


2

원하는 최종 결과가 무엇인지 아는 것이 도움이되지만, 이것이 당신이 원하는 것이라고 생각합니다.

var vars = [{key:"key", value:"value"}];

vars.push({key: "newkey", value: "newvalue"})

2

나는이 문제에 부딪쳤다. 그러나 for 루프 내에서. 최상위 솔루션은 작동하지 않았으며 (푸시 함수의 매개 변수에 변수를 사용하고 문자열을 사용하지 않는 경우) 다른 변수는 변수를 기반으로 키 값을 고려하지 않았습니다. 나는이 접근법 (php에서 일반적 임)이 효과가 있다는 것에 놀랐습니다.

  // example dict/json                  
  var iterateDict = {'record_identifier': {'content':'Some content','title':'Title of my Record'},
    'record_identifier_2': {'content':'Some  different content','title':'Title of my another Record'} };

  var array = [];

  // key to reduce the 'record' to
  var reduceKey = 'title';

  for(key in iterateDict)
   // ultra-safe variable checking...
   if(iterateDict[key] !== undefined && iterateDict[key][reduceKey] !== undefined)
    // build element to new array key
     array[key]=iterateDict[key][reduceKey];

1

개선 var dict = {}은 사용하는 것입니다var dict = Object.create(null) 입니다.

이것은 않는 빈 객체 생성됩니다 하지 가 Object.prototype그것의 프로토 타입을.

var dict1 = {};
if (dict1["toString"]){
    console.log("Hey, I didn't put that there!")
}
var dict2 = Object.create(null);
if (dict2["toString"]){
    console.log("This line won't run :)")
}

1

배열을 전체적으로 초기화

var dict = []

사전에 객체 추가

dict.push(
     { key: "One",value: false},
     { key: "Two",value: false},
     { key: "Three",value: false});

Output : 
   [0: {key: "One", value: false}
    1: {key: "Two", value: false}
    2: {key: "Three", value: false}]

사전에서 객체 업데이트

Object.keys(dict).map((index) => {        
  if (index == 1){
    dict[index].value = true
  }
});

Output : 
   [0: {key: "One", value: false},
    1: {key: "Two", value: true},
    2: {key: "Three", value: false}]

사전에서 객체 삭제

Object.keys(dict).map((index) => {              
      if (index == 2){
        dict.splice(index)
      }
    });

Output : 
    [0: {key: "One", value: false},
     1: {key: "Two", value: true}]
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.