JavaScript 对象属性操作详解:动态添加、删除与遍历

作者:拾光时间:2026-10-25 23:41:38浏览:373

本文详细讲解JavaScript中对象属性的访问、动态添加、删除及遍历方法。重点介绍点语法与方括号语法的区别,利用方括号实现动态属性名赋值,使用delete关键字移除属性,以及通过in运算符和for...in循环检测与遍历对象属性,附带完整代码示例。

1. 访问对象属性

在JavaScript中,访问对象属性主要采用两种语法:点运算符法和方括号运算符法。

let user = {     // 一个对象
  name: "John",  // 键 "name",值 "John"
  age: 30,        // 键 "age",值 30。列表中的最后一个属性应以逗号结尾:便于我们添加、删除和移动属性
};
  • 使用点符号访问属性值 alert( user.name ); // John
  • 使用方括号访问属性值 alert( user[name]); // John

需要注意,遍历对象时属性的返回顺序是否严格遵循添加顺序?

答案是有特定的排序规则:整数键会按数值大小排序,而非整数键则保持创建时的插入顺序。

2. 删除对象属性

可以使用 delete 关键字来移除对象的特定属性。

delete user.age;
delete user[age];

3. 动态设置属性

虽然点运算符是获取属性最常用的方式,但在处理动态属性名时显得不够灵活。

当我们需要根据变量或用户输入动态添加属性及其值,且属性名事先未知时,方括号运算符法更为适用。

let order={
    id:1,
    name:'xxxx',
}
// 如果是直接给新属性赋值
order['logisticsNo']='xxxx';
 
// 如果添加的属性为[],则可以先创建属性值为空数组
order['logisticsNo']=[];
order['logisticsNo'].push(data); //注意数组才有push,不然会报错
 
// 也可以使用变量名
let key='logisticsNo';
order[key]=[];
order[key].push(data);

计算属性

在对象字面量定义中,可以使用方括号来指定属性名,这被称为计算属性(Computed Property Names)。

let fruit = prompt("Which fruit to buy?", "apple");

let bag = {
  [fruit]: 5, // 属性名是从 fruit 变量中得到的
};

alert( bag.apple ); // 5 如果 fruit="apple"

其核心含义是: 中的表达式值将作为最终的属性名。

例如,若用户输入“apple”,则对象 bag 将变为 {apple: 5}。

这实际上等同于先创建空对象,再动态赋值:

let fruit = prompt("Which fruit to buy?", "apple");
let bag = {};

// 从 fruit 变量中获取值
bag[fruit] = 5;

方括号内还可以包含更复杂的表达式,例如:

let fruit = 'apple';
let bag = {
  [fruit + 'Computers']: 5 // bag.appleComputers = 5
};

属性存在判断: “in” 操作符

JavaScript对象的一个特性是访问不存在的属性不会抛出错误,而是返回 。

因此,我们可以通过比较返回值是否为 undefined 来简单判断属性是否存在。

let user = {};

alert( user.noSuchProperty === undefined ); // true 意思是没有这个属性

不过,推荐使用 in 操作符,其左侧必须是属性名字符串。

let user = { name: "John", age: 30 };

alert( "age" in user ); // true,user.age 存在
alert( "blabla" in user ); // false,user.blabla 不存在。

直接利用 in 操作符是判断对象属性是否存在的最推荐方式。

“for…in” 循环

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // 属性键的值
  alert( user[key] ); // John, 30, true
}

1.检查空对象

function isEmpty(obj) {
  for (let key in obj) {
    // 如果进到循环里面,说明有属性。
    return false;
  }
  return true;
}

2.对象属性求和

let salaries = {
  John: 100,
  Ann: 160,
  Pete: 130
};

let sum = 0;
for (let key in salaries) {
  sum += salaries[key];
}

alert(sum); // 390

3.将数值属性值都乘以 2

// 在调用之前
let menu = {
  width: 200,
  height: 300,
  title: "My menu"
};

multiplyNumeric(menu);

// 调用函数之后
menu = {
  width: 400,
  height: 600,
  title: "My menu"
};

function multiplyNumeric(obj) {
  for (let key in obj) {
    if (typeof obj[key] == 'number') {
      obj[key] *= 2;
    }
  }
}

补充:括号表示法

这种写法在语法上类似于数组访问,但用于对象属性访问。

const student = {
	name: '张三',
	age:  18,
	action: function eat () {alert('我喜欢吃')}
}

// 括号表示法(属性值要加引号)
student['name'];
student['age'];
student['action']();	// 调用方法需要在外面加括号

该方法的主要优点在于支持动态属性名。

当需要将外部数据(如输入框内容)作为对象属性名时,必须使用括号表示法,从而实现动态添加属性名和内容。

<input type="text" value="address">
		
<script>
	const student ={};
	let ipt = document.querySelector('input');
	let a= ipt.value;
	
	// 用点表示法不能将输入框中的值当做属性名来设置
	student.a = '北京';	// 存入的是a: '北京'
	// 用括号表示法可以
	student[a] = '北京'; // 存入的是	address: '北京'
	// ↑动态的将输入框中的内容作为这个对象的值
</script>

总结

到此这篇关于js给对象动态添加、设置、删除属性名与属性值的文章就介绍到这了,更多相关js对象动态添加设置删除属性名内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

作者最新文章