วิธีการต่อคุณสมบัติจากวัตถุ JavaScript หลายตัว

ฉันกำลังมองหาวิธีที่ดีที่สุดในการ "เพิ่ม" ออบเจ็กต์ JavaScript หลายตัว (Associative Arrays)

ตัวอย่างเช่นกำหนด:

a = { "one" : 1, "two" : 2 };
b = { "three" : 3 };
c = { "four" : 4, "five" : 5 };

วิธีที่ดีที่สุดในการคำนวณคืออะไร:

{ "one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 }

ECMAscript 6 ได้รับการแนะนำObject.assign()เพื่อให้บรรลุสิ่งนี้โดยกำเนิดใน Javascript

Object.assign ()วิธีการที่ใช้ในการคัดลอกค่าของคุณสมบัติของตัวเองทั้งหมดนับจากวัตถุหนึ่งหรือหลายแหล่งไปยังวัตถุเป้าหมาย มันจะส่งคืนวัตถุเป้าหมาย

เอกสาร MDN บน Object.assign ()

var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };

var obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

Object.assignได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่จำนวนมากแต่ยังไม่ครบทั้งหมด ใช้ตัวส่งสัญญาณเช่นBabelและTraceurเพื่อสร้าง ES5 JavaScript ที่เข้ากันได้แบบย้อนกลับ

คุณสามารถใช้ jquery $.extendเช่นนี้:

let a = { "one" : 1, "two" : 2 },
    b = { "three" : 3 },
    c = { "four" : 4, "five" : 5 };

let d = $.extend({}, a, b, c)

console.log(d)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

function collect() {
  var ret = {};
  var len = arguments.length;
  for (var i = 0; i < len; i++) {
    for (p in arguments[i]) {
      if (arguments[i].hasOwnProperty(p)) {
        ret[p] = arguments[i][p];
      }
    }
  }
  return ret;
}

let a = { "one" : 1, "two" : 2 };
let b = { "three" : 3 };
let c = { "four" : 4, "five" : 5 };

let d = collect(a, b, c);
console.log(d);

เอาท์พุต:

{
  "one": 1,
  "two": 2,
  "three": 3,
  "four": 4,
  "five": 5
}

ECMAScript 6 มีไวยากรณ์การแพร่กระจาย และตอนนี้คุณสามารถทำได้:

const obj1 = { 1: 11, 2: 22 };
const obj2 = { 3: 33, 4: 44 };
const obj3 = { ...obj1, ...obj2 };

console.log(obj3); // {1: 11, 2: 22, 3: 33, 4: 44}

ขีดล่างมีวิธีการไม่กี่วิธีในการทำเช่นนี้

1. _.extend (ปลายทาง * แหล่งที่มา)

คัดลอกคุณสมบัติทั้งหมดในออบเจ็กต์ต้นทางไปยังอ็อบเจ็กต์ปลายทางและส่งคืนอ็อบเจ็กต์ปลายทาง

_.extend(a, _.extend(b, c));
=> {"one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 }

หรือ

_.extend(a, b);
=> {"one" : 1, "two" : 2, "three" : 3}
_.extend(a, c);
=> {"one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 }

2. _.defaults (วัตถุ * ค่าเริ่มต้น)

กรอกข้อมูลในที่ไม่ได้กำหนดคุณสมบัติในวัตถุที่มีค่าจากค่าเริ่มต้นของวัตถุและกลับวัตถุ

_.defaults(a, _.defaults(b, c));
=> {"one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 }

หรือ

_.defaults(a, b);
=> {"one" : 1, "two" : 2, "three" : 3}
_.defaults(a, c);
=> {"one" : 1, "two" : 2, "three" : 3, "four" : 4, "five" : 5 }

ตื้นโคลน (ไม่รวมต้นแบบ) หรือการควบรวมกิจการของวัตถุคือตอนนี้ไปได้โดยใช้ไวยากรณ์ที่สั้นกว่าObject.assign ()

ไวยากรณ์การแพร่กระจายสำหรับตัวอักษรอ็อบเจ็กต์ถูกนำมาใช้ใน ECMAScript 2018 ):

const a = { "one": 1, "two": 2 };
const b = { "three": 3 };
const c = { "four": 4, "five": 5 };

const result = {...a, ...b, ...c};
// Object { "one": 1, "two": 2 , "three": 3, "four": 4, "five": 5 }

ตัวดำเนินการ Spread (... )ได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่จำนวนมากแต่ไม่ใช่ทั้งหมด

ดังนั้นขอแนะนำให้ใช้Transpilerเช่นBabelเพื่อแปลงโค้ด ECMAScript 2015+ เป็น JavaScript เวอร์ชันที่เข้ากันได้แบบย้อนหลังในเบราว์เซอร์หรือสภาพแวดล้อมปัจจุบันและเก่ากว่า

นี่คือรหัสเทียบเท่าที่Babel จะสร้างให้คุณ:

"use strict";

var _extends = Object.assign || function(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i];
    for (var key in source) {
      if (Object.prototype.hasOwnProperty.call(source, key)) {
        target[key] = source[key];
      }
    }
  }
  return target;
};

var a = { "one": 1, "two": 2 };
var b = { "three": 3 };
var c = { "four": 4, "five": 5 };

var result = _extends({}, a, b, c);
// Object { "one": 1, "two": 2 , "three": 3, "four": 4, "five": 5 }

เหตุใดจึงควร จำกัด ฟังก์ชันไว้ที่ 3 อาร์กิวเมนต์ ตรวจสอบhasOwnPropertyด้วย

function Collect() {
    var o={};
    for(var i=0;i<arguments.length;i++) {
      var arg=arguments[i];
      if(typeof arg != "object") continue;
      for(var p in arg) {
        if(arg.hasOwnProperty(p)) o[p] = arg[p];
      }
    }
    return o;
}

function Collect(a, b, c) {
    for (property in b)
        a[property] = b[property];

    for (property in c)
        a[property] = c[property];

    return a;
}

ข้อสังเกต: คุณสมบัติที่มีอยู่ในวัตถุก่อนหน้าจะถูกเขียนทับ

เป็นเรื่องง่ายโดยใช้ตัวดำเนินการแพร่กระจาย ES7สำหรับวัตถุในคอนโซลเบราว์เซอร์ของคุณ

({ name: "Alex", ...(true  ? { age: 19 } : { })}) // {name: "Alex", age: 19}
({ name: "Alex", ...(false ? { age: 19 } : { })}) // {name: "Alex",        }

การผสานจำนวนแบบไดนามิกของวัตถุที่เราสามารถใช้Object.assignกับการแพร่กระจายไวยากรณ์

const mergeObjs = (...objs) => Object.assign({}, ...objs);

ฟังก์ชั่นข้างต้นยอมรับวัตถุจำนวนเท่าใดก็ได้รวมคุณสมบัติทั้งหมดเข้ากับวัตถุใหม่โดยมีคุณสมบัติจากวัตถุในภายหลังเขียนทับสิ่งเหล่านั้นจากวัตถุก่อนหน้า

การสาธิต:

const mergeObjs = (...objs) => Object.assign({}, ...objs);
const a = {prop: 1, prop2: '2'},
      b = {prop3: 3, prop4: [1,2,3,4]}
      c = {prop5: 5},
      d = {prop6: true, prop7: -1},
      e = {prop1: 2};
const abcd = mergeObjs(a,b,c,d);
console.log("Merged a,b,c,d:", abcd);
const abd = mergeObjs(a,b,d);
console.log("Merged a,b,d:", abd);
const ae = mergeObjs(a,e);//prop1 from e will overwrite prop1 from a
console.log("Merged a,e:", ae);

ในการผสานอาร์เรย์ของวัตถุอาจใช้วิธีการที่คล้ายกัน

const mergeArrayOfObjs = arr => Object.assign({}, ...arr);

การสาธิต:

const mergeArrayOfObjs = arr => Object.assign({}, ...arr);
const arr = [
  {a: 1, b: 2},
  {c:1, d:3},
  {abcd: [1,2,3,4], d: 4}
];
const merged = mergeArrayOfObjs(arr);
console.log(merged);

เป็นไปได้ว่าวิธีที่เร็วที่สุดมีประสิทธิภาพและทั่วไปกว่าคือวิธีนี้ (คุณสามารถรวมวัตถุจำนวนเท่าใดก็ได้และแม้แต่คัดลอกไปยังรายการแรก -> กำหนด):

function object_merge(){
    for (var i=1; i<arguments.length; i++)
       for (var a in arguments[i])
         arguments[0][a] = arguments[i][a];
   return arguments[0];
}

นอกจากนี้ยังช่วยให้คุณแก้ไขวัตถุแรกเมื่อส่งผ่านโดยการอ้างอิง หากคุณไม่ต้องการสิ่งนี้ แต่ต้องการมีวัตถุใหม่ที่มีคุณสมบัติทั้งหมดคุณสามารถส่ง {} เป็นอาร์กิวเมนต์แรกได้

var object1={a:1,b:2};
var object2={c:3,d:4};
var object3={d:5,e:6};
var combined_object=object_merge(object1,object2,object3); 

Combined_object และ object1 ทั้งสองมีคุณสมบัติของ object1, object2, object3

var object1={a:1,b:2};
var object2={c:3,d:4};
var object3={d:5,e:6};
var combined_object=object_merge({},object1,object2,object3); 

ในกรณีนี้ Combined_object มีคุณสมบัติของ object1, object2, object3 แต่ object1 ไม่ได้ถูกแก้ไข

ตรวจสอบที่นี่: https://jsfiddle.net/ppwovxey/1/

หมายเหตุ: วัตถุ JavaScript ถูกส่งผ่านโดยการอ้างอิง

ES6 ++

คำถามคือการเพิ่มต่าง ๆที่แตกต่างกันวัตถุที่เป็นหนึ่ง

let obj = {};
const obj1 = { foo: 'bar' };
const obj2 = { bar: 'foo' };
Object.assign(obj, obj1, obj2);
//output => {foo: 'bar', bar: 'foo'};

สมมติว่าคุณมีวัตถุชิ้นเดียวที่มีหลายปุ่มซึ่งเป็นวัตถุ:

let obj = {
  foo: { bar: 'foo' },
  bar: { foo: 'bar' }
}

นี่คือทางออกที่ฉันพบ (ยังต้อง foreach: /)

let objAll = {};

Object.values(obj).forEach(o => {
  objAll = {...objAll, ...o};
});

การทำเช่นนี้ทำให้เราสามารถเพิ่มคีย์อ็อบเจ็กต์ทั้งหมดลงในปุ่มเดียวได้

// Output => { bar: 'foo', foo: 'bar' }

ง่ายที่สุด: ตัวดำเนินการกระจาย

var obj1 = {a: 1}
var obj2 = {b: 2}
var concat = { ...obj1, ...obj2 } // { a: 1, b: 2 }

function collect(a, b, c){
    var d = {};

    for(p in a){
        d[p] = a[p];
    }
    for(p in b){
        d[p] = b[p];
    }
    for(p in c){
        d[p] = c[p];
    }

    return d;
}