【无标题】

1.let 关键字

let关键字用来声明，使用let声明的变量有几个特点：

1 .不允许重复声明

2.块儿级作用域

3.不存在变量提升

4.不影响作用域链

在这里插入 // let 声明
    // console.log(a);//error
    let a = 10;
    // let a = false;//不可重复声明 并且会报错
    if (true) {
        let b = 10;
    }
    // console.log(b);//error:b is not defined
    // for (let index = 0; index < 10; index++) {}//index is not defined
    console.log(index);代码片

应用场景：以后声明变量用let就可以

2.const 关键字

const关键字用来声明常量，const声明有一下特点：

1.声明必须赋初始值

2.标识符一般为大写

3.不允许重复声明

4.值不允许修改

5.块级作用域

`javascript
 //基本类型
    // 1.不可变量提升
    // console.log(a);//报错
    // 2.必须有初始值
    const a = 10;
    // 3.基本类型值不可以修改
    // a = 20;//报错
    // 4.块级作用域
    if (true) {
        const x = 'hello,world';
    }
    // 5.不能重复定义
    // console.log(x)//报错 x  is not defined;
    // for (const index = 0; index < 10; index++) {
    //     // const v = 10;
    // }

    //引用类型(可重复声明，可修改值)
    const obj = {
        name: 'asd',
        age: 20,
    };
    obj.name = '张三';
    obj.height = 180;
    const arr = [1, 2, 3, 4, 5];
    arr[1] = 10
    console.log(obj, arr);

注意: 对象属性修改和数组元素变化不会触发 const 错误
应用场景：声明对象、数组类型、以及常量时使用 const，非对象类型声明选择 let
**

3.变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

在这里插 //数组的解构赋值：将数组中的元素安装顺序取出来,通过=赋默认值
    const arr = ['张学友', '刘德华', '黎明', '郭富城'];
    const [a, b, c, d, e = '郭星楠'] = arr
    console.log(a, b, c, d, e);

    对象的解构赋值:通过属性名进行解构赋值,=默认值
    const lin = {
        name: '林志颖',
        tags: ['车手', '歌手', '小旋风', '演员'],
    };
    const {
        tags,
        name,
        age = 20
    } = lin;
    console.log(tags, name, age);
    //复杂结构
    const wangfei = {
        name: '王菲',
        age: 18,
        songs: ['红豆', '流年', '暧昧', '传奇'],
        history: [{
            name: '窦唯'
        }, {
            name: '李亚鹏'
        }, {
            name: '谢霆锋'
        }],
    };
    let {
        songs: [one, two, three],
        history: [first, second, third],
    } = wangfei;
    console.log(one, two, three);入代码片

注意：频繁使用对象方法、数组元素，就可以使用解构赋值形式

4模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：

• 字符串中可以出现换行符
• 可以使用 ${xxx} 形式输出变量

在这  // 定义字符串
    let str = `<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>魏翔</li>
<li>艾伦</li>
</ul>`; // 变量拼接
    let star = '王宁';
    let result = `${star}在前几年离开了开心麻花`;里插入代码片

5简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁

在这里插入    const name = 'zhangsan';
    const age = 20;
    const sayHi = function () {
        console.log('hi');
    };
    // const person = {
    //     name: name,
    //     age: age,
    //     sayHi: sayHi,
    // };
    // 对象简写
    const person = {
        name,
        age,
        sayHi,
        sayHello() {
            console.log('hello');
        }
    };
    console.log(person);代码片

注意：对象简写形式简化了代码，所以以后用简写就对了

6 箭头函数

ES6 允许使用「箭头」（=>）定义函数
箭头函数的注意点:

• 如果形参只有一个，则小括号可以省略
• 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
• 箭头函数 this 指向声明时所在作用域下 this 的值
• 箭头函数不能作为构造函数实例化
• 不能使用 arguments
  （1）.箭头函数的基本写法

在这里插入代 //普通函数
    const b = function () {
        console.log('b');
    };
    b();
    //箭头函数基本写法
    const a = () => {
        console.log('a');
    };
    a();码片

（2）箭头函数的参数问题

 // 1.箭头函数 没有参数:()不可以取消
    const a = () => {
        console.log('a');
    };
    //2.箭头函数有一个参数：()可以省略
    const b = m => {
        console.log('b:', m);
    };
    b('hi');
    //3.多个参数（）不可以省略
    const c = (x, v) => {
        console.log('c', x, v);
    }
    c('hi');

（3）.箭头函数的返回值问题

在这里插入代 const sum = (a, b) => {
        return a + b;
    }
    //当方法体只有一行，{}可以省略 有return必须省略不写
    const foo = (a, b) => console.log(a + b);
    const vb = (a, b) => a + b;
    console.log(sum(10, 20));
    foo(1, 2);
    console.log(vb(12, 12));码片

（4）.箭头函数的this

const obj = {
        name: 'zhangsan',
        sayHi() {
            console.log(this); //this指向obj
            console.log(this.name + 'hi');
            //普通函数
            setTimeout(function () {
                console.log(this); //this指向window
            }, 1000);

            // 箭头函数
            setTimeout(() => {
                console.log(this); //这个this没有指向，使用的是外部this obj
            }, 1000);
        },
    };
    obj.sayHi();

注意：箭头函数不会更改 this 指向，用来指定回调函数会非常合适

（5）.Auguments.参数列表

在这里插入代码// arguments 获取参数列表,在不定参数个数情况下使用
    //普通函数
    function foo() {
        console.log(arguments);
    };
    foo(1, 2, 3, 4, 5);
    //箭头函数不可以使用arguments
    // const bar = () => {
    //     console.log(arguments); //报错
    // };
    // bar(1, 2, 3, 4, 5);片

7.rest 参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments

在这里插入// 作用和arguments类似
    //...args展开参数列表
    function add(...args) {
        console.log(args);
    };
    add(1, 2, 3, 4, 5);
    //rest 参数必须是最后一个形参
    function minus(a, b, ...args) {
        console.log(a, b, ...args);
    }
    minus(100, 1, 2, 3, 4, 5, 19);代码片

8.spread 扩展运算符

扩展运算符（spread）也是三个点（…）

spread 运算符|扩展运算符|三点运算符

在这里插入 // spread 运算符|扩展运算符|三点运算符：展开
    //展开数组
    const arr1 = ['a', 'b', 'c'];
    const arr2 = [...arr1, 'd', 'e', 'f'];
    console.log(arr2);
    //展开对象
    const obj = {
        name: 'guan',
        age: 20,
        height: 200,
    };
    const person = {
        ...obj,
        sayHi() {
            console.log('hi');
        },
        age:18,
    };
    console.log(person);代码片

9.回调地狱

在这//回调地狱 一层一层往下套
    //登录
    ajax({
        url: '//login',
        method: 'POST',
        date: {
            id: '',
            phone: '',
            password: '',
        },
        header: {
            'Content-Type': 'application/json',
        },
        success(response) {},
        //登陆成功的结果 response
        //获取用户的角色，管理员，普通用户
    });
    ajax({
        url: '/getRole',
        date: {
            id: response.id, //用户id
            phone: '',
            password: '',
        },
        header: {
            'Content-Type': 'application/json',
        },
        success(response) {},
        //管理员
        //获取管理员的菜单列表
    });
    ajax({
        url: '/getMenu',
        date: {
            id: response.role, //用户角色
            phone: '',
            password: '',
        },
        header: {
            'Content-Type': 'application/json',
        },
        success(response) {
            // response 菜单列表
        },
    });
    //使用回调函数耦合度太高
    //原则：低耦合，高内聚，职责单一
    //回调函数
    function login() {
        ajax({
            url: '//login',
            method: 'POST',
            date: {
                id: '',
                phone: '',
                password: '',
            },
            header: {
                'Content-Type': 'application/json',
            },
            success(response) {
                getRole(response)
            },
            //登陆成功的结果 response
            //获取用户的角色，管理员，普通用户
        });
    }
    //获取角色
    function getRole() {
        ajax({
            url: '/getRole',
            date: {
                id: response.id, //用户id
                phone: '',
                password: '',
            },
            header: {
                'Content-Type': 'application/json',
            },
            success(response) {
                getRole(response)
            },
            //管理员
            //获取管理员的菜单列表
        });
    }
    //获取菜单
    function getMenu() {里插入代码片

10.promise

• Promise 是 ES6 引入的异步编程的新解决方案
• 语法上 Promise 是一个构造函数， 用来封装异步操作并可以获取其成功或失败的结果。
• Promise 构造函数: Promise (excutor) {}
• Promise.prototype.then 方法
• Promise.prototype.catch 方法

在这里插入代//创建promise对象
    // new promise(callback(resolve,reject))
    // resolve,reject 是两个回调函数 resolve（成功的结果）reject（失败的结果）
    const p1 = new Promise((resolve, reject) => {
        const num = Math.floor(Math.random() * 100);
        if (num % 2 === 0) {
            resolve(num + '是偶数');
        } else {
            reject(num + '是奇数');
        }
    });
    //成功走then
    //失败走catch
    p1.then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })码片

---

promise.all

---

在这里插const p1 = new Promise((resolve, reject) => {
        const num = Math.floor(Math.random() * 100);
        if (num % 2 === 0) {
            resolve(num + '是偶数 p1');
        } else {
            reject(num + '是奇数 p1');
        }
    });
    const p2 = new Promise((resolve, reject) => {
        const num = Math.floor(Math.random() * 100);
        if (num % 2 === 0) {
            resolve(num + '是偶数 p2');
        } else {
            reject(num + '是奇数 p2');
        }
    });
    // 并发 当p1,p2都是偶数then,有一个为奇数则catch
    Promise.all([p1, p2]).then(res => {
            console.log(res);
        })
        .catch(err => {
            console.log(err);
        });

---

promise.race

---

在这里插 // Promise.race 两个promise谁先返回，则结果就是他，无关乎成功和失败
    Promise.race([p1, p2]).then(res => {
            console.log(res);
        })
        .catch(err => {
            console.log(err);
        });入代码片