學習

目錄

箭頭函數有什麼作用？

ES6新文法

箭頭函數有什麼作用？

箭頭函數是ES6中引入的新特性，使用方法為：

()=>{console.log(this)}

其中()内是要帶入的參數，{}内是要執行的語句。箭頭函數是函數式程式設計的一種展現，函數式程式設計将更多的關注點放在輸入和輸出的關系，省去了過程的一些因素，是以箭頭函數中沒有自己的this，arguments，new target（ES6）和 super(ES6)。箭頭函數相當于匿名函數，是以不能使用new來作為構造函數使用。

箭頭函數中的this始終指向其父級作用域中的this。換句話說，箭頭函數會捕獲其所在的上下文的this值，作為自己的this值。任何方法都改變不了其指向，如call(), bind(), apply()。在箭頭函數中調用 this 時，僅僅是簡單的沿着作用域鍊向上尋找，找到最近的一個 this 拿來使用，它與調用時的上下文無關。

ES6新文法

函數預設值

function test(num=5){
    console.log(num);
  }

調用此方法，如果傳值則顯示傳的值，如果不傳值，則預設為5
test(1)   1
test()    5
           

箭頭函數

//原來寫法
function add(x,y) {
  return x + y;
}

//另一種寫法
add1 = function (x,y) {
    return x + y;
}

//ES6 箭頭函數
add2 = (x,y) => {
    return x + y;
}

//ES6 箭頭函數  省略return和括号
add3 = (x,y) =>  x + y;


console.log(  add(1,2)  )    //結果：3
console.log(  add1(1,2)  )    //結果：3
console.log(  add2(1,2)  )    //結果：3
console.log(  add3(1,2)  )    //結果：3
           

對象初始化

//建立一個函數 傳兩個參數name和age，傳回包含name和age的對象

//ES5
function people(name, age) {
    return {
        'name':name,
        'age':age
    }
}

//ES6  對象名預設為參數名
function people2(mingzi, age) {
    return {
        mingzi,
        age
    }
}

let str = JSON.stringify(people("mrZhou",18));
console.log(str)  //{"name":"mrZhou","age":18}

let str2 = JSON.stringify(people2("mrZhou",18));
console.log(str2)  //{"mingzi":"mrZhou","age":18}
           

解構，與對象初始化是逆向操作

/**
     ====================== 對象解構 ======================
     */
    const Tom = {
        name: 'Tom',
        age: 25,
        family: {
            mother: 'mama',
            father: 'baba',
            brother: 'didi',
        },

    };

    const {name:mz,age:nl} = Tom;
    console.log(`${mz}----${nl}`);  //Tom----25

    //給對象中不存在的 或者明确值為undefind的對象指派
    const {mother:m,father:f,brother:b,sister:s='have no sister'} = Tom.family;
    console.log(`${m}----${f}----${b}----${s}`);  
    //mama----baba----didi----have no sister

    //嵌套對象
    const {name:mm,age:nn,family:{mother,father}} = Tom;
    console.log(`${mm}----${nn}----${mother}----${father}`);  
    //mama----baba----didi----have no sister

/**
     ====================== 數組結構 ======================
     */

    const numbers = ['yi','2','san','four'];

    //取第一位和第三位的值  中間多加個逗号
    const [aa,,bb] = numbers;
    console.log(aa,bb);  //yi san

    //擷取第一位和第二位，并将剩下的變成新的數組  ...rest一定要在最後
    const [one,two,...rest] = numbers;
    console.log(one,two,rest);    //yi 2 Array(2)

    //給undefind賦予新的值
    const [cc,dd,ee,ff,gg='5'] = numbers;
    console.log(cc,dd,ee,ff,gg);    //yi 2 san four 5

    /*
   ======================  交換變量  ======================
     */

    let num1 = 10;
    let num2 = 20;

   [num1,num2] = [num2,num1];

    console.log(num1,num2);  //20 10
           

spreadOperator 擴充運算符

剩餘參數,

擴充運算符：把一個可周遊對象的每個元素擴充為一個新的參數序列

可周遊對象：部署了iterator接口的，可以用for of循環的資料類型，
    包括字元串，數組，dom,node,arguements對象以及 mark set


//擴充運算符把可周遊對象的每一個元素擴充成一個新的參數序列，而不會改變原來的數組

 const youngers = ['George','John','Thomas'];
    const olders = ['James','Adrew','Martin'];

    //将兩個數組合并
    let members = youngers.concat(olders);
    console.log(members);
    //["George", "John", "Thomas", "James", "Adrew", "Martin"]
    
    //往數組中添加成員
    members.push("zhouran")
    console.log(members);
    // ["George", "John", "Thomas", "James", "Adrew", "Martin", "zhouran"]


    //用擴充運算
    let members2 = [...youngers,...olders]
    console.log(members2);
    //["George", "John", "Thomas", "James", "Adrew", "Martin"]

    
    //往數組中 合并的同時添加成員
    let members3 = [...youngers,...olders,'zhouran']
    console.log(members3);
    //["George", "John", "Thomas", "James", "Adrew", "Martin", "zhouran"]

    //還可以合并對象
    const people = {"name":"George","age":18};
    const person = {...people,"sex":"woman"}
    console.log(person);
    //{name: "George", age: 18, sex: "woman"}
           

Babe轉換器安裝與配置

由于node8版本不支援部分es6文法，是以要下載下傳轉換器

編寫一個配置檔案 babelrc  沒有字尾
裡面寫上
{
    "presets":["es2015"]
}

然後回到根目錄下運作
運作cnpm install babel-preset-es2015 --save-dev 下載下傳依賴

再下載下傳一個指令行工具
cnpm install babel-cli -g
           

子產品導入導出

//ES5
//導出
exports.add=function (a,b) {
    return a+b;
}
//導入
var jia = require("./exportDemo");
console.log(jia.add(1,2));


//ES6