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