比較常用的ES6特性

1、let 和 const

塊作用域

<script type="text/javascript">
	{
		var a = 1;
		console.log(a); // 1
	}
	console.log(a); // 1
	// 可見，通過var定義的變量可以跨塊作用域訪問到。

	(function A() {
		var b = 2;
		console.log(b); // 2
	})();
	// console.log(b); // 報錯，
	// 可見，通過var定義的變量不能跨函數作用域訪問到

	if(true) {
		var c = 3;
	}
	console.log(c); // 3
	for(var i = 0; i < 4; i++) {
		var d = 5;
	};
	console.log(i);	// 4   (循環結束i已經是4，所以此處i爲4)
	console.log(d); // 5
	// if語句和for語句中用var定義的變量可以在外面訪問到，
	// 可見，if語句和for語句屬於塊作用域，不屬於函數作用域。

	{
		var a = 1;
		let b = 2;
		const c = 3;	
		
		{
			console.log(a);		// 1	子作用域可以訪問到父作用域的變量
			console.log(b);		// 2	子作用域可以訪問到父作用域的變量
			console.log(c);		// 3	子作用域可以訪問到父作用域的變量

			var aa = 11;
			let bb = 22;
			const cc = 33;
		}
		
		console.log(aa);	// 11	// 可以跨塊訪問到子 塊作用域 的變量
		// console.log(bb);	// 報錯	bb is not defined
		// console.log(cc);	// 報錯	cc is not defined
	}
</script>

var、let、const的區別

1. var定義的變量，沒有塊的概念，可以跨塊訪問, 不能跨函數訪問。
2. let定義的變量，只能在塊作用域裏訪問，不能跨塊訪問，也不能跨函數訪問。
3. const用來定義常量，使用時必須初始化(即必須賦值)，只能在塊作用域裏訪問，而且不能修改。
4. 同一個變量只能使用一種方式聲明，不然會報錯

<script type="text/javascript">
	// 塊作用域
	{
		var a = 1;
		let b = 2;
		const c = 3;
		// c = 4; // 報錯
		
		// let a = 'a';	// 報錯  注：是上面 var a = 1; 那行報錯
		// var b = 'b';	// 報錯：本行報錯
		// const a = 'a1';	// 報錯  注：是上面 var a = 1; 那行報錯
		// let c = 'c';	// 報錯：本行報錯

		var aa;
		let bb;
		// const cc; // 報錯
		console.log(a); // 1
		console.log(b); // 2
		console.log(c); // 3
		console.log(aa); // undefined
		console.log(bb); // undefined
	}
	console.log(a); // 1
	// console.log(b); // 報錯
	// console.log(c); // 報錯

	// 函數作用域
	(function A() {
		var d = 5;
		let e = 6;
		const f = 7;
		console.log(d); // 5
		console.log(e); // 6  (在同一個{ }中,也屬於同一個塊，可以正常訪問到)
		console.log(f); // 7  (在同一個{ }中,也屬於同一個塊，可以正常訪問到)
	})();
	// console.log(d); // 報錯
	// console.log(e); // 報錯
	// console.log(f); // 報錯
</script>

2、解構賦值

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

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

3、map set

Map 對象

Map 對象保存鍵值對。任何值(對象或者原始值) 都可以作爲一個鍵或一個值。

Maps 和 Objects 的區別

• 一個 Object 的鍵只能是字符串或者 Symbols，但一個 Map 的鍵可以是任意值。
• Map 中的鍵值是有序的（FIFO 原則），而添加到對象中的鍵則不是。
• Map 的鍵值對個數可以從 size 屬性獲取，而 Object 的鍵值對個數只能手動計算。
• Object 都有自己的原型，原型鏈上的鍵名有可能和你自己在對象上的設置的鍵名產生衝突。

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 是對象

var myMap = new Map();
var keyObj = {}, 
 
myMap.set(keyObj, "和鍵 keyObj 關聯的值");

myMap.get(keyObj); // "和鍵 keyObj 關聯的值"
myMap.get({}); // undefined, 因爲 keyObj !== {}

key 是函數

var myMap = new Map();
var keyFunc = function () {}, // 函數
 
myMap.set(keyFunc, "和鍵 keyFunc 關聯的值");
 
myMap.get(keyFunc); // "和鍵 keyFunc 關聯的值"
myMap.get(function() {}) // undefined, 因爲 keyFunc !== function () {}

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"

Map 的迭代

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
 
// 將會顯示兩個 log。 一個是 "0 = zero" 另一個是 "1 = one"
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
/* 這個 entries 方法返回一個新的 Iterator 對象，它按插入順序包含了 Map 對象中每個元素的 [key, value] 數組。 */
 
// 將會顯示兩個log。 一個是 "0" 另一個是 "1"
for (var key of myMap.keys()) {
  console.log(key);
}
/* 這個 keys 方法返回一個新的 Iterator 對象， 它按插入順序包含了 Map 對象中每個元素的鍵。 */
 
// 將會顯示兩個log。 一個是 "zero" 另一個是 "one"
for (var value of myMap.values()) {
  console.log(value);
}
/* 這個 values 方法返回一個新的 Iterator 對象，它按插入順序包含了 Map 對象中每個元素的值。 */

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
 
// 將會顯示兩個 logs。 一個是 "0 = zero" 另一個是 "1 = one"
myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)

set

Set 對象存儲的值總是唯一的，所以需要判斷兩個值是否恆等。有幾個特殊值需要特殊對待：

• +0 與 -0 在存儲判斷唯一性的時候是恆等的，所以不重複；
• undefined 與 undefined 是恆等的，所以不重複；
• NaN 與 NaN 是不恆等的，但是在 Set 中只能存一個，不重複。

let mySet = new Set();
 
mySet.add(1); // Set(1) {1}
mySet.add(5); // Set(2) {1, 5}
mySet.add(5); // Set(2) {1, 5} 這裏體現了值的唯一性
mySet.add("some text"); 
// Set(3) {1, 5, "some text"} 這裏體現了類型的多樣性
var o = {a: 1, b: 2}; 
mySet.add(o);
mySet.add({a: 1, b: 2}); 
// Set(5) {1, 5, "some text", {…}, {…}} 
// 這裏體現了對象之間引用不同不恆等，即使值相同，Set 也能存儲

Set 對象作用

數組去重

var mySet = new Set([1, 2, 3, 4, 4]); [...mySet]; // [1, 2, 3, 4]

並集

var a = new Set([1, 2, 3]); var b = new Set([4, 3, 2]); var union = new Set([…a, …b]); // {1, 2, 3, 4}

交集

var a = new Set([1, 2, 3]); var b = new Set([4, 3, 2]); var intersect = new Set([…a].filter(x => b.has(x))); // {2, 3}

差集

var a = new Set([1, 2, 3]); var b = new Set([4, 3, 2]); var difference = new Set([…a].filter(x => !b.has(x))); // {1}

4、數組遍歷 map for filter

let phone=['小米','三星','蘋果','一加','樂視','OPPO','VIVO','魅族','聯想'];
for(var i=0;i<=phone.length;i++){
    console.log(phone[i])
}

let phone=['小米','三星','蘋果','一加','樂視','OPPO','VIVO','魅族','聯想'];
phone.forEach((item,index,arr)=>{

    console.log(item+"手機真好用!"+arr)

})

let phone=['小米','三星','蘋果','一加','樂視','OPPO','VIVO','魅族','聯想'];
let newphone=phone.map((x)=>{
	return x+'手機'
	console.log(x)
})
console.log(phone,newphone)

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-z8Izls5p-1587957073238)(image-20200423204800287.png)]

var result=[60,58,31,70,55,43,21,18,98,50,42,31,15,76,50,48,63,80,73,61];
let jige=result.filter((x)=>{
    return x>=60;
})
console.log(jige)

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Vz6ZuDts-1587957073250)(image-20200423204838380.png)]

5、函數

• 默認參數

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

• 不定參數

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) => {
 let result = a+b;
 return result;
}
f(6,2);  // 8

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

function fn(){
  setTimeout(()=>{
    // 定義時，this 綁定的是 fn 中的 this 對象
    console.log(this.a);
  },0)
}
var a = 20;
// fn 的 this 對象爲 {a: 19}
fn.call({a: 18});  // 18

6、模板字符串

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

let string = `Hello'\n'world`;
console.log(string); 
// "Hello'
// 'world"

//多行
let string1 =  `Hey,
can you stop angry now?`;
console.log(string1);
// Hey,
// can you stop angry now?


//插值
let name = "Mike";
let age = 27;
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info);
// My Name is Mike,I am 28 years old next year.


//調用函數
function f(){
  return "have fun!";
}
let string2= `Game start,${f()}`;
console.log(string2);  // Game start,have fun!

7、Promise

const p = new Promise(function(resolve,reject){
  resolve('success');
});
 
p.then(function(value){
  console.log(value);
});
 
console.log('first');
// first
// success

8、async await