ES6快速入門

時間 2019-11-08

標籤 es6 快速入門欄目 JavaScript 简体版

原文原文鏈接

前言

ES6是現代JavaScript的基礎，ES6是2015年ECMAScript組織提出的JavaScript的第六個版本，也叫ES2015，其中增長了不少新特性，能夠說ES6是當下前端程序員必備知識之一。html

ES6中新增的特性

1新的變量聲明方式

ES6中，使用let和const代替var定義變量。let用於定義一個變量，const用於定義一個常量,其中const定義的對象只是對象的地址不變，對象的屬性是能夠增長或者刪除的。前端

使用var定義變量時，會有一些問題，如變量聲明提早,ES6中禁止了。webpack

//ES5
console.log(a); //輸出undefined
var a=0;

//ES56
console.log(a); //直接報錯，取消變量聲明提早
var a=0;
複製代碼

var定義變量只存在全局做用域和函數做用域，其餘大括號中不存在塊級做用域,let&const定義的變量在全部大括號中都存在塊級做用域。git

//ES5
{
    let b=0;
}
console.log(b);//輸出0

//ES6
{
    let b=0;
}
console.log(b);//報錯，b未定義,b的做用域在上面的括號內
複製代碼

let&const定義的變量不能再使用window對象調用程序員

var c=0;
console.log(window.c);  //輸出0
let d=0;
console.log(window.d);  //輸出undefined
複製代碼

使用let&const的特色：es6

禁止變量聲明提早
增長了塊級做用域，任何大括號均可以造成塊級做用域
const定義的對象屬性值依然能夠改變，但地址不能改變。
let&const定義的全局變量不做爲window的變量

2解析結構

let [a,b,c]=[
    1,
    2,
    3
];
console.log(a,b,c);//輸出1,2,3
let {d,e,f}={
	d:4,
	e:5,
	f:6
};
console.log(d,e,f);//輸出4,5,6
複製代碼

解析結構可讓咱們快速的將接口返回的數據賦值到變量上。github

同時，只要數組的下標對應或對象的鍵名對應均可以實現解析結構web

//數組的下標對應，將第一個跟第三個取出並賦值給a、c變量
let [a,,c]=[
    1,
    2,
    3
];
console.log(a,c);//輸出1,3
//對象的鍵名對應，將鍵名爲d、f的鍵值賦值給d，f變量
let {d,f}={
	d:4,
	e:5,
	f:6
};
console.log(d,f);//輸出4,6
複製代碼

3字符串

3.1 模板字符串

模板字符串使用反單引號包圍，在字符串中能夠使用變量,經過${ }的形式插入變量編程

//ES5
var name="李雷";
var age=21;
console.log('你好'+name+','+'我今年'+age+'歲');//輸出 你好李雷，我今年21歲
//ES6
let name="李雷";
let age=21;
console.log(`你好${name},我今年${age}歲`);//輸出 你好李雷，我今年21歲
複製代碼

在${}之中，除了可以解析變量之外，還能夠解析js表達式,如三元表達式等。數組

console.log(`${1===1?'true':'false'}`)
複製代碼

3.2與字符串有關的API

ES6中引入了一些新的處理字符串的API

let str='lilei';
console.log(str.startsWith('li'));//輸出true
console.log(str.endsWith('lei'));//輸出true
複製代碼

startsWith()接收一個字符串，判斷調用該方法的字符串是否以接收的字符串參數做爲開頭，endsWith()接收一個字符串，判斷調用該方法的字符串是否以接收的字符串參數做爲結尾。

4函數默認值

函數的參數能夠預設默認值

function showNumber(number=0) {
    console.log(number);
}
showNumber();   //輸出0
複製代碼

5箭頭函數

實現調用一次obj.addCount方法就使obj.count加一。

//ES5
var obj={
    count:0,
    addCount:function() {
        var that=this;  //定義一個變量暫時保存this指向的obj對象，方便在閉包中使用
        setTimeout(function() { 
            that.count++;
            console.log(that.count);
        },1000);
    }
};
obj.addCount();//輸出1
//ES6
const obj={
    count:0,
    addCount:function() {
        setTimeout(()=> {   //使用箭頭函數修改this指向的上一做用域變量的上下文對象
            this.count++;
            console.log(this.count);
        },1000);
    }
};
obj.addCount();//輸出1  
複製代碼

箭頭函數就是將function(){}改寫爲()=>,箭頭函數內的this指向外層的this指向的對象，這裏是addCount函數的做用域中的this指向的obj對象，這是箭頭函數最重要的特性。

箭頭函數的參數只有一個的時候能夠省略括號

(res)=>{xx}
//簡寫爲
res=>{xx}
複製代碼

箭頭函數內只有一條js語句時，能夠省略大括號

let fun=()=>{console.log('Hello World')};
//簡寫爲
let fun=()=>console.log('Hello World');
fun();  //輸出Hello World
複製代碼

6 對象字面量簡寫

6.1 對象字面量中賦值簡寫

對象字面量中相同鍵名與鍵值同名的狀況能夠簡寫。

//ES5
var name='lilei';
var obj={
    name:name
}
//ES6
let name='lilei';
let obj={
    name
}
複製代碼

6.2 對象字面量中聲明函數簡寫

//ES5
var obj={
    hello:function() {
        console.log('Hello World');
    }
}
//ES6
let obj={
    hello() {
        console.log('Hello World');
    }
}
複製代碼

6.3 動態鍵名

使用中括號表示動態的鍵名

let key='name';
const obj={
    [key]:'李雷'
};
console.log(obj.name);  //輸出李雷
複製代碼

7 Promise

可能你尚未遇到過回調地獄，可是JS做爲一門異步編程的語言，學習Promise十分重要，它可讓咱們優雅的編寫異步程序，詳情請看ES6 Promise。

8 類與繼承

ES6中提供了class關鍵字與extends關鍵字讓咱們方便快捷的書寫OOP代碼，詳情請看ES6 類與繼承。

9 export與import

在ES5的時候，在同一個html文件中引入兩個js文件來實現js跨文件的引用。

ES6中，將每個文件視爲一個模塊，在一個模塊中能夠經過export關鍵字設置容許外部文件訪問的變量。其餘模塊經過import關鍵字將其餘js模塊導入當前模塊中。下面直接看例子：

//a.js
let name='李雷';
let _age=20;
export {name};  //設置外部文件能夠訪問的變量
//b.js
import {name} from './a.js';    //接收a.js對外暴露的對象
console.log(name);  //輸出李雷
複製代碼

a.js中name被設置對外容許訪問，而_age沒有設置爲對外容許訪問。

//b.js
import {name,_age} from './a.js';    //接收a.js對外暴露的對象
console.log(name);  //輸出李雷
console.log(_age);  //輸出undfined，未能接收到_age
複製代碼

export第二種寫法是把export寫在要對外暴露的變量以前：

//a.js
export let name='李雷'; //設置外部文件能夠訪問的變量
export let hello=name=> {//設置外部文件能夠訪問的函數，使用到了5箭頭函數
    console.log(`Hello${name}`);    //使用到了3.1模板字符串
}
let _age=20;
//b.js
import {hello,name} from './a.js';    //接收a.js對外暴露的對象
hello(name);  //輸出 Hello李雷
複製代碼

export第三種寫法是使用export default:

//a.js
export let name='李雷'; 
export let hello=name=> {
    console.log(`Hello${name}`)
}
let _age=20;
export {name,hello}
export default _age;
//b.js
import {hello,name} from './a.js';    //接收a.js對外暴露的對象
import _age from './es6_2.js'; 
hello(name);  //輸出 Hello李雷
console.log(_age);  //輸出20
複製代碼

前面咱們使用的import都是對模塊暴露出來的變量一個個接收的，也能夠一次接收多個變量

//a.js
export let name='李雷'; 
export let hello=name=> {
    console.log(`Hello${name}`)
}
export {name,hello}
//b.js
import * as obj from './a.js';    //將接收的變量所有賦予obj對象
obj.hello(obj.name);  //輸出 Hello李雷
複製代碼

export default語句只能寫一句，export語句能夠寫多句，export default只能輸出一個變量，接收的時候不須要包含在大括號內。

注意：export與import在瀏覽器上還不支持，能夠在一些打包工具如webpack中使用。