การแปลงวัตถุ JS เป็นอาร์เรย์โดยใช้ jQuery


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 เอกสารที่ให้ไว้พูดว่า: "เปลี่ยนวัตถุ 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
D'โอ้! ละเว้นความคิดเห็นของฉัน ฉันไม่พบแท็ก jQuery ในคำถามนี้
crantok

8
มีวิธีการรักษากุญแจในแถวใหม่หรือไม่? ทุกคำตอบบน www ฉันเห็นการเปลี่ยนแปลงของคีย์ไม่เพียงพอ
TD_Nijboer

55
คุณสามารถทำได้โดยไม่ต้อง jQuery: Object.keys (myObject) .map (function (val) {return [val]});
กริชเอริคสัน

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 กรุณาเลือกเป็นคำตอบ
j03m

1
สำหรับผู้ที่ไม่ชัดเจนปุ่มไม่จำเป็นต้องเรียงลำดับ (เช่นในตัวอย่างนี้พวกเขาคือ 1 และ 2 - แต่พวกเขาสามารถเป็นคีย์สตริงหรือหมายเลขที่ไม่เรียงลำดับได้
Simon_Weaver

สำหรับวรรคแรกของรหัสฉันได้หายเซมิโคลอน ไม่แน่ใจว่าทำไม
JohnnyBizzle

@JohnnyBizzle ฉันเดาว่าคุณต้องใช้ linter เขียน "return obj [key];" ด้วยเครื่องหมายอัฒภาคในที่สุด จาวาสคริปต์ไม่ได้
โจเอลริชาร์ด

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()ยังดูไม่สำเร็จด้วย เป็นข้อมูลที่รวมข้อมูล Sub-Array ทั้งหมดเข้ากับหนึ่งอาเรย์ array.lengthควรคืนค่า 2 (เนื่องจากมี 2 องค์ประกอบ) แต่จะคืนค่า 67 ซึ่งเป็นจำนวนองค์ประกอบทั้งหมดในทุก ["Array-Data"]
Bndr

@The Bndr ฉันโพสต์วิธีแก้ปัญหาอื่น แต่คุณสามารถใช้แผนที่ตามคำแนะนำโดย dogbert
Nicola Peluchetti

ฉันคิดว่าคุณต้องระบุดัชนี array ... อย่างชัดเจนarr[+i] = myObj[i];เพราะ (i) for(...in...)ไม่รับประกันว่าจะส่งคืนคุณสมบัติในลำดับใด ๆ (ii) ในตัวอย่างของ OP คุณสมบัติเริ่มต้นจาก 1 ไม่ใช่ 0
Salman A

30

เพียงแค่ทำ

Object.values(obj);

นั่นคือทั้งหมด!


11
Object.values ​​เป็นวิธี ES2017 ที่ไม่ได้รับการสนับสนุนใน Safari, IE, Node 6
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
หัวล้าน

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 (ฟังก์ชั่น (กุญแจ) {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

เป็นเรื่องปกติอย่างสมบูรณ์ตรวจสอบข้อมูลอ้างอิงที่นี่: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… - คุณสามารถใช้Array.isArray(HariOM)
Stopi

16

วิธีที่ดีที่สุดคือใช้จาวาสคริปต์ - เฉพาะฟังก์ชั่น:

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

@Qwerty เบราว์เซอร์ใด
ทดสอบ 30

โครเมียม. ทดสอบกับ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/… ข้ามไปที่ "วัตถุที่เหมือนอาร์เรย์"
แมตต์

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


13

เกี่ยวกับ jQuery.makeArray(obj)

นี่คือสิ่งที่ฉันทำในแอปของฉัน


2
สิ่งนี้จะคืนค่า [Object] สำหรับตัวอย่างข้างต้น
Kris Erickson

1
เพียงแค่เรื่องของการเพิ่ม [0] ดัชนีและคุณช่วยชีวิตฉันไว้ :)
Raheel



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? อย่างอื่นดูเหมือนว่าฉันมีปัญหาที่ Array ของเรา: [undefined, [1, [2], 3]] (ส่วนแรกไม่ได้กำหนดเนื่องจากไม่พบ myObj ['0'] และส่วนสุดท้าย myObj ['2'] ถูกกดออกเพราะหลังจากอ่านแล้วความยาวจะหยุดที่ myObj ['1']?
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.