كيف يمكنني إضافة زوج مفتاح / قيمة إلى كائن JavaScript؟

https://stackoverflow.com/questions/1168807

19-09-2019
|

سؤال

هنا هو كائني الحرفي:

var obj = {key1: value1, key2: value2};

كيف يمكنني إضافة {key3: value3} إلى الكائن؟

المحلول

هناك طريقتان لإضافة جديدة ملكيات إلى كائن:

var obj = {
    key1: value1,
    key2: value2
};

باستخدام دوت تدوين:

obj.key3 = "value3";

استخدام تدوين قوس مربع:

obj["key3"] = "value3";

يتم استخدام النموذج الأول عند معرفة اسم العقار. يتم استخدام النموذج الثاني عند تحديد اسم الممتلكات ديناميكيا. مثل في هذا المثال:

var getProperty = function (propertyName) {
    return obj[propertyName];
};

getProperty("key1");
getProperty("key2");
getProperty("key3");

أ حقيقة يمكن إنشاء مجموعة JavaScript باستخدام إما:

مجموعة الترميز الحرفي:

var arr = [];

تدوين منشئ الصفيف:

var arr = new Array();

نصائح أخرى

سنة 2017 الإجابة: `Object.assign()`

enjection.assign (dest، SRC1، SRC2، ...) يدمج الكائنات.

انها الكتابة فوق dest مع خصائص وقيم (غير كثيرة) الكائنات المصدر، ثم إرجاع dest.

ال Object.assign() يتم استخدام الطريقة لنسخ قيم جميع الخصائص الخاصة التي يمكن تعدادها من كائنات مصدر أو أكثر إلى كائن مستهدف. سيعود الكائن الهدف.

مثال على العيش

var obj = {key1: "value1", key2: "value2"};
Object.assign(obj, {key3: "value3"});

document.body.innerHTML = JSON.stringify(obj);

عام 2018 الإجابة: مشغل انتشار الكائن `{...}`

obj = {...obj, ...pair};

من عند MDN.:

تقوم بنسخ خصائص ذاتية العددية من كائن شريطي على كائن جديد.

أصبح الآن استنساخ ضحل (باستثناء النموذج الأولي) أو دمج الكائنات ممكنة الآن باستخدام بناء جملة أقصر من Object.assign().

لاحظ أن Object.assign() محفزات setters. في حين أن بناء الجملة انتشار لا.

مثال على العيش

وهو يعمل في Chrome الحالي و Firefox الحالي. يقولون إنه لا يعمل في الحافة الحالية.

var obj = {key1: "value1", key2: "value2"};
var pair = {key3: "value3"};
obj = {...obj, ...pair};

document.body.innerHTML = JSON.stringify(obj);

عام 2019 الإجابة

~~عامل تعيين الكائنات +=:~~

~~obj += {key3: "value3"};~~

عفوا ... لقد حملت بعيدا. معلومات التهريب من المستقبل غير قانوني. غامضة حسب الأصول!

لقد نمت مولعا لوداش / إبطال عند كتابة المشاريع الكبيرة.

إضافة من قبل obj['key'] أو obj.key كلها إجابات جافا سكريبت صلبة. ومع ذلك، توفر كل من مكتبات LODASH و UNERERCORE العديد من الوظائف الإضافية المريحة عند العمل مع الكائنات والمصفوفات بشكل عام.

.push() هو للمصفوفات, ، ليس ل أشياء.

اعتمادا على ما تبحث عنه، هناك وظيفتان محددة قد تكون لطيفة للاستفادة وإعطاء وظيفة مماثلة لشعور arr.push(). وبعد لمزيد من المعلومات، تحقق من المستندات، لديهم بعض الأمثلة العظيمة هناك.

_.دمج (لوش فقط)

سيتم الكتابة فوق الكائن الثاني أو إضافته إلى الكائن الأساسي.undefined لا يتم نسخ القيم.

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.merge(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"}

_.extend / _.assign.

سيتم الكتابة فوق الكائن الثاني أو إضافته إلى الكائن الأساسي.undefined سيتم نسخها.

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.extend(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}

_..Defaurts.

يحتوي الكائن الثاني على افتراضي سيتم إضافته إلى كائن أساسي إذا لم تكن موجودة.undefined سيتم نسخ القيم إذا كان المفتاح موجود بالفعل.

var obj = {key3: "value3", key5: "value5"};
var obj2 = {key1: "value1", key2:"value2", key3: "valueDefault", key4: "valueDefault", key5: undefined};
_.defaults(obj, obj2);
console.log(obj);
// → {key3: "value3", key5: "value5", key1: "value1", key2: "value2", key4: "valueDefault"}

$ .extend.

بالإضافة إلى ذلك، قد يكون من المفيد الإشارة إلى JQuery.extend، إنها تعمل مماثلة ل _.Merge وقد تكون خيارا أفضل إذا كنت تستخدم بالفعل jQuery.

سيتم الكتابة فوق الكائن الثاني أو إضافته إلى الكائن الأساسي.undefined لا يتم نسخ القيم.

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
$.extend(obj, obj2); 
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"}

Object.assign ()

قد يكون من الجدير بالذكر كائن ES6 / ES2015.Assign، فإنه يعمل بشكل مشابه ل _.merge وقد يكون الخيار الأفضل إذا كنت تستخدم بالفعل polyfles ES6 / ES2015 بابل إذا أردت أن polynfuln نفسك.

سيتم الكتابة فوق الكائن الثاني أو إضافته إلى الكائن الأساسي.undefined سيتم نسخها.

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
Object.assign(obj, obj2); 
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}

يمكنك استخدام أي من هذه (Key3 المقدمة) هو مفتاح Acutal الذي تريد استخدامه)

arr[ 'key3' ] = value3;

أو

arr.key3 = value3;

إذا كان Key3 متغير، فعليك القيام به:

var key3 = 'a_key';
var value3 = 3;
arr[ key3 ] = value3;

بعد هذا، طلب arr.a_key سوف تعيد قيمة value3, ، حرفي 3.

arr.key3 = value3;

لأن ARR الخاص بك ليس حقا صفيف ... إنه كائن نموذج أولي. الصفيف الحقيقي سيكون:

var arr = [{key1: value1}, {key2: value2}];

لكنها لا تزال غير صحيحة. يجب أن يكون في الواقع:

var arr = [{key: key1, value: value1}, {key: key2, value: value2}];

var employees = []; 
employees.push({id:100,name:'Yashwant',age:30});
employees.push({id:200,name:'Mahesh',age:35});

أعلم أن هناك بالفعل إجابة مقبولة لهذا لكنني اعتقدت أنني كنت أنثبت فكرتي في مكان ما. يرجى [الناس] لا تتردد في كزة ثقوب في هذه الفكرة، لأنني لست متأكدا مما إذا كان ذلك هو أفضل حل ... لكنني فقط وضعت هذا معا قبل بضع دقائق:

Object.prototype.push = function( key, value ){
   this[ key ] = value;
   return this;
}

سوف تستخدمه بهذه الطريقة:

var obj = {key1: value1, key2: value2};
obj.push( "key3", "value3" );

منذ ذلك الحين، تعمل وظيفة النموذج الأولي this يمكنك الاستمرار في السلسلة .pushإلى نهاية الخاص بك obj عامل: obj.push(...).push(...).push(...);

ميزة أخرى هي أنه يمكنك تمرير صفيف أو كائن آخر كقيمة في وسيطات وظيفة الضغط. انظر كماندي لمثال عمل: http://jsfiddle.net/7teme/

يمكنك إنشاء فئة مع إجابة @ ionuţ g. stan

function obj(){
    obj=new Object();
    this.add=function(key,value){
        obj[""+key+""]=value;
    }
    this.obj=obj
}

إنشاء كائن جديد مع الفصل الأخير:

my_obj=new obj();
my_obj.add('key1', 'value1');
my_obj.add('key2', 'value2');
my_obj.add('key3','value3');

طباعة الكائن

console.log(my_obj.obj) // Return {key1: "value1", key2: "value2", key3: "value3"}

طباعة مفتاح

console.log(my_obj.obj["key3"]) //Return value3

أنا مبتدئ في جافا سكريبت، التعليقات موضع ترحيب. تناسبني.

ما عليك سوى إضافة خصائص:

ونحن نريد أن نضيف prop2 : 2 لهذا الكائن، هذه هي الخيارات الأكثر ملاءمة:

مشغل DOT: object.prop2 = 2;
أقواس مربعة: object['prop2'] = 2;

إذن أي واحد نستخدمه بعد ذلك؟

مشغل DOT هو بناء جملة أكثر نظيفة ويجب استخدامه كإعداد افتراضي (IMO). ومع ذلك، فإن مشغل DOT غير قادر على إضافة مفاتيح ديناميكية إلى كائن، مما قد يكون مفيدا للغاية في بعض الحالات. هنا مثال:

const obj = {
  prop1: 1
}

const key = Math.random() > 0.5 ? 'key1' : 'key2';

obj[key] = 'this value has a dynamic key';

console.log(obj);

دمج الكائنات:

عندما نريد دمج خصائص 2 كائنات هذه هي الخيارات الأكثر ملاءمة:

Object.assign(), ، يأخذ كائن مستهدف كحجة، وواحد أو أكثر من المصادر وسوف دمجها معا. علي سبيل المثال:

const object1 = {
  a: 1,
  b: 2,
};

const object2 = Object.assign({
  c: 3,
  d: 4
}, object1);

console.log(object2);

مشغل انتشار الكائن ...

const obj = {
  prop1: 1,
  prop2: 2
}

const newObj = {
  ...obj,
  prop3: 3,
  prop4: 4
}

console.log(newObj);

أي واحد نستخدمه؟

بناء الجملة انتشار أقل سرعة ويجب استخدامها كمنظمة انتمؤة افتراضية. لا تنسى نقل هذا بناء الجملة إلى بناء الجملة الذي يدعمه جميع المتصفحات لأنه جديد نسبيا.
Object.assign() هو أكثر ديناميكية لأن لدينا إمكانية الوصول إلى جميع الكائنات التي يتم تمريرها كحجج ويمكن أن تتلاعب بها قبل أن يتم تعيينها إلى الكائن الجديد.

مثالك يظهر كائن، وليس صفيف. في هذه الحالة، فإن الطريقة المفضلة لإضافة حقل إلى كائن هي مجرد تعيينها، مثل ذلك:

arr.key3 = value3;

أكثر الطرق الأكثر استخداما المذكورة بالفعل في معظم الإجابات

obj.key3 = "value3";

obj["key3"] = "value3";

هناك طريقة أخرى لتحديد الممتلكات تستخدم Object.DefineProperty ()

Object.defineProperty(obj, 'key3', {
  value: "value3",       // undefined by default
  enumerable: true,      // false by default
  configurable: true,    // false by default
  writable: true         // false by default
});

هذه الطريقة مفيدة عندما ترغب في الحصول على المزيد من التحكم أثناء تحديد الممتلكات. يمكن تعيين الممتلكات المحددة بأنها غير قابلة للتكوين وقابلة للتكوين من قبل المستخدم.

في حالة وجود عدد كبير من الكائنات المجهولية يدخل كائن وتريد إضافة كائن آخر يحتوي على أزواج مفتاح / قيمة، قم بذلك:

Firebug 'الكائن:

console.log(Comicbook);

عائدات:

كائن {اسم = "Spiderman"، القيمة = "11"}، كائن {name = "marsipulami"، القيمة = "18"}، كائن {name = "garfield"، value = "2"}

شفرة:

if (typeof Comicbook[3]=='undefined') {
    private_formArray[3] = new Object();
    private_formArray[3]["name"] = "Peanuts";
    private_formArray[3]["value"] = "12";
}

سوف يضاف Object {name="Peanuts", value="12"} إلى كائن Comicbook

أيضاً obj['key3'] = value3 أو obj.key3 = value3 سوف تضيف الزوج الجديد إلى obj.

ومع ذلك، أعرف أنه لم يتم ذكر jQuery، ولكن إذا كنت تستخدمه، فيمكنك إضافة الكائن من خلال $.extend(obj,{key3: 'value3'}). وبعد على سبيل المثال:

var obj = {key1: 'value1', key2: 'value2'};
$('#ini').append(JSON.stringify(obj));

$.extend(obj,{key3: 'value3'});

$('#ext').append(JSON.stringify(obj));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ini">Initial: </p>
<p id="ext">Extended: </p>

jQuery.تمديد(الهدف [، كائن 1] [، ensessn]) يدمج محتويات كائنين أو أكثر معا في الكائن الأول.

كما يسمح أيضا بإضافة إضافات / تعديلات مع $.extend(true,object1,object2);:

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
$("#ini").append(JSON.stringify(object1));    

$.extend( true, object1, object2 );
 
$("#ext").append(JSON.stringify(object1));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ini">Initial: </p>
<p id="ext">Extended: </p>

يمكنك إما إضافته بهذه الطريقة:

arr['key3'] = value3;

أو بهذه الطريقة:

arr.key3 = value3;

الإجابات التي تشير إلى إدخال كائن مع المتغير key3 سوف تعمل فقط إذا كانت قيمة key3 كان 'key3'.

بالنسبة الى الملخصات الممتلكات محددة في ECMA-262 (http://www.ecma-international.org/publications/files/ecma-st/ecma-262.pdf., ، P67)، هناك طريقتان يمكنك القيام به لإضافة خصائص كائن موجود. كل هذين الاتجاهين، سيعامل محرك JavaScript نفسه.

الطريقة الأولى هي استخدام DOT Netation:

obj.key3 = value3;

ولكن بهذه الطريقة، يجب عليك استخدام اسم المعرف بعد تدوين النقطة.

الطريقة الثانية هي استخدام تدوين القوس:

obj["key3"] = value3;

ونموذج آخر:

var key3 = "key3";
obj[key3] = value3;

بهذه الطريقة، يمكنك استخدام تعبير (تضمن اسم المعرف) في تدوين الأقواس.

var arrOfObj = [{name: 'eve'},{name:'john'},{name:'jane'}];
    var injectObj = {isActive:true, timestamp:new Date()};

    // function to inject key values in all object of json array

    function injectKeyValueInArray (array, keyValues){
        return new Promise((resolve, reject) => {
            if (!array.length)
                return resolve(array);

            array.forEach((object) => {
                for (let key in keyValues) {
                    object[key] = keyValues[key]
                }
            });
            resolve(array);
        })
    };

//call function to inject json key value in all array object
    injectKeyValueInArray(arrOfObj,injectObj).then((newArrOfObj)=>{
        console.log(newArrOfObj);
    });

إخراج مثل هذا: -

[ { name: 'eve',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z },
  { name: 'john',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z },
  { name: 'jane',
    isActive: true,
    timestamp: 2017-12-16T16:03:53.083Z } ]

بدعم من معظم المتصفحات، ويتحقق من استخدام مفتاح الكائن أو لا تريد إضافته، إذا متوفر هو - هي يسر القيمة الرئيسية الحالية وهما غير متوفر هو - هي إضافة مفتاح مع القيمة

مثال 1

let my_object = {};

// now i want to add something in it  

my_object.red = "this is red color";

// { red : "this is red color"}

مثال 2

let my_object = { inside_object : { car : "maruti" }}

// now i want to add something inside object of my object 

my_object.inside_object.plane = "JetKing";

// { inside_object : { car : "maruti" , plane : "JetKing"} }

مثال 3

let my_object = { inside_object : { name : "abhishek" }}

// now i want to add something inside object with new keys birth , gender 

my_object.inside_object.birth = "8 Aug";
my_object.inside_object.gender = "Male";


    // { inside_object : 
//             { name : "abhishek",
//               birth : "8 Aug",
//               gender : "Male" 
//            }   
//       }

يمكننا أن نفعل هذا بهذه الطريقة أيضا.

var myMap = new Map();
myMap.set(0, 'my value1');
myMap.set(1, 'my value2');
 for (var [key, value] of myMap) {
  console.log(key + ' = ' + value);
 }

طريقة قصيرة وأنيقة في مواصفات جافا سكريبت التالية (المرشح المرحلة 3) هي:

obj = { ... obj, ... { key3 : value3 } }

مناقشة أعمق يمكن العثور عليها في كائن انتشار vs كائن.assign و على الدكتور أكسل Rauschmayers الموقع.

يعمل بالفعل في node.js منذ الإصدار 8.6.0.

Vivaldi، Chrome، Opera، و Firefox لإصدار حاويات يعرف هذه الميزة أيضا، ولكن Mirosoft لا حتى اليوم، لا في Internet Explorer ولا في حافة.

بغرض إعارة زوج القيمة الرئيسية إلى كائن ل في يعمل مع هذا العنصر أولا القيام بذلك:

    var nwrow = {'newkey': 'value' };
    for(var column in row){
        nwrow[column] = row[column];
    }
    row = nwrow;

أفضل طريقة لتحقيق نفس الشيء:

function getKey(key) {
  return `${key}`;
}

var obj = {key1: "value1", key2: "value2", [getKey('key3')]: "value3"};

//console.log(obj);

منذ سؤاله عن الماضي ولكن مشكلة الحاضر. أود أن أقترح حلا آخر: قم فقط بتمرير المفتاح والقيم إلى الوظيفة وستحصل على كائن خريطة.

var map = {};
function addValueToMap(key, value) {
map[key] = map[key] || [];
map[key].push(value);
}

arr.push({key3: value3});

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow

كيف يمكنني إضافة زوج مفتاح / قيمة إلى كائن JavaScript؟

باستخدام دوت تدوين:

استخدام تدوين قوس مربع:

مجموعة الترميز الحرفي:

تدوين منشئ الصفيف:

سنة 2017 الإجابة: Object.assign()

مثال على العيش

عام 2018 الإجابة: مشغل انتشار الكائن {...}

مثال على العيش

عام 2019 الإجابة

_.دمج (لوش فقط)

_.extend / _.assign.

_..Defaurts.

$ .extend.

Object.assign ()

ما عليك سوى إضافة خصائص:

دمج الكائنات:

سنة 2017 الإجابة: `Object.assign()`

عام 2018 الإجابة: مشغل انتشار الكائن `{...}`