আমি কীভাবে ES6 + তে দুটি জাভাস্ক্রিপ্ট অবজেক্ট একত্রিত করব?

Question

আমি সর্বদা এভাবে কোড লিখতে করতে ক্লান্ত হয়ে পড়েছি:

function shallowExtend(obj1,obj2){
  var key;
  for ( key in obj2 ) {
    if ( obj2.hasOwnProperty(key) === false )  continue;
    obj1[key] = obj2[key]
  }
}

বা আমি নিজে কোডটি লিখতে না চাইলে এমন একটি লাইব্রেরি প্রয়োগ করুন যা এটি ইতিমধ্যে করে। অবশ্যই ES6 + এটিকে উদ্ধার করতে আসছে আমাদের একটি Object.prototype.extend(obj2...)বা এর মতো কিছু সরবরাহ করবেObject.extend(obj1,obj2...)

তাহলে ES6 + কি এই জাতীয় কার্যকারিতা সরবরাহ করে? যদি ইতিমধ্যে না থাকে, তবে কি এই জাতীয় কার্যকারিতা পরিকল্পনা করা হয়েছে? যদি পরিকল্পনা না হয় তবে কেন নয়?

Comments

তাহলে আপনি কেন এটি আপনার লাইব্রেরিতে যুক্ত করেননি ?

— রবিজি

@ রবজি এই প্রশ্নটি এই আশার বিষয়ে যে ES6 আমাদের প্রথম এমন বয়লারপ্লেট ক্র্যাপ

— বালুপটন

আমি মনে করি না যে নাম / মান জোড়াটি এক জিনিস থেকে অন্য বস্তুর অনুলিপি করার কোনও সাধারণ উপায় আছে। আপনি কি কেবল নিজের সম্পত্তি বা [[Prototype]]শৃঙ্খলে থাকা ব্যক্তিদের সাথেই লেনদেন করেন ? আপনি কি "গভীর" বা "অগভীর" অনুলিপিগুলি করেন? অ-গণনাযোগ্য এবং অ-লিখিতযোগ্য বৈশিষ্ট্যগুলি সম্পর্কে কী? আমার মনে হয় আমি বরং একটি ছোট লাইব্রেরি ফাংশন করব যা আমার যা প্রয়োজন তা করে এবং বেশিরভাগ ক্ষেত্রে এটি এড়ানো যায়।

— রবজি

Answer 1

আপনি অবজেক্ট.সেসাইন ব্যবহার করে ইএস 6 এ অগভীর একত্রীকরণ / প্রসারিত / নির্ধারণ করতে সক্ষম হবেন:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

বাক্য গঠন:

অবজেক্ট.সেসাইন ( লক্ষ্য , উত্স );

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

উদাহরণ:

var obj1 = {name: 'Daisy', age: 30};
var obj2 = {name: 'Casey'};

Object.assign(obj1, obj2);

console.log(obj1.name === 'Casey' && obj1.age === 30);
// true

Comments

একটি ছোট নোট: অবজেক্ট.সেসাইন লক্ষ্যটিকে পরিবর্তিত করে। যদি আপনি যা চান তা না হলে আপনি এটিকে একটি খালি বস্তু দিয়ে কল করতে পারেন:let merged = Object.assign({}, source1, source2);

— ডেভিড

দয়া করে লক্ষ্য করুন এটি একটি অগভীর প্রসারিত ... নেস্টেড অবজেক্টগুলি মার্জ করা হয়নি

— monzonj

@ মোমঞ্জঞ্জ, ল্যাড্যাশ বা মাউথ না ব্যবহার করে নেস্টেড অবজেক্টগুলি বাড়ানোর কোনও বিকল্প নেই?

— জোওও ফালকাও

কেবলমাত্র ব্যবহার করে লাইব্রেরি ছাড়া গভীরভাবে বাসাযুক্ত বস্তুগুলিকে মার্জ করার ভাল উপায় রয়েছে Object.assign: আমার উত্তরটি এখানে দেখুন

— রুস্লান

নেস্টেড অবজেক্টগুলিকে প্রসারিত করার একটি পুরানো উপায় ব্যবহার করছেJSON.parse(JSON.stringify(src))

— আন্দ্রে ফিগুয়েরেদো

Answer 2

আপনি এর জন্য অবজেক্ট স্প্রেড সিনট্যাক্সটি ব্যবহার করতে পারেন :

const merged = {...obj1, ...obj2}

অ্যারেগুলির জন্য স্প্রেড অপারেটর ইতিমধ্যে ES6 (ES2015) এর অংশ ছিল, তবে বস্তুর জন্য এটি ES9 (ES2018) এর ভাষা বৈশিষ্ট্যে যুক্ত করা হয়েছিল। এর প্রস্তাব অনেক আগেই বাবেলের মতো সরঞ্জামগুলিতে ডিফল্ট হিসাবে সক্ষম হয়েছিল।

Comments

কোনও আনুষ্ঠানিকভাবে এখনই এটিকে ES2015 বলা হয় না: P কখন থেকে ES6 এর অংশ না বানাচ্ছে? বিকাশকারী.মোজিলা.আর.ইন-const ob1 = {foo: 123}; const ob2 = {bar: 234}; const merged = {...ob1, ...ob2}; console.log(merged){ foo: 123, bar: 234 }

— ইউএস / ডকস / ওয়েব / জাভা স্ক্রিপ্ট / রেফারেন্স/…

এটি ধ্বংসাত্মক নয়, এটি ছড়িয়ে পড়ছে - এবং না, বস্তুর জন্য এটি ES6 এর অংশ নয়। আপনার বাবেলে আপনাকে পরীক্ষামূলক ES7 খসড়া অক্ষম করা উচিত।

— বার্গি

আহ আমাকে ক্ষমা করুন। তুমি ঠিক. এই মুহূর্তে এটি একটি ব্যাবেল পর্যায় 2 বৈশিষ্ট্য। github.com/sebmarkbage/ecmascript-rest-spread আমি কখনই বুঝতে পারি নি কারণ আমি এটিকে প্রথম থেকেই ব্যাবেলের সাথে ব্যবহার করছি এবং এটি ডিফল্টরূপে সক্ষম হয়েছে। তবে যেহেতু আপনাকে কোনওভাবেই স্থানচ্যুত করতে হবে, এবং অবজেক্টটি স্প্রেড করা বেশ সহজ সরল জিনিস যা আমি যাইহোক এটি সুপারিশ করব। আমি এটা ভালোবাসি.

— থিজেস কোয়ারসেলম্যান

এগুলি কি ডিফল্টরূপে সক্ষম হয়েছে? এটি বাগের মতো শোনাচ্ছে।

— বারগি

"2 বা তদূর্ধ্বের প্রস্তাবগুলি ডিফল্টরূপে সক্ষম হয়"। babeljs.io/docs/usage/experimental

— থিজ কোয়ারসেলম্যান

Answer 3

আমি জানি এটি একটি পুরানো সমস্যা তবে ES2015 / ES6 এর সবচেয়ে সহজ সমাধান আসলে অবজেক্ট.সেসাইন () ব্যবহার করে বেশ সহজ is

আশা করি এটি সহায়তা করে, এটি ডিইপিও পাশাপাশি মার্জ করে :

/**
 * Simple is object check.
 * @param item
 * @returns {boolean}
 */
export function isObject(item) {
  return (item && typeof item === 'object' && !Array.isArray(item) && item !== null);
}

/**
 * Deep merge two objects.
 * @param target
 * @param source
 */
export function mergeDeep(target, source) {
  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        mergeDeep(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }
  return target;
}

ব্যবহারের উদাহরণ:

mergeDeep(this, { a: { b: { c: 123 } } });
// or
const merged = mergeDeep({a: 1}, { b : { c: { d: { e: 12345}}}});  
console.dir(merged); // { a: 1, b: { c: { d: [Object] } } }

Answer 4

যোগে Object.mixinবর্তমানে আলোচনা করা হচ্ছে আচরণ আপনার জন্য জিজ্ঞাসা করা হয় যত্ন নিতে। https://mail.mozilla.org/pipermail/es-discuss/2012-December/027037.html

যদিও এটি ইএস 6 খসড়ায় এখনও নেই, মনে হচ্ছে এটির জন্য প্রচুর সমর্থন রয়েছে, সুতরাং আমি মনে করি এটি শীঘ্রই খসড়াগুলিতে প্রদর্শিত হবে।

Comments

.mixinটিসি 39 বাদ পড়েছে ।

— নু

সতর্কতা - এই উত্তরটি এখন আর সঠিক নয়, একটি সঠিক এবং কার্যকরী পদ্ধতির জন্য জ্যাকের উত্তর দেখুন।

— বেনিয়ামিন গ্রুইনবাউম

অবজেক্ট.মিক্সিনকে প্রতিস্থাপন করা হয়েছে Object.assign

— getofritz

Answer 5

ES6

Object.assign(o1,o2) ; 
Object.assign({},o1,o2) ; //safe inheritance
var copy=Object.assign({},o1); // clone o1
//------Transform array of objects to one object---
var subjects_assess=[{maths:92},{phy:75},{sport:99}];
Object.assign(...subjects_assess); // {maths:92,phy:75,sport:99}

ES7 বা বাবেল

{...o1,...o2} // inheritance
 var copy= {...o1};

Comments

@ ফিলিপবার্টুজি আপনি যে লিঙ্ক করেছেন এটি ES6 নয়। তবে এটি মূলত লোডাশ / আন্ডারস্কোরে _.exte () এর সমান কাজ করছে।

— নস্টালজি.ইও

Answer 6

সম্ভবত ইএস 5 Object.definePropertiesপদ্ধতিটি কাজটি করবে?

যেমন

var a = {name:'fred'};
var b = {age: {value: 37, writeable: true}};

Object.defineProperties(a, b);

alert(a.age); // 37

এমডিএন ডকুমেন্টেশন: https://developer.mozilla.org/en-US/docs/ জাভা স্ক্রিপ্ট / রেফারেন্স / গ্লোবাল_অবজেক্টস / অবজেক্ট / ডিফাইনপ্রোপার্টি

Comments

সাবধান, যদিও। উপর অন্তত একটি ব্রাউজারে এই কর্মক্ষমতা বিষয় রয়েছে।

— রূবেণ মোড়াইস

আমি মনে করি সবচেয়ে আকর্ষণীয় অংশটি হ'ল definePropertiesনিজস্ব বৈশিষ্ট্যগুলি সংজ্ঞায়িত করে। এটি [[prototype]]চেইনে বৈশিষ্ট্যগুলি ওভাররাইট করে না , এটি তাদের ছায়া দেয়।

— রবজি

ভাল পরামর্শ, যদিও সম্পত্তিটি কীভাবে আচরণ করা উচিত তা সংজ্ঞায়িত করার জন্য এটি প্রকৃতপক্ষে প্রসারিত নয় ... একটি সরল অবজেক্ট.ডেফাইনপ্রোপার্টি (জেজ 1, অজ 2) করা অপ্রত্যাশিত ফলাফলের কারণ হতে পারে।

— বালুপটন

Object.getOwnPropertyDescriptorসম্পত্তি যখন এটি একটি জটিল মান হয় সেট করতেও ব্যবহার করতে হবে, বা আপনি রেফারেন্স দ্বারা অনুলিপি করবেন।

— dmp