JavaScript const、let、var 對比
ECMAScript 6 新增 const 和 let 命令,用來聲明變量。
變量提升:const 和 let 必須先聲明再使用,不支持變量提升
console.log(c1, l1, v1);// 報錯
作用域:const,let 支持塊級作用域,有效避免變量覆蓋
const c21 = 'c21'; let l21 = 'l21'; var v21 = 'v21'; if (0.1 + 0.2 != 0.3) { const c21 = 'c22'; let l21 = 'l22'; var v21 = 'v22'; console.log(c21, l21, v21); // 輸出 c22 l22 v22 } console.log(c21, l21, v21); // 輸出 c21 l21 v22
塊級作用域,在外層不能直接訪問內層變量
if (0.1 + 0.2 != 0.3) { const c22 = 'c22'; let l22 = 'l22'; var v22 = 'v22'; console.log(c22, l22, v22); // 輸出 c22 l22 v22 } console.log(c22, l22, v22); // 報錯 // Uncaught ReferenceError: c22 is not defined // 同樣地, l22 is not defined
const 定義常量,該常量不能賦值,但該常量的屬性可以賦值
const c231 = {}; const c232 = [];
全局變量不再設置為頂層對象(window)的屬性,有效避免全局變量汙染
const c24 = 'c24'; let l24 = 'l24'; console.log(c24, l24); // 輸出 c24 l24 console.log(window.c24, window.l24); // 輸出 undefined undefined
符合預期的 for 循環
for (var i = 0; i != 3; i++) {
可以看到在 for 循環中使用 let 方式聲明變量才是符合預期。
在 for 中每一次循環,let 都是重新聲明變量,並且因為 JavaScript 引擎會記住上一次循環的值,初始化 i 時在上一輪的基礎上計算。
可以看到在 for 循環中至少有兩層作用域,看下面的例子更容易理解。
for (let i = 0; i != 3; i++) { let i = 'seven'; console.log(i);
初始值:const 聲明的變量必須設置初始值,且不能重複賦值。
const c3 = 'c3' ;let l3 = 'l3'; var v3 = 'v3'; console.log(c3, l3, v3); // 輸出 c3 l3 v3 c3 = 2; // Uncaught TypeError: Assignment to constant variable l3 = 2;
重複定義:const 和 let 不支持重複定義
const、let 縮小了變量作用域,完美避免變量汙染;const 固定變量(即固定變量類型),對於弱類型 JavaScript 來說,可以明顯提升性能。推薦在應用中使用 const、let 聲明變量。
相關推薦
'前端設計- JavaScript驗證碼製作及實例分析'
"在網頁設計中,尤其表單填寫提交過程中,為防止機器自動登錄,很多網頁都採用驗證碼技術,允許用戶輸入而儘量避免自動登錄。驗證碼實現的方法有很多,PHP繪圖技術可以在服務端生成驗證碼併發送客戶端,HTML5技術下可以使用canvas與JS腳本實現在客戶端瀏覽器自動生成驗證碼。本...
'京東前端工程師:10個JavaScript難點+最新JavaScript視頻教程'
"1. 立即執行函數立即執行函數,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是創建函數的同時立即執行。它沒有綁定任何事件,也無需等待任何異步操作:立即執行函數function(){…}是一個匿名函數,包圍...
'IT大牛彙總前端開發 JavaScript 乾貨知識點'
"很多初學的朋友經常問我,前端JavaScript都需要學習哪些東西呀?哪些是JavaScript的重點知識啊?其實做前端開發工程師,所有的知識點都是我們學習必備的東西,只有紮實的技術基礎才是高薪的關鍵!不過JavaScript的知識點比較多,一篇文章的內容沒辦法講完。今天...
'清華IT流出的10個JavaScript難點+最新JavaScript視頻教程'
"1. 立即執行函數立即執行函數,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是創建函數的同時立即執行。它沒有綁定任何事件,也無需等待任何異步操作:立即執行函數function(){…}是一個匿名函數,包圍...
'JavaScript中函數表達式和自執行函數表達式的用法'
"JavaScript是每個前端人員必須要掌握的知識點,在日常代碼中,我們經常都會用到自執行函數表達式。今天要給大家分享的就是JavaScript中函數表達式和自執行函數表達式的用法。立即調用函數表達式 給函數體加大括號,在有變量聲明的情形下,沒有任何區別 但是,如果只是【...
JavaScript
2019-09-06
'官方:JavaScript可以混前端,太爽了'
"最近不少同學都問我這麼個問題,不會JavaScript能混前端麼?能拿到高薪麼?為什麼這麼說呢,理由很簡單1)有很多企業不注重前端開發,當然也就不會給你高薪了,這樣的企業以小企業居多。他們一般對前端開發的認識很片面,認為前端開發就是做頁面,甚至認為是美工工作的一部分,這種...
'javascript核心之DOM操作'
"JS一個重要功能就是操作DOM, 改變頁面顯示。目錄:1、基本概念2、節點類型3、節點關係4、節點操作基本概念DOM全稱為Document Object Model ,即文檔對象模型,是針對HTML和XML的一個API, 描繪了一個層次化的節點樹,可以添加、移除和修改頁面...
'10個JavaScript調試技巧,幫你更好、更快地調試代碼'
"調試技巧,在任何一項技術研發中都可謂是必不可少的技能。掌握各種調試技巧,必定能在工作中起到事半功倍的效果。譬如,快速定位問題、降低故障概率、幫助分析邏輯錯誤等等。而在互聯網前端開發越來越重要的今天,如何在前端開發中降低開發成本,提升工作效率,掌握前端開發調試技巧尤為重要。...
'JavaScript快速筆記'
"1. 基本概念VAR CONST 和LET在ES6出現之前,用var來聲明變量,如果不小心忘記了var而直接定義變量的話,變量會自動成為全局變量從而可能汙染整個項目。const 和let是在ES6之後出現的,const用來定義常量而let用來定義局部變量。有趣的是cons...
'簡單快速的瞭解下 JavaScript 的 Async 和 Await '
"自從Async 和Await 出現後,大幅簡化JavaScript 同步和非同步(異步)的複雜糾葛,這篇文章將會分享我自己理解的歷程,實站await 等待、連續輸入文字、fetch 和回調應用,讓這些過去需要層層callback才能完成的流程,透過 Async 和 Awa...
推薦中...