走進Es6
ES6（又名 ES2105）是 JavaScript 語言的新標準，2015 年 6 月正式釋出後，得到了迅速推廣，是目前業界超級活躍的計算機語言。
《ES6標準入門（第2版）》為中級難度，適合對 JavaScript 語言或 ES5 已經有所瞭解的讀者，用來提高水平，瞭解這門語言的最新發展；也可當作參考手冊，查尋 ES6/ES7 新增的語法點
一.var，let與const
在ES6中新增了let，與const的宣告方式
let類似於var，但是使用let宣告變數，所宣告的變數不會提升，而且let可以劃分塊級作用域
1.1 let宣告的變數不會提升：
console.log(a) //undefined
var a=110;
console.log(b)
let b=120 // not defined
複製程式碼執行見下圖：
1.2 let劃分塊級作用域：
if(true){var a=11}
console.log(a) // 11
if(true){let b=22}
console.log(b) // not define
複製程式碼執行見下圖：
總所周知，在js中，if是不能劃分非同步程式碼的，但是let所在的{}中，卻劃分了塊級作用域
2.用const來宣告常量，宣告常量時必須賦值，常量不可修改
const PI =3.14
console.log(PI)
PI =77
console.log(PI)
複製程式碼執行見下圖：
二.解構賦值
從陣列和物件中提取值，對變數進行賦值，這稱為解構賦值
ES6之前為變數賦值:
var a=1;
var b=2;
var c=3;
console.log(a,b,c) // 1,2,3
複製程式碼2.1 陣列中的解構賦值
使用解構賦值：
var [a,b,c] =[1,2,3]
console.log(a,b,c) // 1,2,3
複製程式碼解構賦值還可以新增預設值，以右邊為主，右邊沒有再看左邊
var [a,b,c,d=7]=[1,2,3]
var [aa=1,bb=1,cc=1,dd=7]=[1,2,3,9]
console.log(a,b,c,d) //1 2 3 7 成功設定了d的預設值7。
console.log(aa,bb,cc,dd) //1 2 3 9 雖然各個變數都有自己的預設值，但是解構賦值右邊有數值，以右邊的為主。
複製程式碼2.2 物件中的解構賦值
解構不僅可以用於陣列，還可以用於物件
物件的解構和陣列有一個重要的不同。陣列的元素是按此排序的，變數的取值由它的位置決定；而物件的屬性沒有次序，變數必須與屬性同名，才能取到正確的值。
var {bar,foo} = {foo:"aaa",bar:"bbb"};
console.log(foo) // aaa
console.log(bar) // bbb
var {baz} = {foo:"aaa",bar:"bbb"};
console.log(baz) // undefined
複製程式碼如果變數名與屬性名不一致，必須寫成這樣：
var {foo:baz} = {foo:"aaa",bar:"bbb"};
console.log(baz) // "aaa"
let obj = {first:"hello",last:"world"};
let {first:f,lats:l} = obj;
console.log(f) // "hello"
console.log(l) // "world"
複製程式碼物件的解構賦值是內部機制，是先找到同名屬性，然後再賦給對應的變數。 真正被賦值的是後者，而不是前者。
三.陣列中新增的方法
3.1擴充套件運算子
ES6中新增了擴充套件運算子"..."，主要作用為：合併陣列，複製陣列，將字串或類陣列轉為真陣列。
3.1.1 擴充套件運算子--合併陣列：
var arra=[1,2]
var arrb=[6,7]
var arrab=[...arra,...arrb]
console.log(arrab)
複製程式碼執行見下圖：
3.1.2 擴充套件運算子--複製陣列：
var arr1=[1,2,3,4]
var arr2=[...arr1]
console.log(arr2) // [ 1, 2, 3, 4 ]
arr1[0] = 99
console.log(arr1) // [ 99, 2, 3, 4 ]
console.log(arr2) // [ 1, 2, 3, 4 ]
複製程式碼3.1.3 擴充套件運算子--將字串或類陣列轉為真陣列:
var str ="nihao"
var sp=[...str]
console.log(sp) // [ 'n', 'i', 'h', 'a', 'o' ]
複製程式碼3.2 map
逐一處理原陣列的元素，並返回一個新陣列
var arr = [1,2,3]
var map = arr.map (function(item,index,arr){
item+=100;
return item
})
console.log(arr) //[ 1, 2, 3 ]
console.log(map2) //[ 101, 102, 103 ]
複製程式碼.map (function(item,index,arr), 其中形參item,index,arr 分別代表這元素，索引，陣列
3.3 Array.from
Array.from 可以將類陣列轉化為真陣列
<div></div>
<script>
var lis = document.getElementsByTagName("div");
console.log(Array.isArray(lis)); //列印值是false
var xx =Array.from(lis);
console.log(Array.isArray(xx)) // true
console.log(Array.isArray(lis)); //列印值仍是false
//對原類陣列無影響
</script>
複製程式碼3.4 join()
將陣列變成字串
var arr1= [1,2,3,4];
var sr =arr1.join();
console.log(sr) // 1,2,3,4
console.log(typeof sr) // string
console.log(typeof arr1) // object
複製程式碼3.5 reverse()
將陣列翻轉，會影響原來的陣列
var arr=[1,"a","b",2];
var lz = arr.reverse();
console.log(lz) // [ 2, 'b', 'a', 1 ]
console.log(arr) // [ 2, 'b', 'a', 1 ]
複製程式碼3.6 slice()
擷取陣列中的一段元素，生成新陣列,對原陣列無影響
var arr=[1,2,3,4,5,6,7]
var sc = arr.slice(0,4)
console.log(arr) // [ 1, 2, 3, 4, 5, 6, 7 ]
console.log(sc) // [ 1, 2, 3, 4 ]
複製程式碼slice() 中的形參是左閉右開區間
3.7 filter()
過濾陣列中符合條件的元素
var arr= [1,2,3,4,5]
var filter = arr.filter(function(item){
return item<3;
})
console.log(filter) // [ 1, 2 ]
複製程式碼filter 中的形參 item 表示陣列中的元素，會過濾出符合條件的元素，不影響原陣列。
3.8 Array.of()
建立陣列,將一組值轉為陣列,對原來的值無影響。
// 建立陣列
var arr1=Array.of(3)
var arr2=Array.of("3");
console.log(arr1, typeof arr1) // [ 3 ] 'object'
console.log(arr2, typeof arr2) //[ '3' ] 'object'
// 轉為陣列
var xx= 1;
var newxx=Array.of(xx);
console.log(xx, typeof xx); // 1 'number'
console.log(newxx, typeof newxx); // [ 1 ] 'object'
複製程式碼3.9 fill()
給陣列填充制定值
let arr =new Array(5);
arr.fill("!!");
console.log(arr) // [ '!!', '!!', '!!', '!!', '!!' ]
//fill方法會覆蓋之前的元素
let arr1= [1,2,3,45,6,7]
arr1.fill("你好")
console.log(arr1) // [ '你好', '你好', '你好', '你好', '你好', '你好' ]
//制定填充的位置 左閉右開區間
let arr2 =new Array(7);
arr2.fill("!",0,2)
console.log(arr2) // [ '!', '!', <5 empty items> ]
複製程式碼3.10 indexOf()
返回制定元素在陣列中首次出現的位置
var arr=[3,3,3,3,"xxx","???",7]
console.log(arr.indexOf(9)) // -1
console.log(arr.indexOf(3)) // 0
console.log(arr.indexOf("xxx")) // 4
複製程式碼返回的是指定的字串值在字串中首次出現的位置（陣列中的索引）沒有則返回-1
四.箭頭函式
箭頭函式相當於匿名函式，並且簡化了函式定義。
箭頭函式寫法 function(){} 變為 ()=>
4.1 箭頭函式書寫舉例：
var a =""
var f= (x)=>{
a =x
console.log(a)
}
f(1) // 1
複製程式碼若形參只有一個，則可以省略形參左右的()
var a =""
var f= x=>{
a =x
console.log(a)
}
f(1) // 1
複製程式碼如果沒有形參，則必須加()
若箭頭函式函式體裡只有一句語句，則可以省略{}，如下：
var f=()=>console.log("你好")
f() // 你好
複製程式碼5.字串模板
使用ES6中新增的字串模板，可以更加使書寫程式碼變的更為方便，如下：
//傳統字串拼接
var name = '豆豆';
var age = 6;
console.log(name+"今年已經"+age+"歲啦")
// 字元模板的寫法
console.log(`${name}今年已經${age}歲了`)
複製程式碼使用鍵盤“Esc”下面的反引號將內容包括，用${}將變數包括。
6.class相關知識
在之前的ES5中，我們常常使用構造器的方法去實現一個類的功能，現在我們在ES6中可以直接使用class去建立類
6.1 先看一下使用構造器實現類：
function NBACreate(name, age ,height){
this.name = name,
this.age =age,
this.height =height;
}
NBACreate.prototype.say =function(){
console.log(`我是${this.name},今年${this.age}歲了。`)
}
var x1 =new NBACreate("小明","22","171")
console.log(x1)
x1.say();
複製程式碼執行如下：
6.2使用class建立類：
class NBACreate2{
//class 中的屬性要寫入constructor中
constructor(name,age,height){
this.name =name,
this.age =age,
this.height =height;
}
say(){
console.log(`我是${this.name},今年${this.age}歲了。`)
}
}
var y1 =new NBACreate2("大明","27","187")
console.log(y1);
y1.say();
複製程式碼執行如下：
6.3 class中還可以使用static編寫靜態方法
class abc{
constructor(a,b){
this.name =a;
this.age =b
}
say(){
return console.log("你好")
}
static nicai(){
return console.log("我是靜態方法")
}
}
var x1 = new abc("wangcai","7");
console.log(x1)
x1.say();
// 呼叫靜態方法，只能用方法名.靜態方法
abc.nicai();
複製程式碼執行如下：
6.4 class中可以通過extends繼承類
class NBACreate2 {
//class 中的屬性要寫入constructor中
constructor(name, age, height) {
this.name = name,
this.age = age,
this.height = height;
}
say() {
console.log(`我是${this.name},今年${this.age}歲了。`)
}
}
class MVP extends NBACreate2 {
constructor(name, age, height, year) {
//使用super借用NBACreate2
super(name, age, height)
this.year = year
}
sayMVp(){
console.log(`我是${this.name},我是${this.year}的mvp`)
}
}
var y1 = new MVP("大明", "27", "187",18)
console.log(y1);
y1.say();
y1.sayMVp();
複製程式碼執行如下：
7.字串擴充套件
7.1 trim()
使用trim可以去除字串的空格
var str= " a b c "
var str2 ="xx"
console.log(str,str2)
// trim 左右空格都去掉
console.log(str.trim(),str2)
//trimLeft 左邊空格去掉
console.log(str.trimLeft(),str2)
//trimRight 右空格去掉
console.log(str.trimRight(),str2)
複製程式碼執行如下：
7.2 repeat()
repeat可以複製指定份數的字串並返回
var str="你好+ "
console.log(str.repeat(10))
複製程式碼執行如下：
repea 中的引數就是所要複製的份數
7.3 includes() 與 startsWith()
.includes 可以判斷字串中是否有其中的值，有的話返回true，無則返回false
startsWith()和 includes()的作用類似，不同的是includes() 可以從字串的任意位置開始檢索，startsWith() 只能從字串的首位置開始檢索
7.3.1 includes()
var str= " abc de"
console.log(str.includes("a")) // true
console.log(str.includes(" ab")) // true
console.log(str.includes("c d")) // true
console.log(str.includes("c dxx")) // false
複製程式碼7.3.2 startsWith()
var str= "abc de"
console.log(str.startsWith("a")) // true
console.log(str.startsWith("ab")) // true
console.log(str.startsWith("bc")) // false 此處若用includes()方法，則返回true
console.log(str.startsWith("dexx")) // false
複製程式碼7.4 padStart(), padEnd()
padStart() 和 padEnd() 的作用都是填充字串直至字串長度達到設定值，不同的是 padStart() 是從首部開始填充，而 padEnd() 是從尾部開始填充
var str="你好"
console.log(str.padStart(9,"hi"))
console.log(str.padEnd(9,"沙"))
複製程式碼執行如下：
8. 物件中新增的方法
8.1 getOwnPropertyDescriptor()
getOwnPropertyDescriptor() 方法可以獲取一個物件中某個屬性的詳細資訊
<script>
var a=1;
console.log(Object.getOwnPropertyDescriptor(window,"a"))
</script>
複製程式碼執行如下：
8.2 Object.defineProperty()
Object.defineProperty() 精細化設定一個物件的屬性,其中包含屬性是否可以刪除，是否可以修改此屬性，是否可以列舉，和設定屬性的值四部分組成
Object.defineProperty() 的設定格式： Object.defineProperty(物件名，“屬性名”,{內容})
8.2.1 configurable
configurable 設定屬性是否可以刪除，預設是ture（可以刪除）
var obj ={abc:"123"}
Object.defineProperty(obj,"abc",{
configurable:false
})
delete obj.abc;
console.log(obj.abc) // 123
複製程式碼因為設定了 configurable:false 即使刪除abc也刪除不了。
8.2.2 writable
writable 設定屬性是否可以修改，預設值是ture（可以修改）
var obj = {name : "豆豆"}
console.log(obj.name)
obj.name="旺財"
console.log(obj.name)
Object.defineProperty(obj,"name",{
writable:false
})
obj.name="貝貝"
console.log(obj.name)
複製程式碼執行如下：
obj.name初始值是“豆豆”,此時可以成功將於修改列印“旺財”，一但設定了 writable:false 則修改無效。
8.2.3 enumerable
enumerable 設定屬性是否可以列舉，預設是ture（可以列舉）
var obj = {
a: "1",
b: "2",
c: "3"
}
for( var item in obj){
console.log(item)
}
Object.defineProperty(obj,"a",{
enumerable:false
})
// 分割線
console.log("----------------")
for( item in obj){
console.log(item)
}
複製程式碼執行如下：
在未設定 enumerable:false 時，可以列舉obj中的a屬性，設定 enumerable 後，無法列舉a屬性。
8.2.4 value
value 設定屬性的值，分為兩種情況，一種宣告物件時不宣告屬性，一種宣告物件時宣告屬性。
8.2.4.1 宣告物件時不宣告屬性
var obj ={
}
console.log(obj.abc) // 列印 obj.abc undefined
Object.defineProperty(obj,"abc",{
value:"你好"
})
console.log(obj.abc) // 列印發現obj.abc的值為value設定的值。
obj.abc ="123"
console.log(obj.abc) // 在外部無法再修改obj.abc的值了
delete obj.abc
console.log(obj.abc) // 也無法刪除其值
複製程式碼執行如下：
此時 valu既保證屬性不可修改，還設定了屬性的值，即使在外部設定屬性的值，屬性的值仍然會被修改成value設定的值相同，並且設定value後，該屬性的值無法被刪除。
8.2.4.1 宣告物件時宣告屬性
var obj ={
abc:"xxxx"
}
console.log(obj.abc) // 列印 obj.abc xxxx
Object.defineProperty(obj,"abc",{
value:"你好"
})
console.log(obj.abc) // 列印發現obj.abc的值被value修改了
obj.abc ="123"
console.log(obj.abc) // 宣告屬性後，此時在外部可以再修改obj.abc的值
delete obj.abc
console.log(obj.abc) // 也可以刪除其值
複製程式碼執行如下：
8.2.3 getOwnPropertyNames()
getOwnPropertyNames() 獲取自有屬性，以陣列的格式返回
var obj ={
name:"xiaoming",
age:"22",
say:function(){
console.log("我是obj裡面的say方法")
}
}
console.log(obj);
console.log(Object.getOwnPropertyNames(obj))
複製程式碼結語
此文總結的只是ES6的一部分特性，在以後的日子裡，會逐漸的去補充。