JavaScrip入門指南之「ES6簡介」(筆記七)

ES6語法的簡介

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

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

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

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

1、var的弊端及let關鍵字

使用var關鍵字聲明變量的弊端:數組

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

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

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

四、var 聲明的變量沒有塊級做用域(ES5中的做用域:全局和局部)app

// 一、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關鍵字中獲得解決:ide

​
// 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 確定不認識,直接報錯。

相關文章
相關標籤/搜索