1. let和const

① let

let聲明的變量隻在let所在代碼塊内有效

let隻能聲明變量一次，var可以重複聲明

在for循環中，let聲明的變量隻在目前輪循環有效，循環時如果使用let定義的變量，則每次循環時都相當于使用了不同的變量：

例：

'use strict'

for(var i = 0; i < 10; i++)
{
	setTimeout(
		function()
		{
			console.log('i = ' + i);
		}
		)
}

for(let j = 0; j < 10; j++)
{
	setTimeout(
		function()
		{
			console.log('j = ' + j);
		}
		)
}
//第一段程式輸出10個10，第二段程式輸出1,2,3,4,5,6,7,8,9；
//這是因為i為全局變量，每次循環使用的都是這同一個全局變量，而j是局部變量，隻在目前此次循環有用，每次循環相當于新的變量。
//setTimeout函數每次執行相當于在主線程後添加事件，目前線程内執行完畢後，依次執行添加的事件。

② const

const聲明隻讀變量，聲明後變量值不允許再改變，是以必須在聲明時進行初始化。

**注：**let和const在使用時會綁定代碼塊，即從聲明這些變量的代碼塊的開始到結束形成一個封閉區，在這個作用域内，如果在聲明這些變量之前使用這些變量，就會報錯。

例：

var PI = "a";
if(true){
console.log(PI);  // ReferenceError: PI is not defined
const PI = "3.1415926";
}

2.解構

① 數組模型的解構

let [a,b,c] = [1,2,3];//a=1;b=2;c=3

//可忽略
let [a, ,b] = [1,2,3];//a=1;b=3

//不完全解構
let [a=1,b] = [];//a=1;b=undefined

//剩餘運算符
let [a, ...b] = [1,2,3];//a=1;b=[2,3]

② 對象模型的解構

let {foo,bar} = {foo:'aaa', bar:'bbb'};//foo='aaa';bar='bbb'
let {baz:foo} = {baz:'ddd'};//foo='ddd'

3.原始資料類型Symbol

每個Symbol值都是獨一無二的：

let sy = Symbol('kk');
consloe.log(sy);
console.log(typeof(sy));

let sy1 = Symbol('kk');
console.log(sy1);

console.log(sy === sy1);

/*
輸出如下： 
Symbol(kk)
symbol
Symbol(kk)
false
*/

由上可見，即使指派相同，Symbol的傳回值也不同。

可用于對象的屬性名

let sy = Symbol("key1");

// 寫法1
let syObject = {};
syObject[sy] = "kk";
console.log(syObject);    // {Symbol(key1): "kk"}

// 寫法2
let syObject = {
[sy]: "kk"
};
console.log(syObject);    // {Symbol(key1): "kk"}

// 寫法3
let syObject = {};
Object.defineProperty(syObject, sy, {value: "kk"});
console.log(syObject);   // {Symbol(key1): "kk"}

注：不知道為什麼，輸出時顯示為空的大括号

Symbol.for()

首先在全局搜尋已登記的Symbol中是否具有以該字元串為名稱的Symbol值，有，則傳回該值；沒有，則建立并傳回以該字元串為名稱的Symbol值，并登記。

let yellow = Symbol("Yellow");
let yellow1 = Symbol.for("Yellow");
yellow === yellow1;      // false

let yellow2 = Symbol.for("Yellow");
yellow1 === yellow2;     // true

Symbol.keyFor()

Symbol.keyFor() 傳回一個已登記的 Symbol 類型值的 key ，用來檢測該字元串參數作為名稱的 Symbol 值是否已被登記。

let yellow1 = Symbol.for("Yellow");
Symbol.keyFor(yellow1);    // "Yellow"

4.Map對象

Map對象的鍵可以是任意值，object的鍵隻能是字元串或者Symbol。

① Map中的key

//key是字元串
var myMap = new Map();
var keyString = "a string";

myMap.set(keyString, "和鍵'a string'關聯的值");

myMap.get(keyString); //"和鍵'a string'關聯的值"
myMap.get("a string"); //"和鍵'a string'關聯的值"
					   //因為keyString === 'a string'
                       
//key是NaN
var myMap = new Map();
myMap.set(NaN, "not a number");

myMap.get(NaN); // "not a number"

var otherNaN = Number("foo");
myMap.get(otherNaN); // "not a number"  
//var otherNaN = Number("foo");
//myMap.set(otsherNaN, "other number 'foo'");
//myMap.get(otherNaN); // "other number 'foo'"
//myMap.get(Number("foo")); // "other number 'foo'"

雖然NaN和任何值甚至自己都不相等，但它作為Map的鍵來說是沒有差別的

② Map疊代

對Map進行周遊，兩種最進階方式：for…of 和 forEach().

//for...of
let myMap = new Map();
myMap.set(0,"zero");
myMap.set(1,"one");

for(let [key,value] of myMap)
{
	console.log(key + "=" + value);
} // 顯示 0=zero, 1=one

for(let [key,value] of myMap.entries())
{
	console.log(key + " = " + value);
} // 顯示 0=zero, 1=one
//這個entires方法傳回一個新的容器(Iterator)對象，它按插入順序包含了Map對象中每個[key,value]數組

for(let key of myMap.keys())
{
	console.log(key);
} //顯示 0, 1

for(let value of myMap.values())
{
	console.log(value);
} // 顯示 zero, one


//forEach()
let myMap = new Map();
myMap.forEach(function(value,key){
	console.log(key + " = " + value);
}) //顯示 0=zero, 1=one
//注意function後面的參數，前面是value，後面是key

③ Map對象的操作

Map與數組(Array)的轉換

let kvArray = [["key1", "value1"], ["key2", "value2"]];

let myMap = new Map(kvArray);
//将二維鍵值對數組轉化為Map對象

let outArray = Array.from(myMap);
//使用Array.from()函數，将Map對象轉化為一個二維鍵值對數組

Map的克隆

let myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);

let myMap2 = new Map(myMap1);
for(let [key, value] of myMap2)
{
	console.log(key + " = " + value);
} // 列印 key1 = value1, key2 = value2

console.log(myMap1 === myMap2); // 列印 false,Map 對象構造函數生成執行個體，疊代出新的對象

Map的合并

let myMap1 = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
let myMap2 = new Map([[1, 'uno'], [2, 'dos']]);

let myMap3 = new Map([...myMap1, ...myMap2]);

for(let [key,value] of myMap3)
{
	console.log(key + " = " + value);
} // 列印 1 = uno, 2 = dos, 3 = three
//融合時，當有鍵重複時，後面的鍵值覆寫前面的鍵值

5. Set對象

Set對象可存儲不同類型的值，但存儲的值是唯一的，不能重複。

幾種特殊值：

+0和-0是恒等的，不重複
undefined和undefined是恒等的，不重複
NaN和NaN不恒等，但Set中隻能存一個，不重複

let mySet = new Set();

mySet.add(1);

mySet.add(2);

mySet.add(5);

mySet.add(5); // 列印 Set(3) {1, 2, 5}，5不重複

console.log(mySet);

mySet.add(‘some text’);

console.log(mySet);// 列印 Set(4) {1, 2, 5, “some text”}，可存儲不同類型的值

let o = {‘a’:1, ‘b’:2};

mySet.add(o);

mySet.add({‘a’:1, ‘b’:2});

console.log(mySet); // 列印 Set(6) {1, 2, 5, “some text”, {…}, …}, 對象之間即使值相同，引用不同也不恒等

//4: value: {a: 1, b: 2}; 5: value: {a: 1, b: 2}

Set對象與數組的轉換

var mySet = new Set(['value1', 'value2', 'value3']);
//注意初始化時若要同時賦幾個值，是有中括号的，否則會将賦的字元串轉化為單個字元

var outArray = [...mySet]; // 利用[...Set]将Set對象轉化為數組
console.log(outArray); // 列印 (3) [“value1”, “value2”, “value3”]

String轉Set

var mySet = new Set('hello');
// 注：Set 中 toString 方法是不能将 Set 轉換成 String
console.log(mySet); // 列印 ‘h’ ‘e’ ‘l’ ‘o’

Set對象的應用

// 數組去重
var mySet = new Set([1,2,3,4,4,5,5,6]);
var outArray = [...mySet];
console.log(outArray); // 列印 (6) [1, 2, 3, 4, 5, 6]

var a = new Set([1,2,3]);
var b = new Set([4,3,2]);

// 求并集
var union = new Set([...a, ...b]);
console.log(union); // 列印 Set(4) {1, 2, 3, 4}

// 求交集
var intersect = new Set([...a].filter(x => b.has(x)));
console.log(intersect); // 列印 Set(2) {2, 3}

// 求a與b的差集
var difference_a = new Set([...a].filter(x => !b.has(x)));
console.log(difference_a); // 列印 Set(1) {1}

// 求b與a的差集
var difference_b = new Set([...b].filter(x => !a.has(x)));
console.log(difference_b); // 列印 Set(1) {4}

6. Proxy和Reflect

Proxy 可以對目标對象的讀取、函數調用等操作進行攔截，然後進行操作處理。它不直接操作對象，而是像代理模式，通過對象的代理對象進行操作，在進行這些操作時，可以添加一些需要的額外操作。

Reflect 可以用于擷取目标對象的行為，它與 Object 類似，但是更易讀。它的方法與 Proxy 是對應的。

① Proxy

一個Proxy對象由兩部分組成，target和handler。

target即目标對象，handler是一個對象，聲明了代理對象target的指定行為。

一般用法：

let target = {
name : "Tom",
age : 25
}

let handler = {
get: function(target, key){
	console.log('getting ' + key);
	return target[key]; //注意此處不是target.key，而是target[key]
}, //注意此處要加逗号而不是分号
set: function(target, key, value){
console.log('setting ' + key);
target[key] = value;
}
}

let myProxy = new Proxy(target, handler);
console.log(myProxy.name); // 列印 Tom；實際執行 handler.get
myProxy.name = 'John'; // 實際執行 handler.set
console.log(myProxy.name); // 列印 John

//target 可以為空對象
let targetEpt = {};
let proxyEpt = new Proxy(targetEpt, handler);
console.log(proxyEpt.name); // 列印 undefined；調用get方法，此時對象為空，沒有name屬性
proxyEpt.name = 'John'; // 調用set方法，向對象添加了name屬性
console.log(targetEpt.name); // 列印John
// 通過構造函數建立執行個體時，相當于對目标對象進行了淺拷貝，是以目标對象和代理對象會互相影響

// handler 對象也可以為空，相當于不設定攔截操作，直接通路目标對象
let targetEmpty = {};
let proxyEmpty = new Proxy(targetEmpty, {});
console.log(proxyEmpty.name); // 列印 undefined
proxyEmpty.name = 'Jenny'; // 直接對目标對象進行操作
console.log(targetEmpty.name); // 列印Jenny

執行個體方法：

get(target, propKey, receiver)

// 用于target對象上propKey的讀取操作
let exam ={
	name: "Tom",
	age: 24
}
let proxy = new Proxy(exam, {
get(target, propKey, receiver) {
	console.log('Getting ' + propKey);
	return target[propKey];
}
})
console.log(proxy.name); // 列印 Tom

// get方法可以繼承
let obj = Object.create(proxy);
console.log(obj.name); // 列印 Tom

set(target, propKey, value, receiver)

//用于攔截 target 對象上的 propKey 的指派操作。如果目标對象自身的某個屬性，不可寫且不可配置，那麼set方法将不起作用。
let validator = {
	set: function(obj, prop, value) {
    	if (prop === 'age') {
        	if (!Number.isInteger(value)) {
            	throw new TypeError('The age is not an integer');
        	}
        	if (value > 200) {
            	throw new RangeError('The age seems invalid');
        	}
    	}
    	// 對于滿足條件的 age 屬性以及其他屬性，直接儲存
    	obj[prop] = value;
	}
};
let proxy= new Proxy({}, validator)
proxy.age = 100;
proxy.age           // 100
proxy.age = 'oppps' // 報錯 The age is not an integer
proxy.age = 300     // 報錯 The age seems invalid

// 參數 receiver 表示原始操作行為所在對象，一般是 Proxy 執行個體本身
const handler = {
	set: function(obj, prop, value, receiver) {
        obj[prop] = receiver;
	}
};
const proxy = new Proxy({}, handler);
proxy.name= 'Tom';
console.log(proxy); // 列印 Proxy {name: Proxy}
console.log(proxy.name=== proxy); // 列印 true

apply(target, ctx, args)

// 用于攔截函數的調用、call 和 reply 操作。target 表示目标對象，ctx 表示目标對象上下文，args 表示目标對象的參數數組
function sub(a, b){
	return a - b;
}
let handler = {
	apply: function(target, ctx, args){
    	console.log('handle apply');
    	return Reflect.apply(...arguments);
	}
}
let proxy = new Proxy(sub, handler);
console.log(proxy(2, 1));  // 列印 1

has(target, propKey)

//用于攔截 HasProperty 操作，即在判斷 target 對象是否存在 propKey 屬性時，會被這個方法攔截。此方法不判斷一個屬性是對象自身的屬性，還是繼承的屬性
let  handler = {
	has: function(target, propKey){
    	console.log("handle has");
    	return propKey in target;
	}
}
let exam = {name: "Tom"};
let proxy = new Proxy(exam, handler);
console.log('name' in proxy); // 列印 true
//注意：此方法不攔截 for ... in 循環

construct(target, args)

// 用于攔截new指令。傳回值必須為對象
let handler = {
	construct: function(target, args, newTarget){
    	console.log("handle construct");
    	return Reflect.construct(target, args, newTarget);
	} }
function exam(name,age){
    		this.name = name;
			this.age = age;
		}

let proxy = new Proxy(exam,handler)
let stu = new proxy("Tom",25); // 相當于生成下面stu1對象的過程
console.log(stu); // 列印 exam {name: "Tom", age: 25}

let stu1 = new exam('John', 24);
console.log(stu1); // 列印 exam {name: "John", age: 24}

deleteProperty(target, propKey)

用于攔截 delete 操作，如果這個方法抛出錯誤或者傳回 false ，propKey 屬性就無法被 delete 指令删除

defineProperty(target, propKey, propDesc)

// 用于攔截 Object.definePro若目标對象不可擴充，增加目标對象上不存在的屬性會報錯；若屬性不可寫或不可配置，則不能改變這些屬性
let handler = {
	defineProperty: function(target, propKey, propDesc){
    	console.log("handle defineProperty");
  		//target[propKey] = propDesc;
    	return true;
	}
}
let target = {}
let proxy = new Proxy(target, handler)
proxy.name = "Tom"
// handle defineProperty
console.log(target);
// 應該顯示{name: "Tom"}

但不知道為什麼顯示為空：{}

// defineProperty 傳回值為false，添加屬性操作無效
let handler1 = {
	defineProperty: function(target, propKey, propDesc){
    	console.log("handle defineProperty");
  		//target[propKey] = propDesc;
    	return false;
	}
}
let target1 = {}
let proxy1 = new Proxy(target1, handler1)
proxy1.name = "Jerry"
console.log(target1); //顯示為空{}

getOwnPropertyDescriptor(target, propKey)

// 用于攔截 Object.getOwnPropertyD() 傳回值為屬性描述對象或者 undefined 
let handler = {
	getOwnPropertyDescriptor: function(target, propKey){
    	return Object.getOwnPropertyDescriptor(target, propKey);
	}
}
let target = {name: "Tom"};
let proxy = new Proxy(target, handler);
console.log(Object.getOwnPropertyDescriptor(proxy, 'name')); // 列印 {value: "Tom", writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(proxy, 'age')); // 列印 undefined

getPrototypeOf(target)

// 主要用于攔截擷取對象原型的操作。包括以下操作：
- Object.prototype._proto_
- Object.prototype.isPrototypeOf()
- Object.getPrototypeOf()
- Reflect.getPrototypeOf()
- instanceof

// 代碼如下：
let exam = {name : 'Tom' , age : 25};
let exam1 = {};
let proxy = new Proxy({},{
	getPrototypeOf: function(target){
    	return exam;
	}
})

	let proxy1 = new Proxy({},{
	getPrototypeOf: function(target){
    	return exam1;
	}
})

console.log(Object.getPrototypeOf(proxy)); // 列印 {name: "Tom", age: 25}
console.log(Object.getPrototypeOf(proxy1)); // 列印 {}

// 注意，傳回值必須是對象或者 null ，否則報錯。另外，如果目标對象不可擴充（non-extensible），getPrototypeOf 方法必須傳回目标對象的原型對象
let proxy = new Proxy({},{
	getPrototypeOf: function(target){
    	return true;
	}
})
Object.getPrototypeOf(proxy); // 報錯 Uncaught TypeError: 'getPrototypeOf' on proxy: trap returned neither object nor null

isExtensible(target)

// 用于攔截 Object.isExtensible 操作。
// 該方法隻能傳回布爾值，否則傳回值會被自動轉為布爾值。
let proxy = new Proxy({},{
	isExtensible:function(target){
    	return true;
	}
})
console.log(Object.isExtensible(proxy)); // 列印 true

// 注意它的傳回值必須與目标對象的isExtensible屬性保持一緻，否則會抛出錯誤:
let proxy = new Proxy({},{
	isExtensible:function(target){
    	return false;
	}
})
Object.isExtensible(proxy); // 報錯 Uncaught TypeError: 'isExtensible' on proxy: trap result does not reflect extensibility of proxy target (which is 'true') at Function.isExtensible

ownKeys(target)

// 用于攔截對象自身屬性的讀取操作。主要包括以下操作：
- Object.getOwnPropertyNames()
- Object.getOwnPropertySymbols()
- Object.keys()
- or...in

// 方法傳回的數組成員，隻能是字元串或 Symbol 值，否則會報錯。
// 若目标對象中含有不可配置的屬性，則必須将這些屬性在結果中傳回，否則就會報錯。
// 若目标對象不可擴充，則必須全部傳回且隻能傳回目标對象包含的所有屬性，不能包含不存在的屬性，否則也會報錯。
let proxy = new Proxy( {
name: "Tom",
age: 24
}, {
	ownKeys(target) {
    	return ['name'];
	}
});
console.log(Object.keys(proxy)); // 列印 ["name"]

/* 
傳回結果中，三類屬性會被過濾：
      - 目标對象上沒有的屬性
      - 屬性名為 Symbol 值的屬性
      - 不可周遊的屬性
 */
 let target = {
name: "Tom",
[Symbol.for('age')]: 24,
};
// 添加不可周遊屬性 'gender'
Object.defineProperty(target, 'gender', {
enumerable: false,
configurable: true,
writable: true,
value: 'male'
});
let handler = {
	ownKeys(target) {
    	return ['name', 'parent', Symbol.for('age'), 'gender'];
	}
};
let proxy = new Proxy(target, handler);
console.log(Object.keys(proxy)); // 列印 ["name"]; 隻有name屬性被傳回，其他被過濾了

preventExtensions(target)

// 攔截 Object.preventExtensions 操作。
// 該方法必須傳回一個布爾值，否則會自動轉為布爾值。

// 隻有目标對象不可擴充時（即 Object.isExtensible(proxy) 為 false ），proxy.preventExtensions 才能傳回 true ，否則會報錯

var proxy = new Proxy({}, {
preventExtensions: function(target) {
	return true;
}
});
// 由于 proxy.preventExtensions 傳回 true，此處也會傳回 true，是以會報錯
console.log(Object.preventExtensions(proxy)); // 報錯 Uncaught TypeError: 'preventExtensions' on proxy: trap returned truish but the proxy target is extensible at Function.preventExtensions

應該是由于target可擴充，即Object.isExtensible(proxy) 為true，是以沖突才報錯吧，不太了解

// 修改如下：
 var proxy = new Proxy({}, {
preventExtensions: function(target) {
    // 傳回前先調用 Object.preventExtensions
	console.log(Object.preventExtensions(target)); // 列印{}
	return true;
}
});
console.log(Object.preventExtensions(proxy)); // 列印 Proxy {}

setPrototypeOf

// 主要用來攔截 Object.setPrototypeOf 方法。
// 傳回值必須為布爾值，否則會被自動轉為布爾值。
// 若目标對象不可擴充，setPrototypeOf 方法不得改變目标對象的原型。
let proto = {}
let proxy = new Proxy(function () {}, {
	setPrototypeOf: function(target, proto) {
    	console.log("setPrototypeOf");
    	return true;
	}
});
Object.setPrototypeOf(proxy, proto);
// 結果中列印 setPrototypeOf

Proxy.revocable()

// 用于傳回一個可取消的 Proxy 執行個體
let {proxy, revoke} = Proxy.revocable({}, {});
proxy.name = "Tom";
revoke();
proxy.name; // 報錯 TypeError: Cannot perform 'get' on a proxy that has been revoked

② Reflect

ES6 中将 Object 的一些明顯屬于語言内部的方法移植到了 Reflect 對象上（目前某些方法會同時存在于 Object 和 Reflect 對象上），未來的新方法會隻部署在 Reflect 對象上。

Reflect 對象對某些方法的傳回結果進行了修改，使其更合理。

Reflect 對象使用函數的方式實作了 Object 的指令式操作。

靜态方法

Reflect.get(target, name, receiver)

// 查找并傳回 target 對象的 name 屬性
let exam = {
	name: "Tom",
	age: 24,
	get info(){
    	return this.name + this.age;
	}
}
console.log(Reflect.get(exam, 'name')); // 列印 Tom
console.log(Reflect.get(exam, 'age'));  // 列印 24

// 當 target 對象中存在 name 屬性的 getter 方法， getter 方法的 this 會綁定 receiver
let receiver = {
	name: "Jerry",
	age: 20
}
console.log(Reflect.get(exam, 'info', receiver)); // 列印 Jerry20； 
//列印的結果為receiver對象中的内容而不是exam對象中的内容，這是因為getter方法的this綁定了receiver

// 當 name 為不存在于 target 對象的屬性時，傳回 undefined
console.log(Reflect.get(exam, 'birth')); // 列印 undefined

// 當 target 不是對象時，會報錯
Reflect.get(1, 'name'); // 報錯 Uncaught TypeError: Reflect.get called on non-object

Reflect.set(target, name, value, receiver)

// 将 target 的 name 屬性設定為 value。傳回值為 boolean ，true 表示修改成功，false 表示失敗。當 target 為不存在的對象時，會報錯
let exam = {
	name: "Tom",
	age: 24,
	set info(value){
    	return this.age = value;
	}
}
console.log(exam.age); // 列印 24
console.log(Reflect.set(exam, 'age', 25)); // 列印 true
console.log(exam.age); // 列印 25
console.log(Reflect.set(exam, 'color', 'blue')); // 列印 true
console.log(exam.color); // 列印 blue

// value 為空時會将 name 屬性清除
console.log(Reflect.set(exam, 'age', )); // 列印 true
console.log(exam.age); // 列印 undefined

// 當 target 對象中存在 name 屬性 setter 方法時，setter 方法中的 this 會綁定 // receiver , 是以修改的實際上是 receiver 的屬性,
let receiver = {
	age: 18
}
console.log(Reflect.set(exam, 'info', 1, receiver)); // 列印 true
console.log(receiver.age); // 列印 1
console.log(exam.age); // 列印 undefined；因為實際上修改的是receiver的屬性，是以exam屬性不變

let receiver1 = {
	name: 'oppps'
}
console.log(Reflect.set(exam, 'info', 1, receiver1)); // 列印 true
console.log(receiver1.age); // 列印 1；以為setter方法隻設定age屬性

Reflect.has(obj, name)

// 是 name in obj 指令的函數化，用于查找 name 屬性在 obj 對象中是否存在。傳回值為 boolean。如果 obj 不是對象則會報錯 TypeError
let exam = {
	name: "Tom",
	age: 24
}
console.log(Reflect.has(exam, 'name')); // 列印 true
console.log(Reflect.has(exam, 'color')); // 列印 false

Reflect.deleteProperty(obj, property)

// 是 delete obj[property] 的函數化，用于删除 obj 對象的 property 屬性，傳回值為 boolean。如果 obj 不是對象則會報錯 TypeError	
let exam = {
	name: "Tom",
	age: 24
}
Reflect.deleteProperty(exam , 'name'); // true
console.log(exam); // 列印 {age: 24}

// property 不存在時，也會傳回 true
Reflect.deleteProperty(exam , 'name'); // true

Reflect.construct(obj, args)

// 等同于 new target(...args)
function exam(name){
	this.name = name;
}
Reflect.construct(exam, ['Tom']); // exam {name: "Tom"}

Reflect.getPrototypeOf(obj)

// 用于讀取 obj 的 _proto_ 屬性。在 obj 不是對象時不會像 Object 一樣把 obj 轉為對象，而是會報錯
class Exam{}
let obj = new Exam()
console.log(Reflect.getPrototypeOf(obj) === Exam.prototype); // 列印 true

Reflect.setPrototypeOf(obj, newProto)

// 用于設定目标對象的 prototype
let obj ={}
Reflect.setPrototypeOf(obj, Array.prototype); // true;将obj對象prototype設定為Array

Reflect.apply(func, thisArg, args)

// 等同于 Function.prototype.apply.call(func, thisArg, args) 。func 表示目标函數；thisArg 表示目标函數綁定的 this 對象；args 表示目标函數調用時傳入的參數清單，可以是數組或類似數組的對象。若目标函數無法調用，會抛出 TypeError
Reflect.apply(Math.max, Math, [1, 3, 5, 3, 1]); // 5

Reflect.defineProperty(target, propertyKey, attributes)

// 用于為目标對象定義屬性。如果 target 不是對象，會抛出錯誤
let myDate= {}
Reflect.defineProperty(MyDate, 'now', {
value: () => Date.now()
}); // true

Reflect.getOwnPropertyDescriptor(target, propertyKey)

// 用于得到 target 對象的 propertyKey 屬性的描述對象。在 target 不是對象時，會抛出錯誤表示參數非法，不會将非對象轉換為對象
var exam = {}
Reflect.defineProperty(exam, 'name', {
value: true,
enumerable: false,
})
console.log(Reflect.getOwnPropertyDescriptor(exam, 'name'));
// 列印 {value: true, writable: false, enumerable: false, configurable: false}


// propertyKey 屬性在 target 對象中不存在時，傳回 undefined
console.log(Reflect.getOwnPropertyDescriptor(exam, 'age')) // 列印 undefined

Reflect.isExtensible(target)

// 用于判斷 target 對象是否可擴充。傳回值為 boolean 。如果 target 參數不是對象，會抛出錯誤
let exam = {};
Reflect.isExtensible(exam); // true

Reflect.preventExtensions(target)

// 用于讓 target 對象變為不可擴充。如果 target 參數不是對象，會抛出錯誤
let exam = {};
Reflect.preventExtensions(exam);
console.log(Reflect.isExtensible(exam)); // 列印false

Reflect.ownKeys(target)

// 用于傳回 target 對象的所有屬性，等同于 Object.getOwnPropertyNames 與Object.getOwnPropertySymbols 之和
var exam = {
name: 1,
[Symbol.for('age')]: 4
}
console.log(Reflect.ownKeys(exam)); // 列印 (2) ["name", Symbol(age)]

組合使用

Reflect 對象的方法與 Proxy 對象的方法是一一對應的。是以 Proxy 對象的方法可以通過調用 Reflect 對象的方法擷取預設行為，然後進行額外操作。

let exam = {
	name: "Tom",
	age: 24
}
let handler = {
	get: function(target, key){
    	console.log("getting "+key);
    	return Reflect.get(target,key);
	}, //注意此處為逗号，而不是分号
	set: function(target, key, value){
    	console.log("setting "+key+" to "+value)
    	Reflect.set(target, key, value);
	}
}
let proxy = new Proxy(exam, handler);
console.log(proxy.name); // 列印 Tom
proxy.name = "Jerry"; // setting name to Jerry
console.log(proxy.name); // 列印 Jerry

7. ES6字元串

字串的識别

ES6 之前判斷字元串是否包含子串，用 indexOf 方法，ES6 新增了子串的識别方法：

includes()：傳回布爾值，判斷是否找到參數字元串。
startsWith()：傳回布爾值，判斷參數字元串是否在原字元串的頭部。
endsWith()：傳回布爾值，判斷參數字元串是否在原字元串的尾部。

以上三個方法都可以接受兩個參數，需要搜尋的字元串，和可選的搜尋起始位置索引:

let string = "apple,banana,orange";
console.log(string.includes('banana')); // 列印 true
console.log(string.startsWith('apple')); // 列印 true
console.log(string.endsWith('apple')); // 列印 false
console.log(string.startsWith('banana', 6)); // 列印 true

注意：

這三個方法隻傳回布爾值，如果需要知道子串的位置，還是得用 indexOf 和 lastIndexOf 。
這三個方法如果傳入了正規表達式而不是字元串，會抛出錯誤。而 indexOf 和 lastIndexOf 這兩個方法，它們會将正規表達式轉換為字元串并搜尋它。

字元串重複

// repeat()：傳回新的字元串，表示将字元串重複指定次數傳回。	
console.log('Hello LSS '.repeat(2)); // 列印 Hello LSS Hello LSS 

// 如果參數是小數，向下取整
console.log('Hello LSS '.repeat(3.2)); // 列印 Hello LSS Hello LSS Hello LSS 

//如果參數是 0 至 -1 之間的小數，會進行取整運算，0 至 -1 之間的小數取整得到 -0 ，等同于 repeat 零次
console.log('Hello LSS '.repeat(-0.5)); // 列印 ""

// 如果參數是 NaN，等同于 repeat 零次
console.log('Hello LSS '.repeat(NaN)); // 列印 ""

// 如果參數是負數或者 Infinity ，會報錯:
console.log('Hello LSS '.repeat(-1));
console.log('Hello LSS '.repeat(Infinity)); 
// 報錯 Uncaught RangeError: Invalid count value at String.repeat

// 如果傳入的參數是字元串，則會先将字元串轉化為數字
console.log('Hello LSS '.repeat('hh')); // 列印 ""
console.log('Hello LSS '.repeat('2')); // 列印 Hello LSS Hello LSS

字元串補全

以下兩種方法：

padStart：傳回新的字元串，表示用參數字元串從頭部補全原字元串。
padEnd：傳回新的字元串，表示用參數字元串從頭部補全原字元串。

//以上兩個方法接受兩個參數，第一個參數是指定生成的字元串的最小長度，第二個參數是用來補全的字元串。如果沒有指定第二個參數，預設用空格填充。

console.log(“h”.padStart(5,“o”)); // “ooooh”

console.log(“h”.padEnd(5,“o”)); // “hoooo”

console.log(“h”.padStart(5)); // " h"

// 如果指定的長度小于或者等于原字元串的長度，則傳回原字元串:

console.log(“hello”.padStart(5,“A”)); // “hello”

console.log(“hello”.padStart(4,“A”)); // “hello”

// 如果原字元串加上補全字元串長度大于指定長度，則截去超出位數的補全字元串:

console.log(“hello”.padEnd(10,",world!")); // “hello,worl”

// 常用于補全位數：

console.log(“123”.padStart(10,“0”)); // “0000000123”

模闆字元串

模闆字元串相當于加強版的字元串，用反引号 ` ,除了作為普通字元串，還可以用來定義多行字元串，還可以在字元串中加入變量和表達式。

基本用法：

// 普通字元串
let string = `Hello, \n LSS`;
console.log(string); 
// 列印 Hello,
//       LSS
                     
// 多行字元串:
console.log(`Hello
Lss`);
// 列印 Hello
//      LSS

// 字元串插入變量和表達式
//變量名寫在 ${} 中，${} 中可以放入 JavaScript 表達式
let name = "CKX";
let L_name = "LSS";
let str = `Hello, my name is ${name} and I like ${L_name}`;
console.log(str);
// 列印 Hello, my name is CKX and I like LSS

// 字元串中調用函數
function f(){return 'I like LSS';}

let str1 = `Hello, my name is CKX and ${f()}`;
console.log(str1);
// 列印 Hello, my name is CKX and I like LSS

注意要點:

模闆字元串中的換行和空格都是會被保留的

innerHtml = `<ul>
<li>menu</li>
<li>mine</li>
</ul>
`;
console.log(innerHtml);
// 列印 
<ul>
<li>menu</li>
<li>mine</li>
</ul>

标簽模闆

标簽模闆，是一個函數的調用，其中調用的參數是模闆字元串。

alert`Hello world!`;
// 等價于
alert('Hello world!');

當模闆字元串中帶有變量，會将模闆字元串參數處理成多個參數。

function f(stringArr,...values){
let result = "";
for(let i=0;i<stringArr.length;i++){
result += stringArr[i];
if(values[i]){
result += values[i];
    	}
	}
return result;
}
let name = 'Mike';
let age = 27;
console.log(f`My Name is ${name},I am ${age+1} years old next year.`);
// 列印 My Name is Mike,I am 28 years old next year.

/*
f`My Name is ${name},I am ${age+1} years old next year.`;
等價于
f(['My Name is',',I am ',' years old next year.'],'Mike',28);
*/

8. ES6 數值

數值的表示

二進制表示法新寫法: 字首 0b 或 0B

console.log(0b11 === 3); // true
console.log(0B11 === 3); // true

八進制表示法新寫法: 字首 0o 或 0O

console.log(0o11 === 9); // true
console.log(0O11 === 9); // true

常量

**Number.EPSILON**

// Number.EPSILON 屬性表示 1 與大于 1 的最小浮點數之間的差
// 它的值接近于 2.2204460492503130808472633361816E-16，或者 2-52

//測試數值是否在誤差範圍内:
0.1 + 0.2 === 0.3; // false
// 在誤差範圍内即視為相等
equal = (Math.abs(0.1 - 0.3 + 0.2) < Number.EPSILON); // true

// 屬性特性
writable：false
enumerable：false
configurable：false

最大/最小安全整數

安全整數表示在 JavaScript 中能夠精确表示的整數，安全整數的範圍在 2 的 -53 次方到 2 的 53 次方之間（不包括兩個端點），超過這個範圍的整數無法精确表示。

// 最大安全整數,安全整數範圍的上限，即 2 的 53 次方減 1 
Number.MAX_SAFE_INTEGER + 1 === 	Number.MAX_SAFE_INTEGER + 2; // true
Number.MAX_SAFE_INTEGER === Number.MAX_SAFE_INTEGER + 1;     // false
Number.MAX_SAFE_INTEGER - 1 === Number.MAX_SAFE_INTEGER - 2; // false

// 最小安全整數,安全整數範圍的下限，即 2 的 -53 次方減 1 
Number.MIN_SAFE_INTEGER + 1 === Number.MIN_SAFE_INTEGER + 2; // false
Number.MIN_SAFE_INTEGER === Number.MIN_SAFE_INTEGER - 1;     // false
Number.MIN_SAFE_INTEGER - 1 === Number.MIN_SAFE_INTEGER - 2; //false

// 屬性特性
writable：false
enumerable：false
configurable：false

方法

Number.isFinite()

//用于檢查一個數是否為有限的(finite)， 即不是Infinity
console.log( Number.isFinite(1));   // true
console.log( Number.isFinite(0.1)); // true

// NaN 不是有限的
console.log( Number.isFinite(NaN)); // false

console.log( Number.isFinite(Infinity));  // false
console.log( Number.isFinite(-Infinity)); // false

// Number.isFinate 沒有隐式的 Number() 類型轉換，所有非數值都傳回 false
console.log( Number.isFinite('foo')); // false
console.log( Number.isFinite('15'));  // false
console.log( Number.isFinite(true));  // false

Number.isNaN()

//用于檢查一個值是否為 NaN 。
console.log(Number.isNaN(NaN));      // true
console.log(Number.isNaN('true'/0)); // true

// 在全局的 isNaN() 中，以下皆傳回 true，因為在判斷前會将非數值向數值轉換
// 而 Number.isNaN() 不存在隐式的 Number() 類型轉換，非 NaN 全部傳回 false
console.log(Number.isNaN("NaN"));      // false
console.log(Number.isNaN(undefined));  // false
console.log(Number.isNaN({}));         // false
console.log(Number.isNaN("true"));     // false

Number.parseInt()

// 用于将給定字元串轉化為指定進制的整數
// 不指定進制時預設為 10 進制
Number.parseInt('12.34'); // 12
Number.parseInt(12.34);   // 12

 指定進制
Number.parseInt('0011',2); // 3

// 與全局的 parseInt() 函數是同一個函數
Number.parseInt === parseInt; // true

**Number.parseFloat

// 用于把一個字元串解析成浮點數
Number.parseFloat('123.45')    // 123.45
Number.parseFloat('123.45abc') // 123.45

// 無法被解析成浮點數，則傳回 NaN
Number.parseFloat('abc') // NaN

// 與全局的 parseFloat() 方法是同一個方法
Number.parseFloat === parseFloat // true

Number.isInteger()

// 用于判斷給定的參數是否為整數。
console.log(Number.isInteger(0)); // true

// JavaScript 内部，整數和浮點數采用的是同樣的儲存方法,是以 1 與 1.0 被視為相同的值
console.log(Number.isInteger(1));   // true
console.log(Number.isInteger(1.0)); // true 
console.log(Number.isInteger(1.1));     // false
console.log(Number.isInteger(Math.PI)); // false

// NaN 和正負 Infinity 不是整數
console.log(Number.isInteger(NaN));       // false
console.log(Number.isInteger(Infinity));  // false
console.log(Number.isInteger(-Infinity)); // false

console.log(Number.isInteger("10"));  // false
console.log(Number.isInteger(true));  // false
console.log(Number.isInteger(false)); // false
console.log(Number.isInteger([1]));   // false

// 數值的精度超過 53 個二進制位時，由于第 54 位及後面的位被丢棄，會産生誤判
console.log(Number.isInteger(1.0000000000000001)) // true

// 一個數值的絕對值小于 Number.MIN_VALUE（5E-324），即小于 JavaScript 能夠分辨的最小值，會被自動轉為 0，也會産生誤判
console.log(Number.isInteger(5E-324)); // false
console.log(Number.isInteger(5E-325)); // true

Number.isSafeInteger()

// 用于判斷數值是否在安全範圍内
console.log(Number.isSafeInteger(Number.MIN_SAFE_INTEGER - 1)); // false
console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1)); // false

Math對象的擴充

ES6 在 Math 對象上新增了 17 個數學相關的靜态方法，這些方法隻能在 Math 中調用。

Math.cbrt()

// 用于計算一個數的立方根
console.log(Math.cbrt(1)); // 1
console.log(Math.cbrt(0)); // 0
console.log(Math.cbrt(-1)); // -1
console.log(Math.cbrt(8)); // 2

// 會對非數值進行轉換
Math.cbrt('1'); // 1

// 非數值且無法轉換為數值時傳回 NaN
Math.cbrt('hhh'); // NaN

Math.imul()

// 兩個數以 32 位帶符号整數形式相乘的結果，傳回的也是一個 32 位的帶符号整數
// 大多數情況下，結果與 a * b 相同 
Math.imul(1, 2);   // 2
Math.imul(-2, 2);   // -4

// 用于正确傳回大數乘法結果中的低位數值
Math.imul(0x7fffffff, 0x7fffffff); // 1

Math.hypot()

// 用于計算所有參數平方和的平方根
Math.hypot(3, 4); // 5

// 非數值會先被轉換為數值後進行計算
Math.hypot(1, 2, '3'); // 3.741657386773941
Math.hypot(true);      // 1
Math.hypot(false);     // 0

// 空值會被轉換為 0
Math.hypot();   // 0
Math.hypot([]); // 0
// 注意，當括号内為大括号({})時，無法轉換，傳回NaN

// 參數為 Infinity 或 -Infinity 傳回 Infinity
Math.hypot(Infinity); // Infinity
Math.hypot(-Infinity); // Infinity

// 參數中存在無法轉換為數值的參數時傳回 NaN
Math.hypot(NaN);         // NaN
Math.hypot(3, 4, 'foo'); // NaN
Math.hypot({});          // NaN ， 無法轉換

Math.clz32()

// 用于傳回數字的32位無符号整數形式的前導 0 的個數
Math.clz32(0); // 32
Math.clz32(1); // 31
Math.clz32(0b00100000000100000000000000000000); // 2

// 當參數為小數時，隻考慮整數部分
Math.clz32(0.5); // 32

// 對于空值或非數值，會轉化為數值再進行計算
Math.clz32('1');       // 31
Math.clz32();          // 32
Math.clz32([]);        // 32
Math.clz32({});        // 32
Math.clz32(NaN);       // 32
Math.clz32(Infinity);  // 32
Math.clz32(-Infinity); // 32
Math.clz32(undefined); // 32
Math.clz32('hhh');     // 32

Math.trunc()

// 用于傳回數字的整數部分
Math.trunc(12.3); // 12
Math.trunc(12);   // 12
Math.trunc(-12。5);   // -12

// 整數部分為 0 時也會判斷符号
Math.trunc(-0.5); // -0
Math.trunc(0.5);  // 0

// Math.trunc 會将非數值轉為數值再進行處理
Math.trunc("12.3"); // 12

// 空值或無法轉化為數值時時傳回 NaN
Math.trunc();           // NaN
Math.trunc(NaN);        // NaN
Math.trunc("hhh");      // NaN
Math.trunc("123.2hhh"); // NaN

Math.fround()

// 用于擷取數字的32位單精度浮點數形式    
// 對于 負的 2 的 24 次方至 2 的 24 次方之間的整數（不含兩個端點），傳回結果與參數本身一緻
Math.fround(-(2**24)+1);  // -16777215
Math.fround(2 ** 24 - 1); // 16777215

// 用于将 64 位雙精度浮點數轉為 32 位單精度浮點數
Math.fround(1.234) // 1.125

// 當小數的精度超過 24 個二進制位，會丢失精度
Math.fround(0.3); // 0.30000001192092896

// 參數為 NaN 或 Infinity 時傳回本身
Math.fround(NaN)      // NaN
Math.fround(Infinity) // Infinity

// 參數為其他非數值類型時會将參數進行轉換 
Math.fround('5');  // 5
Math.fround(true); // 1
Math.fround(null); // 0
Math.fround([]);   // 0
Math.fround({});   // NaN

Math.sign()

// 判斷數字的符号(正、負、0)
Math.sign(1);  // 1
Math.sign(-1); // -1
Math.sign(5); // 1
Math.sign(-5); // -1

// 參數為 0 時，不同符号的傳回不同
Math.sign(0);  // 0
Math.sign(-0); // -0

// 判斷前會對非數值進行轉換
Math.sign('1');  // 1
Math.sign('-1'); // -1  

// 參數為非數值（無法轉換為數值）時傳回 NaN
Math.sign(NaN);   // NaN 
Math.sign('hhh'); // NaN

Math.expm1(x)

// 用于計算 e 的 x 次方減 1 的結果(即 Math.exp(x)-1)
Math.expm1(1);  // 1.718281828459045
Math.expm1(0);  // 0
Math.expm1(-1); // -0.6321205588285577

// 會對非數值進行轉換
Math.expm1('0'); //0

// 參數不為數值且無法轉換為數值時傳回 NaN
Math.expm1(NaN); // NaN

Math.log1p(x)

//  用于計算 1+x 的自然對數(即 Math.log(1+x))
Math.log1p(1);  // 0.6931471805599453
Math.log1p(0);  // 0
Math.log1p(-1); // -Infinity

// 參數小于 -1 時傳回 NaN
Math.log1p(-2); // NaN

Math.log10(x)

// 用于計算以 10 為底的 x 的對數
Math.log10(1);   // 0
Math.log10(10);   // 1
Math.log10(0.1);   // -1

// 計算前對非數值進行轉換
Math.log10('1'); // 0

// 參數為0時傳回 -Infinity
Math.log10(0);   // -Infinity

// 參數小于0或參數不為數值（且無法轉換為數值）時傳回 NaN
Math.log10(-1);  // NaN

Math.log2()

// 用于計算以 2 為底的 x 的對數
Math.log2(1);   // 0

// 計算前對非數值進行轉換
Math.log2('1'); // 0

// 參數為0時傳回 -Infinity
Math.log2(0);   // -Infinity

// 參數小于0或參數不為數值（且無法轉換為數值）時傳回 NaN
Math.log2(-1);  // NaN

雙曲線函數方法

Math.sinh(x); // 用于計算雙曲正弦。
Math.cosh(x); // 用于計算雙曲餘弦。
Math.tanh(x); // 用于計算雙曲正切。
Math.asinh(x); // 用于計算反雙曲正弦。
Math.acosh(x); // 用于計算反雙曲餘弦。
Math.atanh(x); // 用于計算反雙曲正切。

指數運算符

// a ** b, 即 a 的 b 次幂
1 ** 2; // 1
3 ** 2; // 9

// 右結合，從右至左計算
2 ** 2 ** 3; // 256
3 ** 2 ** 2; // 81

9. ES6 對象

對象字面量

屬性簡寫

// ES6允許對象的屬性直接寫變量，這時候屬性名是變量名，屬性值是變量值
const age = 12;
const name = "Amy";
const person = {age, name};
console.log(person);   //{age: 12, name: "Amy"}

//等同于
const person = {age: age, name: name};
----------------------------------------

// 方法名也可以簡寫
const person = {
	sayHi(){
    	console.log('Hi');
    }
}
person.sayHi(); // 列印 Hi

// 等同于
const person = {
	sayHi:function(){
		console.log("Hi");
	}
}
person.sayHi(); // "Hi"

屬性名表達式

// ES6允許用表達式作為屬性名，但是一定要将表達式放在方括号内
const obj = {
	["he"+"llo"](){
		return "Hi";
	}
}
obj.hello();  //"Hi"

// 注意：屬性的簡潔表示法和屬性名表達式不能同時使用，否則會報錯
const hello = "Hello";
const obj = {
	[hello]
};
obj  // 報錯 SyntaxError: Unexpected token }

// 正确使用：
const hello = "Hello";
const obj = {
	[hello+"2"]:"world"
};
obj  //{Hello2: "world"}

對象的拓展運算符

拓展運算符（…）用于取出參數對象所有可周遊屬性然後拷貝到目前對象。

基本用法

let person = {name: "Amy", age: 15};
let someone = { ...person };
someone;  //{name: "Amy", age: 15}

用于合并兩個對象

let age = {age: 15};
let name = {name: "Amy"};
let person = {...age, ...name};
person;  // {age: 15, name: "Amy"}

注意：

//自定義的屬性和拓展運算符對象裡面屬性的相同的時候：自定義的屬性在拓展運算符後面，則拓展運算符對象内部同名的屬性将被覆寫掉
let person = {name: "Amy", age: 15};
let someone = { ...person, name: "Mike", age: 17};
someone;  //{name: "Mike", age: 17}

// 自定義的屬性在拓展運算度前面，則變成設定新對象預設屬性值
let person = {name: "Amy", age: 15};
let someone = {name: "Mike", age: 17, ...person};
someone;  //{name: "Amy", age: 15}

// 拓展運算符後面是空對象，沒有任何效果也不會報錯
let a = {...{}, a: 1, b: 2};
a;  //{a: 1, b: 2}

// 拓展運算符後面是null或者undefined，沒有效果也不會報錯
let b = {...null, ...undefined, a: 1, b: 2};
b;  //{a: 1, b: 2}

對象的新方法

Object.assign(target, source_1, …)

// 用于将源對象的所有可枚舉屬性複制到目标對象中
let target = {a: 1};
let object2 = {b: 2};
let object3 = {c: 3};
Object.assign(target,object2,object3); // 第一個參數是目标對象，後面的參數是源對象
target;  // {a: 1, b: 2, c: 3}

// 如果目标對象和源對象有同名屬性，或者多個源對象有同名屬性，則後面的屬性會覆寫前面的屬性
let target = {a: 1};
let object2 = {b: 2};
let object3 = {c: 3};
let object4 = {b: 4};
let object5 = {a: 5};
Object.assign(target, object2, object3, object4, object5);
console.log(target); // {a:5, b:4, c:3}

// 如果該函數隻有一個參數，當參數為對象時，直接傳回該對象；當參數不是對象時，會先将參數轉為對象然後傳回
let a = 3;
console.log(typeof(a)); // number
let b = Object.assign(a);
console.log(typeof(b)); // object

// 因為 null 和 undefined 不能轉化為對象，是以會報錯:
Object.assign(null);       // TypeError: Cannot convert undefined or null to object
Object.assign(undefined);  // TypeError: Cannot convert undefined or null to object

// 當參數不止一個時，null 和 undefined 不放第一個，即不為目标對象時，會跳過 null 和 undefined ，不報錯
Object.assign(1,undefined);  // Number {1}
Object.assign({a: 1},null);  // {a: 1}

Object.assign(undefined,{a: 1});  // TypeError: 	Cannot convert undefined or null to object

注意：

// assign 的屬性拷貝是淺拷貝:
let sourceObj = { a: { b: 1}};
let targetObj = {c: 3};
Object.assign(targetObj, sourceObj);
targetObj.a.b = 2;
sourceObj.a.b;  // 2; 對目标對象進行處理影響了源對象

// 同名屬性替換
targetObj = { a: { b: 1, c:2}};
sourceObj = { a: { b: "hh"}};
Object.assign(targetObj, sourceObj);
targetObj;  // {a: {b: "hh"}}

// 數組的處理
Object.assign([2,3], [5]);  // [5,3]
// 這是因為Object.assign()函數會将數組處理成對象，是以先将 [2,3] 轉為 {0:2,1:3} ，将[5] 轉為 {0:5} 然後再進行屬性複制，是以源對象的 0 号屬性覆寫了目标對象的 0 号屬性

Object.is(value1, value2)

// 用來比較兩個值是否嚴格相等，與（===）基本類似
Object.is("q","q");      // true
Object.is(1,1);          // true
Object.is([1],[1]);      // false
Object.is({q:1},{q:1});  // false

// 與（===）的差別:
// 1. +0不等于-0
Object.is(+0,-0);  //false
+0 === -0  //true

// 2. NaN等于本身
Object.is(NaN,NaN); //true
NaN === NaN  //false

10. ES6 數組

數組建立

Array.of()

将參數中所有值作為元素形成數組。

console.log(Array.of(1,2,3,4)); // (4) [1, 2, 3, 4]
// 參數可以為不同的類型
console.log(Array.of(1, 'true', "Tom", {name:"John"})); // (4) [1, "true", "Tom", {…}]

Array.from(arrayLike, mapFn, thisArg)

将類數組對象或可疊代對象轉化為數組，傳回值為轉換後的數組。

// 參數為數組,傳回與原數組一樣的數組
console.log(Array.from([1, 2])); // [1, 2]

// 參數含空位
console.log(Array.from([1, , 3])); // [1, undefined, 3]

參數

arrayLike

// 想要轉換的類數組對象或可疊代對象
console.log(Array.from([1, 2, 3])); // [1, 2, 3]

let set = new Set([1,2,3,3,5,6,6,8,5]); // 去重
let array = Array.from(set); // 轉換為數組
console.log(array); // (6) [1, 2, 3, 5, 6, 8]

mapFn

// 可選，map 函數，用于對每個元素進行處理，放入數組的是處理後的元素
console.log(Array.from([1, 2, 3], (n) => n * 2)); // [2, 4, 6]

function f(n){
	return n * 2;
}
console.log(Array.from([1, 2, 3], (n) => f(n))); // [2, 4, 6]

thisArg

// 可選，用于指定 map 函數執行時的 this 對象
let map = {
	do: function(n) {
    	return n * 2;
	}
}
let arrayLike = [1, 2, 3];
console.log(Array.from(arrayLike, function (n){
	return this.do(n);
}, map)); // [2, 4, 6]

function f(n){
	return n * 2;
}
console.log(Array.from([1, 2, 3], function(n){return this(n)}, f)); // [2, 4, 6]

類數組對象

// 一個類數組對象必須含有 length 屬性，且元素屬性名必須是數值或者可轉換為數值的字元,而元素屬性值可為任意類型
let arr = Array.from({
	0: '1',
	1: '2',
	2: 3,
	length: 3
});
console.log(arr); // ['1', '2', 3]

// 轉換時，從 0 開始， 1， 2， 3, ... 依次向下讀，在 length 長度範圍内讀到數字幾放到第幾位
let array = Array.from({
	0: 1,
	2: 2,
	1: 3,
	length: 3
});
console.log(array); // [1, 3, 2]
// 若讀到的位數不足長度 length 則用 undefined 補齊
let array = Array.from({
	0: 1,
	1: 2,
	3: 3,
	length: 3
});
console.log(array); // [1, 2, undefined]

// 若 length 小于給出長度則隻轉換 length 個元素
let array = Array.from({
	0: 1,
	1: 2,
	2: 3,
	length: 2
});
console.log(array); // [0,1]

// 沒有 length 屬性,則傳回空數組
let array = Array.from({
	0: '1',
	1: '2',
	2: 3,
});
console.log(array); // []

// 元素屬性名不為數值且無法轉換為數值，傳回長度為 length 元素值為 undefined 的數組  
let array1 = Array.from({
	a: 1,
	b: 2,
	length: 2
});
console.log(array1); // [undefined, undefined]

let array2 = Array.from({
	0: 1,
	1: 2,
	a: 3,
	length: 3
});
console.log(array2); // [1, 2, undefined]

轉換可疊代對象

// 轉換 map
let map = new Map();
map.set('key0', 'value0');
map.set('key1', 'value1');
console.log(Array.from(map)); 
// (2) [Array(2), Array(2)]
// 0: (2) ["key0", "value0"]
// 1: (2) ["key1", "value1"]

// 轉換 set
let arr = [1, 2, 3, 2, 4, 4, 5];
let set = new Set(arr);
console.log(Array.from(set)); // (5) [1, 2, 3, 4, 5]

// 轉換字元串
let str = 'abc';
console.log(Array.from(str)); // ["a", "b", "c"]

擴充的方法

查找

find()

// 查找數組中符合條件的元素,若有多個符合條件的元素，則傳回第一個元素
let arr = Array.of(1, 2, 3, 4);
console.log(arr.find(n => n > 2)); // 3

// 數組空位處理為 undefined
console.log([, 1].find(n => true)); // undefined

不太了解這裡的 true 是什麼

findIndex()

// 查找數組中符合條件的元素索引，若有多個符合條件的元素，則傳回第一個元素索引
let arr = Array.of(1, 2, 5, 4);
console.log(arr.findIndex(n => n > 2)); // 2

// 數組空位處理為 undefined
console.log([, 1].findIndex(n => true)); //0

同樣不太了解這裡的 true 是什麼

填充

fill()

// 将一定索引範圍的數組元素内容填充為單個指定的值
let arr = Array.of(1, 2, 3, 4);
// 參數1：用來填充的值
// 參數2：被填充的起始索引
// 參數3(可選)：被填充的結束索引，預設為數組末尾
console.log(arr.fill(0,1,3)); // [1, 0, 0, 4]
console.log(arr.fill(0,1)); // [1, 0, 0, 0]
// 填充的範圍包括開始索引，但不包括結束索引

copyWithin()

// 将一定索引範圍的數組元素修改為此數組另一指定索引範圍的元素
let arr = Array.of(1, 2, 3, 4);
// 參數1：被修改的起始索引,修改長度即為覆寫長度
// 參數2：被用來覆寫的資料的起始索引
// 參數3(可選)：被用來覆寫的資料的結束索引，預設為數組末尾
console.log(arr.copyWithin(2,0,2)); // [1, 2, 1, 2]

// 參數1為負數表示從倒數第參數1位開始
let arr = Array.of(1, 2, 3, 4);
console.log(arr.copyWithin(-3,0,2)); // [1, 1, 2, 4]
// 最後一位為倒數第一位...

// 元素為空，則覆寫時也用空元素覆寫
console.log([1, 2, ,4].copyWithin(0, 2, 4)); // [, 4, , 4]

周遊

entries()

// 周遊鍵值對
// 使用 for... of 循環
for(let [key, value] of ['a', 'b'].entries()){
	console.log(key, value);
}
// 0 "a"
// 1 "b"

// 不适用 for... of 循環
let entries = ['a', 'b'].entries();
console.log(entries.next().value); // [0, "a"]
console.log(entries.next().value); // [1, "b"]

// 數組含空位
console.log([...[,'a'].entries()]); // [[0, undefined], [1, "a"]]

不太了解這裡 … 運算符複制的作用

keys()

// 周遊鍵名
for(let key of ['a', 'b'].keys()){
	console.log(key);
}
// 0
// 1

// 數組含空位
console.log([...[,'a'].keys()]); // [0, 1]

values()

// 周遊鍵值
for(let value of ['a', 'b'].values()){
	console.log(value);
}
// "a"
// "b"

// 數組含空位
console.log([...[,'a'].values()]); // [undefined, "a"]

包含

includes()

// 數組是否包含指定值
// 注意：與 Set 和 Map 的 has 方法區分；Set 的 has 方法用于查找值；Map 的 has 方法用于查找鍵名
// 參數1：包含的指定值
// 參數2：可選，搜尋的起始索引，預設為0
let arr = [1, 2, 3];
console.log(arr.includes(1)); // true
console.log(arr.includes(1, 1)); // false

// NaN的判斷
let arr1 = [1, NaN, 3];
console.log(arr1.includes(NaN)); // true

嵌套數組轉一維數組

flat()

let arr1 = [1, [2, 3]];
console.log(arr1.flat()); // [1, 2, 3]

// 指定轉換的嵌套層數
let arr2 = [1, [2, [3, [4, [5, [6 ,[7, 8]]]]]]];
console.log(arr2.falt(2)); // (4) [1, 2, 3, Array(2)]
console.log(arr2.flat(5)); // (7) [1, 2, 3, 4, 5, 6, Array(2)]

// 不管嵌套多少層
let arr3 = [1, [2, [3, [4, [5, [6 ,[7, 8]]]]]]];
console.log(arr3.flat(Infinity));

// 自動跳過空位
console.log([1, [2, , 3]].flat()); // [1, 2, 3]

flatMap()

// 先對數組中每個元素進行了的處理，再對數組執行 flat() 方法
// 參數1：周遊函數，該周遊函數可接受3個參數：目前元素、目前元素索引、原數組
// 參數2：指定周遊函數中 this 的指向
console.log([1, 2, 3].flatMap(n => [n * 2])); // [2, 4, 6]

不太懂 flatMap() 參數1 可接受的三種參數什麼意思

數組緩沖區

數組緩沖區是記憶體中的一段位址。

定型數組的基礎。

實際位元組數在建立時确定，之後隻可修改其中的資料，不可修改大小。

建立數組緩沖區

// 通過構造函數建立
let buffer = new ArrayBuffer(10);
console.log(buffer.byteLength); // 10

// 分割已有數組緩沖區
let buffer1 = buffer.slice(1,3);
console.log(buffer1.byteLength); // 2

視圖

視圖是用來操作記憶體的接口。

視圖可以操作數組緩沖區或緩沖區位元組的子集,并按照其中一種數值資料類型來讀取和寫入資料。

DataView 類型是一種通用的數組緩沖區視圖,其支援所有8種數值型資料類型。

// 建立，預設 DataView 可操作數組緩沖區全部内容
let buffer = new ArrayBuffer(10);
	dataview = new DataView(buffer);
dataview.setInt8(0,1);
dataview.setInt8(2,3);
console.log(dataview.getInt8(0)); // 1
console.log(dataview.getInt8(2)); // 3

// 通過設定偏移量(參數2)與長度(參數3)指定 DataView 可操作的位元組範圍
let buffer1 = new ArrayBuffer(10);
dataView1 = new DataView(buffer1, 8, 2);
dataView2 = new DataView(buffer1);
// dataView1 的偏移量為 8，即從第 8 位元組開始操作
dataView1.setInt8(0,6); // 設定第 8 位元組
dataView1.setInt8(1,5); // 設定第 9 位元組
console.log(dataView2.getInt8(8)); // 6
console.log(dataView2.getInt8(9)); // 5

定型數組

數組緩沖區的特定類型的視圖。

可以強制使用特定的資料類型，而不是使用通用的 DataView 對象來操作數組緩沖區。

建立

// 通過數組緩沖區生成
let buffer = new ArrayBuffer(10),
	view = new Int8Array(buffer);
console.log(view.byteLength); // 10

// 通過構造函數
let view = new Int32Array(10);
console.log(view.byteLength); // 40
console.log(view.length);     // 10

// 不傳參則預設長度為0
// 在這種情況下數組緩沖區配置設定不到空間，建立的定型數組不能用來儲存資料
let view1 = new Int32Array();
console.log(view1.byteLength); // 0
console.log(view1.length);     // 0

// 可接受參數包括定型數組、可疊代對象、數組、類數組對象
let arr = Array.from({
	0: '1',
	1: '2',
	2: 3,
	length: 3
});
let view2 = new Int16Array([1, 2]),
	view3 = new Int32Array(view2),
	view4 = new Int16Array(new Set([1, 2, 3])),
	view5 = new Int16Array([1, 2, 3]),
	view6 = new Int16Array(arr);
console.log(view2 .buffer === view3.buffer); // false
console.log(view4.byteLength); // 6
console.log(view5.byteLength); // 6
console.log(view6.byteLength); // 6

注意要點

// length 屬性不可寫，如果嘗試修改這個值，在非嚴格模式下會直接忽略該操作，在嚴格模式下會抛出錯誤
let view = new Int16Array([1, 2]);
view.length = 3;
console.log(view.length); // 2

// 定型數組可使用 entries()、keys()、values()進行疊代
let view = new Int16Array([1, 2]);
for(let [k, v] of view.entries()){
	console.log(k, v);
}
// 0 1
// 1 2

// find() 等方法也可用于定型數組，但是定型數組中的方法會額外檢查數值類型是否安全,也會通過 Symbol.species 确認方法的傳回值是定型數組而非普通數組。concat() 方法由于兩個定型數組合并結果不确定，故不能用于定型數組；另外，由于定型數組的尺寸不可更改,可以改變數組的尺寸的方法，例如 splice() ，不适用于定型數組
let view = new Int16Array([1, 2]);
view.find((n) > 1); // 2

// 所有定型數組都含有靜态 of() 方法和 from() 方法,運作效果分别與 Array.of() 方法和 Array.from() 方法相似,差別是定型數組的方法傳回定型數組,而普通數組的方法傳回普通數組
let view = Int16Array.of(1, 2);
console.log(view instanceof Int16Array); // true

// 定型數組不是普通數組，不繼承自 Array 。
let view = new Int16Array([1, 2]);
console.log(Array.isArray(view)); // false

定型數組中增加了 set() 與 subarray() 方法。 set() 方法用于将其他數組複制到已有定型數組, subarray() 用于提取已有定型數組的一部分形成新的定型數組。

// set 方法
// 參數1：一個定型數組或普通數組
// 參數2：可選，偏移量，開始插入資料的位置，預設為0
let view= new Int16Array(4);
view.set([1, 2]);
view.set([3, 4], 2);
console.log(view); // [1, 2, 3, 4]

// subarray 方法
// 參數1：可選，開始位置
// 參數2：可選，結束位置(不包含結束位置)
let view= new Int16Array([1, 2, 3, 4]), 
	subview1 = view.subarray(), 
	subview2 = view.subarray(1), 
	subview3 = view.subarray(1, 3);
console.log(subview1); // [1, 2, 3, 4]
console.log(subview2); // [2, 3, 4]
console.log(subview3); // [2, 3]

擴充運算符

// 複制數組
let arr = [1, 2],
	arr1 = [...arr];
console.log(arr1); // [1, 2]

// 數組含空位
let arr2 = [1, , 3],
	arr3 = [...arr2];
console.log(arr3); [1, undefined, 3]
------------------------------------

// 合并數組
console.log([...[1, 2],...[3, 4]]); // [1, 2, 3, 4]

11. ES6 函數

函數參數的擴充

預設參數

// 基本用法
function fn(name,age=17){
	console.log(name+","+age);
}
fn("Amy",18);  // Amy,18
fn("Amy","");  // Amy,
fn("Amy");     // Amy,17
----------------------------------------------------

// 注意：使用函數預設參數時，不允許有同名參數
// 不報錯
function fn(name,name){
	console.log(name);
}

// 報錯
//SyntaxError: Duplicate parameter name not allowed in this context
function fn(name,name,age=17){
	console.log(name+","+age);
}
----------------------------------------------------

// 隻有在未傳遞參數，或者參數為 undefined 時，才會使用預設參數，null 值被認為是有效的值傳遞
function fn(name,age=17){
	console.log(name+","+age);
}
fn("Amy",null); // Amy,null
----------------------------------------------------

// 函數參數預設值存在暫時性死區，在函數參數預設值表達式中，還未初始化指派的參數值無法作為其他參數的預設值
function f(x,y=x){
	console.log(x,y);
}
f(1);  // 1 1

function f(x=y){
	console.log(x);
}
f();  // ReferenceError: y is not defined

不定參數

// 不定參數用來表示不确定參數個數，形如，...變量名，由...加上一個具名參數辨別符組成。具名參數隻能放在參數組的最後，并且有且隻有一個不定參數
// 基本用法
function f(...values){
	console.log(values.length);
}
f(1,2);      // 2
f(1,2,3,4);  // 4

箭頭函數

箭頭函數提供了一種更加簡潔的函數書寫方式。基本文法是：

參數 => 函數體

// 基本用法
var f = v => v;
//等價于
var f = function(a){
	return a;
}
f(1);  //1

// 當箭頭函數沒有參數或者有多個參數，要用 () 括起來
var f = (a,b) => a+b;
f(6,2);  //8

// 當箭頭函數函數體有多行語句，用 {} 包裹起來，表示代碼塊，當隻有一行語句，并且需要傳回結果時，可以省略 {} , 結果會自動傳回
var f = (a,b) => {
		let result = a+b;
		return result;
	}
f(6,2);  // 8

// 當箭頭函數要傳回對象的時候，為了區分于代碼塊，要用 () 将對象包裹起來
// 報錯
var f = (id,name) => {id: id, name: name};
f(6,2);  // SyntaxError: Unexpected token 
// 不報錯
var f = (id,name) => ({id: id, name: name});
f(6,2);  // {id: 6, name: 2}

注意：沒有 this、super、arguments 和 new.target 綁定

var func = () => {
// 箭頭函數裡面沒有 this 對象，
// 此時的 this 是外層的 this 對象，即 Window 
		console.log(this)
	}
func(55)  // Window 

var func = () => {    
		console.log(arguments)
	}
func(55);  // ReferenceError: arguments is not defined

箭頭函數體中的 this 對象，是定義函數時的對象，而不是使用函數時的對象

function fn(){
	setTimeout(()=>{
	// 定義時，this 綁定的是 fn 中的 this 對象
		console.log(this.a);
		},0)
	}
var a = 20;
// fn 的 this 對象為 {a: 19}
fn.call({a: 18});  // 18
// 不可以作為構造函數，也就是不能使用 new 指令，否則會報錯

這裡的 this 部分不太懂

12. ES6疊代器

Iterator

Iterator 是 ES6 引入的一種新的周遊機制，疊代器有兩個核心概念：

疊代器是一個統一的接口，它的作用是使各種資料結構可被便捷的通路，它是通過一個鍵為Symbol.iterator 的方法來實作。
疊代器是用于周遊資料結構元素的指針（如資料庫中的遊标）。

疊代過程

通過 Symbol.iterator 建立一個疊代器，指向目前資料結構的起始位置
随後通過 next 方法進行向下疊代指向下一個位置， next 方法會傳回目前位置的對象，對象包含了 value 和 done 兩個屬性， value 是目前屬性的值， done 用于判斷是否周遊結束
當 done 為 true 時則周遊結束

示例如下：

const items = ["zero", "one", "two"];
const it = items[Symbol.iterator]();

console.log(it.next());
// {value: "zero", done: false}
console.log(it.next());
// {value: "one", done: false}
console.log(it.next());
// {value: "two", done: false}
console.log(it.next());
// {value: undefined, done: true}
// 上例中，首先建立一個數組，然後通過 Symbol.iterator 方法建立一個疊代器，之後不斷的調用 next 方法對數組内部項進行通路，當屬性 done 為 true 時通路結束

疊代器是協定（使用它們的規則）的一部分，用于疊代。該協定的一個關鍵特性就是它是順序的：疊代器一次傳回一個值。這意味着如果可疊代資料結構是非線性的（例如樹），疊代将會使其線性化。

可疊代的資料結構

以下是可疊代的值：

Array
String
Map
Set
Dom元素（正在進行中）

Array

// 數組 ( Array ) 和類型數組 ( TypedArray ) 他們是可疊代的
for (let item of ["zero", "one", "two"]) {
			console.log(item);
}
// output:
// zero
// one
// two

String

// 字元串是可疊代的，但他們周遊的是 Unicode 碼，每個碼可能包含一個到兩個的 Javascript 字元。
for (const c of 'z\uD83D\uDC0A') {
		console.log(c);
}
// output:
// z
// \uD83D\uDC0A

Map

// Map 主要是疊代它們的 entries ，每個 entry 都會被編碼為 [key, value] 的項， entries 是以确定的形式進行疊代，其順序是與添加的順序相同
const map = new Map();
map.set(0, "zero");
map.set(1, "one");

for (let item of map) {
		console.log(item);
}
// output:
// [0, "zero"]
// [1, "one"]

注意： WeakMaps 不可疊代

Set

// Set 是對其元素進行疊代，疊代的順序與其添加的順序相同
const set = new Set();
set.add("zero");
set.add("one");

for (let item of set) {
	console.log(item);
}
// output:
// zero
// one

注意： WeakSets 不可疊代

arguments

// arguments 目前在 ES6 中使用越來越少，但也是可周遊的
function args() {
	for (let item of arguments) {
		console.log(item);
	}
}
args("zero", "one");
// output:
// zero
// one

普通對象不可疊代

// 普通對象是由 object 建立的，不可疊代：
// TypeError, obj is not iterable
for (let item of {}) { 
	console.log(item);
}

for…of 循環

for…of 是 ES6 新引入的循環，用于替代 for…in 和 forEach() ，并且支援新的疊代協定。它可用于疊代正常的資料類型，如 Array 、 String 、 Map 和 Set 等等。

疊代正常資料類型

Array

const nums = ["zero", "one", "two"];

for (let num of nums) {
	console.log(num); // zero, one ,two
}

// TypedArray
const typedArray1 = new Int8Array(6);
typedArray1[0] = 10;
typedArray1[1] = 11;

for (let item of typedArray1) {
	console.log(item); // 10, 11, (4) 0
}

String

const str = "zero";

for (let item of str) {
	console.log(item); // z, e, r, o
}

Map

let myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
myMap.set(2, "two");

// 周遊 key 和 value
for (let [key, value] of myMap) {
	console.log(key + " = " + value); 
}
// 0 = zero
// 1 = one
// 2 = two

for (let [key, value] of myMap.entries()) {
	console.log(key + " = " + value);
}
// 0 = zero
// 1 = one
// 2 = two

// 隻周遊 key
for (let key of myMap.keys()) {
	console.log(key);
}
// 0
// 1
// 2

// 隻周遊 value
for (let value of myMap.values()) {
	console.log(value);
}
// zero
// one
// two

Set

let mySet = new Set();
mySet.add("zero");
mySet.add("one");
mySet.add("two");

// 周遊整個 set
for (let item of mySet) {
	console.log(item);
}
// zero
// one
// two

// 隻周遊 key 值
for (let key of mySet.keys()) {
	console.log(key);
}
// zero
// one
// two

// 隻周遊 value
for (let value of mySet.values()) {
	console.log(value);
}
// zero
// one
// two

// 周遊 key 和 value ，會發現，兩者會相等
for (let [key, value] of mySet.entries()) {
	console.log(key + " = " + value);
}
// zero = zero
// one = one
// two = two

可疊代的資料結構

of 操作數必須是可疊代，這意味着如果是普通對象則無法進行疊代。如果資料結構類似于數組的形式，則可以借助 Array.from() 方法進行轉換疊代。

const arrayLink = {length: 2, 0: "zero", 1: "one"}

// 報 TypeError 異常
for (let item of arrayLink) {
	console.log(item);
}

// 正常運作
for (let item of Array.from(arrayLink)) {
	console.log(item);
}
// output:
// zero
// one

let 、const 和 var 用于 for…of

// 如果使用 let 和 const ，每次疊代将會建立一個新的存儲空間，這可以保證作用域在疊代的内部
const nums = ["zero", "one", "two"];

for (const num of nums) {
	console.log(num);
}
// 報 ReferenceError
console.log(num);
// 原因是 num 的作用域隻在循環體内部，外部無效
-----------------------------------------------------

// 使用 var 則不會出現上述情況，因為 var 會作用于全局，疊代将不會每次都建立一個新的存儲空間
const nums = ["zero", "one", "two"];

for (var num of nums) {
	console.log(num);
}
// zero
// one
// two

console.log(num); // output: two

13. ES6 class 類

概述

在ES6中，class (類)作為對象的模闆被引入，可以通過 class 關鍵字定義類。

class 的本質是 function。

它可以看作一個文法糖，讓對象原型的寫法更加清晰、更像面向對象程式設計的文法。

基礎用法

類定義

類表達式可以為匿名或命名。

// 匿名類
let Example = class {
	constructor(a) {
    	this.a = a;
	}
}
// 命名類
let Example = class Example {
	constructor(a) {
    	this.a = a;
	}
}

類聲明

class Example {
	constructor(a) {
    	this.a = a;
	}
}

注意要點：不可重複聲明。

class Example{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been declared

let Example1 = class{}
class Example1{}
// Uncaught SyntaxError: Identifier 'Example' has already been declared

注意要點

類定義不會被提升，這意味着，必須在通路前對類進行定義，否則就會報錯。
類中方法不需要 function 關鍵字。
方法間不能加分号。

類的主體

屬性

prototype

ES6 中，prototype 仍舊存在，雖然可以直接自類中定義方法，但是其實方法還是定義在 prototype 上的。覆寫方法 / 初始化時添加方法。

Example.prototype={
	//methods
}

// 添加方法
Object.assign(Example.prototype,{
	//methods
})

靜态屬性

靜态屬性：class 本身的屬性，即直接定義在類内部的屬性（ Class.propname ），不需要執行個體化。 ES6 中規定，Class 内部隻有靜态方法，沒有靜态屬性。

class Example {
// 新提案
	static a = 2;
}
// 目前可行寫法
Example.b = 2;

公共屬性

class Example{}
Example.prototype.a = 2;

執行個體屬性

執行個體屬性：定義在執行個體對象（ this ）上的屬性。

class Example {
	a = 2;
	constructor () {
    	console.log(this.a);
	}
}

name 屬性

傳回跟在 class 後的類名(存在時)。

let Example=class Exam {
	constructor(a) {
    	this.a = a;
	}
}
console.log(Example.name); // Exam

let Example=class {
	constructor(a) {
    	this.a = a;
	}
}
console.log(Example.name); // Example

方法

constructor 方法

constructor 方法是類的預設方法，建立類的執行個體化對象時被調用。

class Example{
	constructor(){
  	console.log('我是constructor');
	}
}
new Example(); // 我是constructor

傳回對象

class Test {
	constructor(){
    	// 預設傳回執行個體對象 this
	}
}
console.log(new Test() instanceof Test); // true

class Example {
	constructor(){
    	// 指定傳回對象
    	return new Test();
	}
}
console.log(new Example() instanceof Example); // false

靜态方法

class Example{
	static sum(a, b) {
    	console.log(a+b);
	}
}
Example.sum(1, 2); // 3

原型方法

class Example {
	sum(a, b) {
    	console.log(a + b);
	}
}
let exam = new Example();
exam.sum(1, 2); // 3

執行個體方法

class Example {
	constructor() {
    	this.sum = (a, b) => {
        	console.log(a + b);
    	}
	}
}

類的執行個體化

new

class 的執行個體化必須通過 new 關鍵字。

class Example {}

let exam1 = Example(); 
// Class constructor Example cannot be invoked without 'new'

執行個體化對象

共享原型對象

class Example {
	constructor(a, b) {
    	this.a = a;
    	this.b = b;
    	console.log('Example');
	}
	sum() {
    	return this.a + this.b;
	}
}
let exam1 = new Example(2, 1);
let exam2 = new Example(3, 1);
console.log(exam1._proto_ == exam2._proto_); // true

exam1._proto_.sub = function() {
	return this.a - this.b;
} // 我了解共享是說，這種定義函數，所有執行個體化對象通用
console.log(exam1.sub()); // 1
console.log(exam2.sub()); // 2

decorator

decorator 是一個函數，用來修改類的行為，在代碼編譯時産生作用。

類修飾

一個參數

第一個參數 target，指向類本身。

function testable(target) {
	target.isTestable = true;
}
// testable
class Example {}
Example.isTestable; // true

多個參數——嵌套實作

function testable(isTestable) {
	return function(target) {
    	target.isTestable=isTestable;
	}
}
// testable(true)
class Example {}
Example.isTestable; // true

執行個體屬性

上面兩個例子添加的是靜态屬性，若要添加執行個體屬性，在類的 prototype 上操作即可。

方法修飾

3個參數：target（類的原型對象）、name（修飾的屬性名）、descriptor（該屬性的描述對象）。

class Example {
	writable
	sum(a, b) {
    	return a + b;
	}
}
function writable(target, name, descriptor) {
	descriptor.writable = false;
	return descriptor; // 必須傳回
}

修飾器執行順序

由外向内進入，由内向外執行。

class Example {
	logMethod(1)
	logMthod(2)
	sum(a, b){
    	return a + b;
	}
}
function logMethod(id) {
	console.log('evaluated logMethod'+id);
	return (target, name, desctiptor) => console.log('excuted         logMethod '+id);
}
// evaluated logMethod 1
// evaluated logMethod 2
// excuted logMethod 2
// excuted logMethod 1

decorator 這裡有點模糊，我了解的是，整個‘修飾’所起的作用就是告訴計算機這個類的一些屬性。描述，向計算機‘描述’這個類。

封裝與繼承

getter / setter

定義

class Example{
	constructor(a, b) {
    	this.a = a; // 執行個體化時調用 set 方法
    	this.b = b;
	}
	get a(){
    	console.log('getter');
    	return this.a;
	}
	set a(a){
    	console.log('setter');
    	this.a = a; // 自身遞歸調用
	}
}
let exam = new Example(1,2); // 不斷輸出 setter ，最終導緻 RangeError
class Example1{
	constructor(a, b) {
    	this.a = a;
    	this.b = b;
	}
	get a(){
    	console.log('getter');
    	return this._a;
	}
	set a(a){
    	console.log('setter');
    	this._a = a;
	}
}
let exam1 = new Example1(1,2); // 隻輸出 setter , 不會調用 getter 方法
console.log(exam._a); // 1, 可以直接通路
console.log(exam.a); // getter, 1； 這裡調用了 getter 函數

getter 不可單獨出現

class Example {
	constructor(a) {
    	this.a = a; 
	}
	get a() {
    	return this.a;
	}
}
let exam = new Example(1); // Uncaught TypeError: Cannot set property // a of #<Example> which has only a getter

–

getter 與 setter 必須同級出現

class Father {
	constructor(){}
	get a() {
    	return this._a;
	}
}
class Child extends Father {
	constructor(){
    	super();
	}
	set a(a) {
    	this._a = a;
	}
}
let test = new Child();
test.a = 2;
console.log(test.a); // undefined

class Father1 {
	constructor(){}
	// 或者都放在子類中
	get a() {
    	console.log('getter');
    	return this._a;
	}
	set a(a) {
    	console.log('setter');
    	this._a = a;
	}
}
class Child1 extends Father1 {
	constructor(){
    	super();
	}
}
let test1 = new Child1();
test1.a = 2;
console.log(test1.a); 
// setter
// getter
// 2
// 先調用 set 指派， 再調用 get 讀值

extends

通過 extends 實作類的繼承。

class Child extends Father { ... }

super

子類 constructor 方法中必須有 super ，且必須出現在 this 之前。

class Father {
	constructor() {}
}
class Child extends Father {
	constructor() {}
	// or 
	// constructor(a) {
    	// this.a = a;
    	// super();
	// }
}
let test = new Child(); 
// Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

調用父類構造函數,隻能出現在子類的構造函數。

class Father {
	test(){
    	return 0;
	}
	static test1(){
    	return 1;
	}
}
class Child extends Father {
	constructor(){
    	super();
	}
}
class Child1 extends Father {
	test2() {
    	super(); // Uncaught SyntaxError: 'super' keyword unexpected here
	}
}

調用父類方法, super 作為對象，在普通方法中，指向父類的原型對象，在靜态方法中，指向父類

class Child2 extends Father {
	constructor(){
    	super();
    	// 調用父類普通方法
    	console.log(super.test()); // 0
	}
	static test3(){
    	// 調用父類靜态方法
    	return super.test1()+2;
	}
}
Child2.test3(); // 3

注意要點

不可繼承正常對象。

var Father = {
	// ...
}
class Child extends Father {
 	// ...
}
// Uncaught TypeError: Class extends value #<Object> is not a constructor or null

// 解決方案
Object.setPrototypeOf(Child.prototype, Father);

14. ES6子產品

概述

ES6 的子產品化分為導出（export）與導入（import）兩個子產品。

特點：

ES6 的子產品自動開啟嚴格模式，不管你有沒有在子產品頭部加上 use strict;。
子產品中可以導入和導出各種類型的變量，如函數，對象，字元串，數字，布爾值，類等。
每個子產品都有自己的上下文，每一個子產品内聲明的變量都是局部變量，不會污染全局作用域。
每一個子產品隻加載一次（是單例的），若再去加載同目錄下同檔案，直接從記憶體中讀取。

export 與 import

基本用法

子產品導入導出各種類型的變量，如字元串，數值，函數，類。

導出的函數聲明與類聲明必須要有名稱（export default 指令另外考慮）。
不僅能導出聲明還能導出引用（例如函數）。
export 指令可以出現在子產品的任何位置，但必需處于子產品頂層。
import 指令會提升到整個子產品的頭部，首先執行。

/-----export [test.js]-----/

let myName = “Tom”;

let myAge = 20;

let myfn = function(){

return “My name is” + myName + “! I’m '” + myAge + “years old.”

}

let myClass = class myClass {

static a = “yeah!”;

}

export { myName, myAge, myfn, myClass }

/-----import [xxx.js]-----/

import { myName, myAge, myfn, myClass } from “./test.js”;

console.log(myfn());// My name is Tom! I’m 20 years old.

console.log(myAge);// 20

console.log(myName);// Tom

console.log(myClass.a );// yeah!

建議使用大括号指定所要輸出的一組變量寫在文檔尾部，明确導出的接口。

函數與類都需要有對應的名稱，導出文檔尾部也避免了無對應名稱。

as 的用法

export 指令導出的接口名稱，須和子產品内部的變量有一一對應關系。

導入的變量名，須和導出的接口名稱相同，即順序可以不一緻。

// 使用 as 重新定義導出的接口名稱，隐藏子產品内部的變量
/*-----export [test.js]-----*/
let myName = "Tom";
export { myName as exportName }

/*-----import [xxx.js]-----*/
import { exportName } from "./test.js";
console.log(exportName);// Tom 

// 不同子產品導出接口名稱命名重複， 使用 as 重新定義變量名。
/*-----export [test1.js]-----*/
let myName = "Tom";
export { myName }
/*-----export [test2.js]-----*/
let myName = "Jerry";
export { myName }
/*-----import [xxx.js]-----*/
import { myName as name1 } from "./test1.js";
import { myName as name2 } from "./test2.js";
console.log(name1);// Tom
console.log(name2);// Jerry

import 指令的特點

隻讀屬性：

不允許在加載子產品的腳本裡面，改寫接口的引用指向，即可以改寫 import 變量類型為對象的屬性值，不能改寫 import 變量類型為基本類型的值。

import {a} from "./xxx.js"
a = {}; // error

import {a} from "./xxx.js"
a.foo = "hello"; // a = { foo : 'hello' }

單例模式：

多次重複執行同一句 import 語句，那麼隻會執行一次，而不會執行多次。import 同一子產品，聲明不同接口引用，會聲明對應變量，但隻執行一次 import 。

import { a } "./xxx.js";
import { a } "./xxx.js";
// 相當于 import { a } "./xxx.js";

import { a } from "./xxx.js";
import { b } from "./xxx.js";
// 相當于 import { a, b } from "./xxx.js";

靜态執行特性：

import 是靜态執行，是以不能使用表達式和變量。

import { "f" + "oo" } from "methods";
// error
let module = "methods";
import { foo } from module;
// error
if (true) {
	import { foo } from "method1";
} else {
	import { foo } from "method2";
}
// error

export default 指令

在一個檔案或子產品中，export、import 可以有多個，export default 僅有一個。
export default 中的 default 是對應的導出接口變量。
通過 export 方式導出，在導入時要加{ }，export default 則不需要。
export default 向外暴露的成員，可以使用任意變量來接收。

var a = “My name is Tom!”;

export default a; // 僅有一個

export default var c = “error”;

// error，default 已經是對應的導出變量，不能跟着變量聲明語句

import b from “./xxx.js”; // 不需要加{}，使用任意變量接收

複合使用

在同一子產品使用 export 和 import ，沒弄明白怎麼回事，無法驗證。我了解這裡的methods是一個子產品，但是具體怎麼操作的不太清楚。

export 與 import 可以在同一子產品使用，使用特點：

可以将導出接口改名，包括 default。
複合使用 export 與 import ，也可以導出全部，目前子產品導出的接口會覆寫繼承導出的。

export { foo, bar } from “methods”;

// 約等于下面兩段語句，不過上面導入導出方式該子產品沒有導入 foo 與 bar

import { foo, bar } from “methods”;

export { foo, bar };

// 普通改名

export { foo as bar } from “methods”;

// 将 foo 轉導成 default

export { foo as default } from “methods”;

// 将 default 轉導成 foo

export { default as foo } from “methods”;

// 我了解是導出全部

export * from “methods”;

15. ES6 Generator 函數

ES6 新引入了 Generator 函數，可以通過 yield 關鍵字，把函數的執行流挂起，為改變執行流程提供了可能，進而為異步程式設計提供解決方案。

Generator 函數組成

Generator 有兩個區分于普通函數的部分：

一是在 function 後面，函數名之前有個 *
二是函數内部有 yield 表達式

其中 * 用來表示函數為 Generator 函數，yield 用來定義函數内部的狀态。

function* func(){

console.log(“one”);

yield ‘1’;

console.log(“two”);

yield ‘2’;

console.log(“three”);

return ‘3’;

}

執行機制

調用 Generator 函數和調用普通函數一樣，在函數名後面加上()即可，但是 Generator 函數不會像普通函數一樣立即執行，而是傳回一個指向内部狀态對象的指針，是以要調用周遊器對象Iterator 的 next 方法，指針就會從函數頭部或者上一次停下來的地方開始執行。

f.next();
// one
// {value: "1", done: false}

f.next();
// two
// {value: "2", done: false}

f.next();
// three
// {value: "3", done: true}

f.next();
// {value: undefined, done: true}

// 第一次調用 next 方法時，從 Generator 函數的頭部開始執行，先是列印了 one ,執行到 yield 就停下來，并将yield 後邊表達式的值 '1'，作為傳回對象的 value 屬性值，此時函數還沒有執行完， 傳回對象的 done 屬性值是 false
// 第二次調用 next 方法時，同上步 
// 第三次調用 next 方法時，先是列印了 three ，然後執行了函數的傳回操作，并将 return 後面的表達式的值，作為傳回對象的 value 屬性值，此時函數已經結束，是以 done 屬性值為true 。如果執行第三步時，沒有 return 語句的話，就直接傳回 {value: undefined, done: true}
// 第四次調用 next 方法時， 此時函數已經執行完了，是以傳回 value 屬性值是 undefined ，done 屬性值是 true 。

函數傳回的周遊器對象的方法

next 方法

一般情況下，next 方法不傳入參數的時候，yield 表達式的傳回值是 undefined 。當 next 傳入參數的時候，該參數會作為上一步yield的傳回值

function* sendParameter(){
	console.log("strat");
	var x = yield '2';
	console.log("one:" + x);
    var y = yield '3';
	console.log("two:" + y);
	console.log("total:" + (x + y));
}

// next不傳參
var sendp1 = sendParameter();
sendp1.next();
// strat
// {value: "2", done: false}
sendp1.next();
// one:undefined
// {value: "3", done: false}
sendp1.next();
// two:undefined
// total:NaN
// {value: undefined, done: true}

// next傳參
var sendp2 = sendParameter();
sendp2.next(10);
// strat
// {value: "2", done: false}
sendp2.next(20);
// one:20
// {value: "3", done: false}
sendp2.next(30);
// two:30
// total:50
// {value: undefined, done: true}

// 除了使用 next ，還可以使用 for... of 循環周遊 Generator 函數生産的 Iterator 對象

return 方法

return 方法傳回給定值，并結束周遊 Generator 函數。

return 方法提供參數時，傳回該參數；不提供參數時，傳回 undefined 。

function* foo(){
	yield 1;
	yield 2;
	yield 3;
}
var f = foo();
f.next();
// {value: 1, done: false}
f.return("foo");
// {value: "foo", done: true}
f.next();
// {value: undefined, done: true}

throw 方法

// throw 方法可以再 Generator 函數體外面抛出異常，再函數體内部捕獲。
var g = function* () {
	try {
		yield;
	} catch (e) {
		console.log('catch inner', e);
	}
};

var i = g();
i.next();

try {
	i.throw('a');
	i.throw('b');
} catch (e) {
	console.log('catch outside', e);
}
// catch inner a
// catch outside b

// 周遊器對象抛出了兩個錯誤，第一個被 Generator 函數内部捕獲，第二個因為函數體内部的catch 函數已經執行過了，不會再捕獲這個錯誤，是以這個錯誤就抛出 Generator 函數體，被函數體外的 catch 捕獲

yield* 表達式

yield* 表達式表示 yield 傳回一個周遊器對象，用于在 Generator 函數内部，調用另一個 Generator 函數。

function* callee() {
	console.log('callee: ' + (yield));
}
function* caller() {
	while (true) {
    	yield* callee();
	}
}
const callerObj = caller();
callerObj.next();
// {value: undefined, done: false}
callerObj.next("a");
// callee: a
// {value: undefined, done: false}
callerObj.next("b");
// callee: b
// {value: undefined, done: false}

// 等同于
function* caller() {
	while (true) {
    	for (var value of callee) {
      		yield value;
    	}
	}
}

使用場景

實作 Iterator

為不具備 Iterator 接口的對象提供周遊方法。

function* objectEntries(obj) {
	const propKeys = Reflect.ownKeys(obj);
    // Reflect.ownKeys() 傳回對象所有的屬性，不管屬性是否可枚舉，包括 Symbol
	for (const propKey of propKeys) {
    	yield [propKey, obj[propKey]];
	}
}

const jane = { first: 'Jane', last: 'Doe' };
for (const [key,value] of objectEntries(jane)) {
	console.log(`${key}: ${value}`);
}
// first: Jane
// last: Doe
// jane 原生是不具備 Iterator 接口無法通過 for... of周遊。這邊用了 Generator 函數加上了 Iterator 接口，是以就可以周遊 jane 對象了。

ES61. let和const2.解構3.原始資料類型Symbol4.Map對象5. Set對象6. Proxy和Reflect7. ES6字元串8. ES6 數值9. ES6 對象10. ES6 數組11. ES6 函數12. ES6疊代器13. ES6 class 類14. ES6子產品15. ES6 Generator 函數

1. let和const

① let

② const

2.解構

① 數組模型的解構

② 對象模型的解構

3.原始資料類型Symbol

可用于對象的屬性名

Symbol.for()

Symbol.keyFor()

4.Map對象

① Map中的key

② Map疊代

③ Map對象的操作

Map與數組(Array)的轉換

Map的克隆

Map的合并

5. Set對象

Set對象與數組的轉換

String轉Set

Set對象的應用

6. Proxy和Reflect

① Proxy

一般用法：

執行個體方法：

應該是由于target可擴充，即Object.isExtensible(proxy) 為true，是以沖突才報錯吧，不太了解

② Reflect

靜态方法

組合使用

7. ES6字元串

字串的識别

字元串重複

字元串補全

模闆字元串

标簽模闆

8. ES6 數值

數值的表示

常量

方法

Math對象的擴充

9. ES6 對象

對象字面量

屬性簡寫

屬性名表達式

對象的拓展運算符

基本用法

用于合并兩個對象

對象的新方法

10. ES6 數組

數組建立

Array.of()

Array.from(arrayLike, mapFn, thisArg)

參數

類數組對象

轉換可疊代對象

擴充的方法

查找

填充

周遊

包含

嵌套數組轉一維數組

數組緩沖區

定型數組

擴充運算符

11. ES6 函數

函數參數的擴充

預設參數

不定參數

箭頭函數

12. ES6疊代器

Iterator

疊代過程

可疊代的資料結構

for…of 循環

疊代正常資料類型

可疊代的資料結構

13. ES6 class 類

概述

基礎用法