JavaScript 对象属性写法大揭秘：原来还能这样操作！

在 JavaScript 的编程世界里，对象作为核心数据结构之一，扮演着至关重要的角色。从早期的新手阶段，我们使用 new Object() 创建对象，再到稍有进步后采用对象字面量的方式，虽然都能实现对象的基本功能，但这些写法却存在诸多痛点。代码冗余、不够灵活以及方法定义繁琐等问题，一直困扰着开发者，使得代码的编写和维护变得不够高效。

随着 ES6 的出现，它为 JavaScript 对象带来了诸多便捷性和强大的新特性。这些特性不仅解决了以往写法中的痛点，还让对象变得更加动态、灵活，能够满足各种复杂的业务场景需求。接下来，我们将深入探讨 ES6 为对象带来的这些改变，包括属性简写、方法简写、计算属性名等便捷特性，以及 getter 和 setter、Symbol 属性等高级用法，还有那些看似奇怪却十分有用的特殊写法。

假设我们要创建一个用户对象：

// 新手时期的我们
var user = new Object();
user.name = '小明';
user.age = 25;
user.sayHello = function() {
    return '你好，我是' + this.name;
};

后来，我们学会了对象字面量：

// 稍微进步一点
var user = {
    name: '小明',
    age: 25,
    sayHello: function() {
        return '你好，我是' + this.name;
    }
};

这两种写法都没有问题，但它们有几个明显的痛点：

1. 代码冗余：当属性名和变量名相同时，我们需要写两遍
2. 不够灵活：属性名必须事先确定，不能动态生成
3. 方法定义繁琐：每个方法都要写 function 关键字

一、ES6 带来的便捷性

1. 属性简写

ES5 时代的场景：

// ES5 时代的冗余写法
var name = '小明';
var age = 25;

var user = {
    name: name,  // 这里写了两次 name！
    age: age     // 这里写了两次 age！
};

ES6 给了我们一个对象越来越动态的解决方案：

// ES6 属性简写
const name = '小明';
const age = 25;

const user = {
    name,  // 看！只需要写一次
    age    // 简洁多了！
};

console.log(user); // {name: "小明", age: 25}

原理其实很简单：当属性名和变量名相同时，JS 会自动把变量名作为属性名，变量值作为属性值。

2. 方法简写

定义对象方法也变得更简洁了：

// 以前的方法定义
const calculator = {
    add: function(a, b) {
        return a + b;
    },
    multiply: function(a, b) {
        return a * b;
    }
};

// ES6 方法简写
const calculator = {
    add(a, b) {  // 去掉了 function 关键字
        return a + b;
    },
    multiply(a, b) {
        return a * b;
    }
};

注意：这里的方法简写和箭头函数是两回事！箭头函数有自己特殊的 this 绑定规则。

3. 计算属性名：动态生成属性名

动态生成属性名

// 动态生成属性名
const prefix = 'user_';
const id = 123;

// ES5 的实现方式（比较绕）
const obj = {};
obj[prefix + id] = '用户数据';
obj[prefix + 'name'] = '小明';

// ES6 的计算属性名
const obj = {
    [`${prefix}${id}`]: '用户数据',
    [`${prefix}name`]: '小明'
};

console.log(obj); // {user_123: "用户数据", user_name: "小明"}

应用场景：

• 动态生成缓存 key；
• 根据条件创建不同的属性；
• 处理 API 返回的动态字段。

二、属性加上钩子

1. Getter 和 Setter

有时候我们希望某个属性的读取和赋值能触发一些额外的逻辑。这时候就需要 getter 和 setter 了。

const user = {
    firstName: '张',
    lastName: '三',
    
    // 计算属性：fullName
    get fullName() {
        return `${this.firstName}${this.lastName}`;
    },
    
    // 设置 fullName 时自动拆分，这里的拆分逻辑只是示例，实际业务中应根据具体规则处理。
    set fullName(name) {
        const [first, last] = name.split('');
        this.firstName = first;
        this.lastName = last;
    }
};

console.log(user.fullName); // "张三"

user.fullName = '李四';
console.log(user.firstName); // "李"
console.log(user.lastName);  // "四"

实际应用：

• 数据验证（setter 中检查数据合法性）；
• 数据格式化（getter 中格式化返回值）；
• 计算属性（如上面的 fullName）；
• 数据监听（属性变化时触发回调）。

2. Symbol 属性

使用 Symbol 作为唯一属性键。

// 创建一个唯一的 Symbol 作为属性名
const idSymbol = Symbol('id');

const user = {
    name: '小明',
    [idSymbol]: 'secret_123'  // 这个属性不会轻易被访问到
};

console.log(user[idSymbol]); // "secret_123"

// 普通遍历方法找不到这个属性
console.log(Object.keys(user)); // ["name"]
console.log(JSON.stringify(user)); // {"name":"小明"}

// 只有用 getOwnPropertySymbols 才能找到
const symbols = Object.getOwnPropertySymbols(user);
console.log(symbols); // [Symbol(id)]
console.log(user[symbols[0]]); // "secret_123"

Symbol 并不是私有属性，而是一种不容易被误用的属性。

适用场景：

• 内部状态管理；
• 避免属性名冲突；
• 框架/库的内部实现。

三、那些奇怪但有用的写法

1. 数字作为属性名

const obj = {
    1: '数字 1',
    '2': '字符串 2',
    1.5: '小数'
};

console.log(obj[1]);    // "数字 1"
console.log(obj['1']);  // "数字 1" - 数字会自动转字符串
console.log(obj[1.5]);  // "小数"

普通对象的属性名，最终都会被转换成字符串（Symbol 除外）。

2. 包含特殊字符的属性名

const obj = {
    'first-name': '小明',     // 包含连字符
    'say hello': function() { // 包含空格
        return '你好！';
    },
    '@email': 'test@qq.com'   // 特殊字符开头
};


// 只能用方括号访问
console.log(obj['first-name']); // "小明"
console.log(obj['say hello']()); // "你好！"

3. 动态生成复杂属性名

const actions = ['add', 'delete', 'update'];
const api = {};

actions.forEach(action => {
    api[`${action.toUpperCase()}_URL`] = `/api/${action}`;
    api[`handle${action.charAt(0).toUpperCase() + action.slice(1)}`] = 
        function(data) {
            console.log(`处理${action}操作`);
        };
});

console.log(api);
// {
//   ADD_URL: "/api/add",
//   DELETE_URL: "/api/delete",
//   UPDATE_URL: "/api/update",
//   handleAdd: function...,
//   handleDelete: function...,
//   handleUpdate: function...
// }

你平时写的对象，大多数只是静态数据。ES6 之后的对象，更像是带规则的数据结构。

结语

ES6 为 JavaScript 对象带来的这些丰富特性，让属性简写和方法简写让代码更加简洁易读，减少了不必要的重复代码。计算属性名赋予了对象动态生成属性的能力，极大地提升了灵活性。getter 和 setter 为属性的读写操作提供了额外的逻辑控制，拓展了对象的功能边界。Symbol 属性则为对象的内部状态管理和避免属性名冲突提供了有效方案。而那些特殊写法，如数字作为属性名、包含特殊字符的属性名以及动态生成复杂属性名等，更是满足了各种独特场景下的需求。

掌握这些 ES6 对象特性，能够让我们编写出更加高效、优雅且功能强大的代码。在今后的前端开发中，我们应积极运用这些特性，充分发挥 JavaScript 对象的能力。

以上关于JavaScript 对象属性写法大揭秘：原来还能这样操作！的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。