ES6

常用

let关键字

作用：
- 与var类似，用于声明一个变量
特点：
- 在块作用域内有效
- 不能重复声明
- 不会预处理，不存在提升
应用：
- 循环遍历加监听
- 使用let取代var是趋势

// console.log(username); 不会预处理，不存在提升
let username = 'kobe';
// let username = 'wade'; 不能重复声明
cosole.log(username)

// 未处理时，alert 出的是 3 3 3
    let btns = document。getElementByTagName('button');
    for(var i = 0; i < btns.length; i++) {
        var btn = btns[i];
        btn.onclick = function () {
            alert(i); // 3 3 3
        }
    }
// 1. 闭包处理 alert出来 0 1 2  利用闭包函数私有作用域
    let btns = document。getElementByTagName('button');
    for(var i = 0; i < btns.length; i++) {
        var btn = btns[i];
        // btn.onclick = function () {
        //     alert(i); // 3 3 3
        // }
        (function (i) {
            btn.onclick = function () {
                alert(i); // 0 1 2
            }
        })(i)
    }
// 2.let 块级作用域 alert 出来 0 1 2
    let btns = document。getElementByTagName('button');
    // var 换成 let
    // for(var i = 0; i < btns.length; i++) {
    for(let i = 0; i < btns.length; i++) {
        var btn = btns[i];
        btn.onclick = function () {
            alert(i); // 0 1 2
        }
    }

const关键字

作用：
- 定义一个常量
特点：
- 不能修改
- 其它特点同let
应用：
- 保存不用改变的数据

const KEY = 'NBA';
KEY = 'CBA';
console.log(KEY); // 报错，常量不能被修改

变量的结构赋值

理解：
- 从对象或数组中提取数据，并赋值给变量（多个）
对象的结构赋值
- let {n, a} = {n: 'tom', a: 12}
数组的解构赋值
- let [a, b] = [1, 'dfsdf'];
用途
- 给多个形参赋值

let obj = {username: 'kobe', age: 39};
// let username = obj.username;
// let age = obj.age;

// es6 解构赋值
let {username, age} = obj;
console.log(username, age)

// 数组解构赋值，对应下标取值 如果取得值在第三位，可以用逗号站位，例如 [, ,a, b]
let arr = [1, 3, 5, 'abc', true];
let [a, b, c, d, e] = arr;
console.log(a, b, c, d, e)

模板字符串

模板字符串：简化字符串的拼接
- 模版字符串必须用 `` 包含
- 变化的部分使用 ${XXX} 定义

// 之前的写法，字符串拼接
let obj = {username: 'kobe', age: 39};
let str = '我的名字叫：' + obj.username + ',我今年的年龄是：' + obj.age;
console.log(str);

// 模板字符串写法
str = `我的名字叫：${obj.username}，我今年的年龄是：${obj.age}`;
console.log(str)

简化的对象写法

// 省略同名的属性值
// 省略方法的function
/*例如：
    let x = 1;
    let y = 2;
    let point = {
        x,
        y,
        setX(x) {this.x = x}
    }
*/
// 简写之前
let username = 'kobe';
let age = 39;
let obj = {
    username: username,
    age: age,
    getName: function () {
        return this.username;
    }
};
console.log(obj);

// 简写之后
let username = 'kobe';
let age = 39;
let obj = {
    username, // 同名的属性可以省略不写
    age,
    getName () { // 可以省略函数的function
        return this.username;
    }
}; 
console.log(obj);
console.log(obj.getName());

箭头函数

作用：定义匿名函数
基本语法：
- 没有参数： () => console.log('xxxxx')
- 一个参数： i => i + 2
- 大于一个参数： (i, j) => i + j
- 函数体不用大括号：默认返回结果
- 函数体若谷有多个语句，需要用{}包围，若有需要返回的内容，需要手动返回
使用场景：多用来定义回调函数
箭头函数的特点：
1. 简介
2. 箭头函数没有自己的this，监听函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
3. 扩展理解：箭头函数的this看外层是否有函数，
  - 如果有，外层函数的this就是内部监听函数的this，
  - 如果没有，则this是window

let fun = () => console.log('我是箭头函数');
fun();
// 箭头左边形参的情况
// 1.没有形参的时候 () 不可以省略
    let fun1 = () => console.log('我是箭头函数');
    fun1()
// 2. 只有一个形参的时候 () 可以省略
    let fun2 = a => console.log(a);
    fun2('aaaa');
// 3. 两个及两个以上形参的时候 () 不可以省略
    let fun3 = (x, y) => console.log(x, y);
    fun3(25, 36);

// 箭头右边函数体的情况
// 1.函数体只有一条语句或者表达式的时候 {} 可以省略 ---> 会自动返回语句执行的结果或者表达式的结果
    let fun4 = () => console.log('我是箭头函数');
    fun4();
    /*
    let fun4 = (x, y) => x + y
    等同于
    let fun4 = (x, y) => {return x + y}
    fun4(25, 36);
    */
// 2.函数体不止一条语句或者是表达式的情况 {} 不可以省略
    let fun5 = (x, y) => { 
        console.log(x, y);
        return x + y;
    }
    fun5(34, 49);

...运算符

// 用途
// 1. rest(可变)参数
// 用来取代arguments 但比arguments灵活，只能是最后部分形参参数
    function fun(...values) {
        console.log(arguments);
        arguments.forEach(function (item, index) {
            console.log(item, index);
        });
        console.log(values);
        values.forEach(function (item, index) {
            console.log(item, index);
        });
    }
    fun(1, 2, 3);
// 2. 扩展运算符
// let arr1 = [1, 3, 5];
// let arr2 = [2, ...arr1, 6];
// arr2. push
let arr = [1, 6];
let arr1 = [2, 3, 4, 5];
arr = [1, ...arr1, 6];
console.log(arr); // [1, 2, 3, 4, 5, 6]
cosole.log(...arr); // 1 2 3 4 5 6

形参默认值

形参的默认值 --- 当不传入参数的时候默认你使用形参里的默认值

// 定义一个点的坐标的构造函数
function Point(x, y) {
    this.x = x;
    this.y = y;
}

let point = new Point(23, 35);
console.log(Point); // {x:23, y:35}

let point1 = new Point();
console.log(point1) // {x:undefined, y:undefined}

// 设置默认值
function Point(x = 0, y = 0) {
    this.x = x;
    this.y = y;
}

let point = new Point(23, 35);
console.log(Point); // {x:23, y:35}

let point1 = new Point();
console.log(point1) // {x:0, y:0}

Promise

理解
- Promise对象：代表了未来某个将要发生的事件（通常是一个异步操作）
- 有了Promise对象，可以将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数（俗称’回调地狱‘）
- ES6的promise是一个构造函数，用来生成promise实例

使用promise基本操作（2步）

创建promise对象

let promise = new Promise((resolve, reject) => {
    // 初始化promise状态为pending
    // 执行异步操作
    if(异步操作成功) {
        resolve(value); // 修改promise的状态为fullfilled
    } else {
        reject(errMsg); // 修改promise的状态为rejected
    }
})

调用promise的then

promise.then(function (
    result => console.log(result),
    errorMsg => alert(errorMsg)
))

promise对象的3个状态
- pending：初始化状态
- fullfilled：成功状态
- rejected：失败状态

应用：

使用promise实现超时处理

使用promise封装ajax请求

let request = new XMLHttpRequest();
request.onreadystatechange = function () {
}

request.responseType = 'json';
request.open("GET", url);
request.send();