ES6必知大全
1，ES6基本介紹
ES6的全稱是:ECMAScript6.0，是 JavaScript 語言的下一代標準；它包含了一些很棒的新特性，能夠更加方便的實現不少複雜的操做，提升開發人員的效率。目前流行的js框架都使用了大量的ES6語法。數組
2，ES6經常使用變量
var,let,const（常量）均可以用來定義變量，如下詳細介紹let與const。
1,let變量
與var相似，用來定義變量。
區別以下：
（1）塊級做用域(第三種做用域)。let所聲明的變量，只在let命令所在的代碼塊內有效。 bash
const大多數都是來定義常量的
常見特色：
（1）聲明常量。值不能改變。
（2）必須當即初始化
3，ES6的字符串擴展
（1）trim起做用時並不影響原字符串。
trim:去掉字符串左右的空格
trimLeft:去掉字符串左邊的空格
trimRigth:去掉字符中右邊的空格
（2）模板字符串
格式以下： 框架
格式：字符串.repeat（n），這裏的n表明字符串被指定的重複的次數
（4）includes表示是否包含子串
格式：字符串.includes(子串)
格式：字符串.startsWidth(子串)
格式：字符串.endsWidth(子串) 其返回值是 true | false
（7）padStart是在字符串的前面進行填充，以達到指定的長度。
格式：字符串.padStart（指定的長度，字符）
（8）padEnd是在字符串的後面進行填充，以達到指定的長度。
格式：字符串.padEnd（指定的長度，字符）
4，ES6的數組擴展
1，方法的一些概念
（1）方法與函數區別與聯繫在於：方法也是函數，只不過寫在對象裏面的函數稱爲方法。
（2）方法分類可分紅實例方法和類方法。函數
- 實例方法：掛在對象上的方法；如window.alert()；var obj = {init:function(){}} obj.init()。
- 類方法：直接掛在類上的方法（構造器）；如isArray
2，ES5數組新增方法
1）Array.isArray：判斷一個數據是不是數組。
其格式：ui
Array.isArray(arr) 經過console.log()來打印出：true 或 flase。
複製代碼
注意點：
（1）Array叫作構造器（本質是一個函數）。
（2）arguments（收集實參）不是一個真實的數組，長得雖然像數組，但叫僞數組或者類數組。
（3）rest參數是一個真實的數組。
2）forEach：對數組進行循環。（以前咱們也會用for對數組進行循環，用for會麻煩一些，由於它要用循環變量）
其格式：this
數組.forEach( function(item,index,arr){
// 第一個參數 item : 當前的數組元素。至關於arr[index]；
// 第二個參數 index：數組元素的索引；
// 第三個參數 arr 當前的數組。
}）;
item,index,arr這叫形參，形參的命名是任意的，但通常咱們寫的形參要見名知意，這並不影響結果。更重要的是形參的位置順序。
複製代碼
注意點：
（1）形參是一個回調函數；
（2）修改item的值並不影響原數組（這有個前提，這個item的值是基本數據類型，即若是它是引用數據類型，則這個修改會影響原數組）
（3）不能break；
（4）沒有返回值；
（5）若是在回調函數中你不須要用到所有的三個參數，你按順序去省略。
3）map（map是JS內置的方法）： 逐一處理原數組元素，返回一個新數組。
其格式：spa
arr.map( function(item,index ,arr){
//item : 當前的數組元素。至關於arr[index]
//arr 當前的數組
//index：數組元素的索引；
return
} );
複製代碼
模擬map:原來咱們使用的arr.map是js內置的方法，如若使用本身寫的能夠在Array構造器的原型上建立一個方法。
其格式：prototype
Array.prototype.MyMap = function(f){
var newArray = [];
//處理老數組中的每個元素，處理完後，把處理後的元素放到newArray
for(let i=0; i<this.length; i++){
newArray.push(f(this[i],i,this))
}
return newArray;
}
複製代碼
易錯點：map也存在着修改item的值並不影響原數組。在return語句時，通常是處理誰就返回誰。新數組由於被處理固然會發生變化，因此在打印時要注意是原數組，而非處理過的新數組
（前提條件：這個item的值是基本數據類型，即若是它是引用數據類型，則這個修改會影響原數組）
小問題：何時要用map？
答：在咱們須要對一個數組進行一些加工，但並不想修改原數組，只是但願在原數組基礎上，獲得一個新數組。
4）filter： 逐一過濾原數組元素，留下符合條件的元素獲得一個新數組。
其格式：3d
arr.filter( function(item,index ,arr){
// item : 當前的數組元素。至關於arr[index]
// index：數組元素的索引；
// arr 當前的數組
return 布爾值；//值爲真，表示要留下這個數據。
} );
複製代碼
5）reduce： (累加和的感受)不斷地將前一項和後一項的值進行運算。
（具體規則是由回調函數決定的，每次的運算會涉及兩項）,把前一輪運算的結果做爲當前運算的前一項。返回最後結果。
其格式：rest
格式1: 不帶初始值：
數組.reduce（function（prev，next）{return}）
格式2: 帶初始值：
數組.reduce（function（prev，next）{...}，初值）。
其中，function中第一個參數prev表示前一項,第二個參數next表示後一項。固然， 你能夠改其它的變量名。reduce中的第二個參數表明初值，也就是說是加數的第一個值
複製代碼
6）some： 只要數組中的某一個元素符合指定的條件，就會返回真，不然返回假。
其格式：
數組.some（function（value，index，arr）{return;}）
複製代碼
7）every： 數組中的每個元素符合指定的條件，就會返回真，不然返回假。
其格式：
數組.every（function（value，index，arr）{return;}）
複製代碼
3，ES6數組新增方法 1）Array.from：這個方法是Array構造器的靜態方法，將把類數組對象轉成真正的數組。
其格式：
格式1：Array.from(類數組對象);
格式2：Array.from(類數組對象,function(item,index){return;})
複製代碼
2）Array.of：將一組值轉換爲數組。與Array.from功能類似，理解用來建立數組。
其格式：
Array.of(數值)；
複製代碼
3）find：用於找出第一個符合條件的數組元素。找不到則是undefined，注意：它是不會返回多個，只找一個，找到了就返回；若是你要把全部的知足條件的數組元素都找出來，你應該用filter()。
其格式：
arr.find(function(item,index){return 條件;})
複製代碼
4）findIndex： 返回第一個符合條件的數組元素的索引。找不到則是-1。
其格式：
arr.findIndex(function(item,index){return 條件;})
複製代碼
5）includes:判斷一個元素是否在一個數組中,返回值是true或者false 其格式：
arr.includes(要判斷的元素值)
複製代碼
6）fill：給數組填充指定值。fill方法用於空數組的初始化很是方便。已有數據會被覆蓋，fill方法還能夠接受第二個和第三個參數，用於指定填充的起始位置和結束位置。
其格式：
格式1：arr.fill(值)
格式2：arr.fill(值,起點，終點) 包括起點，不包括終點
複製代碼
5，ES6的解構賦值
1，解構賦值的定義
ES6 容許按照必定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲解構（Destructuring）。其做用是對變量進行賦值。變量的值的來源是數組或者對象。解構賦值的規則就是根據必定的模式。
2，數組的解構賦值
數組的解構賦值：數組下標位置的對應關係。
（1）按下標一一對應地去賦值：由於兩邊賦值的數組中數據個數一致，就按照從前日後的順序依照下標給其賦值
3，對象的解構賦值
（1）按屬性名的一一對應關係來進行賦值
6，ES6的對象擴展
1，和屬性相關的方法：
（1）Object.getOwnPropertyDescriptor() 獲得某個對象中某個屬性的特徵
格式：
Object.defineProperty(對象名，"屬性名"，{
configurable: //是否能夠刪除。默認爲true
writable: //是否能夠修改屬性的值。默認值爲true
enumerable: //是否能夠枚舉，是否能夠經過for in 循環來輸出。默認爲true
value: //值。默認是undefined
})
複製代碼
（1）Object.create() 用於對字面量對象實現繼承
（1）preventExtensions()：不容許新增，但能夠修改，也能夠刪除
（2）seal：密封，不容許新增、也不容許刪除，但能夠修改
（3）freeze：冰封，不容許新增、不容許刪除，不容許修改
它本質上改變的都是精細化設置中的一些屬性，configurable，writable，enumerable，value之類的。
7，ES6的函數擴展
1，參數默認值
在ES6出現以前，不能直接爲函數的參數指定默認值，而ES6 容許爲函數的參數設置默認值，即直接寫在參數定義的後面。
(2)對於設置默認值後又傳遞了參數，那麼會發生覆蓋，它是從第一個開始覆蓋的。
2，rest參數
rest參數它是在定義函數時使用，遵循着「大家不要了的都給我」的原則，因此rest參數必須存在於最後面；在調用函數時，把參數傳給對應的變量，直到沒有變量可賦時，就將其它的全部的參數傳給rest。
3，擴展運算符（spread）
ES6的擴展運算符是在給多參數函數傳參時，用來替代Apply，合併數組，和解構配合對賦值提供了很好的便利。擴展運算符就是三個點「…」，它可將數組拆分紅一個個小元素。
（1）數組中的擴展運算符
案例一：數組的複製（...數組表示將數組展開，分解成一個一個小的元素）
案例二：類數組轉數組
案例三：字符串轉數組
方法一：利用字符串的split方法
方法二：[...]使用擴展運算符
案例四：合併數組
方法一：數組對象的concat方法
（2）對象中的擴展運算符
對象中的擴展運算符用於取出參數對象的全部可遍歷屬性，拷貝到當前對象之中。等同於使用Object.assign方法。
實現深拷貝方式一
let school = {name:'bjdx'};
let my = {age:{count:18},name:'yjb'};
//把原來的my放在新對象裏，用一個新的age 把原來的age也拷貝一份
let newMy = {...my,age:{...my.age}}
let all = {...school,...newMy}
my.age.count = 100;
console.log(all);
複製代碼
4，調用函數時…和定義函數時…是不同的
…是拓展運算符，它的功能：用來把一個數組"打散"；對於...rest，這裏…稱爲rest運算符。它的功能：把零散的參數列表打包成一個數組。
5，箭頭函數
基本的做用 ：簡化函數的定義
格式以下：
([param] [, param]) => {//函數體statements}
複製代碼
箭頭函數特色：
特色1：只有一個形參時，()可不寫
特色2：若有多個形參，或者沒有形參，則()不能少
特色3：只有一個帶return語句 {} 和 return 均可以不寫
特色4：只有一個不帶return語句 {} 能夠不寫
特色5：若是返回對象，把{} 和 return 省掉的話，須要給這個對象加()
特色6：箭頭函數不能當作構造函數，也就是說不能使用new命令
特色7：不能使用arguments對象，箭頭函數中沒有argumetns，可使用rest參數
特色8：箭頭函數內部中不存在this，this會發生丟失(事件綁定與setinterval)，可經過箭頭函數解決
8，Class類
Class是ES5中構造器與原型的語法糖
（1）使用class直接來建立對象，能夠代替以前書寫的函數裏的對象
在class建立的對象裏面都是寫的函數，也就是說這些函數都是方法，那麼原型上的方法也就直接在這裏書寫啦！方法與方法之間不使用逗號，沒有鍵值對。
class 父類{
constructor(name,age){
this.name = name;
this.age = age;
}
method(){ //對象中簡寫方法，省略了function。不要與箭頭函數搞混了。
}
}
複製代碼
（2）使用extends實現繼承，在子類中的構造器constructor中，必需要顯式調用父類的super方法，若是不調用，則this不可用
class 子類 extends 父類{
constructor(name,age){
super(name,age)
}
}
複製代碼
實例指的是new上的東西，咱們能夠經過new上一個對象來調用方法，還能夠經過類來調用方法，若是使用類來調用方法的話，叫靜態方法。
靜態方法和靜態屬性就只能類來調用，實例（就是new上的那個對象）不能調用
class Animal{
static m = 1;//這裏的m並非變量而只能稱之爲屬性
//靜態方法就僅僅是在其前面加上static，且不能使用實例調用
static eat(){
console.log("eat...")
}
}
Animal.eat()
複製代碼
- 1. ES6 必知必會
- 2. 你必須知道的ES6
- 3. 全面感知ES6
- 4. ES6語法大全
- 5. ES6知識補全--2
- 6. 全面感知ES6（7）Promise
- 7. ES6知識點彙總（全）
- 8. 前端必須會的ES6知識
- 9. ES6經常使用必備知識
- 10. ReactNative開發必備ES6知識
- 更多相關文章...
- • Docker 命令大全 - Docker教程
- • ASP.NET MVC - 安全 - ASP.NET 教程
- • JDK13 GA發佈：5大特性解讀
- • Tomcat學習筆記（史上最全tomcat學習筆記）
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. ES6 必知必會
- 2. 你必須知道的ES6
- 3. 全面感知ES6
- 4. ES6語法大全
- 5. ES6知識補全--2
- 6. 全面感知ES6（7）Promise
- 7. ES6知識點彙總（全）
- 8. 前端必須會的ES6知識
- 9. ES6經常使用必備知識
- 10. ReactNative開發必備ES6知識