JavaScript中该变量命名存在什么问题？附代码对比示例

这问题绝对是新手（甚至不少熟手）容易踩的全局变量重名坑！咱们拆解来看：

核心问题：name是浏览器的内置全局属性 #

在浏览器的全局作用域里，var name声明的变量会直接挂载到window对象上，而window.name是浏览器原生提供的属性——它的作用是存储当前窗口的名称，并且强制只能是字符串类型。

当你执行var name = ['name1', 'name2', 'name2']时：

1. 浏览器会自动把数组转换成字符串（调用数组的toString()方法，得到"name1,name2,name2"）
2. 最终window.name存储的是这个字符串，而非原数组
3. 所以console.log(name)输出的是字符串形式，name.length计算的是字符串的长度（数一下：name1,name2,name2一共17个字符）

而names是安全的自定义变量 #

names不是浏览器的内置属性，用var names声明的话，就是一个普通的全局变量，完全可以正常存储数组类型的值。所以：

• console.log(names)直接输出数组本身
• names.length就是数组的元素个数3

额外验证小代码 #

你可以跑这段代码确认一下：

// 先看初始的window.name
console.log(window.name); // 输出空字符串""
console.log(typeof window.name); // 输出"string"

var name = ['a', 'b', 'c'];
console.log(window.name); // 输出"a,b,c"
console.log(typeof window.name); // 还是"string"

避坑建议 #

1. 全局作用域下尽量避免使用浏览器内置的全局属性名当变量名（比如name、top、self、location这些）
2. 优先用let/const声明变量，它们的块级作用域不会把变量挂载到window上，就算用name也不会冲突：

   const name = ['name1', 'name2', 'name2'];
   console.log(name.length); // 输出3，正常！
   

内容的提问来源于stack exchange，提问作者Ramiz Kongulov