整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
文首發(fā)自「慕課網(wǎng)」，想了解更多IT干貨內(nèi)容，程序員圈內(nèi)熱聞，歡迎關(guān)注！
作者|慕課網(wǎng)精英講師 然冬
變量就是存放一些內(nèi)容的容器。
對(duì)于初學(xué)者，理解變量是重要的一環(huán)。
從分析變量這個(gè)名詞，可以知道他是一個(gè)可以改變的量，這里的量就是代表某一種值。
在 JavaScript 中，變量就是一個(gè)用來存放值的容器，并且可以對(duì)容器中的值做修改。
每個(gè)變量都有唯一的變量名，使用變量名來區(qū)分變量。
在 JavaScript 中使用var關(guān)鍵字來聲明變量。
var 存放數(shù)字用的變量 = 996;
console.log(存放數(shù)字用的變量); // 輸出：996
代碼塊123上述這段代碼就是申明了一個(gè)名為存放數(shù)字用的變量的變量，并且將它的值設(shè)為996。
使用 console.log，括號(hào)內(nèi)放置變量名，即可將變量的值輸出在控制臺(tái)。
其中 // 后面的內(nèi)容為注釋，代碼執(zhí)行過程中會(huì)被忽略。
雖然使用中文作為變量名在 chrome 瀏覽器下沒有報(bào)錯(cuò)，但是還是不建議使用。
常規(guī)場景中不會(huì)有使用中文名作為變量的情況。
所以上述例子中的變量名不可取。
var number = 996;
console.log(number); // 輸出：996
代碼塊123將存放數(shù)字用的變量修改成 number ，執(zhí)行結(jié)果是一樣的。
給變量設(shè)置值的操作稱為賦值操作。
var result = 0;
console.log(result); // 輸出：0
代碼塊123這是一個(gè)最簡單的賦值操作，直接將值賦給變量。
通常只有一個(gè)等號(hào)出現(xiàn)的情況下就存在賦值操作。
var result = 2 + 3;
console.log(result); // 輸出：5
代碼塊123這也是一個(gè)賦值操作，只不過等號(hào)右邊的 2 + 3 會(huì)被計(jì)算出結(jié)果（計(jì)算的方式和小學(xué)開始學(xué)習(xí)的自然數(shù)學(xué)一樣），再賦給變量 result。
將上面這個(gè)例子做一個(gè)簡單的改寫：
var number1 = 2;
var number2 = 3;
var result = number1 + number2; // 2 + 3
console.log(result); // 輸出：5
代碼塊123456原本 2 + 3 這部分也可以被變量所代替，參與計(jì)算的就是變量中的值。
var string = '今天加班？';
console.log(string); // 輸出：今天加班？
string = '福報(bào)！';
console.log(string); // 輸出：福報(bào)！
代碼塊1234567注意：
這里賦給變量的值和之前有點(diǎn)不一樣，是中文文字。
當(dāng)需要用變量存放一些“字”的時(shí)候，就需要用單引號(hào)'或者雙引號(hào)"將需要存放的字包裹。
通常單個(gè)字會(huì)稱之為字符，多個(gè)字的時(shí)候稱為字符串。
這里做個(gè)了解，具體的會(huì)在后續(xù)數(shù)據(jù)類型章節(jié)詳細(xì)展開討論。
這段代碼運(yùn)行后可以在控制臺(tái)觀察到有兩個(gè)輸出，分別對(duì)應(yīng)變量的值。
代碼很簡單，先聲明了一個(gè)叫 string 的變量，并賦值字符串今天加班？并輸出，隨后修改了他的值，重新賦值了字符串福報(bào)！。
這是變量最重要的一個(gè)特性：可變。
在 JavaScript 中變量名存在一定規(guī)范，所有變量名必須符合這些規(guī)范，否則程序無法執(zhí)行。
盡管之前的例子有用到中文作為變量名，但是是不推薦的。
// 不會(huì)報(bào)錯(cuò)但是不推薦
var 數(shù)字 = 1;
// 錯(cuò)誤
var 1number = 1;
// 錯(cuò)誤
var number@a = 1;
// 錯(cuò)誤
var num+aa = 2;
//下面是正確的方式
var number1 = 1;
var _number = 1;
var $number = 1;
代碼塊12345678910111213以上是一些簡單的示例，可以根據(jù)規(guī)則自己在控制臺(tái)嘗試尋找規(guī)則。
// 這是兩個(gè)不同的變量
var firstName = 'Hello';
var firstname = 'hello';
代碼塊123以上是兩個(gè)不同的變量，在 JavaScript 中變量是對(duì)大小寫敏感的。
兩個(gè)變量名即便字母是相同的，但是大小寫不同，就不能算做一個(gè)變量。
關(guān)鍵字就是指一些已經(jīng)被 JavaScript 預(yù)定義或者保留下來的內(nèi)容，如聲明變量用的關(guān)鍵字 var 就不能作為變量名。
var var = 1; // Uncaught SyntaxError: Unexpected token 'var'
代碼塊1上面這段代碼嘗試著將 var 作為變量，到控制臺(tái)運(yùn)行是會(huì)報(bào)錯(cuò)的。
剛開始學(xué)習(xí)的讀者，現(xiàn)在去深究如何命名一個(gè)變量還有些尚早，因?yàn)榻Y(jié)合了具體的需求場景才能體會(huì)到一個(gè)好的變量名的重要性。可以先在此做個(gè)了解。
對(duì)于變量名，除了上面提到的變量命名的規(guī)范，最需要注意的就是給變量起一個(gè)有意義的名字。
如求和：
var num1 = 1;
var num2 = 2;
var num3 = 3;
var num4 = 4;
var count = num1 + num2 + num3 + num4;
代碼塊123456其中num是number的縮寫，是很常用的一種縮寫。
count則是總數(shù)，表示求和的結(jié)果。
如果將上述例子做如下修改：
var a = 1;
var b = 2;
var c = 3;
var d = 4;
var e = a + b + c + d;
代碼塊123456缺少了有意義的變量名就比較難看出代碼具體在做什么。當(dāng)然這段代碼本身意義就不大，場景太過簡單。
剛才提到的縮寫，其實(shí)也是要注意的一點(diǎn)，縮寫上一定要使用通用的縮寫，如含有fn表示一個(gè)功能或者函數(shù)，avg 表示平均值，pwd 表示密碼，i18n 為國際化。
這些縮寫比較通用，大部分開發(fā)者都可以看得懂。隨著編碼經(jīng)驗(yàn)的增加，會(huì)在他人代碼里見到大量的縮寫，從而累積到自己的大腦的縮寫庫中。
最后需要注意的一點(diǎn)是業(yè)務(wù)中盡量不要含有中文拼音或中文拼音的縮寫，排開鄙視鏈的原因，最大的問題是會(huì)讓變量名變得冗長難懂。
以上內(nèi)容在寫 demo 或者測(cè)試功能的時(shí)候可以不需要考慮，寫 demo 等大部分情況是為了驗(yàn)證自己的猜想。
// 不合理的變量名
var ln = 'World'; // last name
var zs = 0; // 總數(shù)
var jinNianDeNianShouRu = 1999999999; // 今年的年收入
代碼塊1234以上是針對(duì)變量名的意義展開的討論。
還有需要注意的是變量命名的格式，大部分前端程序員會(huì)使用駝峰命名法，也就是第一個(gè)字母小寫，后續(xù)如果有新的單詞來進(jìn)行構(gòu)成，單詞的第一個(gè)字符都大寫。
如：
var firstName = 'Hello';
var lastName = 'world';
var createAt = 1577895179196;
var userInfo = '用戶信息'; // Info => Information
var isPaidUser = '是否付費(fèi)用戶';
代碼塊123456789可以見到上面的變量，從構(gòu)成變量名的第二個(gè)單詞開始，首字母都是大寫，這就是駝峰命名的格式，本 Wiki 所有變量名使用的就是這種格式。
當(dāng)然還有大駝峰，就是第一個(gè)字母也大寫。
除此之外最常用的還有使用下劃線分隔變量，如 user_info，還有按功能來劃分的變量名，如使用匈牙利命名法，這里不再做展開。
變量在聲明的時(shí)候，如果沒有賦值，則變量就會(huì)有一個(gè)默認(rèn)值 undefined。
var total;
console.log(total); // 輸出：undefined
代碼塊123undefined 是一種是數(shù)據(jù)類型，具體內(nèi)容可以參考數(shù)據(jù)類型章節(jié)。
使用一個(gè) var 關(guān)鍵字就可以直接聲明多個(gè)變量。
var num1 = 0, num2 = 1;
// 通常會(huì)換行，方便閱讀代碼
var num3 = 2,
num4 = 3,
num5 = 4,
num6,
num7 = 6;
代碼塊12345678在一個(gè)變量聲明后，使用逗號(hào)分隔，緊接著聲明下一個(gè)變量即可。
通常使用一個(gè) var 聲明多個(gè)變量的時(shí)候也會(huì)換行，方便后續(xù)閱讀，并保持代碼格式上的整潔清晰，防止一行過長。
在最外層聲明的變量（不包括 ES6 模塊的情況），實(shí)際上是變成了 window 對(duì)象的一個(gè)屬性。
var number = 996;
console.log(number); // 輸出：996
console.log(window.number); // 輸出：996
代碼塊1234上述代碼執(zhí)行后輸出的兩個(gè)內(nèi)容是一樣的，都為 996。有關(guān) window 對(duì)象的內(nèi)容可以參考 BOM 章節(jié)。
細(xì)心的讀者應(yīng)該會(huì)注意到最外層這個(gè)條件，因?yàn)樽兞窟€有可能聲明在函數(shù)之中，函數(shù)有自己獨(dú)立的作用域，通常在函數(shù)中使用 var 關(guān)鍵字聲明的變量，只在函數(shù)中有效。
至于為什么可以省略 window 直接訪問到變量，可以參考作用域鏈章節(jié)。
假如不使用 var 關(guān)鍵字，直接創(chuàng)建變量并賦值：
total = 10;
console.log(total); // 輸出：10
代碼塊123在控制臺(tái)運(yùn)行后會(huì)發(fā)現(xiàn)其實(shí)并沒有報(bào)錯(cuò)，輸出的結(jié)果也正常。
在非ES6模塊中，這樣創(chuàng)建的變量和使用 var 創(chuàng)建的變量除了不能提前使用之外，沒有其他大的區(qū)別，會(huì)被直接作為 window 對(duì)象的屬性，成為全局變量。
即便是在函數(shù)或者其他存在塊級(jí)作用域的環(huán)境中，這樣聲明的變量也會(huì)作為全局變量。
var a = b = 1;
代碼塊1假如把上面這行代碼拆開來可以理解成是這樣的：
b = 1;
var a = b;
代碼塊12看似沒什么問題，許多開發(fā)者也會(huì)用這種方式同時(shí)聲明多個(gè)變量，但如果在函數(shù)或者獨(dú)立的作用域中，b 就會(huì)成為全局變量，造成全局命名空間的污染。
按照之前說的，變量在聲明的時(shí)候如果沒有賦值，則會(huì)是 undefined，這個(gè)規(guī)則在重復(fù)聲明的情況下不適用。
var num = 1;
var num;
console.log(num); // 輸出：1
代碼塊1234觀察上面這個(gè)例子輸出的結(jié)果，可以發(fā)現(xiàn)變量 num 的值并沒有改變。
但是如果重新聲明的同時(shí)做賦值操作，值就會(huì)改變。
var num = 1;
var num = 3;
console.log(num); // 輸出：3
代碼塊1234這個(gè)例子輸出的結(jié)果，就是再次聲明并賦值后的值。
console.log(number); // 輸出：undefined
var number = 1;
代碼塊123這個(gè)例子先輸出了 number 的值，再聲明并對(duì)其進(jìn)行賦值。
代碼并沒有報(bào)錯(cuò)，但如果沒有第二行聲明，只輸出 number：
console.log(number); // Uncaught ReferenceError: number is not defined
代碼塊1這樣子會(huì)爆出變量未定義的錯(cuò)誤，說明變量是可以被提前使用，只是沒有值，或者說是 undefined 默認(rèn)值。
具體原因可以參考執(zhí)行上下文章節(jié)。
這里簡單的解釋可以理解成，在瀏覽器執(zhí)行的時(shí)候，會(huì)把代碼調(diào)整成如下樣子：
var number;
console.log(number); // 這個(gè)時(shí)候 number 還沒有被賦值，所以輸出 undefined
number = 1;
代碼塊12345常量就是定義并賦值后再也不能修改的量，通常一些不會(huì)改變的量，如配置、物理值等會(huì)聲明為常量，在 ES6 之前是沒有提供常量這一特性的。
但是根據(jù)常量自身的特性，定義賦值后不能被修改，就可以通過一些方式來模擬常量。
第一種就是采用約定的形式，通常常量都是大寫，不同單詞之間用下劃線分隔。
var PI = 3.1415926535;
var DB_ACCOUNT = 'root';
var DB_PASSWORD = 'root';
代碼塊1234這種方式定義的常量本質(zhì)上還是變量，值還是可以修改的，但因?yàn)槊袷讲捎?span style="color: #4C76C9; --tt-darkmode-color: #4C76C9;">國際慣例，一眼就能看出是常量，不會(huì)對(duì)其修改。
這種方式是最簡單的方式，但不安全。
第二種方式就是利用對(duì)象下屬性的描述來控制可寫性，將對(duì)象的屬性設(shè)置為只讀。
var CONFIG = {};
Object.defineProperty(CONFIG, 'DB_ACCOUNT', {
value: 'root',
writable: false,
});
console.log(CONFIG.DB_ACCOUNT); // 輸出：root
CONFIG.DB_ACCOUNT = 'guest';
console.log(CONFIG.DB_ACCOUNT); // 因?yàn)椴豢杀桓膶懀暂敵觯簉oot
代碼塊123456789101112這種方式將常量都放在一個(gè)對(duì)象下，通過Object.defineProperty定義屬性，設(shè)定其writable為false，就可以防止被改寫。
但有一個(gè)問題，CONFIG自身這個(gè)對(duì)象可能被修改。
換一個(gè)思路，既然在最外層聲明的變量是放在window上的，那可以用這個(gè)方式往 window上掛不可改寫的屬性。
Object.defineProperty(window, 'DB_ACCOUNT', {
value: 'root',
writable: false,
});
console.log(DB_ACCOUNT); // 輸出：root
DB_ACCOUNT = 'guest';
console.log(DB_ACCOUNT); // 因?yàn)椴豢杀桓膶懀暂敵觯簉oot
代碼塊12345678910通常情況下 window 對(duì)象是不可被修改的，這樣常量的安全系數(shù)就變得非常高，但缺點(diǎn)是可能性較差，通過一點(diǎn)修改可以提升可讀性。
var define = function(name, value) {
Object.defineProperty(window, name, {
value: value,
writable: false,
});
};
define('DB_ACCOUNT', 'root');
define('DB_PASSWORD', 'root');
代碼塊123456789只要約定好使用 define 函數(shù)定義的都為常量即可。
還有兩種方式，就是結(jié)合Object.seal與Object.freeze的特性來聲明常量。
前者可以使對(duì)象不能再被擴(kuò)充，但是所有屬性還需要再手動(dòng)設(shè)置不可寫，后者可以讓對(duì)象不能擴(kuò)充，屬性也不能修改。
這里對(duì)這兩個(gè)原生方法不再做過多描述，有興趣可以查閱相關(guān) API 資料。
變量就是存放值的容器。
變量名存在一些命名規(guī)則：
同時(shí)起變量名的時(shí)候需要有意義，靠近上下文場景。
歡迎關(guān)注「慕課網(wǎng)」，發(fā)現(xiàn)更多IT圈優(yōu)質(zhì)內(nèi)容，分享干貨知識(shí)，幫助你成為更好的程序員！
avaScript 代碼是由瀏覽器中的 JavaScript 解析器來執(zhí)行的。JavaScript 解析器在運(yùn)行 JavaScript 代碼的時(shí)候分為兩步：預(yù)解析和代碼執(zhí)行。
預(yù)解析：在當(dāng)前作用域下, JS 代碼執(zhí)行之前，瀏覽器會(huì)默認(rèn)把帶有 var 和 function 聲明的變量在內(nèi)存中進(jìn)行提前聲明或者定義。
代碼執(zhí)行： 從上到下執(zhí)行JS語句。
預(yù)解析只會(huì)發(fā)生在通過 var 定義的變量和 function 上。學(xué)習(xí)預(yù)解析能夠讓我們知道為什么在變量聲明之前訪問變量的值是 undefined，為什么在函數(shù)聲明之前就可以調(diào)用函數(shù)。
預(yù)解析也叫做變量、函數(shù)提升。變量提升變量的聲明會(huì)被提升到當(dāng)前作用域的最上面，變量的賦值不會(huì)提升。
console.log(num); // 結(jié)果是多少？
var num = 10; // ？函數(shù)提升： 函數(shù)的聲明會(huì)被提升到當(dāng)前作用域的最上面，但是不會(huì)調(diào)用函數(shù)。
fn();
function fn() {
console.log('打印');
}解決函數(shù)表達(dá)式聲明調(diào)用問題，參考以下代碼。
復(fù)雜的網(wǎng)站都會(huì)有大量的CSS代碼，通常也會(huì)有許多重復(fù)的值。
舉個(gè)例子，同樣一個(gè)顏色值可能在成千上百個(gè)地方被使用到，如果這個(gè)值發(fā)生了變化，需要全局搜索并且一個(gè)一個(gè)替換，效率不高且容易出錯(cuò)。
自定義屬性在某個(gè)地方存儲(chǔ)一個(gè)值，然后在其他許多地方引用它。另一個(gè)好處是語義化的標(biāo)識(shí)。比如，--main-text-color 會(huì)比 #00ff00 更易理解，尤其是這個(gè)顏色值在其他上下文中也被使用到。
自定義屬性（有時(shí)候也被稱作CSS變量或者級(jí)聯(lián)變量）是由CSS作者定義的，它包含的值可以在整個(gè)文檔中重復(fù)使用。
由自定義屬性標(biāo)記設(shè)定值（比如： --main-color: black;），由 var() 函數(shù)來獲取值（比如： color: **var(--main-color)**;）。
在構(gòu)建大型站點(diǎn)時(shí)，作者通常會(huì)面對(duì)可維護(hù)性的挑戰(zhàn)。在這些網(wǎng)頁中，所使用的CSS 的數(shù)量是非常龐大的，并且在許多場合大量的信息會(huì)重復(fù)使用。
例如，在網(wǎng)頁中維護(hù)一個(gè)配色方案，意味著一些顏色在 CSS 文件中多次出現(xiàn)，并被重復(fù)使用。當(dāng)你修改配色方案時(shí)，不論是調(diào)整某個(gè)顏色或完全修改整個(gè)配色，都會(huì)成為一個(gè)復(fù)雜的問題，不容出錯(cuò)，而單純查找替換是遠(yuǎn)遠(yuǎn)不夠的。
如果使用了CSS 框架，這種情況會(huì)變得尤其糟糕，此時(shí)如果要修改顏色，則需要對(duì)框架本身進(jìn)行修改。
在這些場合使用 LESS 或 Sass 類似的預(yù)處理器是非常有幫助的，但是這種通過添加額外步驟的方式，可能會(huì)增加系統(tǒng)的復(fù)雜性。
CSS變量為我們帶來一些預(yù)處理器的便利，并且不需要額外的編譯。
這些變量的第二個(gè)優(yōu)勢(shì)就是名稱本身就包含了語義的信息。CSS 文件變得易讀和理解。main-text-color比文檔中的#00ff00更容易理解，特別是同樣的顏色出現(xiàn)在不同的文件中的時(shí)候。
下面是 CSS 變量的使用方法和步驟。
我們都知道，在 JS 中要使用一個(gè)變量前，必須聲明這個(gè)表變量。在 CSS 中也是一樣的道理。
聲明一個(gè)自定義屬性，屬性名需要以兩個(gè)減號(hào)（--）開始，屬性值則可以是任何有效的CSS值。和其他屬性一樣，自定義屬性也是寫在規(guī)則集之內(nèi)的，如下：
body {
--bg-color: #7F583F;
--color: #F7EFD2;
}上面代碼中，body選擇器里面聲明了兩個(gè)變量：--bg-color和--color。
它們與color、font-size等正式屬性沒有什么不同，只是沒有默認(rèn)含義。所以 CSS 變量（CSS variable）又叫做**"CSS 自定義屬性"**（CSS custom properties）。
規(guī)則集所指定的選擇器定義了自定義屬性的可見作用域。通常的最佳實(shí)踐是定義在根偽類 :root下，這樣就可以在HTML文檔的任何地方訪問到它了：
:root {
--main-bg-color: #eee;
}自定義屬性名是大小寫敏感的，--my-color 和 --My-color 會(huì)被認(rèn)為是兩個(gè)不同的自定義屬性。
通過var()函數(shù)來讀取變量。語法如下:
var(custom-property-name, value)變量名稱必須以兩個(gè)破折號(hào)（--）開頭，且區(qū)分大小寫！
使用方法：
element {
background-color: var(--main-bg-color);
}變量也可以使用在變量聲明中：
:root {
--primary-color: #eee;
--primary-bg-color: var(--main-bg-color);
}變量值只能用作屬性值，不能用作屬性名。
在 JS 代碼中，我們可能需要讀取 CSS 變量的值，其方法如下：
const root = document.querySelector(":root");
// 設(shè)置 CSS 變量
root.style.setProperty("--main-bg-color", "red");
// 讀取 CSS 變量
const computedStyle = getComputedStyle(root);
const mainBgColor = computedStyle.getPropertyValue("--main-bg-color");
console.log(mainBgColor);
// 刪除 CSS 變量
root.style.removeProperty("--main-bg-color");以上就是關(guān)于 CSS 變量的一些基本概念及使用方法，更多詳情待后續(xù)！
靈活使用 CSS 變量，不僅可以提高生產(chǎn)力，也能夠提高代碼的可閱讀性和維護(hù)性。
~
~
~ 本文完
學(xué)習(xí)有趣的知識(shí)，結(jié)識(shí)有趣的朋友，塑造有趣的靈魂！
大家好！我是〖編程三昧〗的作者 隱逸王，我的公眾號(hào)是『編程三昧』，歡迎關(guān)注，希望大家多多指教！
知識(shí)與技能并重，內(nèi)力和外功兼修，理論和實(shí)踐兩手都要抓、兩手都要硬！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
