工作中常用的ES6語法

1. let和const

  • let（變量）

    • 不會重復(fù)聲明
    • 變量-可以修改
    • 塊級作用域

  • const（常量）

    • 不會重復(fù)聲明
    • 常量-不可以修改
    • 塊級作用域

  • 對比之前ES5的 var

    • 可以重復(fù)聲明
    • 沒有塊級作用域
    • 無法限制修改
    
// 經(jīng)典案例 采用閉包方式來解決
var btns = document.getElementsByTagName('input');
// for (var i = 0; i < btns.length; i++) {
//     (function (i) {
//         btns[i].onclick = function () {
//             alert(i)
//         }
//     })(i)
// }

// 采用ES6 塊級作用域來解決
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function () {
        alert(i)
    }
}
2. 箭頭函數(shù)

  • 只有一個參數(shù)（）可以省略

    // ES5之前函數(shù)
function fn1(a) {
    return a * 2
}
alert(fn1(2))

// 演變箭頭函數(shù)
let fn2 = a => a * 2
alert(fn2(2))

  • 只有一個return 可以省略{ }

    // ES5之前的函數(shù)
var arr = [10, 2, 6, 8, 55, 446]
var res1 = arr.sort(function (a, b) {
    return a - b
})
alert(res1)

// 演變成箭頭函數(shù)
var res2 = arr.sort((a, b) => a - b)
alert(res2)
3. 函數(shù)參數(shù)

  • 函數(shù)擴展/展開（延展操作符）

    • 收集剩余參數(shù)

      // 注意args可以隨便起變量名，agrs必須放在形參最后一位，否則報錯。
function show(a, b, ...agrs) {
    alert(a) // 10
    alert(b) // 20
    alert(agrs) // 2,21,16
}
show(10, 20, 2, 21, 16)

    • 展開數(shù)組

      // 展開后的效果，跟直接把數(shù)組內(nèi)容寫在這兒一樣
var num = [10,20]

let show = (...args) => {
    fn(...args)
}

let fn = (a, b) => {
    alert(a + b)
}

// 展開數(shù)組num
show(...num)

  • 默認參數(shù)

    let showArgs = (a,b=10,c=15)=>{
    console.log(a);
    console.log(b);
    console.log(c);
}
// 沒傳就顯示默認值
showArgs(1); // 1,10 15

// 傳了就覆蓋默認值
showArgs(12,13,14); // 12,13 14
4. 解構(gòu)賦值

  • 左右兩邊結(jié)構(gòu)必須一樣

  • 右邊必須是個東西

  • 聲明和賦值不能分開（必須在一句話里完成）

    // ES5之前想取出
let arr = [1, 2, 3]
let a = arr[0]
let b = arr[1]
let c = arr[2]
console.log(a, b, c);

// ES6結(jié)果賦值 (左右結(jié)構(gòu)必須一致)
let [z, x, d] = [1, 2, 3];
console.log(z, x, d);

let [arrs, obj, num, str] = [
    [1, 2, 3], {
        a: 12,
        b: 15
    },
    8, "Jason"
]
console.log(arrs, obj, num, str); //[1, 2, 3] {a: 12, b: 15} 8 "Jason"
5. 數(shù)組

  • map（映射） 一 對一

    // map() 方法
let arr = [10, 20, 30];
// 返或一個結(jié)果  所有的數(shù)據(jù)都會從function(){}里走一下
var res = arr.map(item => item * 2)
console.log(res); // [20, 40, 60]

let score = [19, 85, 95, 65, 49];
let result = score.map(item => item >= 60 ? "價格" : "不及格")
console.log(result); // ["不及格", "價格", "價格", "價格", "不及格"]

  • reduce（匯總） 一堆數(shù)據(jù)出來一個數(shù)據(jù)

    // reduce() 一堆數(shù)據(jù)出來一個 
// 求數(shù)組的總和,平均數(shù)
let sums = [10, 30, 50, 80];
// reduce()里接收三個參數(shù) 分別是第一次相加的結(jié)果，得出結(jié)果的下一位數(shù)，索引
let getSum = sums.reduce((sum, item, index) => sum + item)
console.log(getSum); //170 

let getAvg = sums.reduce((sum, item, index) => (sum + item) / sums.length)
console.log(getAvg); //23.75

  • filter（過濾器） 按照一定的規(guī)則刷選數(shù)據(jù)

    // filter 按照一定的規(guī)則 返回 一些結(jié)果
let goods = [{
    name: "電腦",
    price: 10000
},
             {
                 name: "電視",
                 price: 5000
             },
             {
                 name: "投影儀",
                 price: 8000
             },
            ]
// 接收一個參數(shù)
let getFilter = goods.filter(item => {
    if (item.price >= 6000) {
        return item
    }
})
console.log(getFilter); //{name: "電腦", price: 10000} {name: "投影儀", price: 8000}

  • forEach（循環(huán)、迭代）

    // forEach 循環(huán)
let number = [10, 3, 5, 52, 69, 133]
number.forEach((item, index) => {
    console.log(item,index);
})
6. 字符串

  • 新增加了兩個方法

    • startsWith() 以什么開頭

      var str = "https://www.baidu.com";
console.log(str.startsWith("https://")); //true
console.log(str.startsWith("http://")); //false

    • endsWith() 以什么結(jié)尾

      var str = "https://www.baidu.com";
console.log(str.endsWith(".com")); //true
console.log(str.endsWith(".coms")); //false

  • 模板字符串（用反單引號來表示 `）

    • 使用 ${} 語法來拼接

    • 可以折行

      
let a = 12;
let b = `a${a}bc`
console.log(b); // a12bc

var str = "haozhicong";
var date = "19950917";
var res = `名字是：${str},出生年月是：${date}`
console.log(res); // 名字是：haozhicong,出生年月是：19950917
7. 面向?qū)ο?/h5>

  • class關(guān)鍵字，和類分開

  • class里直接加方法

    // ES5之前的面向?qū)ο?// function Student(name, age) {
//     this.name = name;
//     this.age = age;
// }
// Student.prototype.show = function () {
//     console.log("名字是:" + this.name + "年齡是：" + this.age)
// }

// ES6面向?qū)ο髮懛?// 1. class 關(guān)鍵字
// 2. class 里面直接加方法
class Student {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    show() {
        console.log(this.name, this.age);
    }
}
var s1 = new Student('Jack', 22);
s1.show()
var s2 = new Student('Jason', 24);
s2.show()

  • extends 繼承

    class Student {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    show() {
        console.log(this.name, this.age);
    }
}

class vipStudent extends Student {
    constructor(name, age, num) {
        super(name, name) // super 指向父類
        this.num = num
    }
    shownum() {
        console.log(this.num);
    }
}
var s1 = new vipStudent('Jack', 22, 'G14190117');
s1.show()
s1.shownum()

  • ES5通過call來繼承

    function Student(name, age) {
    this.name = name;
    this.age = age;
}
Student.prototype.show = function () {
    console.log("名字是:" + this.name + "年齡是：" + this.age)
}

function vipZtudent(name, age, num) {
    Student.call(this, name, age)
    this.num = num
}
// new一下Student()
vipZtudent.prototype = new Student();
// 這里把構(gòu)造函數(shù)指向vipZtudent
vipZtudent.prototype.constructor = vipZtudent;
// vipZtudentt增加新的方法
vipZtudent.prototype.showvipZtudent = function () {
    console.log("學(xué)號是：", this.num);
}
var s1 = new vipZtudent('Jack', 22, 'G14190117');
s1.show()
s1.showvipZtudent()
8. JSON 對象

  • JSON.stringify() 把JSON轉(zhuǎn)成字符串

  • JSON.parse() 把JSON字符串轉(zhuǎn)成JSON對象

  • JSON格式

    • 只能用雙引
    • 所有的名字都必須用引號抱起來
    • { "firstName":"John" , "lastName":"Doe" }
9. Promis（解決異步）

  • 原生ajax請求

    $.ajax({
    url: "data/a.txt",
    dataType: "json",
    success: function (data) {
        console.log(data);
    },
    error: function (err) {
        console.log(err);
    }
})
$.ajax({
    url: "data/c.txt",
    dataType: "json",
    success: function (data) {
        console.log(data);
    },
    error: function (err) {
        console.log(err);
    }
})
$.ajax({
    url: "data/b.txt",
    dataType: "json",
    success: function (data) {
        console.log(data);
    },
    error: function (err) {
        console.log(err);
    }
})

  • Promise使用

    // 1. 創(chuàng)建Promise對象
let p1 = new Promise(function (resolve, reject) {
    $.ajax({
        url: "data/b.txt",
        dataType: "json",
        success: function (data) {
            resolve(data);
        },
        error: function (err) {
            reject(err);
        }
    })

})
let p2 = new Promise(function (resolve, reject) {
    $.ajax({
        url: "data/a.txt",
        dataType: "json",
        success: function (data) {
            resolve(data);
        },
        error: function (err) {
            reject(err);
        }
    })

})
let p3 = new Promise(function (resolve, reject) {
    $.ajax({
        url: "data/c.txt",
        dataType: "json",
        success: function (data) {
            resolve(data);
        },
        error: function (err) {
            reject(err);
        }
    })

})

// 2. 使用Promise
Promise.all([p1, p2, p3]).then((res) => {
    debugger
    // 這里得出的是個數(shù)組  用解構(gòu)賦值取出來
    let [a1, a2, a3] = res
    console.log(a1);
    console.log(a2);
    console.log(a3);
}, err => {
    console.log(err);
})

  • Promise.all（）的使用

    // ajax 是有返回值的  可以這樣寫
Promise.all([
    $.ajax({
        url: "data/a.txt",
        dataType: "json"
    }),
    $.ajax({
        url: "data/b.txt",
        dataType: "json"
    }),
    $.ajax({
        url: "data/b.txt",
        dataType: "json"
    })
]).then((resolve) => {
    debugger
    console.log(resolve);
}, (reject) => {
    console.log(reject);
})
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容