jQuery를 사용하여 JS 객체를 배열로 변환


417

내 응용 프로그램은 다음과 같은 JavaScript 객체를 만듭니다.

myObj= {1:[Array-Data], 2:[Array-Data]}

그러나이 객체는 배열로 필요합니다.

array[1]:[Array-Data]
array[2]:[Array-Data]

그래서 객체를 $.each통해 반복 하고 요소를 배열에 추가 하여이 객체를 배열로 변환하려고했습니다 .

x=[]
$.each(myObj, function(i,n) {
    x.push(n);});

객체를 배열 또는 함수로 변환하는 더 좋은 방법이 있습니까?


1
배열 인덱스가 원래 객체의 키와 같아야합니까? 배열의 첫 번째 색인은 항상 0이지만 자신의 코드와 대부분의 답변 (수락 된 것을 포함)은 무시하는 것 같습니다. 그래도 편집 결과를 원하는 예제 결과로 되돌 렸습니다.
Imre

1
0과 첫 번째 배열 요소의 시작은하지만 가능한 한 그 예를 간단하게 유지하기 위해 내 눈에서 일치하지 않습니다 때문에 변화 때문에, 당신의 편집을 되돌릴 : 예, 맞아요 myObj= {1:[Array-Data]하려면 myObj= {0:[Array-Data](내가 바로 기억하는) 당신의 편집의 일부가 아니었다
Bndr

3
JQuery와 사용 $ .makeArray (OBJ) 그것을 위해 명령을 api.jquery.com/jQuery.makeArray
DevlshOne

@DevlshOne u가 제공 한 문서 : "jQuery 객체를 배열로 돌리십시오"라고 말하면 이것이 OP 질문에 맞지 않는다고 생각합니다.
Alex

답변:


429
var myObj = {
    1: [1, 2, 3],
    2: [4, 5, 6]
};

var array = $.map(myObj, function(value, index) {
    return [value];
});


console.log(array);

산출:

[[1, 2, 3], [4, 5, 6]]

8
@Dogbert, 설명해 주 $.map시겠습니까? 내가 시도하는 모든 검색은 jQuery 또는 배열의 맵 메소드에 대한 많은 링크를 나타냅니다.
crantok

21
도! 내 의견을 무시하십시오. 이 질문에서 jQuery 태그를 보지 못했습니다.
crantok

8
새로운 배열에서 키를 유지하는 방법이 있습니까? www의 모든 대답에는 키 변환이 부족합니다.
TD_Nijboer

55
jQuery 없이도이 작업을 수행 할 수 있습니다. Object.keys (myObject) .map (function (val) {return [val]});
Kris Erickson

3
@TD_Nijboer 예, value.key = index; return [value];대신 사용return [value];
Simon Arnold

742

기능적인 접근 방식을 찾고 있다면 :

var obj = {1: 11, 2: 22};
var arr = Object.keys(obj).map(function (key) { return obj[key]; });

결과 :

[11, 22]

ES6 화살표 기능과 동일합니다.

Object.keys(obj).map(key => obj[key])

ES7을 사용하면 Object.values대신 사용할 수 있습니다 ( 자세한 정보 ).

var arr = Object.values(obj);

또는 이미 Underscore / Lo-Dash를 사용중인 경우 :

var arr = _.values(obj)


3
최고 답변에 만족하지 않고, 나는이 거의 정확한 기능을 썼고 답으로 게시하고 아래로 스크롤하여 170을 보았습니다. 실현, 사람 포기하지 않았다면 생각하지 않았을 것입니다 :) 맨 위에 있어야합니다. OP pls는 답변으로 선택합니다.
j03m

1
이것이 분명하지 않은 사람에게는 키가 순차적 일 필요는 없다 (즉,이 예에서는 1과 2 임) – 문자열 키 또는 비 순차 번호 일 수도 있음
Simon_Weaver

코드의 첫 단락에서 세미콜론이 누락되었습니다. 이유가 확실하지 않습니다.
JohnnyBizzle

@JohnnyBizzle 나는 당신의 linter가 "return obj [key];"를 써야한다고 생각합니다. 끝에 세미콜론이 있습니다. 그러나 JavaScript는 그렇지 않습니다.
Joel Richard

30

나는 당신이 사용할 수 있다고 생각 for in하지만 재산이 inerithed되지 않은지 확인

myObj= {1:[Array-Data], 2:[Array-Data]}
var arr =[];
for( var i in myObj ) {
    if (myObj.hasOwnProperty(i)){
       arr.push(myObj[i]);
    }
}

편집-원하는 경우 객체의 인덱스를 유지할 수도 있지만 숫자인지 확인해야합니다 (그리고 누락 된 인덱스에 대해 정의되지 않은 값을 얻습니다).

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

myObj= {1:[1,2], 2:[3,4]}
var arr =[];
for( var i in myObj ) {
    if (myObj.hasOwnProperty(i)){
        if (isNumber(i)){
            arr[i] = myObj[i];
        }else{
          arr.push(myObj[i]);
        }
    }
}

1
코드를 테스트 했어야합니다. $.map납작 해 Array-Data집니다.
Marko Dumic

당신은 옳습니다. 배열로 테스트하지 않았고 맵으로 평탄화했습니다! 나는 답을 수정했다
Nicola Peluchetti

: @Nicola Peluchetti $ .makeArray ()는 좋은 소리지만, 단순히 배열 요소에 목적을두고 있기 때문에 내가 찾던되지 [{1:[Array-Data], 2:[Array-Data]}]그리고 $.map()성공적으로 보이지 않는다 또한. 모든 하위 배열 데이터가 하나의 배열로 병합된다는 점에서 차이가 있습니다. array.length(2 개의 요소가 존재하기 때문에) 2를 반환해야하지만, 모든 [ "Array-Data"]에있는 모든 요소의 수인 67을 반환합니다.
Bndr

@ The Bndr 나는 다른 해결책을 게시했지만 dogbert가 제안한대로 map을 사용할 수 있습니다.
Nicola Peluchetti

배열 인덱스를 명시 적으로 지정해야한다고 생각합니다. arr[+i] = myObj[i];(i) for(...in...)어떤 순서로든 속성을 반환한다고 보장 할 수 없기 때문에 ( ii) OP의 예에서는 속성이 0이 아닌 1부터 시작합니다.
Salman A

30

간단히

Object.values(obj);

그게 다야!


11
Object.values는 Safari, IE, Node 6에서 지원되지 않는 ES2017 방법입니다.
Phil Ricketts

25

객체의 최대 색인을 알고 있으면 다음을 수행 할 수 있습니다.

var myObj = {
    1: ['c', 'd'],
    2: ['a', 'b']
  },
  myArr;

myObj.length = 3; //max index + 1
myArr = Array.prototype.slice.apply(myObj);
console.log(myArr); //[undefined, ['c', 'd'], ['a', 'b']]


1
객체를 생성하는 코드가 길이를 설정하거나 실제로 그것을 배열로 만드는 것이 훨씬 좋습니다. 나는 어느 쪽도 가능하다고 기대하지 않으므로이 대답은 도움이되지 않습니다.
user2000095-tim

myObj.length = Object.keys(myObj).length
baldrs

19

ES5 Object.keys ()는 객체에 직접 정의 된 속성을 포함하는 배열을 반환하므로 (프로토 타입 체인에 정의 된 속성 제외) :

Object.keys(yourObject).map(function(key){ return yourObject[key] });

ES6는 화살표 기능으로 한 단계 더 발전했습니다.

Object.keys(yourObject).map(key => yourObject[key]);

1
현재 ES5의 경우 (ES6을 즐기지 만) : Object.keys (yourObject) .map (function (key) {return yourObject [key]});
David Zorychta

18

요즘에는 간단한 방법이 있습니다 : Object.values ​​() .

var myObj = {
    1: [1, 2, 3],
    2: [4, 5, 6]
};

console.log(Object.values(myObj));

산출:

[[1, 2, 3], [4, 5, 6]]

이것은 jQuery가 필요하지 않으며 ECMAScript 2017에 정의되어 있습니다.
모든 최신 브라우저에서 지원됩니다 (IE는 잊어 버리십시오).


내가 비슷한 것을 var state = { ingredient: { salad: 1, bacon: 1, } }하고 그 var HariOm = Object.values(state);뒤에 console.log(typeof HariOM)유형을 객체로 표시합니다. 배열로 표시해서는 안됩니까?
iRohitBhatia 21시 07 분

그것은 완전히 정상입니다. 여기에서 참조를 확인하십시오 : developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…- 사용 가능Array.isArray(HariOM)
Stopi

16

가장 좋은 방법은 자바 스크립트 전용 함수를 사용하는 것입니다.

var myArr = Array.prototype.slice.call(myObj, 0);

@Qwerty 어떤 브라우저?
test30

크롬. 테스트var myObj = {1:[1,2,3],2:[4,5,6]};
Qwerty

이 방법은 "배열과 같은 객체"를 변환하는 데 사용됩니다. 즉, "길이"속성과 0부터 시작하여 열거 된 속성을 가져야한다는 것을 의미합니다. 따라서 @Qwerty의 예제를 작동 시키려면 {0 : [1 , 2,3], 1 : [4,5,6], 길이 : 2}. 색인 값과 길이 값을 실험 해보십시오. nfriedly.com/techblog/2009/06/… 라는 주제에 대해 잘 읽어보십시오. "Array-like Objects"로 건너 뛰십시오.
Matt

15
x = [];
for( var i in myObj ) {
    x[i] = myObj[i];
}

10
푸시를 사용해야합니다. 그렇지 않으면 객체를 만들 수 있습니다.
Nicola Peluchetti

어쩌면 인덱스를 작성하는 것이 더 나은 힘 일 것입니다. var bbb = {'1': 'a', '3': 'b'}; var x = []; for (var i in bbb) { x[parseInt(i)] = bbb[i];} console.log(x);
tres.14159

15

ECMASCRIPT 5 :

Object.keys(myObj).map(function(x) { return myObj[x]; })

ECMASCRIPT 2015 또는 ES6 :

Object.keys(myObj).map(x => myObj[x])

13

어때요? jQuery.makeArray(obj)

이것이 내 앱에서 수행 한 방법입니다.


2
위 예제에서 [Object]를 반환합니다.
Kris Erickson

1
[0] 지수를 추가하는 문제만으로도 내 생명을 구할 수
Raheel

6

해결은 매우 간단합니다

var my_obj = {1:[Array-Data], 2:[Array-Data]}
Object.keys(my_obj).map(function(property_name){ 
    return my_obj[property_name]; 
});


3

Fiddle Demo

bjornd의 답변 확장 .

var myObj = {
    1: [1, [2], 3],
    2: [4, 5, [6]]
}, count = 0,
    i;
//count the JavaScript object length supporting IE < 9 also
for (i in myObj) {
    if (myObj.hasOwnProperty(i)) {
        count++;
    }
}
//count = Object.keys(myObj).length;// but not support IE < 9
myObj.length = count + 1; //max index + 1
myArr = Array.prototype.slice.apply(myObj);
console.log(myArr);


참고

Array.prototype.slice ()

Function.prototype.apply ()

Object.prototype.hasOwnProperty ()

Object.keys ()


내가 틀렸을 수도 있지만 myObj가 0부터 열거 가능한 것이 더 좋을까요? 그 외에는 배열에 문제가있는 것 같습니다. [undefined, [1, [2], 3]] (첫 번째 부분은 myObj [ '0']을 찾을 수 없기 때문에 정의되지 않았습니다. .length를 읽은 후 myObj [ '1']에서 멈추기 때문에 마지막 부분 myObj [ '2']가 배출됩니까?
Alex Werner

2

객체 속성의 이름을 값으로 유지하려는 경우. 예:

var fields = {
    Name: { type: 'string', maxLength: 50 },
    Age: { type: 'number', minValue: 0 }
}

사용 Object.keys(), Array.map()Object.assign():

var columns = Object.keys( fields ).map( p => Object.assign( fields[p], {field:p} ) )

결과:

[ { field: 'Name', type: 'string', maxLength: 50 }, 
  { field: 'Age', type: 'number', minValue: 0 } ]

설명:

Object.keys()소스의 모든 속성을 열거합니다. 함수를 각 속성에 .map()적용하고 =>Array를 반환합니다. Object.assign()각 속성의 이름과 값을 병합합니다.


1

사용자 정의 기능을 만들었습니다.

    Object.prototype.toArray=function(){
    var arr=new Array();
    for( var i in this ) {
        if (this.hasOwnProperty(i)){
            arr.push(this[i]);
        }
    }
    return arr;
};

0

몇 가지 테스트 후 다음은 일반적인 객체 대 배열 함수 변환기입니다.

당신은 객체가 있습니다 :

var obj = {
    some_key_1: "some_value_1"
    some_key_2: "some_value_2"
};

함수:

function ObjectToArray(o)
{
    var k = Object.getOwnPropertyNames(o);
    var v = Object.values(o);

    var c = function(l)
    {
        this.k = [];
        this.v = [];
        this.length = l;
    };

    var r = new c(k.length);

    for (var i = 0; i < k.length; i++)
    {
        r.k[i] = k[i];
        r.v[i] = v[i];
    }

    return r;
}

기능 사용 :

var arr = ObjectToArray(obj);

당신은 얻는다 :

arr {
    key: [
        "some_key_1",
        "some_key_2"
    ],
    value: [
        "some_value_1",
        "some_value_2"
    ],
    length: 2
}

그러면 다음과 같은 모든 키와 값에 도달 할 수 있습니다.

for (var i = 0; i < arr.length; i++)
{
    console.log(arr.key[i] + " = " + arr.value[i]);
}

콘솔 결과 :

some_key_1 = some_value_1
some_key_2 = some_value_2

편집하다:

또는 프로토 타입 형태로 :

Object.prototype.objectToArray = function()
{
    if (
        typeof this != 'object' ||
        typeof this.length != "undefined"
    ) {
        return false;
    }

    var k = Object.getOwnPropertyNames(this);
    var v = Object.values(this);

    var c = function(l)
    {
        this.k = [];
        this.v = [];
        this.length = l;
    };

    var r = new c(k.length);

    for (var i = 0; i < k.length; i++)
    {
        r.k[i] = k[i];
        r.v[i] = v[i];
    }

    return r;
};

그런 다음 다음과 같이 사용하십시오.

console.log(obj.objectToArray);

0

에서 object로 변환하는 간단한 함수를 만들 수 있습니다 array. 순수한 자바 스크립트를 사용하면 다음과 같은 작업을 수행 할 수 있습니다.

var objectToArray = function(obj) {
  var arr = [];
  if ('object' !== typeof obj || 'undefined' === typeof obj || Array.isArray(obj)) {
    return obj;
  } else {
    Object.keys(obj).map(x=>arr.push(obj[x]));
  }
  return arr;
};

또는 이것 :

var objectToArray = function(obj) {
  var arr =[];
  for(let o in obj) {
    if (obj.hasOwnProperty(o)) {
      arr.push(obj[o]);
    }
  }
  return arr;
};

다음과 같이 함수를 호출하고 사용하십시오.

var obj = {1:'a', 2:'b', 3:'c', 4:'d', 5:'e'};
objectToArray(obj); // return ["a", "b", "c", "d", "e"]

또한 미래에 우리는 Object.values(obj)비슷한 Object.keys(obj)속성을 가질 것입니다.이 속성은 배열로 당신을 위해 모든 속성을 반환하지만 아직 많은 브라우저에서 지원되지 않습니다 ...

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.