ES6語法基本使用

什么是ES6？

• ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標准，已經在2015年6月正式發布了。Mozilla公司將在這個標准的基礎上，推出JavaScript 2.0。
• ECMAScript是JavaScript語言的國際標准，JavaScript是ECMAScript的實現。
• ES6的目標，是使得JavaScript語言可以用來編寫大型的復雜的應用程序，成為企業級開發語言。

ES6官方中文網（http://es6.ruanyifeng.com/）

變量定義（var，let，const）

 

• 一般函數中都是用var去定義變量，因為它是關鍵字可以預解析。
• ES6中推薦使用let去定義變量，let定義的是一般變量。
• const定義的是常量，是不可修改的。

<script type="text/javascript">
        <!--定義var值-->
        var ht=20;
        <!--定義let值-->
        let nn=30;
        <!--定義const值-->
        const pcl=183;
        alert(ht);  //20
        alert(nn);    //30
        alert(pcl);    //183
        
         ht=21;
         nn=31;
       //pcl=184;//報錯,const定義的常量是不可修改的
        alert(ht);  //21
        alert(nn);  //31
        alert(pcl); //183
    </script>

 

箭頭函數，

 

// 通過箭頭函數的寫法定義
var fnRs = (a,b)=>{
    var rs = a + b;
    alert(rs);
}        
// fnRs(1,2);
// 一個參數可以省略小括號
var fnRs2 = a =>{
    alert(a);
}
fnRs2('本是青燈不歸客');
 
// 箭頭函數的作用，可以綁定對象中的this(這里的this不是window而是對象)
var person = {
    name:'tom',
    age:18,
    showName:function(){
        setTimeout(()=>{
            alert(this.name);
        },1000)            
    }
}
person.showName();

 

class

ES6中也提出了類用法，類用法es5中就可以實現了，不過既然是新規則那就更加清晰明了啦

class Poetry {
  constructor(){
    console.log('山有木兮木有之');
  }
}
class Person extends Poetry{
  constructor(){
    super();
    console.log('本是青燈不歸客');
  }
}
let ht = new Person();

　　效果：

 

 

解構

var ht1 = someArray[0];
var ht2 = someArray[1];
var ht3 = someArray[2];
//解構賦值
let [ht1, ht2, ht3] = someArray; 
//還有下面例子
let [,,ht3] = [1,2,3];
console.log(ht3); //3

let [ht1,...last] = [1,2,3];
console.log(last); //[2,3]

//對象解構
let {name,age} = {name: "ht", age: "17"};
console.log(name); //ht
console.log(age); //17
//注意
let {ept1} = {};
console.log(ept1); //undefined
let {ept2} = {undefined};
console.log(ept2); //undefined
let {ept3} = {null};
console.log(ept3); //null

Rest+ Spread

詳解（https://segmentfault.com/a/1190000009992594）

import 和 export

• 通過向大括號中添加sex，echo變量並且export輸出，就可以將對應變量值以sex、echo變量標識符形式暴露給其他文件而被讀取到
• 不能寫成export sex這樣的方式，如果這樣就相當於export "boy",外部文件就獲取不到該文件的內部變量sex的值，因為沒有對外輸出變量接口,只是輸出的字符串。

<script type="text/javascript">
        // 簡寫成下面的形式
    var sex="boy";
    var echo=function(value){
    　　console.log(value)
    }
    export {sex,echo} 
    </script>

• 通過import獲取a.js文件的內部變量，{}括號內的變量來自於a.js文件export出的變量標識符。

import {sex,echo} from "a.js" 
    console.log(sex)   // boy
    echo(sex) // boy

 

 

謝謝觀看！