實現JavaScript優秀實踐時要注意應避開使用的舊結構

本篇文章為大家展示了實現JavaScript優秀實踐時要注意應避開使用的舊結構，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

與任何其他編程語言一樣，JavaScript也有自己的最佳實踐列表，使程序更易于閱讀和維護。

由于JavaScript有很多小陷阱，因此要注意避開。可以通過輕松地遵循一些最佳實踐使JavaScript代碼易于閱讀。

避免聲明全局變量

無論出于何種原因，都應該盡量避免使用全局變量。

其一是它們很容易在不同的地方被覆蓋，因為全局變量在任何地方都是可用的。此外，全局變量是window對象的屬性，還可以覆蓋window對象中的內容。

這兩個問題會使代碼難以執行。因此應該盡可能多地定義局部變量。

可以使用var、let或const關鍵字來定義局部變量。

用var定義的變量在定義之前，在被定義的層次及以下是可用的。例如以下代碼：

const log = () => { console.log(x); } log(); var x = 1; log();

代碼中，第一個console.log中的x是未定義的，第二個log中x則為1.

以下為同效代碼：

var x; constlog= () => {   console.log(x); } log(); x =1; log();

用let聲明的變量只有在定義之后才可用，所以如果給出以下代碼：

const log = () => { console.log(x); } log(); let x = 1; log();

會出現以下錯誤信息：

Uncaught ReferenceError: Cannotaccess ‘x’ before initialization

使用const關鍵字可定義只能分配一次且不能再分配的常量。與var不同，這種常量只有在聲明之后才可用。

例如以下代碼：

{console.log(x);}const x = 1;log();

在const x = 1之前調用log也會出現以下錯誤信息：

Uncaught ReferenceError: Cannotaccess ‘x’ before initialization

如果想要在程序的不同部分中使用變量，應使用JavaScript模塊，然后在發布代碼時將這些模塊構建到一個或多個大型文件中。這一方法自ES6后可行。

可以導出變量并將其引入至其他模塊。還可以使用“導出默認”導出整個模塊。通過這種方式只能導出應該在模塊外部可用的部分，其他都為不可見的。

此外還可以使用閉包將變量保存在函數中，這樣可避免外部調用。以下為簡單的閉包使用：

= () => {const x = 3; return () => x * 2;}

將x保留在divide函數中可避免外部調用，并可返回一個處理x的函數。

然后編寫以下代碼調用：

console.log(divide()());

不要向setInterval或setTimeout傳遞字符串

不應將字符串傳遞給setInterval或setTimeout函數的第一個參數，而應傳遞回調函數。

如果傳遞的是一個字符串而不是一個回調函數，瀏覽器將使用eval來運行字符串中的代碼，速度很慢，并易受到代碼注入攻擊。

因此，沒有理由進行以上操作，除非我們真的需要運行動態生成的代碼，但這應該是非常非常罕見的情況。

不應該寫以下代碼：

setTimeout(() => {document.getElementById('foo')。textContent = 'foo';}， 1000);

應該寫以下代碼：

setTimeout(() => {document.getElementById('foo')。textContent = 'foo';}， 1000);

不要使用“with”語句

從表面上看，with語句似乎是訪問對象深度嵌套屬性的一個良好捷徑。例如可以這樣寫：

let obj = {   foo: {     bar: {       baz: 1     }   } } obj.foo.bar.baz=2;

而不是：

let obj = {   foo: {     bar: {       baz: 1     }   } } with(obj.foo.bar) {   var baz =2; }

但即使這樣仍會干擾全局對象，并使baz是否可以在with語句之外訪問變得模糊不定。因為還可以在with語句中聲明新的變量：

let obj = {   foo: {     bar: {       baz: 1     }   } } with(obj.foo.bar) {   var baz =2; }

這里baz變量是在with語句內部聲明，但外部無法調用。

幸運的是，在JavaScript嚴格模式下不允許使用with語句，所以現在也不必擔心。

var關鍵字

在ES6中，可分別使用塊作用域的let和const關鍵字來聲明變量和常量。之所以可以用來聲明變量，是因為它們有明確的作用域。

用var聲明的變量使用范圍較為模糊。如果是在如if塊或循環這樣的程序塊中聲明，聲明的變量在塊外部可用。

例如：

for (let i = 0; i < 10; i++){   var j = i; } console.log(j);

這種情況下使用var是可行的，但如果用let替代var聲明變量就會報錯。

由于作用域是混淆模糊的，我們應該停止使用var來聲明變量。

使用JavaScript編程時，我們希望避免使用存在于早期JavaScript版本中的許多老舊結構。使用這些結構讓代碼難以閱讀，并很容易產生bug。

首先要避免全局變量聲明，以防止在全局范圍內意外引用和聲明內容。這樣還可降低意外修改全局變量值的可能。

其次應該停止在字符串中傳遞代碼，而是將回調函數傳遞給setTimeout和setInterval函數的第一個參數。因為eval將用于運行存儲在字符串中的代碼，這會讓程序面臨代碼注入攻擊，而且速度也很慢。

另外應該避免使用with語句，因為它會在全局對象內創建變量。

同樣，由于var關鍵字聲明的變量的作用域比較模糊，因此應避免使用var關鍵字聲明變量。

上述內容就是實現JavaScript優秀實踐時要注意應避開使用的舊結構，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。