11 种糟糕的 JavaScript 编写方式
JAVAScript 是现代 Web 开发不可或缺的一部分，但它有一些需要注意的陷阱。在本文中，我们将介绍10种常见的 JavaScript 编写方式，以帮助您避免一些常见的错误和陷阱。
1.隐式类型转换
隐式类型转换是指 JavaScript 在运行时自动将一种数据类型转换为另一种数据类型。
例如，当您使用加号连接两个字符串时，JavaScript 会自动将它们转换为字符串并连接它们。虽然这看起来很方便，但它经常会导致问题，尤其是对于没有经验的开发人员而言。
let result = "3" + 4 + 5 ; // '345'
let result2 = 3 + 4 + "5" ; // '75'
上面代码中，第一行的输出结果是字符串‘345’，第二行的输出结果是字符串‘75’。这是因为 JavaScript 在处理加号时会将数字转换为字符串，然后进行拼接操作。因此，当您使用加号连接数字和字符串时，必须小心避免意外行为。
2.使用var声明变量
在 ES6 之前，在 JavaScript 中声明变量的唯一方法是使用 var 关键字。但是var存在一些作用域问题，容易造成变量污染等问题。因此，最好使用 let 或 const 来声明变量，它们是块级作用域。
function example () {
var foo = "bar" ;
if ( true ) {
var foo = "baz" ;
console . log (foo); // 'baz'
}
console . log (foo); // 'baz'
}
function example2 () {
let foo = "bar" ;
if ( true ) {
let foo = "baz" ;
console . log (foo);// 'baz'
}
console . log (foo); // 'bar'
}
example ();
example2 ();
在上面的代码中，当第一个示例 var 声明变量时，内部的 foo 覆盖了外部的 foo，导致两者的输出都是字符串 'baz'。
在第二个例子 let 中，声明变量后，内部的 foo 只存在于内部作用域中，不会影响外部的 foo。
再比如下面这个面试中经常遇到的问题：
for ( var i = 0 ; i < 5 ; i ++ ) {
setTimeout ( function () {
console . log (i);
}, 1000 );
}
// output 5, 5, 5, 5, 5
这是因为setTimeout的回调函数是异步执行的，执行的时候i的值已经变成5了，可以用let或者closure来解决这个问题。
3、DOM操作频繁
直接操作 DOM 是非常低效的，因为这样做会导致页面重复重新渲染，从而降低性能和用户体验。
相反，应该使用更高效的方式来操作 DOM，比如减少 DOM 查询次数，使用虚拟 DOM 技术等。
// not recommended
document.getElementById('my-button').addEventListener('click', function() {
document.getElementById('my-text').innerText = 'Hello, world!';
});
// recommended
const myText = document.getElementById('my-text');
document.getElementById('my-button').addEventListener('click', function() {
myText.innerText = 'Hello, world!';
});
在上面的代码中，第一个示例在每次单击按钮时重新查询 DOM 并更新它，而第二个示例仅查询一次 DOM，然后更新元素的文本内容。
4.修改原型对象
修改原型对象可能会导致一些意想不到的问题。例如：
Array.prototype.sum = function() {
return this.reduce(function(a, b) {
return a + b;
}, 0);
};
var arr = [1, 2, 3];
console.log(arr.sum()); // 6
虽然上面的代码工作正常，但它可能会对其他部分产生意想不到的影响。为了避免这个问题，我们应该尽量避免修改原型对象。
5.使用全局变量
全局变量是 JavaScript 中常见的一种变量类型，但是它们会引起命名冲突等问题。因此，最好避免使用全局变量并以模块化方式组织代码。
// not recommended
function foo() {
globalVar = "bar";
}
// recommended
const myModule = (function() {
const localVar = "baz";
function foo() {
// do something with localVar
}
return {
foo: foo
};
})();
在上面的代码中，第一个例子使用了一个全局变量globalVar，它可能会被其他代码覆盖。
第二个例子使用IIFE（Immediately Invoked Function Expressions）创建一个模块，其中变量只在模块内部可见，不会影响其他代码。
6.忽略分号
JavaScript 允许在语句末尾省略分号，但这往往会导致一些错误，尤其是在代码被缩小或合并时。因此，建议始终以分号结束语句以避免潜在问题。
// not recommended
let x = 1
let y = 2
// recommended
let x = 1 ;
let y = 2 ;
在上面的代码中，第一个示例省略了分号，这可能会导致一些意外行为。第二个例子显式添加了分号，更加规范。
7. 使用 for-in 循环
for-in 循环是一种遍历对象属性的方法，但它有一些缺点。因为它不仅会遍历对象本身的属性，还会遍历从原型链继承的属性，这可能会导致一些意想不到的结果。
const person = {
name : "Alice" ,
age : 30 ,
gender : "female"
};
// not recommended
for ( const key in person) {
console . log (person[key]);
}
// recommended
Object . keys (person). forEach (key => console . log (person[key]));
上面代码中，第一个例子使用for-in循环遍历对象属性，而第二个例子使用Object.keys()方法获取对象自身的属性名，并配合forEach()方法来获取 遍历。
8.比较NaN
NaN 是一种特殊类型的数值，表示Not-a-Number（不是数字）。但是，由于 NaN 不等于任何值，所以在比较 isNaN() 时需要用一个函数来判断。
// not recommended
if (x == NaN) {
// do something
}
// recommended
if (isNaN(x)) {
// do something
}
上面代码中，第一个例子错误地使用了相等运算符来比较NaN，而第二个例子使用了isNaN()函数来进行判断。
9.使用eval()
eval() 是一种执行字符串代码的方法，但它容易引起安全问题和性能问题。因此，最好避免在生产环境中使用 eval()。
// not recommended
eval("console.log('Hello, world!')");
// recommended
const code = "console.log('Hello, world!')";
Function(code)();
在上面的代码中，第一个示例使用 eval() 函数来执行字符串代码，而第二个示例使用 Function() 函数来创建一个新函数并执行它。
10.忽略错误处理
忽略错误处理是一个常见的错误，因为它会导致代码崩溃。例如：
try {
// some code
} catch (e) {}
虽然抛出异常的这段代码可能无关紧要，但如果异常处理不当，它可能会在开发或运行时导致问题。
为了避免这个问题，我们应该始终正确处理异常，例如通过记录或显示用户友好的错误消息。
11. 传递函数参数时忘记绑定this
将函数作为参数传递时，需要注意绑定this的值。例如：
const obj = {
name : 'Alice' ,
greet : function () {
console . log ( 'Hello, ' + this .name);
}
};
setTimeout (obj. greet, 1000 ); // Hello, undefined
正确的写法应该是使用bind方法：
const obj = {
name : 'Alice' ,
greet : function () {
console . log ( 'Hello, ' + this .name);
}
};
setTimeout (obj. greet . bind (obj), 1000 ); // Hello , Alice
结语
JavaScript 是现代 Web 开发不可或缺的一部分，它为我们提供了丰富的功能和灵活性，在编写 JavaScript 代码时，我们应该尽量保持代码的可读性、简洁性和可维护性，以便构建出色的 Web 应用程序。
