JavaScript中如何添加，删除，修改对象属性

前言：请使用现代浏览器

一.添加

1.设定对象初始值：

const obj = {
    newProperty:"hellp"
};

2.可以使用赋值运算符 (=) 来给对象添加属性。如：

const obj = {};
obj.newProperty = 'hello';

console.log(obj.newProperty);  // 输出: 'hello'

3.还可以使用方括号语法来给对象添加属性，这样可以使用变量名称作为属性名：

const obj = {};
const propName = 'newProperty';
obj[propName] = 'hello';

console.log(obj.newProperty);  // 输出: 'hello'

注意，在使用方括号语法时，需要在方括号内放置一个字符串或变量。如果直接使用属性名，它会被当作一个字符串常量处理，而不是变量名。

const obj = {};
obj['newProperty'] = 'hello';  // 可行
obj.newProperty = 'hello';  // 可行

// 这将会引发错误，JavaScript 会尝试将这个表达式解释为减法运算，所以会抛出错误。
obj.new-property = 'hello';

4.使用Object.defineProperty来动态添加属性

const obj = {};

Object.defineProperty(obj, 'newProperty', {
  value: 'hello',//属性值
  writable: true,//是否可写，true，可写，false只读
  enumerable: true,//是否可枚举
  configurable: true//是否可配置
});

console.log(obj.newProperty);  // 输出: 'hello'

5.使用对象展开运算符 (...) 来动态添加属性，这个运算符可以将一个对象的所有属性复制到另一个对象上

var obj1 = {
  foo: 'hello',
  bar: 'world'
};

var obj2 = {};

// 把对象obj1的属性全部复制给obj2
obj2 = { ...obj1 };

console.log(obj2.foo);  // 输出: 'hello'
console.log(obj2.bar);  // 输出: 'world'

6.把obj1的全部属性复制给obj2，并添加一个bar属性

var obj1 = { foo: 'hello' };

var obj2 = {};

// 把obj1的全部属性复制给obj2，并添加一个bar属性
obj2 = { ...obj1, bar: 'world' };

console.log(obj1);
console.log(obj2);

//obj1输出
//{foo: 'hello'}

//obj2输出
//{foo: 'hello', bar: 'world'}

二.删除

1. delete 运算符来删除对象的属性值

const obj = {
  foo: 'hello',
  bar: 'world'
};

delete obj.foo;
//delete obj['bar']也可行

console.log(obj);//输出{bar: 'world'}

三.修改

我们先设定一个对象的初始值，然后通过以下方法修改属性值:

const obj = {
  foo: 'hello',
  bar: 'world'
};

1. 直接使用"="运算符

obj.bar='ddd'

console.log(obj)//输出{foo: 'hello', bar: 'ddd'}

2. 使用方括号语法

obj['bar']='ddd'

console.log(obj)//输出{foo: 'hello', bar: 'ddd'}

3. 使用Object.defineProperty

Object.defineProperty(obj, 'bar', {
  value: 'ddd',//属性值
  writable: true,//是否可写，true，可写，false只读
  enumerable: true,//是否可枚举
  configurable: true//是否可配置
});

console.log(obj)//输出{foo: 'hello', bar: 'ddd'}

4. 使用Object.assign

Object.assign(obj, { bar: 'ddd' });

console.log(obj)//输出{foo: 'hello', bar: 'ddd'}

5. 使用对象展开运算符 (...)

obj={...obj,bar:'ddd'}

console.log(obj)//输出{foo: 'hello', bar: 'ddd'}