ES6常用知识总结（20%的知识占80%的份额）
一、變量和常量
var的缺點：（1）var可以多次聲明同一個變量；? ?（2）var會造成變量提升?
let以及const都是塊級作用域。我們常常使用let來聲明一個值會被改變的變量，而使用const來聲明一個值不會被改變的變量，也可以稱之為常量。
常見題：
? ??如何將結果輸出為0, 1, 2
????es5處理方法 -- 用函數(shù)制造塊級作用域
? ? es6處理方法 -- 更加簡單明了
二、解構賦值（Destructuring）
1、對象的解構賦值
const props = {className: 'tiger-button',loading: false,clicked: true,disabled: 'disabled' }當我們想要取得其中的2個值：loading與clicked時：
?
// es5 var loading = props.loading; var clicked = props.clicked;// es6 let { loading, clicked } = props;// 給一個默認值，當props對象中找不到loading時，loading就等于該默認值 let { loading = false, clicked } = props; 2、數(shù)組的解構賦值// 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ù)組以序列號一一對應，這是一個有序的對應關系。
而對象根據(jù)屬性名一一對應，這是一個無序的對應關系，屬性名一致即可。根據(jù)這個特性，使用解析結構從對象中獲取屬性值更加具有可用性。 ES6解構賦值
三、函數(shù)
1、箭頭函數(shù)（array function） // es5 var fn = function(a, b) {return a + b; } // es6 箭頭函數(shù)寫法，當函數(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ù)，不能作為構造函數(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ù)類型
重新復習下舊知識：基本數(shù)據(jù)類型有6種：Undefined、Null、布爾值（Boolean）、字符串（String）、數(shù)值（Number）、對象（Object）。
1、Set ?（類似數(shù)組）
主要用來去除重復的數(shù)據(jù)，Set 本身是一個構造函數(shù)，用來生成 Set 數(shù)據(jù)結構。
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）也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當作鍵。 const map1 = new Map() const objkey = {p1: 'v1'}map1.set(objkey, 'hello') console.log(map1.get(objkey))結果：
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'))結果：
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 // falseSymbol值不能與其他類型的值進行運算
五、新增的語法糖
1、class, extends, super
? ? ? 這三個特性涉及了ES5中最令人頭疼的的幾個部分：原型、構造函數(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方法，這就是構造方法，而this關鍵字則代表實例對象。
簡單地說，constructor內(nèi)定義的方法和屬性是實例對象自己的，而constructor外定義的方法和屬性則是所有實例對象可以共享的。
Class之間可以通過extends關鍵字實現(xiàn)繼承，這比ES5的通過修改原型鏈實現(xiàn)繼承，要清晰和方便很多。上面定義了一個Cat類，該類通過extends關鍵字，繼承了Animal類的所有屬性和方法。
super關鍵字，它指代父類的實例（即父類的this對象）。子類必須在constructor方法中調(diào)用super方法，否則新建實例時會報錯。這是因為子類沒有自己的this對象，而是繼承父類的this對象，然后對其進行加工。如果不調(diào)用super方法，子類就得不到this對象。
ES6的繼承機制，實質(zhì)是先創(chuàng)造父類的實例對象this（所以必須先調(diào)用super方法），然后再用子類的構造函數(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）、復制數(shù)組和復制對象；（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} // 相當于 Object.assign(a, b, {c: 5})七、import export
這兩個家伙對應的就是es6自己的module功能。
我們之前寫的Javascript一直都沒有模塊化的體系，無法將一個龐大的js工程拆分成一個個功能相對獨立但相互依賴的小工程，再用一種簡單的方法把這些小工程連接在一起。
這有可能導致兩個問題：
（1）一方面js代碼變得很臃腫，難以維護
（2）另一方面我們常常得很注意每個script標簽在html中的位置，因為它們通常有依賴關系，順序錯了可能就會出bug
在es6之前為解決上面提到的問題，我們得利用第三方提供的一些方案，主要有兩種CommonJS（服務器端）和AMD（瀏覽器端，如require.js）。
而現(xiàn)在我們有了es6的module功能，它實現(xiàn)非常簡單，可以成為服務器和瀏覽器通用的模塊解決方案。
ES6模塊的設計思想，是盡量的靜態(tài)化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。CommonJS和AMD模塊，都只能在運行時確定這些東西。
上面的設計思想看不懂也沒關系，咱先學會怎么用，等以后用多了、熟練了再去研究它背后的設計思想也不遲！
傳統(tǒng)的寫法
首先我們回顧下require.js的寫法。假設我們有兩個js文件:?index.js和content.js,現(xiàn)在我們想要在index.js中使用content.js返回的結果，我們要怎么做呢？
首先定義：
//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'以上我把三者都列出來了，媽媽再也不用擔心我寫混淆了...
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這里輸入的時候要注意：大括號里面的變量名，必須與被導入模塊（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模塊的整體加載
除了指定加載某個輸出值，還可以使用整體加載，即用星號（*）指定一個對象，所有輸出值都加載在這個對象上面。通常 星號*?結合?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
總結
以上是生活随笔為你收集整理的ES6常用知识总结（20%的知识占80%的份额）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux 下打包报错：enospc (
- 下一篇： 类中的构造方法实例化的时候自动执行