我整个人都不好了。 这篇文章要说点啥？就是关于 JavaScript 动态对象键值怎么建，剩下的数据怎么搞。你们看懂不懂就跟着来吧，毕竟我也不是啥专业的，只是随便写写。

前言：为哪些要动态对象键值？

在做网页开发的时候，有时候数据不是一成不变的，而是会在运行时生成。比如你拿到一个 JSON，然后想把里面的各个字段都变成对象属性，这时候就需要用到动态键名。

你有可能会想：那直接用 obj.key 就行了啊！ 客观地说... 但如果 key 本身是变量， 那就得用方括号：

// 直接写法
obj.key = value;
// 动态写法
obj = value;

话虽然是这么说… 这里面有点较小技巧：如果你想一次性给更多个不同 key 设置相同的 value，能够用循环或者数组方法。

举个例子

虚假设我们有一组国家地区和对应地区：

输出应当类似：

{
   "Asia": ,
   "Europe": ,
   "Rest": 
}

代码拆解

上面的代码其实挺更多层嵌套，别急着跑着去跑去。先说一下 obj ??= 是干啥的：它就是“如果 obj 没有值，就给它一个空数组”。这句其实能够改成更老陈旧的方法：

不靠谱。 而 splice 那句， 用来把已经匹配到的国家地区从 uniqCountry 删掉，确保它不会再被当作 Rest 出来。别忘了 uniqCountry 是 let 声明的，否则删不掉。

常见错误

• 不要用 const 声明 uniqCountry，如果要删元素就得 let。
• 别忘了判断 key 有没有存在否则会把 Rest 覆盖掉。
• if ) 的写法很奇怪，其实只要 if 就够了。
• 采用 array.filter 能够更简洁，但也简单引起更多次遍历。
• 如果你的数据量很较大， 能够把 uniqCountry 转成 Set，这样查找 O。

再说说剩余数据怎么归类？

也是没谁了... 很更多人问：剩余的数据为哪些要单独放一个 Rest 键？这是因为这样做方便后面再做统计或体现。比如你想统计各个地区还有更多更少个未分配国家地区，只需要看 Rest 数组较长度即可。

还有一种办法，就是直接把全部未匹配到的数据都放进一个数组，然后在渲染时判断有没有为空。如果为空就不体现当前这个区域，谨记...。

注意事项

- 用 barrack**标签**还是普通标签？别混淆啦！这里我用了 barrack**标签**只是为了突出沉重点， 动手。 但实际情况是并不需要这么繁杂。

• 不要让变量名太较长，否则读起来像连词典一样不容简单受。比如不要叫 “uniqueFilteredCountriesList”——太较长啦！叫 “uniq” 或者 “ufc” 就良好。😅
• 如果你想让代码更简洁， 用解构赋值也能够，不过记住留注释，否则后人看不懂。🤔
• 最后再来看一定记住测试边界情况， 举个例子空数组、undefined 等等。不然上线后谁了解会报错啊！👀
• 加一点日志打印也不错，尤其是在在调试阶段：console.log; 看着真实舒服。😎

较差习惯汇总

好家伙... 不要在循环里频繁创建崭新对象，每次 new Object 都耗资源条件哦！

var tempObj={a:1,b:2};
tempObj={};
console.log; // {} 
// 正确清空方式
Object.keys.forEach{delete tempObj;}); 
// 但这样效率较低下一般不用。
// 最佳方案是沉重崭新声明 var tempObj={};
警告 & 提醒  


Hello World! 😀
请务必检查以下几点：

确保全部关键字都已正确闭合；
📝 如果遗忘闭合，会引起整个页面崩溃！

🔄 💬 
📈
# 调试 & 日志输出 

 

Console.log; 
Bingo!: 一切正常。
 
{ 
   Asia:, 
   Europe:, 
   Rest: 
}