1. 主页 > 小妙招

JavaScript对象属性操作指南:5种常用赋值方法详解

你是不是遇到过这种情况?刚学JavaScript的时候,看着别人的代码里一堆花括号和点符号,心里直打鼓:"这对象属性到底怎么玩啊?" 别慌!今天咱们就来解决这个让无数新手头疼的问题。就像"新手如何快速涨粉"需要掌握核心技巧一样,搞懂对象属性操作就是你进阶JavaScript的必经之路。

??一、直接赋值:最基础的招式??
举个栗子,你新建了个用户对象:

javascript复制
let user = {};
user.name = "小明";  // 这里就是最直白的点操作符赋值
user["age"] = 18;    // 中括号写法也能达到同样效果

这时候可能有同学要问:"点号和中括号有啥区别?" 简单来说,当属性名包含空格或者特殊字符时,必须用中括号。比如user["注册日期"] = "2023-08-20"这种场景。

??二、批量赋值:Object.assign大法??
当你需要同时设置多个属性时,总不能一个个写吧?这时候就该搬出Object.assign了:

javascript复制
Object.assign(user, {
  gender: "男",
  vipLevel: 3,
  lastLogin: "2023-08-20"
});

不过要注意!这个方法会直接修改原对象,如果你想要新建对象,记得先传个空对象进去:

javascript复制
let newUser = Object.assign({}, user);

??三、动态属性名:灵活变通的技巧??
有时候属性名是动态生成的怎么办?这时候就需要用到计算属性名了:

javascript复制
let key = "loginCount";
user = {
  ...user,
  [key]: 5  // 这个方括号包裹的表达式会被计算
};

这种方法特别适合需要根据条件动态生成字段名的场景,比如处理表单数据的时候。

??四、解构赋值:ES6的优雅解法??
现在很多项目都用ES6语法,解构赋值这时候就派上用场了:

javascript复制
let config = { theme: "dark", fontSize: 14 };
let themeSetting = { theme: "light" };

// 合并对象的神操作
let merged = { ...config, ...themeSetting };

注意这里有个坑!如果对象里有嵌套对象,这种浅拷贝可能会导致意想不到的问题,咱们后面会说到。

??五、原型链操作:慎用的高级玩法??
虽然不推荐新手用,但知道原理很重要:

javascript复制
function User() {}
User.prototype.role = "member";

let admin = new User();
admin.__proto__.role = "admin";  // 修改原型链上的属性

这种操作会影响所有实例对象,就像在微信群里@所有人一样,使用前一定要三思!

??自问自答环节??
Q:为什么我用=赋值对象后,修改新对象会影响原对象?
A:举个实际例子你就明白了:

javascript复制
let original = { data: [1,2,3] };
let copy = original;  // 这里只是复制了引用地址
copy.data.push(4);
console.log(original.data); // 输出[1,2,3,4]

要解决这个问题必须用深拷贝,可以用JSON.parse(JSON.stringify(obj))这种简单粗暴的方式,不过会丢失函数等特殊属性。

Q:什么时候该用点操作符,什么时候用中括号?
A:记住这个规律就行——属性名是固定字符串时用点操作符,需要动态计算时用中括号。比如处理循环中的多个属性:

javascript复制
let keys = ["name", "age", "gender"];
keys.forEach(key => {
  console.log(user[key]);  // 必须用中括号
});

小编观点:刚开始学的时候,建议先用好点操作符和扩展运算符(...)这两个最常用的方法。等熟悉了再尝试其他进阶操作,千万别一上来就折腾原型链!对象操作就像搭积木,基础打牢了才能建高楼。

本文由嘻道妙招独家原创,未经允许,严禁转载