ES6新特性總結

時間 2019-12-07

原文原文鏈接

ECMAScript6 又叫ES2015,簡稱ES6

一. let和const

let
- let定義變量不能夠再次定義,能夠重新賦值
- 具備塊級做用域
- 沒有變量提高,必須先定義在使用
- let聲明的變量不能被window調用,是獨立的
const
- const定義常量,是不可變的,一旦定義,不能修改其值
- 初始化常量時,必須給初始值
- 具備塊級做用域
- 沒有變量提高,必須先定義在使用
- const聲明的常量也是獨立的,不能被window調用

關鍵字	變量提高	塊級做用域	初始值	更改值	經過window調用
var	√	x	-	Yes	Yes
let	x	√	-	Yes	No
const	x	√	Yes	No	No

二. 解構賦值

數組的解構

從數組中提取值,對變量進行賦值,方便獲取數組中的某些項

// 1.變量和值一一對應
let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a,b,c);   // 1 2 3
複製代碼

// 2. 變量多,值少
let arr = [1, 5, 8];
let [a, b, c, d] = arr;
console.log(a, b, c, d); // 1 5 8 undefined
複製代碼

// 3. 變量少,值多
let arr = [5, 9, 10, 8, 3, 2];
let [a, b] = arr;
console.log(a, b);  // 5, 9
複製代碼

// 4.按需取值
let arr = [5, 9, 10, 8, 3, 2];
let [, , a, , b] = arr; // 不須要用變量接收的值，用空位佔位
console.log(a, b); // 10, 3 
複製代碼

// 5.剩餘值
let arr = [5, 9, 10, 8, 3, 2];
let [a, b, ...c] = arr; // ...c 接收剩餘的其餘值，獲得的c是一個數組
console.log(a, b, c); 
// 結果：
// a = 5, 
// b = 9, 
// c = [10, 8, 3, 2]
複製代碼

// 6.複雜的狀況,只要符合模式.便可解構
let arr = ['zhangsan', 18, ['175cm', '65kg']];
let [, , [a, b]] = arr;
console.log(a, b); // 175cm 65kg
複製代碼

對象的解構

從對象中提取值,對變量進行賦值,方便解析對象中的某些屬性的值

// 1. 變量名和屬性名同樣
let { foo, bar } = {foo: 'aaa', bar: 'bbb'};
console.log(foo, bar); // aaa, bbb

let {a, c} = {a: 'hello', b: 'world'};
console.log(a, c); // hello, undefined
複製代碼

// 2. 經過 :來更改變量名
let {a, b:c} = {a: 'hello', b: 'world'};
console.log(a, c); // hello, world
複製代碼

// 3. 變量名和屬性名一致便可獲取到值,不須要一一對應
let {b} = {a: 'hello', b: 'world'};
console.log(b); // world
複製代碼

// 4. 剩餘值
let obj = {name:'橘右京', age:20, gender:'男'};
let {name, ...a} = obj;
console.log(name, a);  // name = zs   a = {age: 20, gender: "男"};
複製代碼

// 5. 複雜狀況,只要符合模式,便可解構
let obj = {
name: '不知火舞',
age: 22,
dog: {
    name: '娜可露露',
    age: 13
    }
};
let {dog: {name, age}} = obj;
console.log(name, age); // 娜可露露 13
複製代碼

實際開發應用中

// 假設服務器上的獲取的數據以下
let res = {
    data: ['a', 'b', 'c'],
    meta: {
        code: 200,
        msg: '獲取數據成功'
    }
}
// 如何獲取到 code 和 msg
let { meta: { code, msg } } = res;
console.log(code, msg); // 200, 獲取數據成功
複製代碼

三. 函數

箭頭函數的特色:
- 箭頭函數內部的this指向外部做用域中的this,箭頭函數沒有本身的this
- 箭頭函數中內部沒有arguments
- 箭頭函數不能做爲構造函數

函數參數的默認值

// ES5 中給參數設置默認值的變通作法
function fn(x, y) {
    y = y || 'world';
    console.log(x, y);
}
fn(1)
// ES6 中給函數設置默認值
function fn(x, y = 'world') {
    console.log(x, y);
}
fn(2)
fn(2,3)
複製代碼

rest參數

剩餘參數,以...修飾最後一個參數,把多餘的參數放到一個數組中

// 參數不少，不肯定多少個，可使用剩餘參數
function fn(...values) {
    console.log(values); // [6, 1, 100, 9, 10]
}
// 調用
console.log(fn(6, 1, 100, 9, 10));
複製代碼

rest參數只能是最後一個參數數組

四. 內置對象的擴展

Array的擴展
- 擴展運算符(...能夠把數組中的每一項展開)
```
// 合併兩個數組
let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4]
複製代碼
```
- Array.from()
  - 把僞數組轉換成數組
  - 僞數組必須有length屬性,沒有length獲得一個空數組
  - 轉換後的數組長度根據僞數組的length決定的
```
let fakeArr = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3
};
let arr = Array.from(fakeArr);
console.log(arr); // ['a', 'b', 'c']
複製代碼
```
- 數組實例find() findIndex():
  - find和findIndex方法,會遍歷傳遞進來的數組
  - 回調函數有三個參數,分別表示數組的值,索引及整個數組
  - 回調函數中return的是一個條件，find和findIndex方法的返回值就是知足這個條件的第一個元素或索引
  - find 找到數組中第一個知足條件的成員並返回該成員，若是找不到返回undefined
  - findIndex 找到數組中第一個知足條件的成員並返回該成員的索引，若是找不到返回 -1
- 數組實例includes()
  - 判斷數組是否包含某個值,返回true/false
  - 參數1爲查找的內容
  - 參數2表示開始查找的位置
- fill()
  - 把數組進行填充
  - 參數1是填充的變量
  - 參數2是開始填充的位置
  - 參數3是填充結束的位置
- Array.of()
  - 將一組值(傳入的參數)轉變爲數組
- Set()
  - ES6中新增的內置對象.相似於數組,但成員的值都是惟一的沒有重複的值(能夠用來去重): 方式一:[...new Set(arr)] 方式二: Array.from(new Set(arr))
String的擴展
- 模板字符串
  - 使用反引號``
  - 變量在模板字符串中使用${name}來表示
- includes(str, [position]) 返回布爾值,是否找到參數字符串
- startsWidth(str, [position]) 返回布爾值,表示參數字符串是否在原字符串的頭部或指定位置
- endsWith(str, [position]) 表示參數字符串是否在原字符串的尾部或指定位置
- repeat() 返回一個新字符串,表示將原字符串重複n次