ES6學習筆記 Javascript

字符串模板 Template String

let xxx='你好',yyy = '不好';

let printt = `今天你 ${xxx} ${yyy} 啊`

Tagged Templates 帶標籤的模板字符串

let xxx='你好',yyy = '不好';

let printt = kitchen`今天你 ${xxx} ${yyy} 啊`

function kitchen(strings,...values){
    console.log(strings);
    console.log(values);
}

輸出結果strings爲字符values爲模板字符xxx和yyy的值

判斷字符串是否包含

xxxx.statsWith(‘xxx’);返回true false
同理endWith includes

Deafault Paramet 默認參數

function breakfast(dessert='xx',drink='yy'){
    return '${dessert} ${drink}';
}

xx yy 爲默認

展開操作符Spread …

展開數組 [‘1’,‘2’]變爲1 2
用法用例 console.log(…array);

剩餘操作符 …

function breakfast(dessert,drink,...foods){
    console.log(dessert,drink,foods);
}
breakfast('1','2','3','4');

輸出爲1 2 [‘3’,‘4’];
多餘的參數將以數組的形式放在foods數組裏；

函數名字

xxx.name

箭頭函數 Arrow Functions

let breakfast = dessert =>dessert;

var breakfast = function breakfast(dessert){
    return dessert;
}

上述兩種定義breakfast方法是一樣的
方法一中的dessert爲傳入參數如有多個參數可以寫爲(param1,param2)=>{
操作;
}

對象屬性名

let food = {};

food.dessert = 'xxx';
food['hot drink'] = 'xxx';// 帶空格的屬性名

對比是否相等

Object.is(param1,param2);

對象屬性複製

let breakfast = {};

Object.assign(
breakfast,
{
    xx:'xx';
}
)

第一個參數爲賦值的目標
第二個參數是賦值的值

Object.setPrototypeOf 改變prototype

Object.setPrototypeOf(需要改變的方法名,改變其對象);

proto

let xxx = {
proto:xxxxx(對象名);
}
OR
xxx.proto=xxxxx;

迭代器

迭代器是一個伴隨着迭代器模式（Iterator Pattern）而生的抽象概念，其目的是分離並統一不同的數據結構訪問其中數據的方式，從而使得各種需要訪問數據結構的函數，對於不同的數據結構可以保持相同的接口。

下面是一段ES5的語法創建的迭代器

function createIterator(items) {
    var i = 0;
    return {
        next: function() {
            var done = (i >= items.length);
            var value = !done ? items[i++] : undefined;
            return {
                done: done,
                value: value
            };
        }
    };
}
var iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: 2, done: false }"
console.log(iterator.next()); // "{ value: 3, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"
// 之後的所有調用
console.log(iterator.next()); // "{ value: undefined, done: true }"

在上面這段代碼中，createIterator()方法返回的對象有一個next()方法，每次調用時，items數組的下一個值會作爲value返回。當i爲3時，done變爲true；此時三元表達式會將value的值設置爲undefined。最後兩次調用的結果與ES6迭代器的最終返回機制類似，當數據集被用盡後會返回最終的內容

上面這個示例很複雜，而在ES6中，迭代器的編寫規則也同樣複雜，但ES6同時還引入了一個生成器對象，它可以讓創建迭代器對象的過程變得更簡單。

生成器 Generators

生成器是一種返回迭代器的函數，通過function關鍵字後的星號(*)來表示，函數中會用到新的關鍵字yield。星號可以緊挨着function關鍵字，也可以在中間添加一個空格

// 生成器
function *createIterator() {
    yield 1;
    yield 2;
    yield 3;
}
// 生成器能像正規函數那樣被調用，但會返回一個迭代器
let iterator = createIterator();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3

在這個示例中，createlterator()前的星號表明它是一個生成器；yield關鍵字也是ES6的新特性，可以通過它來指定調用迭代器的next()方法時的返回值及返回順序。生成迭代器後，連續3次調用它的next()方法返回3個不同的值，分別是1、2和3。生成器的調用過程與其他函數一樣，最終返回的是創建好的迭代器

生成器函數最有趣的部分是，每當執行完一條yield語句後函數就會自動停止執行。舉個例子，在上面這段代碼中，執行完語句yield 1之後，函數便不再執行其他任何語句，直到再次調用迭代器的next()方法纔會繼續執行yield 2語句。生成器函數的這種中止函數執行的能力有很多有趣的應用

使用yield關鍵字可以返回任何值或表達式，所以可以通過生成器函數批量地給迭代器添加元素。例如，可以在循環中使用yield關鍵字。

function *createIterator(items) {
    for (let i = 0; i < items.length; i++) {
        yield items[i];
    }
}
let iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: 2, done: false }"
console.log(iterator.next()); // "{ value: 3, done: false }"
console.log(iterator.next()); // "{ value: undefined, done: true }"
// 之後的所有調用
console.log(iterator.next()); // "{ value: undefined, done: true }"

在此示例中，給生成器函數createlterator()傳入一個items數組，而在函數內部，for循環不斷從數組中生成新的元素放入迭代器中，每遇到一個yield語句循環都會停止；每次調用迭代器的next()方法，循環會繼續運行並執行下一條yield語句

類

class Xxx{
    constructor(param1,...){
        this.xxx = xxx;
        this.yyy = [];
    }
    
    get zzz(yyy){
        return yyy;
    }
    
    set zzz(yyy){
        this.yyy.push(yyy);
    }
    
    xxx(){
        console.log(x);
    }
}

let xxx1 = new Xxx(xxx);
xxx1.xxx();

以上是一個簡單的實例

get & set 用例如上

static 靜態類

靜態類不需要實例化類
不需要new

class Xxx{
    constructor(param1,...){
        this.xxx = xxx;
        this.yyy = [];
    }
    
    
    static xxx(){
        console.log(x);
    }
}

Xxx.xxx();//不需要new

繼承 extend

class Person{
    construcor(name,birthday){
        this.name = name;
        this,birthday = birthday;
    }
    
    intro(){
        return '${this.name} ${this.birthday}';
    }
}

class Xxx extends Person{
    constructor(name,birthday){
    super(name,birthday);//不需要再次寫構造函數。
}

Set

let xxx = new Set();
xxx.add('x');//添加方法
xxx.add('x');//不能重複
console.log(xxx.size);//輸出長度
console.log(xxx.has('y');//判斷是否有y
//刪除方法
xx.delete('x');
//循環處理
xxx.forEach(xx=>{
    console.log(xx);
});
//清除Set內的內容
xxx.clear();

Map

let xxx = new Map();
let yyy = [],zzz = function(){},aaa='abc';
xxx.set(yyy,'a');//往xxx內添加一個yyy的值爲a
//同理zzz和aaa
console.log(xxx.size);//輸出長度
console.log(xxx.get(yyy));//可以得到yyy；
//刪除方法
xx.delete('x');
console.log(xxx.has('y');//判斷是否有y
//循環處理
xxx.forEach((value,key)=>{
    console.log('${key}=${value}');
});
//清除Map內的內容
xxx.clear();

方法大致和Set相似

Module

export{
    xxx;
}

在需要導入的頁面：

import {xxx} form 'url';

或者

import * as yyy from 'url';
console.log(yyy.xxx);

默認導出

export default{
    
}
//需要導入的頁面
import x(隨意) form 'url'//此時的x就是默認導出的東西