1.let 和 const 命令
在es5時，只有兩種變數宣告，var 和function，在es6中新增了四種let和const，以及另外兩種宣告import和class， 我們先講解let和const,后續會補充import和class
（1）let
我們先來看基本語法
{
let a = 10;
var b = 1;
}
b // 1
a // ReferenceError: a is not defined.
復制代碼我們在代碼塊中宣告了a，b，然后a is not defined.這是因為let命令只在對應的代碼塊中有效，我們在外部去參考它，就會報錯，這就是let的塊級作用域的效果，如果不太清楚什么是塊級作用域，我們來看下面的例子
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[0]();//10
a[6](); // 10
除了本文案例，接下來我還會在我的裙里用視頻講解的方式給大家拓展下圖中的內容：有興趣的可以來我的扣扣裙 519293536 免費交流學習，我都會盡力幫大家哦，
這是一個老生常談的問題了，i在for回圈中定義的是全域變數，我們在呼叫函式時，函式內部的i參考的是全域的i，所以列印出來的 是10. 我們之前是這樣解決的，
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = (function (a) {
return function(){
console.log(a);
}
}(i));
}
a[0]();//0
a[6](); // 6
復制代碼我們使用了立即執行函式將i的值傳入了內部的函式，這樣內部的函式就能夠獲取到對應的i，
我們用let來代替var，最后輸出的是 6，
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
復制代碼這是因為我們每一次的回圈都生成了一個新的塊級作用域，內部保存著i的值，所以就會列印出6.
let不存在變數提升
console.log(a);
console.log(b);
var a=0;//undefined
let b=0;//ReferenceError: b is not defined
復制代碼TDZ(暫時性死區) let命令在塊級作用域中，即使不存在變數提升，它也會影響當前塊級作用域，即系結在了當前作用域，在作用域中參考外部的變數將會報錯，
var a=10;
{
console.log(a); //ReferenceError: a is not defined
let a=10;
}
復制代碼同時，我們在TDZ中使用typeof也會報錯.
console.log( typeof a);//undefined
復制代碼console.log( typeof a);//ReferenceError: a is not defined
let a=10;
復制代碼let 不允許重復宣告變數
{
var a=0;
let a=1;//SyntaxError: Identifier 'a' has already been declared
}
復制代碼(2) const常量
const常量宣告一個只讀屬性的變數，不可更改，不可先宣告后賦值，生成塊級作用域，
const a;//SyntaxError: Missing initializer in const declaration(const宣告中缺少初始值設定項)
a=10;
復制代碼它同let有很多相似的地方， .不可重復宣告
const a=10;
var a=10;//SyntaxError: Identifier 'a' has already been declared
復制代碼.變數不提升
console.log(a)//ReferenceError: a is not defined
const a=10;
復制代碼.同樣存在暫時性死區
var a=10;
{
console.log(a);//ReferenceError: a is not defined
const a=10;
}
復制代碼另外，const保證常量的值不被修改的原理是什么呢？const實際上無法改變的只是常量在堆疊區的值不變，如果這個值是一個基本資料型別，那么const能夠保障常量的值不變，但如果是參考型別的資料，堆疊區保存的其實是對應常量的地址，地址無法改變，但是對應地址的堆區內容卻可以改變，
const a=[1,2,3]
a.push(4)
console.log(a); //[1, 2, 3, 4]
復制代碼很顯然，我們通過push，直接修改了堆區的內容，間接改變了const常量的值，
如果要真正做到常量的功能，可以使用Object.freeze()
var a=[1,2,3];
Object.freeze(a)
a.push(4) //Cannot add property 3, object is not extensibleat Array.push
console.log(a);
復制代碼2.字串擴展方法
（1）for of字串遍歷
使用for of可以遍歷字串，并將字串分解為單獨的字串
var a='lang'
for (item of a){
console.log(item);
}
// l
// a
// n
// g
復制代碼(2) codePointAt字串查詢.
根據下標，查詢對應字串，在Es5時，就有一個charAt（）方法，但charAt（）顯然沒想到，隨著Unicode編碼的擴展，原先的0x0000~0xFFFF已經無法滿足表示所有字符了，
var text = "??";
text.charAt(0); //''
text.charAt(1); //''
復制代碼所以es6中新增了codePointAt（），查詢，codePointAt（）有著更好的unicode支持，能夠查詢>0xFFFF的字符，
var text = "??";
console.log(text.codePointAt(0)); //134071
復制代碼(3)includes()值存在判斷
在es6之前使用indexof也可以進行值存在判斷，includes與indexof既可以進行字串的判斷，也可以進行陣列值的判斷， 但是indexof在對NaN進行判斷時會出現不準確，
var text = [1,NaN]
console.log(text.indexOf(NaN));//-1
復制代碼另外，indexof的回傳結果為-1||0，includes為true||false.
(4) repeat()字串重復
str=repeat(n)回傳的是新的字串，并且會將str的字串重復n次，
var a='lang'
console.log(a.repeat(3));//langlanglang
復制代碼其中n會自動取整，n<=-1||n==infinaty將會報錯，
（5）startwith，endwith，
startWith('str',n)：回傳布林值，表示引數字串是否在原字串的頭部，
endsWith('str',n)：回傳布林值，表示引數字串是否在原字串的尾部，其中str表示要判斷的值，n表示從目標字串的第幾個元素開始，
var str='hello world'
console.log(str.startsWith('hello',0)); //true
console.log(str.startsWith('world',6)); //true
console.log(str.startsWith('world',0)); //false
復制代碼（6）padStart()，padEnd()
es6提供了兩個字串追加的方法String.prototype.padStart和String.prototype.padEnd，方便我們將一個新的字串追加到某個字串的頭尾，
我們常常使用padstart來使字串輸出時保持格式，
var a='abc'
var b='abcd'
var c='abcd'
console.log(a.padStart('10',0));
console.log(b.padStart('10',0));
console.log(c.padStart('10',0));
//0000000abc
//000000abcd
//00000abcde
復制代碼但有時候使用endstart顯然會更好，
var a='abc'
var b='abcd'
var c='abcde'
console.log(a.padEnd(10,'-------'));
console.log(b.padEnd(10,'-------'));
console.log(c.padEnd(10,'-------'));
//abc-------
//abcd------
//abcde-----
復制代碼也可以組合使用達到效果
var obj={
name:'wangcai',
car:'BMW',
wife:'fatgirl'
}
for(var item in obj){
console.log(item.padEnd(10,'-')+'value:'+obj[item].padStart(10,'**'));
}
//name------value:***wangcai
//car-------value:*******BMW
//wife------value:***fatgirl
復制代碼(7)**模板字串
模板字串的引入是es6的一大亮點，它使得輸出模板變得簡潔而方便，模板采用反引號（``），中間支持各種格式的輸出， 包括換行，空格，變數，運算式，呼叫函式等，我們可以在一個模板中組合使用它們
var age=22;
var name='lang'
var say=()=>{
return 'hello'
}
var str=`myname is${name} my age is ${age} and i can say ${say()}`
console.log(str); //myname islang my age is 22 and i can say hello
復制代碼在模板字串的 ${} 中可以寫任意運算式，但是同樣的，對 if / else 判斷、回圈陳述句無法處理，
但在很多時候我們需要去使用if或者回圈，我們可以先在外部使用邏輯處理陳述句，然后生成一個我們想要的模板，在用``進行轉義
var age=22;
var name='lang'
var name2='Lang'
var str=''
var say=()=>{
return 'hello'
}
if(age>=18){str=name2}
var str=`myname is${str} my age is ${age} and i can say ${say}`
console.log(str); //myname isLang my age is 22 and i can say hello
復制代碼當然，我們也可以使用陣列，將各個模板片段存入陣列之中，最后通過Array.join('')將其拼接為最終的模板，
3.數值擴展方法
（1）二進制和八進制表示法
之前在es5時的嚴格模式中，，我們已經無法使用二進制和八進制，在es6中提供了兩個新的二進制和八進制寫法，
二進制（0bxxx||0Bxxx）八進制（0oxxx||0Oxxx）
'use strict'
var a=0b11;
var b=0o11
console.log(a);//3
console.log(b);//9
復制代碼(2)Number.isNaN()
isNAN可以用來檢測資料是否是NAN型別，只有NAN才會回傳true，其余型別皆回傳false，
var x=NaN*2
console.log(Number.isNaN(x));//true
console.log(NaN==NaN);//false
console.log(NaN===NaN);//false
復制代碼(3)Number.parseInt(), Number.parseFloat()
這兩個方法在es5中已經存在，es6將其從全域物件中提取放入了Number物件中
（4）Number.isIntger()
var a=3.00
var b=10;
var c=false;
var d=4.00000000000000000000000000000002
console.log(Number.isInteger(a));//true
console.log(Number.isInteger(b));//true
console.log(Number.isInteger(c));//false
console.log(Number.isInteger(d));//true
復制代碼只有整數，以及類似3.0這樣的浮點數才會被認為是整數，回傳true，除此之外，js運算具有不準確性，超出精度范圍的值，會默認為o，所以4.0000000000000000000000002會被看做是4. （5）Math.trunc()
取整函式，會對值進行取整，會對傳入的值先進行Number（）處理，正數將會進行Math.floor(),若為負數則進行Math.ceil();
console.log(Math.trunc(4.1));//4
console.log(Math.trunc(4.9));//4
console.log(Math.trunc(-1.2));//-1
console.log(Math.trunc(-1.9));//-1
console.log(Math.trunc(true));//1
console.log(Math.trunc('lang'));//NaN
復制代碼3.函式擴展
（1）函式指定默認值 可以為函式傳入的引數指定默認值，函式內部可以覆寫使用，
function say(x,y=5){
console.log(x,y); //1,5
y=10;
console.log(x,y); //1,10
}
say(1)
復制代碼需要注意以下兩點
.使用引數默認值時，函式不能有同名引數，
// 不報錯
function foo(x, x, y) {
// ...
}
// 報錯
function foo(x, x, y = 1) {
// ...
}
// SyntaxError: Duplicate parameter name not allowed in this context
復制代碼.不可使用let，const重復宣告
function say(x,y=5){
let y=10;
console.log(x,y); //SyntaxError: Identifier 'y' has already been declared
}
say(1)
復制代碼(2)rest 引數 在函式形參中使用...擴展運算子，可以將不定形參傳入rest陣列中，
function say(...res) {
for (var item of res) {
console.log(item);
}
}
say(1, 2, 3)
//1
//2
//3
復制代碼(3)箭頭函式（重點）
基本使用方法
var f=(x,y)=>{ return x+y}
console.log(f(1,2)); //3
復制代碼假如（x，y）只有一個引數，我們可以省略（），同樣回傳陳述句中，若只有一條陳述句，也可以省略，
var f=x=>x+10
console.log(f(1)); //11
復制代碼使用注意點 箭頭函式有幾個使用注意點，
（1）函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件，
（2）不可以當作建構式，也就是說，不可以使用new命令，否則會拋出一個錯誤，
（3）不可以使用arguments物件，該物件在函式體內不存在，如果要用，可以用 rest 引數代替，
（4）不可以使用yield命令，因此箭頭函式不能用作 Generator 函式，
對于需要注意的第一點，我們經常會因為維護回呼函式的this而煩惱，而在箭頭函式中則不存在這個問題，箭頭函式內部的this是固定的，不會因為函式呼叫而改變，
在ES5，我們通常采用外部保存this的方法，來維護this、
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function foo() {
var that= this;
setTimeout(function () {
console.log('id:', that.id);
}, 100);
}
復制代碼argumet在箭頭函式中不存在，那么使用argument將會使用外部函式的argument
function foo() {
setTimeout(() => {
console.log('args:', arguments);
}, 100);
}
foo(2, 4, 6, 8)
// args: [2, 4, 6, 8]
復制代碼(4)尾呼叫
在函式的最后一步呼叫一個函式，這叫做尾呼叫，解釋很簡單，但卻很容易混淆， .最后一步？什么是最后一步，在函式中，return就是最后一步，沒有return的都不是尾呼叫，
function g(){}
function f(){
g() //這不是尾呼叫
}
f()
復制代碼.即使return后面還有運算式，但這些函式不起作用，那么它依舊是尾呼叫，
function g(){}
function f(){
return g() //這是尾呼叫
console.log('121');
}
f()
復制代碼.回傳的必須是函式，不能是運算式，下面額例子中，回傳了g（）+1; g（）+1;不是一個函式，而是一個運算式，
function g(){}
function f(){
return g()+1 //這不是尾呼叫
}
f()
復制代碼(5)尾遞回
尾遞回是尾呼叫的一種特殊情況，但尾遞回是在最后一步呼叫自身，
我們在使用遞回時，必須給一個終止條件，不然就會產生死回圈
var a=0;
function f(){
a++
return f() //這顯然是一個死回圈
}
f()
復制代碼我們常常使用遞回等方法來求階乘等，但遞回很容易發生堆疊溢位的情況，
非尾遞回的 Fibonacci 數列實作如下，
function Fibonacci (n) {
if ( n <= 1 ) {return 1};
return Fibonacci(n - 1) + Fibonacci(n - 2);
}
Fibonacci(10) // 89
Fibonacci(100) // 堆疊溢位
Fibonacci(500) // 堆疊溢位
復制代碼尾遞回優化過的 Fibonacci 數列實作如下，
function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
if( n <= 1 ) {return ac2};
return Fibonacci2 (n - 1, ac2, ac1 + ac2);
}
Fibonacci2(100) // 573147844013817200000
Fibonacci2(1000) // 7.0330367711422765e+208
Fibonacci2(10000) // Infinity
復制代碼4.陣列擴展
（1）擴展運算子（...）
使用擴展運算子可以 能夠直接深拷貝一個陣列，修改一個陣列內的參考值，不會改變另一個值
var arr=[1,2,3,[4,5],6]
var a=[...arr];
console.log(a);//[1, 2, 3, Array(2), 6]
復制代碼擴展運算子可以用于陣列拼接
var arr=[1,2,3]
var arr2=[4,5,6]
var str='12121'
var a=[1,...arr,2,...arr2];
復制代碼另外...arr回傳的并不是一個陣列，而是各個陣列的值，只有[...arr]才是一個陣列，所以...arr，可以用來對方法進行傳值
var arr=[1,2,3]
function f(x,y,z){
return x+y+z
}
console.log(f(...arr)); //6
復制代碼(2)Array.from()
Array.from()可以將某些偽陣列轉換成真正的陣列結果，什么是偽陣列呢，我們在實際開發中，有兩種常見的偽陣列，arguments和Dom中獲取的元素集合，
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</body>
<script>
var arr = document.getElementsByTagName('p')
var arr2 = Array.from(arr)
console.log(Array.isArray(arr2));//true
復制代碼同樣能夠將偽陣列轉換陣列的還有兩種方法 .之前提到的擴展運算子
var arr = document.getElementsByTagName('p')
var arr2 = [...arr]
console.log(Array.isArray(arr2));//true
復制代碼.使用call，apply方法，
var arr = document.getElementsByTagName('p')
var newarr=Array.prototype.slice.call(arr,0)
var newarr=Array.prototype.slice.apply(arr,[0])
console.log(Array.isArray(newarr));//Var 新陣列 = 舊陣列.slice(起點下標，終點下標）回傳值：陣列，是舊陣列中的一個部分，
console.log(newarr);
復制代碼(3)Array.of()
也是用于將一組值，轉換為陣列， Array.of并不是用于將轉換偽陣列的，它的作用是為了彌補Array構造器的不足，之前我們在想要構建一個長度為一的陣列，且值為number型別是無法用Array構建的
var arr=new Array(3)
console.log(arr);//[empty*3]
復制代碼很顯然，我們想要構建一個[3],可以使用Array.of()
var arr=Array.of(3)
console.log(arr); //[3]
復制代碼（4）find和findIndex 查詢第一個符合條件值/下標
find:用于找出第一個符合條件的陣列元素，找不回傳 undefined ，
findIndex:回傳第一個符合條件的陣列元素的索引，找不到回傳-1;
var arr=[1,2,3,4,5]
var newarr1=arr.find(function(item,index){return item>2})
var newarr2=arr.findIndex(function(item,index){return item>2})
console.log(newarr1); //3
console.log(newarr2); //2
復制代碼基本語法如上：find和findindex內部是一個回呼函式，需要回傳一個查詢條件，find則會執行這個回傳條件，查詢第一個滿足條件的值，findindex則會回傳下標， 我們可以直接用箭頭函式進行簡寫
var arr=[1,2,3,4,5]
var newarr1=arr.find(item=>item>2)
var newarr2=arr.findIndex(item=>item>2)
console.log(newarr1); //3
console.log(newarr2); //2
復制代碼(5)fill 填充初始化陣列
作用：給陣列填充指定值，fill 方法用于空陣列的初始化非常方便，已有資料會被覆寫， fill 方法還可以接受第二個和第三個引數，用于指定填充的起始位置和結束位置
var arr=[1,2,3,4,5]
arr.fill('*',1,3)
console.log(arr);//[1, "*", "*", 4, 5]
復制代碼5.物件擴展
（1）.屬性的簡寫
屬性名是可以簡寫的，但是有前提條件：屬性的值是一個變數 變數名稱和鍵名是一致的，
var name ='lang'
var age=22;
var obj={
name:name,
age:age
}
復制代碼像這樣的物件，我們就可以進行簡寫
var name ='lang'
var age=22;
var obj={
name，
age，
}
復制代碼前提是屬性名和屬性值必須一致，
（2）方法的簡寫
var obj={
say:function(){}
}
復制代碼簡寫為
var obj={
say(){}
}
復制代碼（3）精細化設定物件的屬性
屬性的四個特征:
1.configurable: 是否可以洗掉， 默認為true 可以洗掉：
2.writable: 是否可以修改， 默認為ture, 可以修改：
3.enumerable: 是否可以列舉，可以使用 for in 默認為ture, 可以列舉：
4.value: 值， 默認值為undefined
格式1：Object.defineProperty(物件名，“屬性名”，{上面的四個特征});
var obj={
name:'lang',
age:22
}
Object.defineProperty('obj','name',{
configurable:false,
writable:false,
enumerable:false
})
復制代碼格式2：Object.defineProperties(物件名，{屬性名{四個特征}}，{屬性名{四個特征}}});
var obj = {
name: 'lang',
age: 22
}
Object.defineProperties(obj, {
name: {
configurable: false,
writable: false,
enumerable: false
},
age: {
configurable: false,
writable: false,
enumerable: false
}
})
復制代碼（4）獲取精細化設定物件的屬性
Obect.getOwnProertyDescriptor(物件，屬性名) 可以獲取物件的精細化屬性里面的值，
var obj={
name:'lang',
age:22
}
Object.defineProperty(obj,'name',{
configurable:false,
writable:false,
enumerable:false
})
console.log(Object.getOwnPropertyDescriptor(obj,'name'));
復制代碼
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="918" height="162"></svg>)
(5)Object.keys()
使用Object.getOwnPropertyNames()和Object.keys()都可以得到一個物件的屬性名，屬性名是放在一個陣列中的，
var obj={
name:'lang',
age:22
}
console.log(Object.keys(obj)); //["name", "age"]
復制代碼那么我們目前有三種遍歷物件的方法了 對于物件的遍歷目前有三種方式：
1. for in
2.Object.keys()
3.Object.getOwnPropertyNames()
復制代碼for in : 會輸出自身以及原型鏈上可列舉的屬性，
Object.keys() : 用來獲取物件自身可列舉的屬性鍵
Object.getOwnPropertyNames() : 用來獲取物件自身的全部屬性名
（6）Object.values();
獲取物件的值，放入陣列中，
var obj={
name:'lang',
age:22
}
console.log(Object.values(obj)); //["lang", 22]
復制代碼6.解構賦值
解構賦值語法是一個 Javascript 運算式，這使得可以將值從陣列或屬性從物件提取到不同的變數中，
物件字面量和陣列字面量提供了一種簡單的定義一個特定的資料組的方法，
let x = [1, 2, 3, 4, 5];
復制代碼解構賦值使用了相同的語法，不同的是在運算式左邊定義了要從原變數中取出什么變數，
var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2
復制代碼(1)陣列的解構
變數宣告并賦值時的解構
var foo = ["one", "two", "three"];
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"
Link to section變數先宣告后賦值時的解構
復制代碼通過解構分離變數的宣告，可以為一個變數賦值，
var a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
Link to section默認值
復制代碼為了防止從陣列中取出一個值為undefined的物件，可以為這個物件設定默認值，
var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
Link to section交換變數
復制代碼在一個解構運算式中可以交換兩個變數的值，
沒有解構賦值的情況下，交換兩個變數需要一個臨時變數（或者用低級語言中的XOR-swap技巧），
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
Link to section決議一個從函式回傳的陣列
復制代碼從一個函式回傳一個陣列是十分常見的情況.，解構使得處理回傳值為陣列時更加方便，
在下面例子中，[1, 2] 作為函式的 f() 的輸出值，可以使用解構用一句話完成決議，
function f() {
return [1, 2];
}
var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2
復制代碼(2)物件的解構
基本賦值
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true
復制代碼給新的變數名賦值
可以從一個物件中提取變數并賦值給和物件屬性名不同的新的變數名，
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true
復制代碼默認值
變數可以先賦予默認值，當要提取的物件沒有對應的屬性，變數就被賦予默認值，
var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5
復制代碼混合解構（嵌套物件和陣列） 解構嵌套物件和陣列
var metadata = https://www.cnblogs.com/chengxuyuanaa/p/{
title: "Scratchpad",
translations: [
{
locale: "de",
localization_tags: [ ],
last_edit: "2014-04-14T08:43:37",
url: "/de/docs/Tools/Scratchpad",
title: "JavaScript-Umgebung"
}
],
url: "/en-US/docs/Tools/Scratchpad"
};
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"
復制代碼7.class類
之前在es5中，我們如何去實作一個類的功能呢？我們通常采用構造器的方法去實作，然而，使用構造器去模仿類的實作并不方便，不僅需要經常維護this，而且在繼承的時候更是不僅需要使用call拷貝父類的基本數值，還需要繼承父類的原型來繼承方法，我們簡單來看看代碼就知道了
function Parent(name) {
this.name = name;
}
Parent.prototype.sayName = function () {
console.log('parent name:', this.name);
}
function Child(name, parentName) {
Parent.call(this, parentName);
this.name = name;
}
function inheritPrototype(Parent, Child) {
Child.prototype = Object.create(Parent.prototype); //修改
Child.prototype.constructor = Child;
}
inheritPrototype(Parent, Child);
Child.prototype.sayName = function () {
console.log('child name:', this.name);
}
var parent = new Parent('father');
parent.sayName(); // parent name: father
var child = new Child('son', 'father');
child.sayName(); // child name: son
復制代碼在es6中，我們可以直接使用class來定義,如果你有Java基礎的話，那么理解起來將非常簡單， 基本上，ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓物件原型的寫法更加清晰、更像面向物件編程的語法而已，
//定義類
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
復制代碼我們使用typeof去檢測class的資料型別，會發現class類的本質就是一個方法，也就是構造器，我們不僅僅可以使用new方法來新建一個類，我們也可以使用prototype來訪問類的原型，
（1）constructor
可以看到里面有一個constructor方法，這就是構造方法，而this關鍵字則代表實體物件，這里面通常保存著類基本資料型別
（2）定義類方法
我們可以直接在類中添加自己的方法，前面不需要加上function這個關鍵字，另外，為了使類更加的符合大眾的寫法，去掉了逗號分隔，我們不需要在方法之間使用逗號進行分隔，
（3）類的繼承
es6還給類提供了一個extends的繼承方法，使用方法與java如出一轍，
class NBAPlayer2 {
constructor(name, height) {
this.name = name;
this.height = height;
}
say() {
console.log(`name is${this.name} height is${this.height}`);
}
}
class MVP2 extends NBAPlayer {
constructor(name, height, year) {
super(name, height)
this.year = year
}
say() {
console.log(`name is${this.name} height is${this.height} mvpyear is${this.year}`);
}
}
var n1 = new MVP2('老庫里', '201', '2016')
var m1 = new NBAPlayer2('老庫里', '201')
n1.say()
m1.say()
復制代碼注意：使用 extends 關鍵字來實作繼承在子類中的構造器 constructor 中，必須要顯式呼叫父類的 super 方法，如果不呼叫，則 this 不可用
我們如果使用原型去查看父子類，就會發現，他們其實是通過原型鏈來進行繼承的，
結尾
ES6的新特性還有很多，本次只概述了一些較為常用的方法，適合初識es6的人對es6進行一個大概的了解，
關于es6的更多特性，將會在后續進行補充，具體重要內容還有以下
1.Promise 物件
2.Generator
3.async 函式
4.Module 語法
接下來我還會在我的裙里用視頻講解的方式給大家拓展下圖中的內容：有興趣的可以來我的扣扣裙 519293536 免費交流學習，我都會盡力幫大家哦，
本文的文字及圖片來源于網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,著作權歸原作者所有,如有問題請及時聯系我們以作處理
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/63850.html
標籤：JavaScript
下一篇：Vue結合路由配置遞回實作選單欄