JS 动态属性名：使用表达式作为对象属性名

各位观众老爷们，大家好！今天咱们聊点儿“骚”操作，哦不，是“巧”操作！聊聊 JavaScript 里那些让人眼前一亮的动态属性名。

想象一下，你是一个咖啡馆的老板，顾客点单的方式千奇百怪，你想用一个对象来记录每个顾客点的东西，但顾客的名字又是动态的，怎么办？ 别慌，JavaScript 早就帮你安排好了！

开场：静态 vs. 动态

在传统的 JavaScript 对象中，属性名通常是字符串字面量，就像这样：

const myObject = {
  name: "张三",
  age: 30,
  city: "北京"
};

这里的 name, age, city 都是硬编码的，写死在代码里了。这种方式很直接，也很简单，但不够灵活。如果属性名需要根据变量的值来确定，那就捉襟见肘了。

这时候，动态属性名就该登场了！

主角登场：方括号的魔力

JavaScript 允许我们使用方括号 [] 来定义对象的属性名。方括号里面放的，可不是字符串字面量了，而是任何可以计算出值的表达式！

const myObject = {};
const myPropertyName = "userName";

myObject[myPropertyName] = "李四"; // 等价于 myObject.userName = "李四";

console.log(myObject); // 输出: { userName: '李四' }

看到了吗？ myPropertyName 变量的值 "userName" 成为了 myObject 的属性名。这就是动态属性名的基本用法。

原理剖析：表达式求值

方括号 [] 的作用，本质上是对其中的表达式进行求值。JavaScript 会先计算表达式的值，然后将这个值作为属性名。

这意味着，方括号里面可以放任何能产生值的表达式，包括：

• 变量
• 函数调用
• 算术运算
• 逻辑运算
• 三元运算符
• 模板字符串
• …等等等等

只要最终能求出一个字符串（或可以转换为字符串的值），就能作为属性名。

高级用法：各种姿势解锁

1. 变量拼接：让属性名更生动

   const baseName = "product";
   let i = 1;
   
   const myObject = {};
   
   myObject[baseName + i] = "苹果"; // product1
   i++;
   myObject[baseName + i] = "香蕉"; // product2
   
   console.log(myObject); // 输出: { product1: '苹果', product2: '香蕉' }

   这里，我们用字符串拼接的方式，动态地生成了属性名 product1 和 product2。

2. 函数调用：属性名也能“私人定制”

   function generatePropertyName(prefix, id) {
     return prefix + "_" + id;
   }
   
   const myObject = {};
   const userId = 123;
   
   myObject[generatePropertyName("user", userId)] = "王五"; // user_123
   
   console.log(myObject); // 输出: { user_123: '王五' }

   generatePropertyName 函数根据传入的参数，动态地生成属性名。

3. 模板字符串：优雅的属性名构建

   const category = "books";
   const bookId = "456";
   
   const myObject = {};
   
   myObject[`${category}-${bookId}`] = "JavaScript 高级程序设计"; // books-456
   
   console.log(myObject); // 输出: { 'books-456': 'JavaScript 高级程序设计' }

   模板字符串让属性名的构建更加简洁明了。

4. 条件判断：属性名也能“见机行事”

   const isLoggedIn = true;
   const myObject = {};
   
   myObject[isLoggedIn ? "loggedInUser" : "guestUser"] = "赵六";
   
   console.log(myObject); // 输出: { loggedInUser: '赵六' } (因为 isLoggedIn 为 true)
   
   const isLoggedIn2 = false;
   const myObject2 = {};
   
   myObject2[isLoggedIn2 ? "loggedInUser" : "guestUser"] = "钱七";
   
   console.log(myObject2); // 输出: { guestUser: '钱七' } (因为 isLoggedIn2 为 false)

   三元运算符可以根据条件动态地选择属性名。

5. Symbol 类型：独特的属性名

   Symbol 是一种原始数据类型，它的值是唯一的，可以用来创建唯一的属性名，避免命名冲突。

   const mySymbol = Symbol("uniqueKey");
   const myObject = {};
   
   myObject[mySymbol] = "周八";
   
   console.log(myObject); // 输出: { [Symbol(uniqueKey)]: '周八' }
   console.log(Object.getOwnPropertySymbols(myObject)); // 输出: [ Symbol(uniqueKey) ]

   注意，Symbol 类型的属性名不能通过 . 运算符访问，只能通过方括号 [] 和 Object.getOwnPropertySymbols() 方法访问。

应用场景：哪里需要你，你就去哪里

动态属性名在很多场景下都能派上用场：

1. 动态表单处理： 根据用户输入动态创建对象属性。

   <input type="text" id="name" value="Alice">
   <input type="number" id="age" value="25">

   const formElements = document.querySelectorAll('input');
   const formData = {};
   
   formElements.forEach(element => {
     formData[element.id] = element.value;
   });
   
   console.log(formData); // 输出: { name: 'Alice', age: '25' }

2. 数据转换： 根据数据结构动态生成对象属性。

   const data = [
     { id: 1, name: "产品A" },
     { id: 2, name: "产品B" },
     { id: 3, name: "产品C" }
   ];
   
   const productMap = {};
   
   data.forEach(product => {
     productMap[product.id] = product.name;
   });
   
   console.log(productMap); // 输出: { '1': '产品A', '2': '产品B', '3': '产品C' }

3. 缓存机制： 使用动态属性名作为缓存 key。

   const cache = {};
   
   function getData(url) {
     if (cache[url]) {
       console.log("从缓存中获取数据");
       return cache[url];
     } else {
       console.log("从服务器获取数据");
       const data = fetchDataFromServer(url); // 假设这个函数从服务器获取数据
       cache[url] = data;
       return data;
     }
   }
   
   function fetchDataFromServer(url) {
       // 模拟从服务器获取数据
       return `Data from ${url}`;
   }
   
   console.log(getData("https://example.com/api/users")); // 从服务器获取数据，并缓存
   console.log(getData("https://example.com/api/users")); // 从缓存中获取数据

4. 配置对象： 根据配置信息动态生成对象属性。

   const config = {
     theme: "dark",
     language: "en",
     fontSize: "16px"
   };
   
   const style = {};
   
   for (const key in config) {
     if (config.hasOwnProperty(key)) {
       style[`--${key}`] = config[key]; // 将配置信息转换为 CSS 变量
     }
   }
   
   console.log(style); // 输出: { '--theme': 'dark', '--language': 'en', '--fontSize': '16px' }

注意事项：踩坑指南

1. 类型转换： 如果表达式的值不是字符串，JavaScript 会尝试将其转换为字符串。 这可能会导致一些意想不到的结果，所以要确保表达式的值是字符串或者可以安全地转换为字符串。

   const myObject = {};
   const numberKey = 123;
   
   myObject[numberKey] = "数字属性"; // JavaScript 会将 123 转换为字符串 "123"
   
   console.log(myObject); // 输出: { '123': '数字属性' }
   
   const objectKey = { a: 1 };
   myObject[objectKey] = "对象属性"; // JavaScript 会将 { a: 1 } 转换为字符串 "[object Object]"
   
   console.log(myObject); // 输出: { '123': '数字属性', '[object Object]': '对象属性' }

2. 性能考量： 过度使用动态属性名可能会影响性能，尤其是在循环中频繁创建对象属性时。 尽量避免在性能敏感的场景下过度使用动态属性名。

3. 代码可读性： 虽然动态属性名很灵活，但过度使用可能会降低代码的可读性。 尽量保持代码的简洁明了，不要为了炫技而滥用动态属性名。

总结：灵活运用，事半功倍

动态属性名是 JavaScript 中一个非常强大的特性，它可以让我们更加灵活地操作对象。 掌握了动态属性名的用法，可以解决很多实际问题，提高代码的效率和可维护性。

特性	描述	示例
表达式求值	方括号 [] 中的表达式会被求值，结果作为属性名。	myObject[variableName] = value;
适用场景	动态表单处理、数据转换、缓存机制、配置对象等。	根据用户输入动态创建对象属性，根据数据结构动态生成对象属性。
注意事项	类型转换、性能考量、代码可读性。	确保表达式的值是字符串或者可以安全地转换为字符串，避免在性能敏感的场景下过度使用动态属性名，尽量保持代码的简洁明了。
Symbol属性名	Symbol 类型的值是唯一的，可以用来创建唯一的属性名，避免命名冲突。	const mySymbol = Symbol("uniqueKey"); myObject[mySymbol] = value;
语法糖	可以与模板字符串结合，提高代码可读性	myObject[${category}-${bookId}] = value;

好了，今天的讲座就到这里。希望大家能够灵活运用动态属性名，让你的 JavaScript 代码更加“骚”气蓬勃！ 谢谢大家！下课！