JavaScript ES6入門


 

ECMAScript是JavaScript的標準,JavaScript是ECMAScript的實現。

ES6是2015年發佈的,也叫作ES2015。ES6的目標是使JS可以編寫複雜的⼤型應⽤程序,成爲企業級開發語⾔。

 

ES6項目環境的搭建

因爲某些瀏覽器不支持ES6,我們需要使用babel將ES6代碼轉換爲低版本的ES代碼(低版本js代碼),以兼容某些不支持ES6的瀏覽器。
 
1、在VSCode中打開項目,Ctrl+~打開終端

#初始化項目配置
npm init -y  

#安裝babel-cli、設置轉換規則
npm install --save-dev babel-cli babel-preset-es2015

先打開項目再安裝,這種安裝方式是局部安裝,只給當前項目安裝babel。
不打開項目就安裝,則爲全局安裝,所有項目都可以使用babel。
 

2、項目根目錄下新建文件夾src(名稱也常用js)、dist,src|js放ES6代碼(js代碼),dist放轉換得到的低版本ES代碼。
 

3、項目根目錄下新建babel配置文件.babelrc

// 配置轉換使用的規則集
{
    "presets": ["es2015"]
}

 
4、在package.json中配置babel轉譯

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",  //逗號分隔
    "build": "babel src -w -d dist"  //babel腳本命令,key可以自己取
  },

scripts對象中,每個鍵值對都是一個腳本命令,key是腳本名稱,value是腳本命令。
自己可以配置多個腳本命令。
 

babel 源文件|目錄 [-w] [-o|-d] 目標文件|目錄

-w 可選,表示一直監聽源文件|目錄,保存文件時自動轉譯。如果不使用此參數,每次轉譯都需要在VSCode終端執行 “npm run 腳本名稱“

-o指定輸出的目標文件,-d指定輸出的目標目錄。如果只轉譯某個js文件,也可以這樣寫
babel src/xxx.js [-w] -o dist/xxx.js

 

5、VSCode終端轉譯

項目寫好之後,將ES6代碼轉換爲低版本ES代碼

npm run build  #run後面是scripts中的babel腳本名稱,使用npm運行babel腳本完成轉譯

babel腳本使用了-w會一直監聽,Ctrl+C可退出監聽。
可以在src下寫個js文件,裏面寫句ES6代碼 let a=1; 轉譯下看能否成功、配置是否生效。

寫代碼時,在項目根目錄下新建css、img、plugin等文件夾放對應的文件,html文件可以直接放在項目根目錄下,也可以新建文件夾html來存放.html文件。

轉譯時默認使用嚴格模式。

 

新的變量聲明方式 let、const

ES5用var聲明變量、常量,ES6用let聲明變量、const聲明常量(只讀變量)。

1、內存泄漏、塊級作用域

if(true){
    var a=1;
}
console.log(a);  //1


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

var的局部作用域只適用於函數,函數外部不能訪問函數內部的局部變量(閉包除外),但在if、for等語句中聲明的局部變量,可以在語句塊外訪問,會造成內存泄漏。

在if、for等語句塊中使用let、const聲明局部變量,則該局部變量的作用域只是語句塊,在語句塊外無法訪問。

 

2、重複聲明

var i=1;
var i=2;

在同一作用域var可以重複聲明變量,let、const則不允許這樣做。

 

3、作用域提升、暫時性死區

//如果使用之前或之後沒有聲明這個變量,此句代碼會報錯:i沒有定義
console.log(i);  


//如果之後用var聲明瞭這個變量,不會報錯
console.log(i);  //不會報錯,i的值是undefined
var i=1;


//上面2句代碼執行過程如下
var i;   //var在需要時會自動提升變量作用域,但只是將聲明提前,到實際賦值處纔會賦值
//這期間該變量的值是undefined(沒有值),聲明瞭但沒有賦值,這個代碼區間叫做該變量的暫時性死區,賦值之後才恢復活力,可以正常使用
console.log(i);  //不會報錯,i的值是undefined
i=1;

let、const不會自動提升作用域,要求變量、常量必須先聲明、再使用。

 

4、常量的使用

var NAME;
NAME="xxx";
NAME="yyy";

var聲明的常量,其實只是標識符全大寫罷了,和變量完全相同,可以先聲明後賦值,可以修改值。

使用const聲明常量,在聲明時就必須賦值,且後續不能修改該常量的值。如果常量值是引用,const只能保證常量值(引用的指針)不被修改,引用指向的數組、對象本身是可以修改的。

const不僅僅只用於聲明常量,如果想保護變量不被修改,也可以使用const來聲明變量。

 

新的數據類型Symbol

Symbol可以創建獨一無二的變量

let str1="chy";
let str2="chy";
console.log(str1==str2);  //true


let obj1=Symbol("chy");
let obj2=Symbol("chy"); 
console.log(obj1==obj2);  //false


// 也可以這樣寫
let obj3=Symbol.for("chy");
console.log(obj2==obj3);  //false

 

解構賦值

解構賦值可以把可迭代的數據(數組、對象)批量賦給變量


let a,b,c,d;

// 解構數組
[a,b,c,d]=[12,45,32,21];  //解構賦值,右邊的第n個元素賦給左邊的第n個變量,a=12,b=45,c=32,d=21

[a,b,c=0,d=0]=[1,2];  //元素不夠時可以設置默認值

[a,,b]=[12,5,3];  //可以跳過數組的元素,a=12,b=3,5被跳過了

[a,...b]=[32,45,5,13];  //...b表示把後面的元素作爲數組賦給b,帶...的變量要放在最後
console.log(a,b);  //32  [45, 5, 13]



let name,age;

// 解構對象,整個式子要放在()中
({"name":name,"age":age}={"name":"chy","age":20})  //解構對象的意義在於把value批量賦給變量
console.log(name,age); //chy  20

解構賦值主要用於前後端聯調(tiao),後臺返回json對象、json數組,前端使用解構賦值把json對象、json數組中的數據批量賦給變量,後續使用這些變量。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章