ES6 的全稱 ECMAScript
1. ES6 使用頻率比較高的特性
1. 解構(gòu)賦值 (改變了參數(shù)賦值, 變量賦值的形式) 。
2. 箭頭函數(shù) 。
3. 數(shù)據(jù)結(jié)構(gòu): Set 和 Map 。
4. 異步操作: 解決回調(diào)噩夢的問題 。
5. 類與對象 。
6. 模塊化 。
2. 學(xué)習(xí) ES6 的步驟
1. 構(gòu)建一套支持 ES6 的環(huán)境 ( gulp / babel / webpack / npm )。
2. 學(xué)習(xí) ES6 的基礎(chǔ)語法 ( 了解用法; 代碼用法實(shí)例; 注意事項(xiàng) )
3. 實(shí)際項(xiàng)目開發(fā) 。
3. 對比 ES6 與 ES5 <體現(xiàn) ES6 有強(qiáng)大的生產(chǎn)力, 提高我們的開發(fā)效率>
3.1 通過 對象拷貝 對比 ES6 與 ES5 的語法差距
// ES5 語法實(shí)現(xiàn) 對象拷貝 拷貝
var createAssigner = function(keyFunc, defaults) {
return function(obj) {
// arguments.length 表示的是實(shí)際上向函數(shù)傳入了多少個(gè)參數(shù), 這個(gè)數(shù)字可以比形參數(shù)量大, 也可以比形參數(shù)量小 (形參數(shù)量的值可以通過 Function.length 獲取到).
var length = arguments.length
if (defaults) obj = Object(obj)
if (length < 2 || obj == null) return obj
for (var index = 1; index < length; index++) {
var source = arguments[index]
var keys = keyFunc(source)
var l = keys.length
for (var i = 0; i < l; i++) {
var key = keys[i]
if (!defaults || obj[key] === void 0) {
obj[key] = source[key]
}
}
}
console.log('ES5 -- 對象拷貝 ： ', obj)
return obj;
}
}
var allKeys = function (obj) {
var keys = []
for (var key in obj) keys.push(key)
return keys
}
var extend = createAssigner(allKeys)
extend({t:1},{k:2})
// ES6 實(shí)現(xiàn)方式
const ES6ArrObj = [
{t:1},
{k:2}
]
const ES6Obj = Object.assign(ES6ArrObj)
ES6ArrObj[0].t = 'asdas'
console.log('ES6 -- 對象拷貝 - 拷貝之后 ( .assign 對象拷貝不是深拷貝 ) ： ', ES6Obj)
console.log('ES6 -- 對象拷貝 - 源對象 ： ', ES6Obj)
3.2 通過 '默認(rèn)參數(shù)' 對比 ES6 與 ES5 的語法差距
// ES5 語法
function defaultParameter (txt) {
/**
1. 在 ES5 中我們通過 '||' 或 運(yùn)算符來保證 'txt' 是有值的 。
2. 也就是說我們在業(yè)務(wù)開發(fā)的時(shí)候, 如果調(diào)用 defaultParameter 這個(gè)方法的時(shí)候沒有傳參, 通過這 '||' 運(yùn)算符加后面的 'hello world' 默認(rèn)值, 來達(dá)到 變量 不能為空的效果 。
/
txt = txt || 'hello world'
console.log('ES5 語法: ', txt);
}
defaultParameter()
// ES6 語法
function defaultParameterES6 (txt = 'hello world') {
/**
1. 這個(gè)是 ES6 的使用方法。
2. ES6 的方法不會(huì)讓我們代碼變得臃腫 。
3. ES6 是在函數(shù)聲明的時(shí)候, 在參數(shù)上加的默認(rèn)值; 我們的執(zhí)行代碼中沒有任何與默認(rèn)值相關(guān)的東西, 相較于 ES5, ES6 的代碼更加簡介干凈 。
/
console.log('ES6 語法: ', txt);
}
defaultParameterES6()
3.3 通過 字符串模板 對比 ES6 與 ES5 的語法差距
/**
* 1. ES5 處理 字符串模板 的方法:
* 2. _ 表示引用了 Underscore 這個(gè)第三方的庫, 使用起來需要調(diào)用 template compiled 這兩個(gè)方法 。
*/
// ES5 語法
var stringTemplate = _.template("hello: <%= name %>")
compiled({name: 'moe'})
/**
* 1. ES6 處理 字符串模板 的方法:
* 2. ES6 通過字符串拼接的形式, 實(shí)現(xiàn)了 模板和數(shù)據(jù)的編譯過程 。
* 3. 而且還不依賴于任何第三方的庫 。
*/
// ES6 語法
var stringTemplateES6 = 'limi'
var txtES6 = `hello ${stringTemplateES6}`
console.log('ES6 處理 字符串模板 的方法： ', txtES6)
之前有整理過部分知識(shí)點(diǎn), 現(xiàn)在將整理的相關(guān)內(nèi)容, 驗(yàn)證之后慢慢分享給大家; 這個(gè)專題是 “前端ES6基礎(chǔ)” 的相關(guān)專欄; 不積跬步，無以至千里, 戒焦戒躁 。
