JavaScrip入門指南之「ES6簡介」（筆記七）

ES6語法的簡介

瀏覽器：javascript 三個部分： ECMAScript + BOM + DOM 服務器：javascript = ECMAScript + 系統內置的核心模塊(fs http)

ECMAScript 是什麼？ 是一個 規範。 ECMA 是一個組織協會，協會專門負責制定各類規則。他們制定了一個 ECMAscript 規範，規定腳本語言實現。變量聲明 var function fnName 有哪些語言實現這個規範： 1. JavaScript 2. actionScript（flash 動畫 flash小遊戲）

發展過程當中 js 有不少的版本的迭代 咱們前面學習的版本 ECMAscript5 版本

如今學習 ECMAScript6版本，也叫作es6版本。引入了不少新的語法特性。例如使用 let 聲明變量 const 聲明常量。

1、var的弊端及let關鍵字

使用var關鍵字聲明變量的弊端：

一、var聲明的變量有預解析，形成 邏輯混亂，能夠先使用，後聲明

二、var能夠重複定義同一個變量，邏輯錯誤，第二次應該是修改變量，而不是定義

三、var用在for循環條件中，形成for 循環的污染的問題

四、var 聲明的變量沒有塊級做用域（ES5中的做用域：全局和局部）

// 一、var聲明的變量有解析，形成 邏輯混亂，能夠先使用，後聲明
// var a = 10;
// console.log(a);
​
// 二、var能夠重複定義同一個變量，邏輯錯誤，第二次應該是修改變量，而不是定義
// var a = 10;
// var a = 30;
// console.log(a);
​
// 三、var用在for循環條件中，形成for 循環的污染的問題
// for(var i=0; i<10; i++){
//     console.log(i);
// }
// console.log("=====================");
// console.log(i);
​
// 四、var 聲明的變量沒有塊級做用域（ES5中的做用域：全局和局部）
// {
//     var b = 200;
// }
// console.log(b);
複製代碼

上面這些弊端，都在 ES6中的let關鍵字中獲得解決： 上面這些弊端，都在 ES6中的let關鍵字中獲得解決：

​
// console.log(a);   //報錯
// let a = 10;
​
// let a = 10;
// let a = 30; //報錯
​
​
// for(let i=0; i<10; i++){
//     console.log(i);
// }
// console.log("=====================");
// console.log(i);    //報錯
​
​
{
    let b = 200;
}
console.log(b);   //報錯
​
複製代碼

因此，let的特色：

一、let聲明的變量沒有預解析，不會有變量提高

二、let不能夠重複定義同一個變量

三、let用在for循環條件中，不會形成for 循環的污染的問題

四、let聲明的變量有塊級做用域（ES6中的做用域：全局和局部還有塊級做用域）

2、用const定義常量

一、這種定義出來的量不容許被修改。修改就報錯。

二、通常的，大多數狀況下，會把const定義的量用大寫來書寫。

三、引入某個模塊的某個對象，也能夠用const，能夠進行小寫命名。

四、對象型的常量，它的屬性能夠修改

五、數組型常量中的每一項數據能夠修改 五、數組型常量中的每一項數據能夠修改

var PI = 3.141592653;

 console.log(PI);

 PI = 3.5;   //不符合咱們認知，由於π是個定值
 console.log(PI);
//----------------------------------------------------
 const PI = 3.141592653;   //定義PI常量
 PI = 3.5;    //報錯
​
//----------------------------------------------------
 const OBJ = {
     name: "nodejs",
     age:11,
     email:"nodejs@163.com"
 };

 OBJ = {};  //報錯

 OBJ.job = "nodejs@qq.com";  //能夠修改爲功
 console.log(OBJ);   //{ name: 'nodejs', age: 11, email: 'nodejs@qq.com' }
//----------------------------------------------------
​
const ARR = [10, 0, 30];
ARR[1] = 20;
console.log(ARR);   //[ 10, 20, 30 ]
複製代碼

3、解構語法

3.一、對象解構

// 對象解構
let obj = {
    name:"nodejs",
    age:11,
    email:"nodejs@163.com"
}
​
let name = "zhangsan"
​
 獲取obj的屬性有哪些方法：
 方法1：
 let name = obj.name;
 let age = obj.age;
 let email = obj.eamil;
​
// 方法2：
 let name = obj["name"];
 let age = obj["age"];
 let email = obj["email"];
​
// 方法3：(解構)
 let {name, email, age} = obj;  //徹底解構    解構的寫法等效於上面的方法1
 console.log(name, age, email);
​
​
let {name} = obj;   // 部分解構  等效於： let name = obj.name
console.log(name);
​
​
 let {name:myName} = obj;   // 部分解構起別名  等效於： let name = obj.name
console.log(myName);
​
// 注意點： 
 一、大括號裏面的變量名，都只能是obj裏面的屬性名。
 二、大括號裏面的變量名順序能夠任意
 三、若是隻想獲取部分屬性，能夠只寫這部分屬性名
 四、let {name} = obj;  等效於： let name = obj.name
 五、let {name:myName} = obj; 給name起了一個別名叫myName，取obj的name屬性賦值給myName這個新變量
​
複製代碼

3.二、數組解構

let arr1 = [10, 20, 30];
​
let [a, b, c] = arr1;
​
console.log(a);  //10
console.log(b);  //20
console.log(c);  //30
​
// 部分解構
let [d] = arr1;
console.log(d);  //10
​
let [ , ,f] = arr1;
console.log(f);  //30
​
​
// 複合解構
let arr2 = [1, 2, [10, 20, 30]];
let [ j, k, [x, y, z]] = arr2;
console.log(j);  //1
console.log(k);  //2
console.log(x);  //10
console.log(y);  //20
console.log(z);  //30
複製代碼

3.三、字符串解構

let string1 = "xyz";
​
let [a,b,c] = string1;
console.log(a);  //x
console.log(b);  //y
console.log(c);  //z
​
​
string1[1] = "Y";
console.log(string1);  // xyz    沒法修改
console.log(string1[1]);  // y
複製代碼

4、模板字符串

var userInfo = {
    id: 1,
    name: 'andy',
    email: 'gogery@163.com'
}
​
// 需求：但願把對象拼接爲字符串： the userId is xxx, my name is xxx, my email is xxx;
​
/*var tmpl = 'the userId is '
    + userInfo.id + ', my name is '
    + userInfo.name + ', my email is '
    + userInfo.email;
​
console.log(tmpl);*/
​
​
var es5tpl = 'the userId is xxx, my name is xxx, my email is xxx';
​
​
// es6 提供一個語法表示一個字符串，使用的標識符是 反引號；
// 之前定義字符串使用的： '' ""
// 1. 容許換行 2. 容許在模板字符串裏面直接使用變量
var infos = 'lorem';
​
var tmpl = `the userId is ${userInfo.id}, 
​
my name is ${userInfo.name},
​
string is ${infos}
 
 my email is ${userInfo.email}`;
// `` 反引號 數字鍵 1旁邊的鍵，須要是 shift  + `
console.log(tmpl);
複製代碼

5、es6對象的簡化寫法

/*var name = 'andy';
var age = 12;
​
var userInfo = {
    id: 1,
    name: name,
    age: age
}
​
console.log(userInfo);*/
​
let id = 12;
let name = 'andy';
let age = 12;
​
let fn = function(){
    console.log(`my name is ${this.name}` );
}
​
// es6 寫法
let userInfo = {
    id,
    // 若是咱們的變量的名稱和屬性的名稱一致，則能夠直接只寫變量名
    name, // name: name
    age,
    fn // 若是咱們的函數的名稱和屬性的名稱一致，直接寫函數名便可
}
​
console.log(userInfo);
userInfo.fn();
複製代碼

6、ES6其餘注意事項

注意： es6 語法特性若是是在nodejs的高版本執行沒啥問題，高版本支持 es6；

若是是nodejs 低版本 4 5 不支持 es6（ECMAScript6 ECMAScript2015） 除了能夠在nodejs 也能夠在瀏覽器執行 注意：瀏覽器高版本才能夠執行， 若是是 IE 678 確定不認識，直接報錯。