ฉันจะแปลงอาร์เรย์ของออบเจ็กต์เป็นออบเจ็กต์เดียวใน JavaScript ได้อย่างไร


109

ฉันมีอาร์เรย์ของวัตถุ:

[ 
  { key : '11', value : '1100', $$hashKey : '00X' },
  { key : '22', value : '2200', $$hashKey : '018' }
];

ฉันจะแปลงเป็น JavaScript ต่อไปนี้ได้อย่างไร

{
  "11": "1000",
  "22": "2200"
}

4
[{key:"11", value:"1100"}, {key:"22", value:"2200"}].reduce(function(m,v){m[v.key] = v.value; return m;}, {})
david

คำตอบ:


57

คุณอาจกำลังมองหาสิ่งนี้:

// original
var arr = [ 
  {key : '11', value : '1100', $$hashKey : '00X' },
  {key : '22', value : '2200', $$hashKey : '018' }
];

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

console.log(result);


2
ตรวจสอบคำตอบของ FirstOneสำหรับแนวทางที่ทันสมัย
Tibos

151

โซลูชัน ES6 ขนาดเล็กสามารถมีลักษณะดังนี้:

var arr = [{key:"11", value:"1100"},{key:"22", value:"2200"}];
var object = arr.reduce(
  (obj, item) => Object.assign(obj, { [item.key]: item.value }), {});

console.log(object)

นอกจากนี้หากคุณใช้การแพร่กระจายของวัตถุจะมีลักษณะดังนี้:

var object = arr.reduce((obj, item) => ({...obj, [item.key]: item.value}) ,{});

อีกวิธีหนึ่งที่เร็วกว่า 99% คือ (ทดสอบบน jsperf):

var object = arr.reduce((obj, item) => (obj[item.key] = item.value, obj) ,{});

ที่นี่เราได้รับประโยชน์จากตัวดำเนินการลูกน้ำโดยจะประเมินนิพจน์ทั้งหมดก่อนเครื่องหมายจุลภาคและส่งกลับค่าสุดท้าย (หลังเครื่องหมายจุลภาคสุดท้าย) ดังนั้นเราจึงไม่คัดลอกobjทุกครั้ง แต่จะกำหนดคุณสมบัติใหม่ให้กับมัน


3
รักคน! var object = arr.reduce((obj, item) => (obj[item.key] = item.value, obj) ,{});
Sohail

สายนี้เร็วกว่าหรือวนซ้ำ?
Jeb50

2
@ Jeb50 ลูปแบบเดิมเร็วที่สุด แต่ไม่มากไปกว่าตัวดำเนินการลูกน้ำ ตัวดำเนินการ Object.assign / การแพร่กระจายเป็นลำดับของขนาดที่ช้าลง: jsperf.com/comma-operator-js
Josh Geller

1
คุณลืมกระจายวัตถุชิ้นที่สอง({...obj, ...{[item.key]: item.value}}) ,{});
Julia

ขอบคุณไม่จำเป็นต้องห่อสิ่งนี้ในวัตถุ ฉันได้รับการแก้ไขแล้ว
Shevchenko Viktor

60

ฉันชอบวิธีการใช้งานเพื่อให้บรรลุภารกิจนี้:

var arr = [{ key:"11", value:"1100" }, { key:"22", value:"2200" }];
var result = arr.reduce(function(obj,item){
  obj[item.key] = item.value; 
  return obj;
}, {});

หมายเหตุ: ค่าสุดท้าย{}คือobjค่าเริ่มต้นสำหรับฟังก์ชันลดหากคุณไม่ระบุค่าเริ่มต้นarrองค์ประกอบแรกจะถูกใช้ (ซึ่งอาจไม่เป็นที่ต้องการ)

https://jsfiddle.net/GreQ/2xa078da/


2
และถ้าคีย์เป็นแบบไดนามิก?
Stefano Saitta

1
คุณควรทราบว่าคุณสมบัติใดของรายการ / วัตถุที่กำหนดควรใช้เป็นคีย์และเป็นค่า no? แต่ถ้าเราสมมติว่า wfirst prop เป็นคีย์เสมอและค่าที่สองเราสามารถใช้ฟังก์ชันเรียกกลับเช่นนี้ function (obj, item) {var keys = item.keys (); obj [รายการ [คีย์ [0]]] = รายการ [คีย์ [0]]; กลับ obj; }
GreQ

การแก้ไขการเรียกกลับด้านบน: code var obj = arr.reduce (function (obj, item) {var keys = Object.keys (item); obj [item [keys [0]]] = item [keys [1]]; return obj;}, {});
GreQ

60

กำลังพยายามแก้ไขคำตอบนี้ในฉันจะแปลงอาร์เรย์ของออบเจ็กต์เป็นออบเจ็กต์เดียวใน JavaScript ได้อย่างไร ,

สิ่งนี้ควรทำ:

var array = [
    {key:'k1',value:'v1'},
    {key:'k2',value:'v2'},
    {key:'k3',value:'v3'}
];
var mapped = array .map(item => ({ [item.key]: item.value }) );
var newObj = Object.assign({}, ...mapped );
console.log(newObj );


หนึ่งในสายการบิน:

var newObj = Object.assign({}, ...(array.map(item => ({ [item.key]: item.value }) )));


13

วิธีง่ายๆในการดำเนินการโดยใช้ JavaScript สมัยใหม่มีดังนี้:

const array = [
  { name: "something", value: "something" },
  { name: "somethingElse", value: "something else" },
];

const newObject = Object.assign({}, ...array.map(item => ({ [item.name]: item.value })));

// >> { something: "something", somethingElse: "something else" }


6

จากคำตอบที่แนะนำโดยผู้เขียนหลายคนฉันสร้างสถานการณ์ทดสอบ JsPref https://jsperf.com/array2object82364

ด้านล่างนี้คือภาพหน้าจอของประสิทธิภาพ เป็นเรื่องที่น่าตกใจเล็กน้อยสำหรับฉันที่เห็นผลลัพธ์ของโครเมี่ยมนั้นตรงกันข้ามกับ firefox และ edge แม้ว่าจะเรียกใช้งานหลายครั้งก็ตาม

ขอบ

Firefox

โครเมียม


2

การใช้Underscore.js :

var myArray = [
  Object { key="11", value="1100", $$hashKey="00X"},
  Object { key="22", value="2200", $$hashKey="018"}
];
var myObj = _.object(_.pluck(myArray, 'key'), _.pluck(myArray, 'value'));

2

อัปเดต: โลกหมุนไปเรื่อย ๆ ใช้วิธีการทำงานแทน

ได้แล้ว:

var arr = [{ key: "11", value: "1100" }, { key: "22", value: "2200" }];
var result = {};
for (var i=0, len=arr.length; i < len; i++) {
    result[arr[i].key] = arr[i].value;
}
console.log(result); // {11: "1000", 22: "2200"}

สิ่งนี้คล้ายกับคำตอบที่ใครบางคนโพสต์ไว้เมื่อ 5 นาทีที่แล้วอย่างน่าประหลาดใจ
Alexander

1
เพราะนั่นคือวิธีที่คุณแก้ปัญหานี้ เกี่ยวกับการตั้งชื่อเช่น: arrayเป็นคำหลักที่สงวนไว้เพื่อให้ผู้คนใช้arrแทน ฯลฯ
pstadler

0

ต่อไปนี้เป็นวิธียอมรับสิ่งที่กล่าวมาข้างต้นเป็นสตริงและสอดแทรกเข้ากับวัตถุ

var stringObject = '[Object { key="11", value="1100", $$hashKey="00X"}, Object { key="22", value="2200", $$hashKey="018"}]';

function interpolateStringObject(stringObject) {
  var jsObj = {};
  var processedObj = stringObject.split("[Object { ");
  processedObj = processedObj[1].split("},");
  $.each(processedObj, function (i, v) {
      jsObj[v.split("key=")[1].split(",")[0]] = v.split("value=")[1].split(",")[0].replace(/\"/g,'');
  });

  return jsObj
}

var t = interpolateStringObject(stringObject); //t is the object you want

http://jsfiddle.net/3QKmX/1/


0

// original
var arr = [{
    key: '11',
    value: '1100',
    $$hashKey: '00X'
  },
  {
    key: '22',
    value: '2200',
    $$hashKey: '018'
  }
];

// My solution
var obj = {};
for (let i = 0; i < arr.length; i++) {
  obj[arr[i].key] = arr[i].value;
}
console.log(obj)


แม้ว่าสิ่งนี้อาจตอบคำถามได้ แต่คุณควรเพิ่มคำอธิบายว่าคำตอบนี้จะช่วยแก้ปัญหาได้อย่างไร โปรดอ่านฉันจะเขียนคำตอบที่ดีเพื่อทราบข้อมูลเพิ่มเติมได้อย่างไร
Roshana Pitigala

0

คุณสามารถใช้ฟังก์ชัน lodash mapKeys ได้ รหัสเพียงบรรทัดเดียว!

โปรดดูตัวอย่างโค้ดที่สมบูรณ์นี้ (คัดลอกวางลงใน repl.it หรือคล้ายกัน):

import _ from 'lodash';
// or commonjs:
// const _ = require('lodash');

let a = [{ id: 23, title: 'meat' }, { id: 45, title: 'fish' }, { id: 71, title: 'fruit' }]
let b = _.mapKeys(a, 'id');
console.log(b);
// b:
// { '23': { id: 23, title: 'meat' },
//   '45': { id: 45, title: 'fish' },
//   '71': { id: 71, title: 'fruit' } }
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.