JavaScript 變量提升

JavaScript 中，函數(shù)及變量的聲明都將被提升到函數(shù)的最頂部。

JavaScript 中，變量可以在使用后聲明，也就是變量可以先使用再聲明。

以下兩個實(shí)例將獲得相同的結(jié)果：

實(shí)例 1

x=5; // 變量 x 設(shè)置為 5

elem=document.getElementById("demo"); // 查找元素

elem.innerHTML=x; // 在元素中顯示 x

var x; // 聲明 x

實(shí)例 2

var x; // 聲明 x

x=5; // 變量 x 設(shè)置為 5

elem=document.getElementById("demo"); // 查找元素

elem.innerHTML=x; // 在元素中顯示 x

要理解以上實(shí)例就需要理解 "hoisting(變量提升)"。

變量提升：函數(shù)聲明和變量聲明總是會被解釋器悄悄地被"提升"到方法體的最頂部。

JavaScript 初始化不會提升

JavaScript 只有聲明的變量會提升，初始化的不會。

以下兩個實(shí)例結(jié)果結(jié)果不相同：

實(shí)例 1

var x=5; // 初始化 x

var y=7; // 初始化 y

elem=document.getElementById("demo"); // 查找元素

elem.innerHTML=x + " " + y; // 顯示 x 和 y

實(shí)例 2

var x=5; // 初始化 x

elem=document.getElementById("demo"); // 查找元素

elem.innerHTML=x + " " + y; // 顯示 x 和 y

var y=7; // 初始化 y

實(shí)例 2 的 y 輸出了 undefined，這是因?yàn)樽兞柯暶?(var y) 提升了，但是初始化(y=7) 并不會提升，所以 y 變量是一個未定義的變量。

實(shí)例 2 類似以下代碼:

var x=5; // 初始化 xvar y; // 聲明 yelem=document.getElementById("demo"); // 查找元素elem.innerHTML=x + " " + y; // 顯示 x 和 yy=7; // 設(shè)置 y 為 7

在頭部聲明你的變量

對于大多數(shù)程序員來說并不知道 JavaScript 變量提升。

如果程序員不能很好的理解變量提升，他們寫的程序就容易出現(xiàn)一些問題。

為了避免這些問題，通常我們在每個作用域開始前聲明這些變量，這也是正常的 JavaScript 解析步驟，易于我們理解。

	JavaScript 嚴(yán)格模式(strict mode)不允許使用未聲明的變量。在下一個章節(jié)中我們將會學(xué)習(xí)到 "嚴(yán)格模式(strict mode)" 。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

景

復(fù)雜的網(wǎng)站都會有大量的CSS代碼，通常也會有許多重復(fù)的值。

舉個例子，同樣一個顏色值可能在成千上百個地方被使用到，如果這個值發(fā)生了變化，需要全局搜索并且一個一個替換，效率不高且容易出錯。

自定義屬性在某個地方存儲一個值，然后在其他許多地方引用它。另一個好處是語義化的標(biāo)識。比如，--main-text-color 會比 #00ff00 更易理解，尤其是這個顏色值在其他上下文中也被使用到。

概念

自定義屬性（有時候也被稱作CSS變量或者級聯(lián)變量）是由CSS作者定義的，它包含的值可以在整個文檔中重復(fù)使用。

由自定義屬性標(biāo)記設(shè)定值（比如： --main-color: black;），由 var() 函數(shù)來獲取值（比如： color: **var(--main-color)**;）。

優(yōu)勢

在構(gòu)建大型站點(diǎn)時，作者通常會面對可維護(hù)性的挑戰(zhàn)。在這些網(wǎng)頁中，所使用的CSS 的數(shù)量是非常龐大的，并且在許多場合大量的信息會重復(fù)使用。

例如，在網(wǎng)頁中維護(hù)一個配色方案，意味著一些顏色在 CSS 文件中多次出現(xiàn)，并被重復(fù)使用。當(dāng)你修改配色方案時，不論是調(diào)整某個顏色或完全修改整個配色，都會成為一個復(fù)雜的問題，不容出錯，而單純查找替換是遠(yuǎn)遠(yuǎn)不夠的。

如果使用了CSS 框架，這種情況會變得尤其糟糕，此時如果要修改顏色，則需要對框架本身進(jìn)行修改。

在這些場合使用 LESS 或 Sass 類似的預(yù)處理器是非常有幫助的，但是這種通過添加額外步驟的方式，可能會增加系統(tǒng)的復(fù)雜性。

CSS變量為我們帶來一些預(yù)處理器的便利，并且不需要額外的編譯。

這些變量的第二個優(yōu)勢就是名稱本身就包含了語義的信息。CSS 文件變得易讀和理解。main-text-color比文檔中的#00ff00更容易理解，特別是同樣的顏色出現(xiàn)在不同的文件中的時候。

用法

下面是 CSS 變量的使用方法和步驟。

CSS 中聲明變量

我們都知道，在 JS 中要使用一個變量前，必須聲明這個表變量。在 CSS 中也是一樣的道理。

聲明一個自定義屬性，屬性名需要以兩個減號（--）開始，屬性值則可以是任何有效的CSS值。和其他屬性一樣，自定義屬性也是寫在規(guī)則集之內(nèi)的，如下：

body {
    --bg-color: #7F583F;
    --color: #F7EFD2;
}

上面代碼中，body選擇器里面聲明了兩個變量：--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 會被認(rèn)為是兩個不同的自定義屬性。

CSS 中使用變量

通過var()函數(shù)來讀取變量。語法如下:

var(custom-property-name, value)

name (必需) 變量名（以兩條破折號開頭）。
value (可選) 表示變量的默認(rèn)值。如果該變量不存在，就會使用這個默認(rèn)值。

變量名稱必須以兩個破折號（--）開頭，且區(qū)分大小寫！

使用方法：

element {
  background-color: var(--main-bg-color);
}

變量也可以使用在變量聲明中：

:root {
  --primary-color: #eee;
  --primary-bg-color: var(--main-bg-color);
}

變量值只能用作屬性值，不能用作屬性名。

JS 操作 CSS 變量

在 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");

總結(jié)

以上就是關(guān)于 CSS 變量的一些基本概念及使用方法，更多詳情待后續(xù)！

靈活使用 CSS 變量，不僅可以提高生產(chǎn)力，也能夠提高代碼的可閱讀性和維護(hù)性。

~ 本文完

學(xué)習(xí)有趣的知識，結(jié)識有趣的朋友，塑造有趣的靈魂！
大家好！我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關(guān)注，希望大家多多指教！
知識與技能并重，內(nèi)力和外功兼修，理論和實(shí)踐兩手都要抓、兩手都要硬！

變量是用于存儲信息的"容器"。

實(shí)例

var x=5;

var y=6;

var z=x+y;

就像代數(shù)那樣

x=5

y=6

z=x+y

在代數(shù)中，我們使用字母（比如 x）來保存值（比如 5）。

通過上面的表達(dá)式 z=x+y，我們能夠計(jì)算出 z 的值為 11。

在 JavaScript 中，這些字母被稱為變量。

	您可以把變量看做存儲數(shù)據(jù)的容器。

JavaScript 變量

與代數(shù)一樣，JavaScript 變量可用于存放值（比如 x=5）和表達(dá)式（比如 z=x+y）。

變量可以使用短名稱（比如 x 和 y），也可以使用描述性更好的名稱（比如 age, sum, totalvolume）。

變量必須以字母開頭
變量也能以 $ 和 _ 符號開頭（不過我們不推薦這么做）
變量名稱對大小寫敏感（y 和 Y 是不同的變量）

	JavaScript 語句和 JavaScript 變量都對大小寫敏感。

JavaScript 數(shù)據(jù)類型

JavaScript 變量還能保存其他數(shù)據(jù)類型，比如文本值 (name="Bill Gates")。

在 JavaScript 中，類似 "Bill Gates" 這樣一條文本被稱為字符串。

JavaScript 變量有很多種類型，但是現(xiàn)在，我們只關(guān)注數(shù)字和字符串。

當(dāng)您向變量分配文本值時，應(yīng)該用雙引號或單引號包圍這個值。

當(dāng)您向變量賦的值是數(shù)值時，不要使用引號。如果您用引號包圍數(shù)值，該值會被作為文本來處理。

實(shí)例

var pi=3.14;

var person="John Doe";

var answer='Yes I am!';

聲明（創(chuàng)建） JavaScript 變量

在 JavaScript 中創(chuàng)建變量通常稱為"聲明"變量。

我們使用 var 關(guān)鍵詞來聲明變量：

var carname;

變量聲明之后，該變量是空的（它沒有值）。

如需向變量賦值，請使用等號：

carname="Volvo";

不過，您也可以在聲明變量時對其賦值：

var carname="Volvo";

在下面的例子中，我們創(chuàng)建了名為 carname 的變量，并向其賦值 "Volvo"，然后把它放入 id="demo" 的 HTML 段落中：

實(shí)例

var carname="Volvo";

document.getElementById("demo").innerHTML=carname;

	一個好的編程習(xí)慣是，在代碼開始處，統(tǒng)一對需要的變量進(jìn)行聲明。

一條語句，多個變量

您可以在一條語句中聲明很多變量。該語句以 var 開頭，并使用逗號分隔變量即可：

var lastname="Doe", age=30, job="carpenter";

聲明也可橫跨多行：

var lastname="Doe",

age=30,

job="carpenter";

Value=undefined

在計(jì)算機(jī)程序中，經(jīng)常會聲明無值的變量。未使用值來聲明的變量，其值實(shí)際上是 undefined。

在執(zhí)行過以下語句后，變量 carname 的值將是 undefined：

var carname;

重新聲明 JavaScript 變量

如果重新聲明 JavaScript 變量，該變量的值不會丟失：

在以下兩條語句執(zhí)行后，變量 carname 的值依然是 "Volvo"：

var carname="Volvo";

var carname;

JavaScript 算數(shù)

您可以通過 JavaScript 變量來做算數(shù)，使用的是=和 + 這類運(yùn)算符：

實(shí)例

y=5;

x=y+2;

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

JavaScript 變量提升

景

概念

優(yōu)勢

用法

CSS 中聲明變量

CSS 中使用變量

JS 操作 CSS 變量

總結(jié)

您的項(xiàng)目需求