工作中常用到的ES6語法-定義變量

、let和const

在JavaScript中咱們以前主要用關鍵var來定義變量，ES6之后，新增了定義變量的兩個關鍵字，分別是let和const。對于變量來說，在ES5中var定義的變量會提升到作用域中所有的函數與語句前面，而ES6中let定義的變量則不會，let聲明的變量會在其相應的代碼塊中建立一個暫時性死區，直至變量被聲明。 let和const都能夠聲明塊級作用域，用法和var是類似的，let的特點是不會變量提升，而是被鎖在當前塊中。

function test() {
if(true){
 console.log(a)//TDZ，俗稱臨時死區，用來描述變量不提升的現象 
let a =1
}
}
test()// a is not defined
function test() {
 if(true){
 let a =1
 }
 console.log(a)
}
 
test()// a is not defined

唯一正確的使用方法：先聲明，再訪問。

function test() { 
 if(true){ 
 let a =1
 console.log(a)
 }
}
test()// 1

const 聲明常量，一旦聲明，不可更改，而且常量必須初始化賦值。 const雖然是常量，不允許修改默認賦值，但如果定義的是對象Object，那么可以修改對象內部的屬性值。const和let的異同點 相同點：const和let都是在當前塊內有效，執行到塊外會被銷毀，也不存在變量提升（TDZ），不能重復聲明。 不同點：const不能再賦值，let聲明的變量可以重復賦值。 const實際上保證的，并不是變量的值不得改動，而是變量指向的那個內存地址所保存的數據不得改動。對于簡單類型的數據（數值、字符串、布爾值），值就保存在變量指向的那個內存地址，因此等同于常量。但對于復合類型的數據（主要是對象和數組），變量指向的內存地址，保存的只是一個指向實際數據的指針，const只能保證這個指針是固定的（即總是指向另一個固定的地址），至于它指向的數據結構是不是可變的，就完全不能控制了。因此，將一個對象聲明為常量必須非常小心。

塊級作用域的使用場景 除了上面提到的常用聲明方式，我們還可以在循環中使用，最出名的一道面試題：循環中定時器閉包的考題在for循環中使用var聲明的循環變量，會跳出循環體污染當前的函數。

for(var i =0; i <5;i++) {
 setTimeout(()=>{
 console.log(i) //5, 5, 5, 5, 5 
},0)
}
console.log(i) //5 i跳出循環體污染外部函數
//將var改成let之后
for(let i = 0; i < 5; i++){
 setTimeout(() =>{
 console.log(i)// 0,1,2,3,4},0)
}
console.log( i )//i is not defined i無法污染外部函數

symbol ES6 以前，我們知道5種基本數據類型分別是Undefined，Null，Boolean，Number以及String，然后加上一種引用類型Object構成了JavaScript中所有的數據類型，但是ES6出來之后，新增了一種數據類型，名叫symbol，像它的名字表露的一樣，意味著獨一無二，意思是每個 Symbol類型都是獨一無二的，不與其它 Symbol 重復。可以通過調用 Symbol() 方法將創建一個新的 Symbol 類型的值，這個值獨一無二，不與任何值相等。

頭條創作挑戰賽#

變量的含義及分類：

變量含義及操作：

變量指的是數據的命名及存儲，在javascript中創建一個變量，需要用到 "let" 關鍵字來聲明，并通過賦值運算符 "=" 為變量添加數據。

例如：

// 注釋    
/* 注釋 */    
let message;  // 將文本賦值給了變量名為 message的變量名    
message = "顯示一個消息";    
alert(message);  // 通過調用 alert方法來顯示該變量。

javascript顯示

也可以在一行中聲明多個變量，

例如：

// 多變量聲明賦值    
let a = '我是a————', b = '我是b————', c = '我是c';    
alert(a + b + c);

javascript聲明多個變量

這句代碼看上去很簡短，但是不推薦這樣的命名方式，這樣的命名方式會使得協同開發者很難閱讀，為了可閱讀性，請一行只聲明一個變量，多行變量雖然有點長，但是能夠提高我們的可閱讀性。在對變量重復賦值時，新的值會覆蓋掉前一賦值操作，也可以采用等同賦值操作，像下面這樣：

// 等同賦值操作    
let msg = "一個等同賦值消息";    
let al_msg;    
al_msg= msg;    
alert(al_msg);

javascript等同賦值

一個變量聲明兩次則會觸發 error報錯。因此我們要避免這種操作。如下是報錯截圖：

let msg = 'error'    
alert(msg)

javascript二次生命報錯

變量命名方式：

命名必須采用字母、數字、下劃線、符號 "$" 和英文下劃線 "_"。首字母必須非數字，例如：

// 變量命名方式    
let user_Name;    
let 123test;    // 命名時就會報錯    
alert(user_Name);    
alert(123test)

javascript數字開頭命名報錯

命名出現多個單詞時，采用駝峰原則的形式，除了第一個單詞，其他的單詞采用首字母大寫的原則，美元符號 "$" 和下劃線 "_" 也是可以用來命名的，跟字母一樣，沒有特殊含義。例如：

// 美元符號及下劃線用作命名    
let $ = "美元符號————";    
let _ = "下劃線";    
alert($ + _)

javascript符號命名

在命名時需要區分大寫的，在javascript中，不同大小寫的字母是不同的，例如：test 和 TEST。除了以上的類型用作命名外，還支持非字母和數字，但不推薦用來命名，主要是不便于協同開發。在命名時，我們也要避免與系統的關鍵字碰車，例如： let 、class、 return、 function等。

常量

常量與變量沒有多大的區別，但是常量的定義為，固定的值或者為你當前已知的數據值。例如 NAME = "李強"，這個名字就是永存不變的，命名后就一直不變。常量的命名方式，我們將采用const 來聲明一個常量且常量名為大寫字母，命名后無法對常量進行修改。

// 常量的聲明    
const name = "李白";    
alert(name);    
name = "新名字";    
alert(name)

javascript常量命名

javascript常量命名二次賦值失敗

關注我！學習更多編程知識。

.scss中定義變量

$bg-color: #ed795a; //也可以$bg-color: #ed795a !default;這樣寫 !default 表示是默認值
.btn-default{
   background-color:$bg-color;
}
 
.btn-default{//編譯后是
    background-color:#ed795a;
}
scss中的變量也存在作用域，類似于js中的局部變量
$bg-color: #ed795a;
 
.app{
	$bg-color: #8ab945;//類似于js的局部變量
}
 
.btn-default{
   background-color:$bg-color;//這里是 #ed795a 而不是.app里的 #8ab945
}

關于scss中參數傳遞

//@mixin 進行聲明 多個參數 , 分割
@mixin wd($width){
	width:$width;
}
 
@mixin h($height:18px){
	height:@$height
}
 
.btn{// @include進行調用
    background-color:$bg-color;
    @include wd(32px);
    @include h;//不傳 則默認18px
}
  
//編譯后是
  .btn{
    background-color:#ed795a;
    width:32px;
    height:18px; 
}

2.less樣式定義變量

以@符號開頭即可

@bg-color:#8ab945;定義變量bg-color的顏色為#8ab945
 
.btn-default{
   background-color:@bg-color;//獲取之前定義的顏色
}
 
.btn-default{//編譯后
   background-color:#8ab945;
}

less樣式中進行參數傳遞

//less中定義可傳參的樣式相比較scss中要簡單  多個參數;分割
.wd(@width) {//無默認值
    width:@width;
}
 
.height(@h:18px) {//有默認值 18px; 
    height:@h;
}
 
.btn {
     background-color:@bg-color;
    .wd(32px);
    .height(22px);
}
 
//編譯后是
.btn{
    background-color:#ed795a;
    width:32px;
    height:22px; 
}

3.css樣式中定義變量

以--開頭即可，在需要用到的地方以var()函數調用定義的變量名即可獲取對應值。

body{ //這里限定了變量的作用域是 body
   --bg-color:#8ab945;
}
 
.btn-default{
   background-color:var(--bg-color);
}

目前css中定義的變量在ie(具體哪些版本不兼容本人并未測試)中并不兼容，請大家謹慎使用!

在線咨詢

上一篇：一鍵即可復制網頁上的文字，媽媽再也不用擔心我查找資料了
下一篇：不一樣的前端面試題答案_簡述CSS3 #前端面試

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商