資訊專(zhuān)欄INFORMATION COLUMN
摘要：說(shuō)到肯定是先介紹了，據(jù)阮一峰老師介紹到，是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將代碼轉(zhuǎn)為代碼，從而在現(xiàn)有環(huán)境執(zhí)行。輸出其他還有等可以查看阮一峰的入門(mén)
ES6也出來(lái)有一會(huì)時(shí)間了，他新增的語(yǔ)法糖也的確大大提高了開(kāi)發(fā)者的效率，今天就總結(jié)一些自己用到最多的。
說(shuō)到ES6肯定是先介紹Babel了，據(jù)阮一峰老師介紹到，Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。這意味著，你可以現(xiàn)在就用ES6編寫(xiě)程序，而不用擔(dān)心現(xiàn)有環(huán)境是否支持。
一、 BabelBabel的配置文件是.babelrc，存放在項(xiàng)目的根目錄下。使用Babel的第一步，就是配置這個(gè)文件。
該文件用來(lái)設(shè)置轉(zhuǎn)碼規(guī)則和插件，基本格式如下。
{
"presets": [],
"plugins": []
}
presets 字段設(shè)定轉(zhuǎn)碼規(guī)則，官方提供以下的規(guī)則集，你可以根據(jù)需要安裝。
# ES2015轉(zhuǎn)碼規(guī)則 $ npm install --save-dev babel-preset-es2015 # react轉(zhuǎn)碼規(guī)則 $ npm install --save-dev babel-preset-react # ES7不同階段語(yǔ)法提案的轉(zhuǎn)碼規(guī)則（共有4個(gè)階段），選裝一個(gè) $ 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
然后，將這些規(guī)則加入.babelrc
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}
想更深入了解Babel的話(huà)可以去阮一峰老師的Babel 入門(mén)教程看更詳細(xì)的。
接下來(lái)就是我們開(kāi)發(fā)中用到最多的ES6語(yǔ)法。
二、 ECMAScript6為了讓大家能快速理解ES6語(yǔ)法，部分我會(huì)拿ES5的來(lái)對(duì)比，你會(huì)發(fā)現(xiàn)大有不同O(∩_∩)O~。
Class
ES6中添加了對(duì)類(lèi)的支持，引入了class關(guān)鍵字，想了解ES5對(duì)象語(yǔ)法的可以敲這里javascript中的面向?qū)ο?/p>
//定義類(lèi)
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();
箭頭操作符
新增的箭頭操作符=>便有異曲同工之妙。它簡(jiǎn)化了函數(shù)的書(shū)寫(xiě)
var arr = [1, 2, 3];
//ES5
arr.forEach(function(x) {
console.log(x);
});
//ES6
arr.forEach(x = > console.log(x));
解構(gòu)賦值
數(shù)組中的值會(huì)自動(dòng)被解析到對(duì)應(yīng)接收該值的變量中
var [name,,age] = ["will","lala","21"];
console.log("name:"+name+", age:"+age);
//輸出： name:will, age:21
默認(rèn)參數(shù)
定義函數(shù)的時(shí)候指定參數(shù)的默認(rèn)值
//ES5
function fn(name){
var name=name||"will";
console.log("my name is "+name);
}
//ES6
function fn(name="will"){
console.log(`my name is ${name}`);
}
多行字符串
使用反引號(hào) ` 來(lái)創(chuàng)建字符串
//ES5 var 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."; //ES6 var 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.`;
字符串模板
由美元符號(hào)加花括號(hào)包裹的變量${name}
var name = "will";
console.log(`my name is ${name}`);
擴(kuò)展運(yùn)算符
在函數(shù)中使用命名參數(shù)同時(shí)接收不定數(shù)量的未命名參數(shù)，在以前的JavaScript代碼中我們可以通過(guò)arguments變量來(lái)達(dá)到這一目的。而ES6中是如下實(shí)現(xiàn)的
function add(...x){
return x.reduce((m,n)=>m+n);
}
console.log(add(1,2,3));//輸出：6
console.log(add(1,2,3,4,5));//輸出：15
塊級(jí)作用域
let與const 關(guān)鍵字！可以把let看成var，它定義的變量被限定在了特定范圍內(nèi)。const則用來(lái)定義常量，即無(wú)法被更改值的變量。共同點(diǎn)都是塊級(jí)作用域。
//let
for (let i=0;i<2;i++){
console.log(i);//輸出: 0,1
}
console.log(i);//輸出：undefined
//const
const name="a";
name="b"; //報(bào)錯(cuò)
模塊
在ES6標(biāo)準(zhǔn)中支持module了,將不同功能的代碼分別寫(xiě)在不同文件中，各模塊只需使用export導(dǎo)出公共接口部分，然后通過(guò)使用module模塊的導(dǎo)入的方式可以在其他地方使用
// b.js
function fn(){
console.log("hello world");
}
export fn;
// a.js
module { fn } from "./b";
fn();
//然后在HTML引入a文件運(yùn)行瀏覽器
for or
我們都知道for in 循環(huán)用于遍歷數(shù)組，類(lèi)數(shù)組或?qū)ο螅珽S6中新引入的for of循環(huán)功能相似，不同的是每次循環(huán)它提供的不是序號(hào)而是值。
var arr = [ "a", "b", "c" ];
for (v of arr) {
console.log(v);//輸出 a,b,c
}
其他還有Map、Set等可以查看阮一峰的ECMAScript 6 入門(mén)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/82314.html
摘要：本文首發(fā)于的技術(shù)博客實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。只是最近學(xué)習(xí)生態(tài)，用起來(lái)轉(zhuǎn)換之余，也不免碰到諸多用上的教程案例，因此便稍作學(xué)習(xí)。在當(dāng)前的瀏覽器市場(chǎng)下，想在生產(chǎn)環(huán)境用上，是必不可少的。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000006992218如果您對(duì)本系列文章感興...
摘要：深入淺出指的是添加在標(biāo)準(zhǔn)第六版中的編程語(yǔ)言的新特性，簡(jiǎn)稱(chēng)為。登場(chǎng)在一個(gè)具體的項(xiàng)目中，使用有幾種不同的方法。這是為了避免在安裝時(shí)使用根管理權(quán)限。以用戶(hù)角度展示系統(tǒng)響應(yīng)速度，以地域和瀏覽器維度統(tǒng)計(jì)用戶(hù)使用情況。 深入淺出 ES6 指的是添加在 ECMASript 標(biāo)準(zhǔn)第六版中的 JavaScript 編程語(yǔ)言的新特性，簡(jiǎn)稱(chēng)為 ES6。 雖然 ES6 剛剛到來(lái)，但是人們已經(jīng)開(kāi)始談?wù)?ES7 ...
摘要：下載地址安裝一個(gè)好用的命令行工具在環(huán)境下，系統(tǒng)默認(rèn)的非常難用，所以我個(gè)人比較推薦大家使用或者。下載地址安裝在命令行工具中使用查看版本的方式確保與都安裝好之后，我們就可以安裝了。前端基礎(chǔ)進(jìn)階系列目錄 showImg(https://segmentfault.com/img/remote/1460000009654403?w=1240&h=272); 對(duì)于新人朋友來(lái)說(shuō)，想要自己去搞定一個(gè)E...
摘要：結(jié)合我自己的經(jīng)驗(yàn)，我整理了一份全棧工程師進(jìn)階路線圖，給大家參考。乾坤大挪移第一層第一層心法，主要都是基本語(yǔ)法，程序設(shè)計(jì)入門(mén)，悟性高者十天半月可成，差一點(diǎn)的到個(gè)月也說(shuō)不準(zhǔn)。 技術(shù)更新日新月異，對(duì)于初入職場(chǎng)的同學(xué)來(lái)說(shuō)，經(jīng)常會(huì)困惑該往那個(gè)方向發(fā)展，這一點(diǎn)松哥是深有體會(huì)的。 我剛開(kāi)始學(xué)習(xí) Java 那會(huì)，最大的問(wèn)題就是不知道該學(xué)什么，以及學(xué)習(xí)的順序，我相信這也是很多初學(xué)者經(jīng)常面臨的問(wèn)題。?我...
摘要：看到很多團(tuán)隊(duì)和開(kāi)源項(xiàng)目都在用代碼檢查工具，自己一直沒(méi)用過(guò)，最近加入了新團(tuán)隊(duì)有項(xiàng)目在用，就想著研究一下。代碼校驗(yàn)工具能夠讓你在寫(xiě)代碼時(shí)避免一些低級(jí)的錯(cuò)誤。同時(shí)，也有友好的文檔針對(duì)每一條規(guī)則。在上文提高的所有工具當(dāng)中它對(duì)有著最好的支持。 看到很多團(tuán)隊(duì)和開(kāi)源項(xiàng)目都在用代碼檢查工具，自己一直沒(méi)用過(guò)，最近加入了新團(tuán)隊(duì)有項(xiàng)目在用，就想著研究一下。看到sitepoint上的一篇2015年的文章覺(jué)得不...
閱讀 2874·2021-11-24 09:38
閱讀 3511·2021-11-23 09:51
閱讀 967·2021-09-09 11:52
閱讀 4032·2021-08-11 11:18
閱讀 1106·2019-08-30 14:05
閱讀 3228·2019-08-30 11:23
閱讀 1760·2019-08-29 17:02
閱讀 1123·2019-08-26 13:49
