資訊專(zhuān)欄INFORMATION COLUMN
摘要：別色瞇瞇的不想走啦行行行，再看一眼瞧得咋地半夜看的同學(xué)，對(duì)不起不很酥胡。解決了以前那些無(wú)處安放的對(duì)象和作用域問(wèn)題。要是您忘不了，之后還有的。。。
越來(lái)越多的框架推薦使用ES6進(jìn)行高效開(kāi)發(fā)，node也早已支持ES6，那不如就偷偷瞄一眼兒這性感的“編程語(yǔ)言”？
獻(xiàn)給初學(xué)者
檢測(cè)本地是否支持ES6環(huán)境
簡(jiǎn)便方法：直接在瀏覽器調(diào)試工具下嘗試輸入Promise（ES6的新API，用于異步事件的處理），如果能打印出其構(gòu)造函數(shù)，則支持（如果真有瀏覽器光是支持了Promise而不支持ES6，那我服?。?/p>
在開(kāi)發(fā)環(huán)境里面使用ES6
webpack+babel 作為轉(zhuǎn)譯工具進(jìn)行ES6到ES5的編譯
wp的配置詳見(jiàn)
《webpack的安裝及配置》
安裝插件：
babel-loader
npm install babel-loader
babel-core
npm install babel-core
babel-es2015-transform
npm install babel-babel-transform
在webpack.config.js的module屬性中的loaders字段加入
{
test: /.js$/,
loader: "babel"
}
在項(xiàng)目根目錄下創(chuàng)建配置文件.babelrc
{
"presets": ["es2015"]
}
一些新東西
class
類(lèi)！
我們通過(guò)一個(gè)demo來(lái)初見(jiàn)一下js的class
class Student {
getName() {
console.log( " This is es6 style " );
}
//注意：這里不用逗號(hào)
getClass() {
console.log( "gp02" );
}
}
let
塊級(jí)作用域變量聲明
以前通過(guò)var聲明的變量因?yàn)樽兞刻嵘木壒剩舴窃诤瘮?shù)作用域內(nèi)聲明，則為全局變量，而let則是解決了這個(gè)問(wèn)題
一個(gè)實(shí)用場(chǎng)景：
//<=ES5
for ( var i = 0; i < 10; i ++ ) {
}
console.log( i );//9 變量提升到了全局
//ES6
for ( let ii = 0; ii < 10; i ++ ) {
}
console.log( ii );//undefined 變量只在for循環(huán)塊級(jí)作用域中生效
Q：如何形成塊級(jí)作用域？
大括號(hào)包圍則形成一個(gè)塊級(jí)作用域，如函數(shù)、循環(huán)、判斷、選擇等結(jié)構(gòu)
{
let a = 0;
}
console.log( a );//undefined
let k = 0;
console.log( k );//0;
const
靜態(tài)變量
const NAME = "Samuel"; NAME = "Lucifer"; console.log( NAME ); //報(bào)錯(cuò)，靜態(tài)變量不能被重新復(fù)制，它相當(dāng)于一個(gè)常量
箭頭函數(shù)
用=>來(lái)表示匿名函數(shù)function() {}
如果沒(méi)有=>后沒(méi)有{},則表示返回=>后的內(nèi)容
const A=(a, b)=>a+b;
等價(jià)于
const A = function(a, b) {
return a+b;
}
方便回調(diào)函數(shù)的定義
fetch(url).then((data)=>{
console.log( data );
//從寫(xiě)法上來(lái)說(shuō)也體現(xiàn)了回調(diào)函數(shù)的意義，“拿到data了，接著做點(diǎn)什么”
});
模塊化
ES5的模塊化
關(guān)鍵字：require module exports
遵循CommonJS規(guī)范
詳見(jiàn)：前端模塊化的那些事兒
ES6的模塊化
關(guān)鍵字：import（導(dǎo)入） export（導(dǎo)出）
module.js
var number = 20; //通過(guò)export導(dǎo)出 export default number
import.js
//通過(guò)import引入module模塊 import num from "./module.js" //這里是module.js的相對(duì)路徑 //num對(duì)應(yīng)module的出口number console.log( num );//20
第一眼差不多看到這兒吧。別色瞇瞇的不想走啦！
行行行，再看一眼：
瞧得咋地？
A bright new future is coming?。ò胍箍吹耐瑢W(xué)，對(duì)不起！）
4不4很酥胡~。:)
解決了以前那些無(wú)處安放的對(duì)象和作用域問(wèn)題。
要是您忘不了，之后還有ES6的API。。。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/80851.html
摘要：每次被執(zhí)行時(shí)，和被傳入，這個(gè)根據(jù)進(jìn)行累加或者是自身消減，英文原意，進(jìn)而返回最新的。 之前的一篇文章：從一道面試題，到我可能看了假源碼討論了bind方法的各種進(jìn)階Pollyfill，今天再分享一個(gè)有意思的題目。 從解這道題目出發(fā)，我會(huì)談到數(shù)組的Reduce方法，ES6特性和Redux數(shù)據(jù)流框架中Reducer的命名等等。一道典型的題目，卻如唐代詩(shī)人章碣《對(duì)月》詩(shī)中所云：別有洞天三十六，水...
摘要：本文記錄如下起因在準(zhǔn)備提測(cè)的那天，順便打開(kāi)看一眼注意，這里是原生不是用模擬的，排查后發(fā)現(xiàn)，原來(lái)是因?yàn)闃?gòu)造函數(shù)中使用了。簡(jiǎn)寫(xiě)如下老司機(jī)們肯定能一眼發(fā)現(xiàn)問(wèn)題構(gòu)造函數(shù)中不應(yīng)該使用而是傳入的應(yīng)該改為改正之后，問(wèn)題確實(shí)解決了。 雖然過(guò)了兼容IE6的噩夢(mèng)時(shí)代，IE依舊陰魂不散，因?yàn)槟憧赡苓€要兼容IE9。在ES6已經(jīng)普及的今天，用ES6寫(xiě)react已經(jīng)成了標(biāo)配。但是babel編譯的js語(yǔ)法，由于某些...
摘要：本文記錄如下起因在準(zhǔn)備提測(cè)的那天，順便打開(kāi)看一眼注意，這里是原生不是用模擬的，排查后發(fā)現(xiàn)，原來(lái)是因?yàn)闃?gòu)造函數(shù)中使用了。簡(jiǎn)寫(xiě)如下老司機(jī)們肯定能一眼發(fā)現(xiàn)問(wèn)題構(gòu)造函數(shù)中不應(yīng)該使用而是傳入的應(yīng)該改為改正之后，問(wèn)題確實(shí)解決了。 雖然過(guò)了兼容IE6的噩夢(mèng)時(shí)代，IE依舊陰魂不散，因?yàn)槟憧赡苓€要兼容IE9。在ES6已經(jīng)普及的今天，用ES6寫(xiě)react已經(jīng)成了標(biāo)配。但是babel編譯的js語(yǔ)法，由于某些...
閱讀 3250·2021-10-21 17:50
閱讀 3260·2021-10-08 10:05
閱讀 3386·2021-09-22 15:04
閱讀 586·2019-08-30 14:00
閱讀 1946·2019-08-29 17:01
閱讀 1513·2019-08-29 15:16
閱讀 3222·2019-08-26 13:25
閱讀 857·2019-08-26 11:44
