11 种糟糕的 JavaScript 编写方式 _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 来声明变量，它们是块级作用域。

functionexample () {var foo ="bar" ;if ( true ) {var foo ="baz" ;console . log (foo); // 'baz'}console . log (foo); // 'baz' }

functionexample2 () {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 recommendeddocument.getElementById('my-button').addEventListener('click', function() {document.getElementById('my-text').innerText = 'Hello, world!';});// recommendedconst 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 recommendedfunction foo() {globalVar = "bar";}// recommendedconst myModule = (function() {const localVar = "baz";function foo() {// do something with localVar}return {foo: foo};})();

在上面的代码中，第一个例子使用了一个全局变量globalVar ，它可能会被其他代码覆盖。
第二个例子使用IIFE（Immediately Invoked Function Expressions）创建一个模块，其中变量只在模块内部可见，不会影响其他代码。
6.忽略分号JavaScript 允许在语句末尾省略分号，但这往往会导致一些错误，尤其是在代码被缩小或合并时。因此，建议始终以分号结束语句以避免潜在问题。