一、定义变量

<script>
    // var 声明变量全局
    // let 声明变量为作用域
    {
        var a = 1;
        let b = 2;
    }
    console.log(a);
    // 打印 not defined 未定义
    console.log(b);

    // var 可以声明多次变量
    // let 只能声明一次变量
    var n = 1;
    var n = 2;
    let m = 3;
    // 会提示 has already been declared 已经定义过了
    let m = 4;

    // var 会变量提升
    // let 不会变量提升
    // undefined
    console.log(x);
    var x = 1;
    // Cannot access 'y' before initialization
    console.log(y);
    let y = 2;

    // const 声明变量后不允许改变,必须初始化
    const q = 1;
    // Assignment to constant variable.
    q = 3;
</script>

二、结构表达式

<script>
    // 1. 数组结构
    // 定义一个数组
    let arr = [1,2,3];
    // 正常赋值
    let a = arr[0];
    let b = arr[1];
    let c = arr[2];
    // 输出 1 2 3
    console.log(a,b,c);
    // let赋值
    let [a,b,c] =arr;
    // 输出 1 2 3
    console.log(a,b,c);

    // 2.对象结构
    // 定义一个对象
    const person = {
        name: "小强崽",
        age: 18,
        language: ["java","vue","shell"]
    }
    // 赋值
    const name = person.name;
    const age = person.age;
    const language = person.language;
    // 小强崽 18 ["java", "vue", "shell"]
    console.log(name,age,language);
    // 对象结构赋值,冒号代表将原对象的字段改成新的字段
    const {name:newName,age,language} = person;
    // 小强崽 18 ["java", "vue", "shell"]
    console.log(newName,age,language);

    // 3. 字符串扩展
    let  str = "xiao.qiang";
    // true
    console.log(str.startsWith("xiao"));
    // true
    console.log(str.endsWith("qiang"));
    // true
    console.log(str.includes("g"));
    // true
    console.log(str.includes("qiang"));

    // 4. 字符串模板
    let template = `<div>
            <span>字符串模板</span>
        </div>`;
    console.log(template);
    
    // 5. 字符串插入变量和表达式
    const person = {
        name: "小强崽",
        age: 18,
        language: ["java","vue","shell"]
    }
    const {name:newName,age,language} = person;
    function fun(){
        return "今天也是充满希望的一天！";
    }
    let info = `我是${newName},今年${age+10}岁,我觉得${fun()}`
    // 我是小强崽,今年28岁,我觉得今天也是充满希望的一天！
    console.log(info);
</script>

三、箭头函数

<script>
    // 1、默认传值
    // ES6以前的写法
    function add1(a,b){
        // 判断b是否为空，为空则给默认值1;
        b = b || 1;
        return a + b;
    }
    // 只传一个参数，b的默认值为空
    // 11
    console.log(add1(10));
    // 30
    console.log(add1(10,20));
    // ES6的写法,直接给参数默认值，为空则使用默认值
    function add2(a,b=1){
        return a + b;
    }
    // 11
    console.log(add2(10));
    // 30
    console.log(add2(10,20));

    // 2、不定参数
    function fun1(...values){
        console.log(values.length)
    }
    // 2
    fun1(1,2);
    // 6
    fun1(1,2,3,4,5,6);

    // 3、箭头函数
    // ES6以前的写法
    var print1 = function(obj){
        console.log(obj);
    }
    // hello
    print1("hello");
    // ES6的写法
    var print2 = obj => console.log(obj);
    // world
    print2("world");
    // ES6以前的写法
    var sum1 = function(a,b){
        c = a+ b;
        return a+c;
    }
    // 4
    console.log(sum1(1,2));
    // ES6的写法
    var sum2 = (a,b) => a+b;
    // 3
    console.log(sum2(1,2));
    var sum3 = (a,b) => {
        c = a+b;
        return a+c;
    }
    // 4
    console.log(sum3(1,2));
    // 定义一个对象
    const person = {
        name: "小强",
        age: 18,
        language: ["java","vue","shell"]
    }
    // ES6以前的写法
    function fun2(person){
        console.log("姓名:"+person.name)
    }
    // 姓名:小强
    fun2(person);
    // ES6的写法
    var fun3 = (param) => console.log("年龄:"+param.age);
    // 年龄:18
    fun3(person);
    // 语言:java,vue,shell      如果只需要指定的字段，直接参数输入字段的名即可
    var fun4 = ({language}) => console.log("语言:"+language);
    fun4(person);
</script>

四、对象优化

<script>
    // 1、ES6新的API
    const person = {
        name: "小强",
        age: 18,
        language: ["java","vue","shell"]
    }
    // ["name", "age", "language"]
    console.log(Object.keys(person));
    // ["小强", 18, Array(3)]
    console.log(Object.values(person));
    // [Array(2), Array(2), Array(2)]   ["name", "小强"] ["age", 18] ["language", Array(3)]
    console.log(Object.entries(person));
    // 对象合并
    const target = {a:1};
    const source1 = {b:2};
    const source2 = {c:3};
    Object.assign(target,source1,source2);
    // {a: 1, b: 2, c: 3}
    console.log(target);
    // {b: 2}
    console.log(source1);

    // 2、声明对象简写
    const name="小强";
    const age=18;
    const language=["java","vue","shell"]
    // ES6以前的写法
    const person1 = {name:name,age:age,language:language};
    // {name: "小强", age: 18, language: Array(3)}
    console.log(person1);
    // ES6的写法，当需要定义的字段跟已定义的参数一样，可以简写
    const person2 = {name,age,language}
    // {name: "小强", age: 18, language: Array(3)}
    console.log(person2);

    // 3、对象的函数属性简写
    let person3 = {
        name: "小强",
        // ES6以前的写法
        eat1: function(food){
            console.log(this.name + "在吃" + food);
        },
        // ES6的写法，箭头函数不能使用this，要使用对象.属性
        eat2: food => console.log(person3.name + "再吃" + food ),
        // 可以使用this
        eat3(food){
            console.log(this.name + "再吃" + food );
        }
    }
    // 小强在吃苹果
    person3.eat1("苹果");
    // 小强再吃香蕉
    person3.eat2("香蕉");
    // 小强再吃芒果
    person3.eat3("芒果");

    // 4、对象拓展运算符
    // 4.1 拷贝对象
    let person4 = {name:"小强","age":18};
    let someone = {...person4};
    // {name: "小强", age: 18}
    console.log(someone);
    // 4.2 合并对象
    let person5 = {name:"小强"};
    let person6 = {age:18};
    let person7 = {name:"张三"};
    // {name: "小强", age: 18}  会把原来的属性值给替换掉 张三》小强
    person7 = {...person5,...person6}
    console.log(person7);
</script>

五、map和reduce

<script>
    // 1、map
    let arr1 = ["1","23","77","-3"];
    arr1 = arr1.map(item => {
        return item*2;
    })
    // [2, 46, 154, -6]
    console.log(arr1);
    let arr2 = ["1","23","77","-3"];
    arr2 = arr2.map(item => item*2);
    // [2, 46, 154, -6]
    console.log(arr2);

    // 2、reduce
    /** 
     * reduce()方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
     * arr3.reduce(callback,[initiaValue]) 
     */
    let arr3 = [1,24,11,4];
    let result = arr3.reduce((a,b)=>{
        console.log("上一次处理后:"+a);
        console.log("当前正在处理:"+b);
        return a+b;
    },100);
    /**
    * 上一次处理后:100 
    * 当前正在处理:1
    * 上一次处理后:101
    * 当前正在处理:24
    * 上一次处理后:125
    * 当前正在处理:11
    * 上一次处理后:136
    * 当前正在处理:4
    */
    console.log(result);
</script>

六、promise

user.json

{
    "//":"用户信息",
    "id":1,
    "name":"qiang",
    "password":"123456"
}

user_corse_1.json

{
    "//":"课程信息",
    "id":10,
    "name":"chinese"
}

corse_score_10.json

{
    "//":"课程得分信息",
    "id":10,
    "socre":90
}

promise.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>promise</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
</head>

<body>
    <script>
        // 需求1、查询当前用户信息
        // 需求2、按照当前用户的id查出课程
        // 需求3、按照当前的课程查出分数

        // 写法1、ES6以前的写法
        $.ajax({
            url: "mock/user.json",
            success(dataUser) {
                console.log("查询用户成功：", dataUser);
                $.ajax({
                    url: `mock/user_corse_${dataUser.id}.json`,
                    success(dataCorse) {
                        console.log("查询课程成功：", dataCorse);
                        $.ajax({
                            url: `mock/corse_score_${dataCorse.id}.json`,
                            success(dataCorseScore) {
                                console.log("查询分数成功：", dataCorseScore);
                            },
                            error(errorCorseScore) {
                                console.log("查询分数异常：", errorCorse);
                            }
                        })
                    }, error(errorCorse) {
                        console.log("查询课程异常：" + errorCorse);
                    }
                })
            },
            error(errorUser) {
                console.log("查询用户异常：" + errorUser);
            }
        });
        
        // 写法2、promise写法，封装异步操作
        let p = new Promise((resolve, reject) => {
            // 异步操作
            $.ajax({
                url: "mock/user.json",
                success: function (dataUser) {
                    console.log("查询用户成功：", dataUser);
                    resolve(dataUser);
                },
                error: function (errorUser) {
                    console.log("查询用户异常：" + errorUser);
                    reject(errorUser);
                }
            });
        });
        // promise成功后返回的数据继续操作
        p.then((dataUser) => {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: `mock/user_corse_${dataUser.id}.json`,
                    success: function (dataCorse) {
                        console.log("查询课程成功：", dataCorse);
                        resolve(dataCorse);
                    },
                    error: function (errorCorse) {
                        console.log("查询课程异常：" + errorCorse);
                        reject(errorCorse);
                    }
                });
            })
        }).then((dataCorse) => {
            $.ajax({
                url: `mock/corse_score_${dataCorse.id}.json`,
                success: function (dataCorseScore) {
                    console.log("查询分数成功：", dataCorseScore);
                },
                error: function (errorCorseScore) {
                    console.log("查询分数异常：" + errorCorseScore);
                }
            });
        });

        // 写法3、封装promise方法
        function get(url, data) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    data: data,
                    success: function (data) {
                        // 将成功数据继续往下传
                        resolve(data);
                    },
                    error: function (err) {
                        // 将失败数据返回
                        reject(err);
                    }
                });
            });
        }
        // 调用方法
        get("mock/user.json")
            .then((dataUser) => {
                console.log("查询用户成功：", dataUser);
                return get(`mock/user_corse_${dataUser.id}.json`);
            })
            .then((dataCorse => {
                console.log("查询课程成功：", dataCorse);
                return get(`mock/corse_score_${dataCorse.id}.json`);
            }))
            .then((dataCorseScore) => {
                console.log("查询分数成功：", dataCorseScore);
            })
            .catch((err) => {
                console.log("出现异常!");
            })
    </script>
</body>

</html>

result

七、模块化

hello.js

// const util = {
//     sum(a, b) {
//         return a + b;
//     }
// }

// 默认导出，可以导入的时候填写任意名字
export default {
    sum(a,b){
        return a+b;
    }
}

// 导出，export可以导出基本类型变量，函数，数组，对象
export {util}

user.js

var name = "小强";
var age = 18;
function add(a, b) {
    return a+b;
}

// 导出
export {name,add}

main.js

// 导入
import abc from "./hello.js"
import {name,add} from "./user.js"

abc.sum(4,5);
console.log(name);
add(5,4);