一、變量和常量

var的缺點：（1）var可以多次聲明同一個變量；? ?（2）var會造成變量提升?

(function?rr()?{??

??if(true)?{??

????var?a?=?666;??

??}??

??console.log(a);?//輸出666??

})() ?

let以及const都是塊級作用域。我們常常使用let來聲明一個值會被改變的變量，而使用const來聲明一個值不會被改變的變量，也可以稱之為常量。

常見題：

for(var?a?=?0;?a?<?3;?a++)?{??

??setTimeout(function()?{??

????console.log(a);??

??},?1000)??

}??

//輸出結(jié)果都為3??

? ??如何將結(jié)果輸出為0, 1, 2

????es5處理方法 -- 用函數(shù)制造塊級作用域

for(var?a?=?0;?a?<?3;?a++)?{??

??(function?(a)?{??

????setTimeout(function()?{??

??????console.log(a);??

????},?1000)??

??})(a)??

}??

//輸出結(jié)果0,1,2??

? ? es6處理方法 -- 更加簡單明了

for(let?a?=?0;?a?<?3;?a++)?{??

??setTimeout(function()?{??

????console.log(a);??

??},?1000)??

}??

//輸出結(jié)果為：0,1,2??

二、解構(gòu)賦值（Destructuring）

1、對象的解構(gòu)賦值

const props = {className: 'tiger-button',loading: false,clicked: true,disabled: 'disabled' }

當(dāng)我們想要取得其中的2個值：loading與clicked時：

?

// es5 var loading = props.loading; var clicked = props.clicked;// es6 let { loading, clicked } = props;// 給一個默認值，當(dāng)props對象中找不到loading時，loading就等于該默認值 let { loading = false, clicked } = props; 2、數(shù)組的解構(gòu)賦值
// es6 let arr = [1, 2, 3]; let [a, b, c] = arr;// es5 var arr = [1, 2, 3]; var a = arr[0]; var b = arr[1]; var c = arr[2];
數(shù)組以序列號一一對應(yīng)，這是一個有序的對應(yīng)關(guān)系。
而對象根據(jù)屬性名一一對應(yīng)，這是一個無序的對應(yīng)關(guān)系，屬性名一致即可。根據(jù)這個特性，使用解析結(jié)構(gòu)從對象中獲取屬性值更加具有可用性。 ES6解構(gòu)賦值

三、函數(shù)

1、箭頭函數(shù)（array function） // es5 var fn = function(a, b) {return a + b; } // es6 箭頭函數(shù)寫法，當(dāng)函數(shù)直接被return時，可以省略函數(shù)體的括號 const fn = (a, b) => a + b; // es5 var foo = function() {var a = 20；var b = 30;return a + b; } // es6 const foo = () => {const a = 20;const b = 30;return a + b; }

2、形參默認值(default)

ES5的默認值寫法 function sum(x,y){x=x||10;y=y||20;return x+y;}

?

ES6的默認值寫法：

function sum(x = 10, y = 20) {return x + y; }console.log(add());

注意：1、箭頭函數(shù)是匿名函數(shù)，不能作為構(gòu)造函數(shù)，不能使用new

let FunConstructor = () => {console.log('lll'); }let fc = new FunConstructor();

2、箭頭函數(shù)中，沒有自己的this。如果你在箭頭函數(shù)中使用了this，那么該this一定就是外層的this,是定義時所在的對象，而不是使用時所在的對象。也正是因為箭頭函數(shù)中沒有this，因此我們也就無從談起用call/apply/bind來改變this指向。這個特性解決了函數(shù)中this指向的問題。 var obj = {a: 10,b: () => {console.log(this.a); // undefinedconsole.log(this); // Window?{postMessage: ?, blur: ?, focus: ?, close: ?, frames: Window,?…}},c: function() {console.log(this.a); // 10console.log(this); // {a: 10, b: ?, c: ?}} } obj.b(); obj.c(); var obj = {a: 10,b: function(){console.log(this.a); //10},c: function() {return ()=>{console.log(this.a); //10}} } obj.b(); obj.c()(); 3、箭頭函數(shù)不綁定arguments，取而代之用rest參數(shù)...解決 function A(a){console.log(arguments); } A(1,2,3,4,5,8); // [1, 2, 3, 4, 5, 8, callee: ?, Symbol(Symbol.iterator): ?] let B = (b)=>{console.log(arguments); } B(2,92,32,32); // Uncaught ReferenceError: arguments is not defined let C = (...c) => {console.log(c); } C(3,82,32,11323); // [3, 82, 32, 11323]

四、新增的數(shù)據(jù)類型

重新復(fù)習(xí)下舊知識：基本數(shù)據(jù)類型有6種：Undefined、Null、布爾值（Boolean）、字符串（String）、數(shù)值（Number）、對象（Object）。

1、Set ?（類似數(shù)組）

主要用來去除重復(fù)的數(shù)據(jù)，Set 本身是一個構(gòu)造函數(shù)，用來生成 Set 數(shù)據(jù)結(jié)構(gòu)。

let set = new Set(["name1","zhang","wang","name1","zhang"]);
console.log(set); ?//"name1","zhang","wang"

console.log(set); ?//3

四個方法：add(),delete(),has(),clear()

2、Map（映射，類似對象）

（1）也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當(dāng)作鍵。 const map1 = new Map() const objkey = {p1: 'v1'}map1.set(objkey, 'hello') console.log(map1.get(objkey))

結(jié)果：

hello

（2）Map可以接受數(shù)組作為參數(shù)，數(shù)組成員還是一個數(shù)組，其中有兩個元素，一個表示鍵一個表示值。

const map2 = new Map([['name', 'Aissen'],['age', 12] ]) console.log(map2.get('name')) console.log(map2.get('age'))

結(jié)果：

Aissen 12

如果 Map 的鍵是一個簡單類型的值（數(shù)字、字符串、布爾值），則只要兩個值嚴格相等，Map 將其視為一個鍵，包括0和-0，布爾值true和字符串true則是兩個不同的鍵。另外，undefined和null也是兩個不同的鍵。雖然NaN不嚴格相等于自身，但 Map 將其視為同一個鍵。

3、symbol（唯一的屬性名）

常用于對象的屬性名，不會出現(xiàn)屬性名沖突的現(xiàn)象。

Symbol函數(shù)前不能使用new命令，否則會報錯。這是因為生成的Symbol是一個原始類型的值，不是對象

Symbol函數(shù)可以接受一個字符串作為參數(shù)，表示對Symbol實例的描述，主要是為了在控制臺顯示，或者轉(zhuǎn)為字符串時，比較容易區(qū)分。

// 沒有參數(shù)的情況 var s1 = Symbol(); var s2 = Symbol();s1 === s2 // false// 有參數(shù)的情況 var s1 = Symbol("foo"); var s2 = Symbol("foo");s1 === s2 // false

Symbol值不能與其他類型的值進行運算

五、新增的語法糖

1、class, extends, super

? ? ? 這三個特性涉及了ES5中最令人頭疼的的幾個部分：原型、構(gòu)造函數(shù)，繼承

class Animal {constructor(){this.type = 'animal'}says(say){console.log(this.type + ' says ' + say)} }let animal = new Animal() animal.says('hello') //animal says helloclass Cat extends Animal {constructor(){super()this.type = 'cat'} }let cat = new Cat() cat.says('hello') //cat says hello

　　上面代碼首先用class定義了一個“類”，可以看到里面有一個constructor方法，這就是構(gòu)造方法，而this關(guān)鍵字則代表實例對象。

　　簡單地說，constructor內(nèi)定義的方法和屬性是實例對象自己的，而constructor外定義的方法和屬性則是所有實例對象可以共享的。

　　Class之間可以通過extends關(guān)鍵字實現(xiàn)繼承，這比ES5的通過修改原型鏈實現(xiàn)繼承，要清晰和方便很多。上面定義了一個Cat類，該類通過extends關(guān)鍵字，繼承了Animal類的所有屬性和方法。

　　super關(guān)鍵字，它指代父類的實例（即父類的this對象）。子類必須在constructor方法中調(diào)用super方法，否則新建實例時會報錯。這是因為子類沒有自己的this對象，而是繼承父類的this對象，然后對其進行加工。如果不調(diào)用super方法，子類就得不到this對象。

　　ES6的繼承機制，實質(zhì)是先創(chuàng)造父類的實例對象this（所以必須先調(diào)用super方法），然后再用子類的構(gòu)造函數(shù)修改this。

　　P.S 如果你寫react的話，就會發(fā)現(xiàn)以上三個東西在最新版React中出現(xiàn)得很多。創(chuàng)建的每個component都是一個繼承React.Component的類。

六、內(nèi)置對象擴展

1、模板字符串（template string）

大家可以先看下面一段代碼：

$("#result").append("There are <b>" + basket.count + "</b> " +"items in your basket, " +"<em>" + basket.onSale +"</em> are on sale!" );

　　我們要用一堆的'+'號來連接文本與變量，而使用ES6的新特性模板字符串``后，我們可以直接這么來寫：

$("#result").append(`There are <b>${basket.count}</b> itemsin your basket, <em>${basket.onSale}</em>are on sale! `);

　　用反引號（\）來標識起始，用?${}? 來引用變量，而且所有的空格和縮進都會被保留在輸出之中

2、數(shù)組擴展（Array.from和Array.of）

（1）Array.from是將偽數(shù)組對象或可迭代對象轉(zhuǎn)為數(shù)組實例

let m = new Map([[1, 2], [2, 4], [4, 8]]); Array.from(m); // [[1, 2], [2, 4], [4, 8]] function f() {return Array.from(arguments); } f(1, 2, 3); // [1, 2, 3] Array.from([1, 2, 3], x => x + x); // [2, 4, 6]// Generate a sequence of numbers // Since the array is initialized with `undefined` on each position, // the value of `v` below will be `undefined` Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4] //數(shù)組去重合并
function combine(){ let arr = [].concat.apply([], arguments); //concat() 方法用于連接兩個或多個數(shù)組。該方法不會改變現(xiàn)有的數(shù)組，僅僅返回被連接數(shù)組的一個副本。

return Array.from(new Set(arr)); } var m = [1, 2, 2], n = [2,3,3]; console.log(combine(m,n)); // [1, 2, 3]

（2）Array.of是將零散的東西集合成一個數(shù)組,

Array.of(element0[,?element1[, ...[,?elementN]]]) Array.of(7); // [7] Array.of(1, 2, 3); // [1, 2, 3] Array(7); // [ , , , , , , ] Array(1, 2, 3); // [1, 2, 3]

兼容舊環(huán)境:如果原生不支持的話，在其他代碼之前執(zhí)行以下代碼會創(chuàng)建?Array.of()?。

if (!Array.of) {Array.of = function() {return Array.prototype.slice.call(arguments);}; }

?

3、對象的擴展

（1）key和value相同時，寫一個就夠了。

（2）Object.assign()，將多個對象合為一個對象

? 　 ?let obj1={name:"July"};

　　let obj2={age:18};

　　console.log(Object.assign(obj1,obj2)) ? //{name:"July",age:18}

4、延展操作符(三點式)

常見用法：（1）、復(fù)制數(shù)組和復(fù)制對象；（2）、合并數(shù)組和合并對象 const a = {a: 1, b: 2} const b = {b: 3, c: 4} console.log({...a, ...b, c: 5}) // {a: 1, b: 3, c: 5} // 相當(dāng)于 Object.assign(a, b, {c: 5})

七、import export

　　這兩個家伙對應(yīng)的就是es6自己的module功能。

　　我們之前寫的Javascript一直都沒有模塊化的體系，無法將一個龐大的js工程拆分成一個個功能相對獨立但相互依賴的小工程，再用一種簡單的方法把這些小工程連接在一起。

　　這有可能導(dǎo)致兩個問題：

　　（1）一方面js代碼變得很臃腫，難以維護

　　（2）另一方面我們常常得很注意每個script標簽在html中的位置，因為它們通常有依賴關(guān)系，順序錯了可能就會出bug

　　在es6之前為解決上面提到的問題，我們得利用第三方提供的一些方案，主要有兩種CommonJS（服務(wù)器端）和AMD（瀏覽器端，如require.js）。

　　而現(xiàn)在我們有了es6的module功能，它實現(xiàn)非常簡單，可以成為服務(wù)器和瀏覽器通用的模塊解決方案。

　　ES6模塊的設(shè)計思想，是盡量的靜態(tài)化，使得編譯時就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。CommonJS和AMD模塊，都只能在運行時確定這些東西。

　　上面的設(shè)計思想看不懂也沒關(guān)系，咱先學(xué)會怎么用，等以后用多了、熟練了再去研究它背后的設(shè)計思想也不遲！

傳統(tǒng)的寫法

　　首先我們回顧下require.js的寫法。假設(shè)我們有兩個js文件:?index.js和content.js,現(xiàn)在我們想要在index.js中使用content.js返回的結(jié)果，我們要怎么做呢？

　　首先定義：

//content.js define('content.js', function(){return 'A cat'; })

然后require：

//index.js require(['./content.js'], function(animal){console.log(animal); //A cat })

那CommonJS是怎么寫的呢？

//index.js var animal = require('./content.js')//content.js module.exports = 'A cat'

ES6的寫法

//index.js import animal from './content'//content.js export default 'A cat'

　　以上我把三者都列出來了，媽媽再也不用擔(dān)心我寫混淆了...

ES6 module的其他高級用法

//content.jsexport default 'A cat' export function say(){return 'Hello!' } export const type = 'dog'

上面可以看出，export命令除了輸出變量，還可以輸出函數(shù)，甚至是類（react的模塊基本都是輸出類）

//index.jsimport { say, type } from './content' let says = say() console.log(`The ${type} says ${says}`) //The dog says Hello

這里輸入的時候要注意：大括號里面的變量名，必須與被導(dǎo)入模塊（content.js）對外接口的名稱相同。

　　如果還希望輸入content.js中輸出的默認值(default)，可以寫在大括號外面。

//index.jsimport animal, { say, type } from './content' let says = say() console.log(`The ${type} says ${says} to ${animal}`) //The dog says Hello to A cat

修改變量名

　　此時我們不喜歡type這個變量名，因為它有可能重名，所以我們需要修改一下它的變量名。在es6中可以用?as?實現(xiàn)一鍵換名。（有點類似sql語句，哈哈）

//index.jsimport animal, { say, type as animalType } from './content' let says = say() console.log(`The ${animalType} says ${says} to ${animal}`) //The dog says Hello to A cat

模塊的整體加載

　　除了指定加載某個輸出值，還可以使用整體加載，即用星號（*）指定一個對象，所有輸出值都加載在這個對象上面。通常 星號*?結(jié)合?as?一起使用比較合適。

//index.jsimport animal, * as content from './content' let says = content.say() console.log(`The ${content.type} says ${says} to ${animal}`) //The dog says Hello to A cat

想更全面了解ES6伙伴們可以去看阮一峰所著的電子書ECMAScript 6入門

轉(zhuǎn)載于:https://www.cnblogs.com/phoebeyue/p/9206625.html

總結(jié)

以上是生活随笔為你收集整理的ES6常用知识总结（20%的知识占80%的份额）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。