工作中常用的ES6语法

1. let和const

let（变量）
- 不会重复声明
- 变量-可以修改
- 块级作用域
const（常量）
- 不会重复声明
- 常量-不可以修改
- 块级作用域

对比之前ES5的 var

可以重复声明
没有块级作用域
无法限制修改


// 经典案例 采用闭包方式来解决
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. 箭头函数

只有一个参数（）可以省略

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

// 演变箭头函数
let fn2 = a => a * 2
alert(fn2(2))

只有一个return 可以省略{ }

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

// 演变成箭头函数
var res2 = arr.sort((a, b) => a - b)
alert(res2)

3. 函数参数

函数扩展/展开（延展操作符）

收集剩余参数

// 注意args可以随便起变量名，agrs必须放在形参最后一位，否则报错。
function show(a, b, ...agrs) {
    alert(a) // 10
    alert(b) // 20
    alert(agrs) // 2,21,16
}
show(10, 20, 2, 21, 16)

展开数组

// 展开后的效果，跟直接把数组内容写在这儿一样
var num = [10,20]

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

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

// 展开数组num
show(...num)

默认参数

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. 解构赋值

左右两边结构必须一样
右边必须是个东西

声明和赋值不能分开（必须在一句话里完成）

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

// ES6结果赋值 (左右结构必须一致)
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. 数组

map（映射）一对一

// map() 方法
let arr = [10, 20, 30];
// 返或一个结果  所有的数据都会从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（汇总）一堆数据出来一个数据

// reduce() 一堆数据出来一个 
// 求数组的总和,平均数
let sums = [10, 30, 50, 80];
// reduce()里接收三个参数 分别是第一次相加的结果，得出结果的下一位数，索引
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（过滤器）按照一定的规则刷选数据

// filter 按照一定的规则 返回 一些结果
let goods = [{
    name: "电脑",
    price: 10000
},
             {
                 name: "电视",
                 price: 5000
             },
             {
                 name: "投影仪",
                 price: 8000
             },
            ]
// 接收一个参数
let getFilter = goods.filter(item => {
    if (item.price >= 6000) {
        return item
    }
})
console.log(getFilter); //{name: "电脑", price: 10000} {name: "投影仪", price: 8000}

forEach（循环、迭代）

// forEach 循环
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() 以什么结尾

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. 面向对象

class关键字，和类分开

class里直接加方法

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

// ES6面向对象写法
// 1. class 关键字
// 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();
// 这里把构造函数指向vipZtudent
vipZtudent.prototype.constructor = vipZtudent;
// vipZtudentt增加新的方法
vipZtudent.prototype.showvipZtudent = function () {
    console.log("学号是：", this.num);
}
var s1 = new vipZtudent('Jack', 22, 'G14190117');
s1.show()
s1.showvipZtudent()

8. JSON 对象

JSON.stringify() 把JSON转成字符串
JSON.parse() 把JSON字符串转成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. 创建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
    // 这里得出的是个数组  用解构赋值取出来
    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);
})