একাধিক জাভাস্ক্রিপ্ট অবজেক্ট থেকে কীভাবে সম্পত্তি যুক্ত করতে হয়


105

আমি একাধিক জাভাস্ক্রিপ্ট অবজেক্ট (সহযোগী অ্যারে) "যুক্ত" করার সর্বোত্তম উপায়টি সন্ধান করছি।

উদাহরণস্বরূপ, প্রদত্ত:

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

গণনা করার সর্বোত্তম উপায় কী:

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

3
একটি শব্দার্থক নোট: [] বাক্য গঠন সত্ত্বেও, তারা মোটেই অ্যারে হয় না। অর্ডার সত্যিই গ্যারান্টিযুক্ত হয় না।
vlvaro González

1
একমা মান অনুসারে আইট্রেশন অর্ডার গ্যারান্টিযুক্ত নয়। তবে বেশিরভাগ ব্রাউজারে এটি প্রয়োগ করা হয়। (জন রেজিগ থেকে) এই আচরণটি ECMAScript স্পেসিফিকেশন দ্বারা স্পষ্টভাবে অপরিবর্তিত রেখে গেছে। ইসিএমএ -২ 26২ তে, বিভাগ 12.6.4: বৈশিষ্ট্যগুলি গণনা করার প্রক্রিয়াগুলি ... বাস্তবায়ন নির্ভর। তবে স্পেসিফিকেশন বাস্তবায়ন থেকে একেবারে পৃথক। ইসমাস্ক্রিপ্টের সমস্ত আধুনিক বাস্তবায়নগুলি তাদের সংজ্ঞা অনুসারে ক্রমতে বস্তুর বৈশিষ্ট্যগুলির মাধ্যমে পুনরাবৃত্তি করে। এর কারণে ক্রোম দলটি এটি একটি বাগ হিসাবে ধরে নিয়েছে এবং এটি ঠিক করবে।
জুয়ান মেন্ডেস

উত্তর:


159

Object.assign()জাভাস্ক্রিপ্টে স্থানীয়ভাবে এটি অর্জনের জন্য ECMAscript 6 চালু হয়েছিল।

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অনেকগুলি আধুনিক ব্রাউজারগুলিতে সমর্থিত তবে সেগুলি এখনও নয়। পিছনে সামঞ্জস্যপূর্ণ ES5 জাভাস্ক্রিপ্ট তৈরি করতে বাবেল এবং ট্রেসারের মতো ট্রান্সপ্লেলার ব্যবহার করুন ।


4
আমি বলতে পারি এটি সেরা। যেহেতু E6 এখন বেশিরভাগ ক্ষেত্রে ব্যবহৃত হয়, তাই অবজেক্ট.সেসাইন সেরা উত্তর।
বিমলরাজ সেল্ভাম

6
আপনি যদি না জানেন যে কতগুলি অবজেক্টকে মার্জ করা দরকার, তবে তারা কোনও অ্যারেতে থাকুন তবে আপনি সেগুলি নীচে হিসাবে মার্জ করতে পারেন:Object.assign.apply({}, [{a: 1}, {b: 2}, ....])
জ্যানলুকা স্কালজেরি

1
একটি Object.assign.applyঅবজেক্টের অ্যারে মার্জ করার জন্য বিকল্পের পরিবর্তে স্প্রেড অপারেটরটি ব্যবহার করা হয়:Object.assign( ...objects )
স্পেন

@ স্পেন যা ইতিমধ্যে এই প্রশ্নের উত্তর হিসাবে অন্তর্ভুক্ত রয়েছে। আমি এখানে এটির সদৃশ করার কোনও সুবিধা দেখিনি।
ফিলোক্সো

4 ঘন্টা পরে, এই উত্তরটি আমার কৌণিক in এ আমার সমস্যার সমাধান করেছে answer উত্তরের সরলতা এবং নির্ভুলতার জন্য ধন্যবাদ।
জেল

35

আপনি 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>


+1 এমনকি আপনি jQuery এর পদ্ধতি ব্যবহার না করলেও আপনি নিজের কোডটি (সম্ভবত আরও সুনির্দিষ্ট) বাস্তবায়নে সহায়তা করতে তাদের কোড ব্যবহার করতে পারেন।
tvanfosson

25
@ রেন্ডাল: jQuery ব্যবহার না করার জন্য অনেকগুলি পুরোপুরি ভাল কারণ রয়েছে।
টিম ডাউন

3
সম্পাদনা করুন:d = $.extend({},a,b,c);
বব স্টেইন

34

এটি করা উচিত:

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
}

lengthপ্রতিটি অনুরোধে অ্যারের আকার অনুসন্ধান করে না ? আমি এতটাই লিখতে অভ্যস্ত for (var i = 0, len = array.length; i < len; ++i)যে আমি কেন এটি শুরু করেছিলাম তা আমার মাথার উপরের দিক থেকে মনে নেই।
tvanfosson

1
হ্যাঁ, এটা সঠিক। দৈর্ঘ্য একবারে ক্যাশে করা ভাল পারফরম্যান্স। তবে, "অ্যারে" যুক্তিগুলির আকারটি খুব বড় হওয়ার সম্ভাবনা না থাকায় এ ক্ষেত্রে সত্যিকার অর্থে তা বিবেচ্য হবে না।
ঝুরশ্মান

1
না, আইই 6 তে সামান্য বাদে। দৈর্ঘ্যের সম্পত্তি অ্যাক্সেস করার জন্য লেন ভেরিয়েবল অ্যাক্সেস করার সমান ব্যয় হয়।
অ্যালসিএন্ডে

1
@ জুয়ান আমি বিশ্বাস করি যে আপনি ভুল, এবং আমি আমার মন তৈরি করার জন্য কিছু পরীক্ষা করেছি। দৈর্ঘ্যটি ক্যাচ করা অপ্টিমাইজেশনের একটি সহজ পৌরাণিক কাহিনী যা বহু বছর ধরে অপ্রচলিত এবং এটি কোডটি (কিছুটা) কম পঠনযোগ্য করে তোলে। প্রকৃতপক্ষে, দৈর্ঘ্যটি ক্যাশে করা কখনও কখনও ব্রাউজারকে সাফ করে দেয় (সাফারি)।
Alsciende

2
'পি (ইন ইন ...' এর পরিবর্তে 'এর জন্য (পি পি ইন ...')
হুগো


12

ইন্ডস্কোরের এটি করার জন্য কয়েকটি পদ্ধতি রয়েছে;

১. _ এক্সেট (গন্তব্য, * উত্স)

কপিতে বৈশিষ্ট্য সব উৎস ধরে বস্তু গন্তব্য বস্তু, এবং রিটার্ন গন্তব্য অবজেক্ট।

_.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 }

২. _ ডিফল্টস (অবজেক্ট, * ডিফল্ট)

পূরণ করুন অনির্ধারিত এ সম্পত্তি বস্তুর থেকে মান অক্ষমতা বস্তু, এবং আসতে বস্তুর

_.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 }

4

কেন ফাংশনটি 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;
}

4

শেলো-ক্লোনিং (প্রোটোটাইপ বাদে) বা অবজেক্টগুলির মার্জ করা এখন অবজেক্ট.সেসাইন () এর চেয়ে সংক্ষিপ্ত বাক্য গঠন ব্যবহার করে সম্ভব ।

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 }

স্প্রেড (...) অপারেটর অনেকগুলি আধুনিক ব্রাউজারে সমর্থিত তবে সেগুলি সমস্ত নয়।

সুতরাং, এটি বাবেলের মতো ট্রান্সপোর্টার ব্যবহার করার পরামর্শ দেওয়া হচ্ছে বর্তমান এবং পুরোনো ব্রাউজারে বা পরিবেশের মধ্যে জাভাস্ক্রিপ্ট একটি সাযুজ্যপূর্ণ সংস্করণ মধ্যে নাম ECMAScript 2015+ কোড রূপান্তর করবে।

এটি আপনার জন্য সমান কোডটি বাবেল উত্পন্ন করবে:

"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
function Collect(a, b, c) {
    for (property in b)
        a[property] = b[property];

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

    return a;
}

বিজ্ঞপ্তি: পূর্ববর্তী বস্তুগুলিতে বিদ্যমান বৈশিষ্ট্যগুলি ওভাররাইট করা হবে।


2
a === dএর শেষ দিকে এটার পার্শ্ব-প্রতিক্রিয়া রয়েছে । এটি ঠিক আছে এবং এটি নাও হতে পারে।
tvanfosson

2

আপনার ব্রাউজার কনসোল পুটে কোনও সামগ্রীর জন্য ES7 স্প্রেড অপারেটরটি ব্যবহার করা সহজ

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

1
খুশী হলাম। এই প্রশ্নটি 10 ​​বছরেরও বেশি পুরনো, আনন্দিত যে এত সাধারণ কাজ এখন সহজ। আপনি অন্য লোকের উত্তর তাকান আগে এটি এত সহজ ছিল না।
ভ্লাদ

সে কারণেই আমি আমার নিজের উত্তরটি
রেখেছি

2

গতিশীল সংখ্যক অবজেক্টগুলিকে মার্জ করতে, আমরা স্প্রেড সিনট্যাক্সেরObject.assign সাহায্যে ব্যবহার করতে পারি ।

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

উপরের ফাংশনটি পূর্ববর্তী বস্তুগুলি থেকে ওভাররাইট করে পরবর্তী বস্তুগুলির বৈশিষ্ট্যগুলির সাথে তাদের সমস্ত বৈশিষ্ট্যকে একটি নতুন অবজেক্টে মার্জ করে, সমস্ত সংখ্যক অবজেক্ট গ্রহণ করে।

ডেমো:

কোনও বস্তুর অ্যারে মার্জ করার জন্য, অনুরূপ পদ্ধতি প্রয়োগ করা যেতে পারে।

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

ডেমো:


1

সম্ভবত, দ্রুত, দক্ষ এবং আরও জেনেরিক উপায়টি হ'ল (আপনি কোনও সংখ্যক বস্তুকে একীভূত করতে এবং এমনকি প্রথমটি -> নির্ধারিত প্রতি অনুলিপি করতে পারেন):

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];
}

এটি আপনাকে প্রথম অবজেক্টটি রেফারেন্সের সাথে পাশ করার সাথে সাথে সংশোধন করার অনুমতি দেয়। আপনি যদি এটি না চান তবে সমস্ত বৈশিষ্ট্যযুক্ত একটি সম্পূর্ণ নতুন অবজেক্ট রাখতে চান, তবে আপনি প্রথম আর্গুমেন্ট হিসাবে pass pass পাস করতে পারেন।

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); 

সম্মিলিত_অজেক্ট এবং অবজেক্ট 1 উভয়ই অবজেক্ট 1, অবজেক্ট 2, অবজেক্ট 3 এর বৈশিষ্ট্য ধারণ করে।

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); 

এই ক্ষেত্রে, সম্মিলিত_বজেক্টে অবজেক্ট 1, অবজেক্ট 2, অবজেক্ট 3 এর বৈশিষ্ট্য রয়েছে তবে অবজেক্ট 1 সংশোধিত নয়।

এখানে যাচাই করুন: https://jsfiddle.net/ppwovxey/1/

দ্রষ্টব্য: জাভাস্ক্রিপ্ট অবজেক্টগুলি রেফারেন্স দ্বারা পাস করা হয়েছে।


1

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' }
}

এটিই আমি পেয়েছি এমন সমাধান (এখনও ভবিষ্যদ্বাণী করতে হবে: /)

let objAll = {};

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

এটি করার মাধ্যমে আমরা গতিশীলভাবে একটিতে সমস্ত বস্তু কীগুলি যুক্ত করতে পারি।

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


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.