es6總結上

ES6總結下

一、let與const 關鍵字

var與let差別：
var

1. 宣告提升
2. 變數覆寫
3. 沒有塊級作用域

let

1. 不存在宣告提前
2. 不會有變數覆寫
3. 有塊級作用域

let的缺點：
暫時性死區：在一個塊級作用域內，如果用let宣告了某個變數，那么該變數就自動系結了該作用域，該作用域就形成了一個封閉的作用域，

const

const 宣告一個只讀的常量，一旦宣告，常量的值就不能改變，一般用于全域變數
通常變數名全部大寫

二、解構賦值

自動決議陣列或物件中的值，比如若一個函式要回傳多個值，常規的做法是回傳一個物件，將每個值做為這個物件的屬性回傳，但在ES6中，利用解構這一特性，可以直接回傳一個陣列，然后陣列中的值會自動被決議到對應接收該值的變數中，

1.變數的解構賦值
2.擴展運算子 …
3.物件的解構賦值

//變數的解構賦值
let [a, b, c] = [1, 2, 3];
// , = 占位符
let arr = ["小董", "小劉", "小王", "小涂"];
let [,,one] = arr; // 這里會取到小王

//擴展運算子 ... 
//將陣列或者類陣列結構拆分為引數序列
// 解構整個陣列,輸出陣列中的每一個，
console.log(...arr);

//物件的解構賦值
let obj = {
   className : "dzq",
   age: 21
}
let {className} = obj; // 得到dzq
let {age} = obj;	// 得到21

//如果出現多層嵌套的物件需要解構
let dataJson = {
title:"abc",
name:"winne",
test:[{
   title:"ggg",
   desc:"物件解構賦值"
}]
}
//我們需要取出需要的兩個title值（注意結構和鍵名）
let {title:oneTitle,test:[{title:twoTitle}]} = dataJson;


//剩余運算子
let {a, b, ...demo} = {a: 1, b: 2, c: 3, d: 4};
// a = 1
// b = 2
// demo = {c: 3, d: 4}

三、模板字串和物件的擴展

模板字串是用反引號 ``
允許換行，除了作為普通字串，還可以用來定義多行字串，可以在字串中加入變數和運算式，變數和運算式要寫在${}里面，

//模板字串
//產生一個亂數
var num=Math.random();
//將這個數字輸出到console
console.log(`your num is ${num}`);

物件的擴展
1.允許在物件之中，直接寫變數
2.如果物件的屬性值是個變數，并且該變數名跟屬性名一樣，那么可以省略為一個
3.物件中的函式屬性，可以省略：function

   // ES6 允許在物件之中，直接寫變數，
    const name = 'wjx';
    const names = {name};//等同于const names1 = {name: name};
    console.log(names);//{name: "wjx"}
    
	//變數名跟屬性名一樣，那么可以省略為一個,比如：
	function f(x, y) {
	  return {x, y}; // 等同于return {x: x, y: y};
	}
	f(1, 2) // {x: 1, y: 2}
	
	//物件中的函式屬性，可以省略：function
	const h = {
	  method() {	// 等同于method: function() {
	    return "Hello!";
	  }
	};

四、引數默認值，不定引數，拓展引數

默認引數值
現在可以在定義函式的時候指定引數的默認值了，而不用像以前那樣通過邏輯或運算子來達到目的了，
需要注意的是：只有在未傳遞引數，或者引數為 undefined 時，才會使用默認引數，null 值被認為是有效的值傳遞，

function sayHello(name){
	//傳統的指定默認引數的方式
	var name=name||'dude';
	console.log('Hello '+name);
}
	//運用ES6的默認引數
function sayHello2(name='dude'){
	console.log(`Hello ${name}`);
}

不定引數
不定引數是在函式中使用命名引數同時接收不定數量的未命名引數，這只是一種語法糖，在以前的JavaScript代碼中我們可以通過arguments變數來達到這一目的，不定引數的格式是三個句點后跟代表所有不定引數的變數名，
比如下面這個例子中，…x代表了所有傳入add函式的引數，

//將所有引數相加的函式
function add(...x){
	return x.reduce((m,n)=>m+n);
}
//傳遞任意個數的引數
console.log(add(1,2,3));//輸出：6
console.log(add(1,2,3,4,5));//輸出：15

拓展引數
拓展引數則是另一種形式的語法糖，它允許傳遞陣列或者類陣列直接做為函式的引數而不用通過apply，

五、箭頭運算子

箭頭函式是一種更加簡潔的函式書寫方式
基本語法：引數 => 函式體 例(let fn=(m)=>{return m})
如果只有一個引數，可以省略小括號，如果想回傳一個值，return連同大括號一起省 略，如果要回傳一個物件的話，物件外面要套括號避免歧義

箭頭函式中的this指向：指向的是函式定義時所在的物件 ，
箭頭函式不允許當作建構式，也就是不能new

//只有一個引數，且只回傳一個值寫法
let fn = v => v;
/*等價于
let fn = function(num){
 return num;
}*/
fn(100);  // 輸出100

//箭頭函式中的this指向
let Person1 = {
    'age': 18,
    sayHello(){
      setTimeout(()=>{
        console.log(this.age);
      });
    }
};
var age = 20;
Person1.sayHello();  // 18

六、Class類

可以通過 class 關鍵字定義類，可以看作一個語法糖，讓物件原型的寫法更加清晰，物件的創建，繼承更加直觀了，并且父類方法的呼叫，實體化，靜態方法和建構式等概念都更加形象化，更加標準的面向物件編程語法，

class的注意點：
1.類的所有方法都定義在類的prototype屬性上面，
2.定義“類”的方法的時候，前面不需要加上function這個關鍵字，直接把函式定義放進去了就可以了
3.方法之間不需要逗號分隔，加了會報錯
4.ES6的class使用方法與ES5的建構式一模一樣
5.類不能重復宣告，類定義不會被提升，必須在訪問前對類進行定義，否則就會報錯

//類的宣告
// 匿名類
let Demo = class {
    constructor(a) {
        this.a = a;
    }
}
// 命名類
let Demo = class Demo {
    constructor(a) {
        this.a = a;
    }
}

//公共屬性（依然可以定義在原型上）
class Demo{}
Demo.prototype.a = 2;

Class的基本語法之constructor
constructor方法是類的默認方法，通過new命令生成物件實體時，自動呼叫該方法，一個類必須有constructor方法，如果沒有顯式定義，一個空的constructor方法會被默認添加，constructor方法默認回傳實體物件（即this），完全可以指定回傳另外一個物件

Class的基本語法之類的呼叫方式
類必須使用new呼叫，否則會報錯，這是它跟普通建構式 ( 普通建構式完全可以當做普通函式使用 ) 的一個主要區別，后者不用new也可以執行，

//實體化物件
class Demo {
    constructor(a, b) {
        this.a = a;
        this.b = b;
        console.log('Demo');
    }
    sum() {
        return this.a + this.b;
    }
}
let demo1 = new Demo(2, 1);
let demo2 = new Demo(3, 1);
// 兩者原型鏈是相等的
console.log(demo1._proto_ == demo2._proto_); // true
 
demo1._proto_.sub = function() {
    return this.a - this.b;
}
console.log(demo1.sub()); // 1
console.log(demo2.sub()); // 2

七、增強的物件字面量

物件字面量被增強了，寫法更加簡潔與靈活，同時在定義物件的時候能夠做的事情更多了，
具體表現在：
1.可以在物件字面量里面定義原型
2.定義方法可以不用function關鍵字
3.直接呼叫父類方法

這樣一來，物件字面量與前面提到的類概念更加吻合，在撰寫面向物件的JavaScript時更加輕松方便了，

//通過物件字面量創建物件
var human = {
    breathe() {
        console.log('breathing...');
    }
};
var worker = {
    __proto__: human, //設定此物件的原型為human,相當于繼承human
    company: 'freelancer',
    work() {
        console.log('working...');
    }
};
human.breathe();//輸出 ‘breathing...’
//呼叫繼承來的breathe方法
worker.breathe();//輸出 ‘breathing...’