前端(七)：ES6一些新特性_ZenDei技術網路在線

一、變數 1.var關鍵字的弊端 var關鍵字的弊端：1.可以重覆聲明變數；2.無法限制變數修改；3.沒有會計作用域，只有函數作用域。慣用的解決辦法是將onclick寫進一個匿名函數。 2.let和const關鍵字 let和const關鍵字使得變數不可以被重覆聲明，且變數具有塊級作用域。不同的是， ...

一、變數

　　1.var關鍵字的弊端

　　var關鍵字的弊端：1.可以重覆聲明變數；2.無法限制變數修改；3.沒有會計作用域，只有函數作用域。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="按鈕1">
<input type="button" value="按鈕2">
<input type="button" value="按鈕3">

<script>
    var oBtn = document.getElementsByTagName("input");
    for(var i=0; i< oBtn.length; i++){
        oBtn[i].onclick = function () {
            alert(i);  // 三個按鈕都是3
        }
    }
　　// 點擊按鈕alert出來的都是3。因為事件沒觸發時，for迴圈已經遍歷結束，當事件觸發時i的值已經是3了。
</script>
</body>
</html>

　　慣用的解決辦法是將onclick寫進一個匿名函數。

for(var i=0; i< oBtn.length; i++){
    (function (i) {
        oBtn[i].onclick = function () {
            alert(i);  // 三個按鈕都是3
        }
    })(i);
}

　　2.let和const關鍵字

　　let和const關鍵字使得變數不可以被重覆聲明，且變數具有塊級作用域。不同的是，let用來聲明變數，const用來聲明常量(不可被修改的常量)。

　　註：在Java中，Java: int a = 123; int a = 12; 報錯，變數不可以重覆聲明，因為它存在堆記憶體中，變數直接代表一塊記憶體空間。而對象的值存在堆中，變數實際上這個對象的引用。js的var同樣應遵循這樣的規則。

// let寫法
for(let i=0; i< oBtn.length; i++){
    oBtn[i].onclick = function () {
        alert(i);  // 三個按鈕都是3
    }
}

二、數組

　　1.解構賦值

let arr = [1, 2, 3];

// let a = arr[0];
// let b = arr[1];
// let c = arr[2];

// 等價於
let [a, b, c] = [1, 2, 3];
console.log(a, b, c);

let {l, m, n} = {l: 1, m:2, n:3};
console.log(l, m, n);

let [x, y, z] = [{p1: 123, p2: 234}, [345, 456], 789];
console.log(x, y, z);

let [{p11, p12}, [p21, p22], p31] = [{p11: 123, p12: 234}, [345, 456], 789];
console.log(p11, p12, p21, p22, p31);

　　註意，當右側是一個json數據時，左側相應的變數必須與其鍵名對應。

　　2、新增map、reduce、filter、forEach函數

　　常見的數組操作函數。

// map: 用給定的映射遍曆數組，不改變原數組，生成新數組；
let arr = [12, 58, 99, 86, 45, 21];
let newArr = arr.map(item=>item>=60?"及格":"不及格");
console.log(arr, newArr);

// reduce: 遍歷累加
let sum = arr.reduce((item1, item2, index)=>item1+item2); // index表示下標，這裡可不寫
console.log(sum);

// filter: 過濾器
let filter = arr.filter(item=>item<=60);
console.log(filter);

let arr2 = [
    {title: "賓士", price: 20},
    {title: "寶馬", price: 35},
    {title: "路虎", price: 30},
    {title: "特斯拉", price: 40},
    {title: "大眾", price: 15},
    {title: "標緻", price:15},
];
let filter2 = arr2.filter(item=>item.price >=30);
console.log(filter2);

// forEach  迴圈遍歷
let newArr2 = arr.forEach((item, index)=>console.log(item, index));
newArr2;  // 沒有返

三、字元串

　　1.新增startswith和endswith

let str = "http://www.baidu.com";
if(str.startsWith("https")){
    console.log("加密網址");
}else if(str.startsWith("http")){
    console.log("普通網址");
}

let str2 = "[email protected]";
if(str2.endsWith("163.com")){
    console.log("163郵箱");
}else if(str2.endsWith("qq.com")){
    console.log("qq郵箱");
}

　　2.模板字元串

　　用返單引號(``)包裹的字元串，其中的變數可以用${}來替換。它可以寫多行字元串。

let title="標題", content="內容";
let str = `
<div><h1>${title}</h1><p>${content}</p></div>
`;
alert(str);

四、函數

　　1.箭頭函數

　　箭頭函數是函數的一種簡寫。

let show = function () {
    console.log("what the hell?")
};
show();
// es6寫法
let newShow = ()=>{
    console.log("what the hell?")
};
newShow();

　　帶參數的寫法。如果參數只有一個，那麼()可以省略。

let alt = a=>{console.log(a*10)};// 單個參數

let add = (a, b) => {console.log(a + b);
}; // 兩個參數
add(3,5);

　　如果函數只有一個返回值，那麼{}省略。

let arr = [12, 234, 345, 64, 23, 87];
arr.sort(function (n1, n2) { return n1 - n2 });
// 簡寫為
arr.sort((n1, n2) =>n1 - n2);
console.log(arr);

　　2.預設參數

　　可以像python那樣在函數定義時設置預設參數的值。並且可以通過...args來展開元素，同樣類似python的*args。

function show2(a, b=4, c=123) {
    console.log(a, b, c);
}
show2(7);

function show(a, b, ...args) {
    console.log(a + b);
    console.log(args); // 剩餘的寫進...args數組裡，必須寫在最後
}
show(3, 5, 7, 9, 11);

　　...args甚至可以拆解數組。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

五、json

　　如果鍵名和值一致，那麼鍵名可以省略。

let a=123;
let b=456;
// 當名字和值一樣時可以簡寫
let json1 = {a, b};  // 等價於let json1 = {a: a, b: b}

let json2 = {
    a,
    b,
    show(item){
        console.log(item)
    }  // 等價於 show: function(){console.log(item};
};
json2.show(json2.a);

六、類

　　相比函數構造類的外掛式寫法，添加了class和constructor來聲明類和構造函數。

// 聲明
class Person{
    constructor(name, gender){
        this.name = name;
        this.gender = gender;
    }
    showName(){
        console.log(this.name);
    }
    showGender(){
        console.log(this.gender);
    }
}

var sun = new Person("孫悟空", "male");
sun.showName();
sun.showGender();

// 繼承
class Child extends Person{
    constructor(name, gender, age){
        super(name, gender);
        this.age = age;
    }
    showAge(){
        console.log(this.age);
    }
}

var child = new Child("小猴子", "male", 12);
child.showAge();

七、promise

　　用同步的寫法來管理非同步。

function createPromise(url) {
    return new Promise(function (resolve, reject) {
        $.ajax({
            url, // url: url
            dataType: 'json',
            success(arr){ resolve(arr);},
            error(arr){vreject(arr);}
        })
    });
}
// 在當前目錄下創建arr.txt和json.txt文件
Promise.all([createPromise("arr.txt"), "json.txt"]).then(function (arr) {
    alert("全都成功了!");
}, function (arr) {
    alert("至少有一個失敗了!");
});

　　高版本的Jquery中，$.ajax本身就是promise對象，所以上面的代碼可簡寫為:

Promise.all([$.ajax({url:"arr.txt", dataType:"json"}), $.ajax({url: "json.txt", dataType: "json"})]).then(function (results) {
    let [arr, json] = results;
    // 分別處理自己的邏輯
    console.log("全都成功了！");
    console.log(arr, json);
}, arr=>alert("至少有一個失敗了!"));

八、generator-yield

　　生成器。惰性執行函數，和python中的生成器一致。

function *show() {
    console.log("------1-----");
    let a = yield 12;
    console.log("------2-----");
    console.log(a);
    return a;
}

let gen = show();
let a = gen.next(123);  // 當yield 後賦值時，第一次執行到yield時返回該值
let b = gen.next(456);
console.log(a, b); // a是一個json對象