es6常用語法筆記

es6常用語法筆記

ES6常用語法整合

ES6也出來有一會時間了，他新增的語法糖也的確大大提高了開發者的效率，今天就總結一些自己用到最多的。

說到ES6肯定是先介紹Babel了，據阮一峰老師介紹到，Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。這意味著，你可以現在就用ES6編寫程序，而不用擔心現有環境是否支持。

一、 Babel

Babel的配置文件是.babelrc，存放在項目的根目錄下。使用Babel的第一步，就是配置這個文件。

該文件用來設置轉碼規則和插件，基本格式如下。

{

"presets": [],

"plugins": []

}

presets 欄位設定轉碼規則，官方提供以下的規則集，你可以根據需要安裝。

# ES2015轉碼規則

$ npm install --save-dev babel-preset-es2015

# react轉碼規則

$ npm install --save-dev babel-preset-react

# ES7不同階段語法提案的轉碼規則（共有4個階段），選裝一個

$ npm install --save-dev babel-preset-stage-0$ npm install --save-dev babel-preset-stage-1$ npm install --save-dev babel-preset-stage-2$ npm install --save-dev babel-preset-stage-3

然後，將這些規則加入.babelrc

{

"presets": [

"es2015",

"react",

"stage-2" ],

"plugins": []

}

想更深入了解Babel的話可以去阮一峰老師的Babel 入門教程看更詳細的。

接下來就是我們開發中用到最多的ES6語法。

二、 ECMAScript6

為了讓大家能快速理解ES6語法，部分我會拿ES5的來對比，你會發現大有不同O(∩_∩)O~。

1. Class

ES6中添加了對類的支持，引入了class關鍵字，想了解ES5對象語法的可以敲這裡javascript中的面向對象

//定義類 class Cons{

constructor(name,age){

this.name = name;

this.age = age;

}

getMes(){

console.log(`hello ${this.name} !`);

}

}

let mesge = new Cons(啦啦啦~,21);

mesge.getMes();

//繼承class Ctrn extends Cons{

constructor(name,anu){

super(name); //等同於super.constructor(x) this.anu = anu;

}

ingo(){

console.log(`my name is ${this.name},this year ${this.anu}`);

}

}

let ster = new Ctrn(will,21);

ster.ingo();

ster.getMes();

1. 箭頭操作符

新增的箭頭操作符=>便有異曲同工之妙。它簡化了函數的書寫

var arr = [1, 2, 3];

//ES5

arr.forEach(function(x) {

console.log(x);

});

//ES6

arr.forEach(x = > console.log(x));

1. 解構賦值

數組中的值會自動被解析到對應接收該值的變數中

var [name,,age] = [will,lala,21];

console.log(name:+name+, age:+age);//輸出： name:will, age:21

1. 默認參數

定義函數的時候指定參數的默認值

//ES5function fn(name){

var name=name||will;

console.log(my name is +name);

}

//ES6function fn(name=will){

console.log(`my name is ${name}`);

}

1. 多行字元串

使用反引號`來創建字元串

//ES5var str = The 3.1 work extends XPath and +XQuery with map and array data structures +along with additional functions and operators +for manipulating them; a primary motivation +was to enhance JSON support.;

//ES6var roadPoem = `The 3.1 work extends XPath and XQuery with map and array data structures

along with additional functions and operators

for manipulating them; a primary motivation

was to enhance JSON support.`;

1. 字元串模板

由美元符號加花括弧包裹的變數${name}

var name = will;

console.log(`my name is ${name}`);

1. 擴展運算符

在函數中使用命名參數同時接收不定數量的未命名參數，在以前的JavaScript代碼中我們可以通過arguments變數來達到這一目的。而ES6中是如下實現的

function add(...x){

return x.reduce((m,n)=>m+n);

}

console.log(add(1,2,3));//輸出：6console.log(add(1,2,3,4,5));//輸出：15

1. 塊級作用域

let與const 關鍵字！可以把let看成var，它定義的變數被限定在了特定範圍內。const則用來定義常量，即無法被更改值的變數。共同點都是塊級作用域。

//letfor (let i=0;i<2;i++){

console.log(i);//輸出: 0,1

}console.log(i);//輸出：undefined//constconst name=a;

name=b; //報錯

1. 模塊

在ES6標準中支持module了,將不同功能的代碼分別寫在不同文件中，各模塊只需使用export導出公共介面部分，然後通過使用module模塊的導入的方式可以在其他地方使用

// b.jsfunction fn(){

console.log(hello world);

}export fn;

// a.jsmodule { fn } from "./b";

fn();

//然後在HTML引入a文件運行瀏覽器

1. for or

我們都知道for in循環用於遍曆數組，類數組或對象，ES6中新引入的for of循環功能相似，不同的是每次循環它提供的不是序號而是值。

var arr = [ "a", "b", "c" ];

for (v of arr) {

console.log(v);//輸出 a,b,c}

推薦閱讀：