• ES6常用知識
  • 一 ES6常用知識
    • 1.1 物件擴充套件
    • 1.2 陣列擴充套件
      • 1.2.1 展開運算子: ... ,可用於展開具有iterator介面的資料和物件.
      • 1.2.2 js具備iterator介面的資料結構如下:
      • 1.2.3 把iterator介面的資料型別轉換成陣列：Array.from( iterator介面的資料 )；
      • 1.2.4 for of 迴圈
      • 1.2.4 陣列的遍歷器物件
      • 1.2.4 簡單的陣列去重
    • 1.3 函式擴充套件
      • 1.3.1 箭頭函式
      • 1.3.2 rest引數
      • 1.3.3 函式預設值
    • 1.4 解構賦值

ES6常用知識

一 ES6常用知識

1.1 物件擴充套件

物件的屬性和方法簡寫：

let name = '冪冪';
let oYm = {
	name:name,
	fn:function(){
		console.log(this.name)
	}
}
// 以上寫法可以簡寫成
let oYm = {
    name,
    fn(){
        console.log(this.name)
    }
}
 

屬性名錶達式

let str = 'name';
// 通過變數來充當key
let oYm = {
	[str]:'冪冪'
}

console.log(oYm.name);
console.log(oYm[str]);

物件遍歷

1: ES5的for in用於遍歷物件

let oYm = {a:1,b:2,c:3}

// 物件有多少個屬性,這個forin就迴圈多少次
// prop就是每次迴圈的鍵名

for(let prop in oYm){
	console.log(prop);
	console.log(oYm[prop]);
}

2: ES6提供3個方法可以把物件轉換成陣列,然後再遍歷陣列. (其實不止3個,還有一些操作跟原型鏈相關)

Object.keys(obj);//返回一個obj所有鍵名組成的陣列
Object.values(obj);// 返回一個obj所有鍵值組成的陣列
Object.entries(obj);// 返回一個由鍵名和鍵值組成的二維陣列

1.2 陣列擴充套件

1.2.1 展開運算子: ... ,可用於展開具有iterator介面的資料和物件.

展開後的值,可用於傳入函式作為實參,或者傳入陣列作為元素,或者傳入物件作為屬性.

// 語法
let arr = [...[1,2,3]];
let obj = {...{a:1,b:2,c:3}};
let arr = [...'abcd'];
let arr = [...aDiv];
let args = [...arguments];
console.log(...arr);
 

1.2.2 js具備iterator介面的資料結構如下:

• Array
• Map
• Set
• String
• TypedArray
• 函式的 arguments 物件
• NodeList 物件

這些資料結構都可以通過展開運算子展開.

1.2.3 把iterator介面的資料型別轉換成陣列：Array.from( iterator介面的資料 )；

Array.from(aDiv) // 得到一個元素是標籤的真正陣列。
Array.from(arguments) // 得到元素是實參的真正陣列。

1.2.4 for of 迴圈

具備iterator介面的資料結構還可以通過 for of迴圈來遍歷。

// item 既是 陣列遍歷過程中的元素
for(let item of [1,2,3]){
	console.log(item); // 1,2,3
}

1.2.4 陣列的遍歷器物件

[1,2,3].keys(); //得到陣列的下標陣列。
[1,2,3].values(); // 得到陣列的元素陣列。
[1,2,3].entries(); // 得到下標和陣列元素組成的二維陣列。

1.2.4 簡單的陣列去重

ES6提供了Set資料結構，簡單理解它就是沒有重複元素的 “陣列”。

let arr = [1,1,2,2,3,4,4,5];
arr = [...new Set(arr)];// [1,2,3,4,5]

1.3 函式擴充套件

1.3.1 箭頭函式

ES6 提供了一種更簡單的函式書寫，箭頭函式。用於替代匿名函式。

無法用箭頭函式來書寫函式宣告，只能用箭頭函式來書寫函式表示式。

let show = () => {
	console.log(100)
}

arr.forEach((item,i)=>{
    console.log(item)
})

// 如果形參只有一個，可以省略形參的()
let show = x => {
	console.log(100)
}

// 如果函式體只有一個return 語句.可以省略{}和return,這樣寫的好處就是可以一眼看出函式的形參和出參.
let show = x => x+1;

// 相當於:
let show = function(x){
    return x+1
}

箭頭函式和普通函式的區別:

箭頭函式內的this指向箭頭函式所在作用域內的this.(以後學)

1.3.2 rest引數

可以通過形參寫入...來代替arguments的實參列表獲取.

function fn(...args){
	console.log(...args) // 這裡的args代替了arguments。
}

1.3.3 函式預設值

// 當第二個實參沒有傳入，就使用1來做y的值。
// 具有預設值的形參應該寫在最後面
function fn(x,y=1){}
fn(2);

1.4 解構賦值

ES6提供了一種更簡便的解構賦值操作，在取值和傳參時更方便。

1.4.1 陣列解構賦值

// 陣列解構賦值,按位置匹配
let [x,y,z] = [1,2,3];
// 相當於

let x = arr[0],
	y = arr[1],
	z = arr[2];
// -------------------------------------------------------
let [x,y,[z]] = [1,2,[3]];
// 相當於
let x = arr[0],
    y = arr[1],
    z = arr[2][0]
// -------------------------------------------------------
let [x,y,z] = [1,2];
// 相當於
let x = arr[0],
	y = arr[1],
	z = undefined;

1.4.2 物件解構賦值

// 物件解構賦值,按鍵名匹配
let {a:x,b:y} = {a:1,b:2};
// 相當於
let x = obj.a,
	y = obj.b
// ----------------------------------------------------------
let {a:a,b:b} = {a:1,b:2};
// 可簡寫成
let {a,b} = {a:1,b:2};
// ---------------------------------------------------------
let {a,b:{c}} = {a:1,b:{c:3}};
// 相當於
let a = obj.a,
    c = obj.b.c;
// ----------------------------------------------------------
let {a,b:{c},b} = {a:1,b:{c:3}};
// 相當於
let a = obj.a,
    b = obj.b,
    c = obj.b.c;

注意，在任何賦值的地方都可以使用解構賦值，包括系統的自動賦值。例如實參給形參賦值時使用解構賦值。

// 實參是{a:1,b:2}
fn({a:1,b:2});
// 直接通過解構賦值使用實參的a和b屬性。
function fn({a,b}){
    console.log(a);
    console.log(b);
}

let arr = [{a:1,b:2},{a:3,b:4}];

// 直接通過解構賦值獲取陣列元素的a和b屬性。
for(let {a,b} of arr){
    console.log(a);
    console.log(b);
}