JavaScript でオブジェクトにプロパティを追加する

1. ドット表記を使用する

簡単な方法は、代入演算子を使用したドット表記を使用して、既存のオブジェクトにプロパティを追加することです。構文は次のとおりです object.property = value。

var person = { 名前: 'マックス'、年齢: 23 };

person.sex = '男性';
console.log(人);

/*
    出力: { 名前: 'マックス'、年齢: 23、性別: '男性' }
*/

2. 括弧表記を使用する

属性の名前が事前にわかっていない場合、または名前が無効な変数識別子 (すべての数字など) の場合、ドット表記は機能しません。

このような場合に対処するには、オブジェクトを連想配列として扱い、括弧表記を使用します。構文は次のとおりです object['property'] = value。

var person = { 名前: 'マックス'、年齢: 23 };
person['性別'] = '男性';
console.log(人);

/*
    出力: { 名前: 'マックス'、年齢: 23、性別: '男性' }
*/

ドット表記と括弧表記はどちらも、指定されたキーがオブジェクト内で見つかった場合、オブジェクトのプロパティを指定されたプロパティで上書きすることに注意してください。age これを説明するために、プロパティの 目的をオーバーライドする次のコードを考えてみましょう person 。

var person = { 名前: 'マックス'、年齢: 23 };
人['年齢'] = 25;
console.log(人);

/*
    出力: { 名前: 'マックス'、年齢: 25 }
*/

3. Object.assign() 機能を利用する

Object.assign  () メソッドは、ソース オブジェクトからターゲット オブジェクトにプロパティをコピーできます。両方のオブジェクトで同じキーが見つかった場合、ソースのプロパティはターゲット オブジェクトのプロパティをオーバーライドします。

var person = { 名前: 'マックス'、年齢: 23 };
var 詳細 = { 性別: '男性'、国籍: 未定義 };

Object.assign(人物, 詳細);
console.log(人);

/*
    输出: { name: 'Max', age: 23, sex: 'Male', nationality: undefined }
*/

4. 使用展开运算符

或者，您可以使用 扩展运算符 将两个对象的属性合并为一个新对象。这种方法不会用给定对象的公共键属性覆盖源对象。

var person = { name: 'Max', age: 23 };
var prop = { sex: 'Male' };

var obj = {...person, ...prop};
console.log(obj);

/*
    输出: { name: 'Max', age: 23, sex: 'Male' }
*/

5. 使用 jQuery

使用 jQuery，您可以使用 jQuery.extend() 方法，它将第二个对象的内容合并到第一个对象中。如果对象具有共同的键，则此方法会使用给定对象的属性覆盖源对象。

const { JSDOM } = require("jsdom");
const { window } = new JSDOM();
var $ = require("jquery")(window);

var person = { name: 'Max', age: 23 };
var prop = { sex: 'Male' };

$.extend(person, prop);
console.log(person);

/*
    输出: { name: 'Max', age: 23, sex: 'Male' }
*/

6. 使用下划线/Lodash 库

两个都 Underscore 和 Lodash 库提供了几种实用方法来向现有对象添加属性。

通过 Lodash 库，您可以使用任何 _.merge, _.assignIn （别名 _.extend), _.assign， 或者 _.defaults 方法。或者，如果您更喜欢 Underscore 库，您可以使用 _.extendOwn （别名： _.assign） 或者 _.defaults 方法。

如果上述所有方法有任何共同的键，则使用给定对象的属性覆盖源对象，除了 _.defaults 方法，它默默地忽略公共密钥。

var _ = require('lodash');

var person = { name: 'Max', age: 23 };
var prop = { sex: 'Male' };

_.merge(person, prop);
console.log(person);

/*
    输出: { name: 'Max', age: 23, sex: 'Male' }
*/

这就是在 JavaScript 中向对象添加属性的全部内容