day3 ES6基础

1)let & var

1.var可以多次声明变量 let不行
   例：let a=1;let a=2;报错
2.var可作用到{}外 let不行
    例: {let a=1;}console.log(a);取不到a值
3.var定义之前可以使用，let定义之前不可使用
    例：console.log(a);var a=1; //undefined;
       console.log(b);var b=1; //ReferenceError: y is not defined

2）const

变量一旦声明不能改变
    例子：const a=1;a=2;//报错

3）解构

1）数组解构
例子：
let arr=[1,2,3];
//把数组arr值分别赋予给a b c
js中let arr=d[0]; let b=d[1]; let c=d[2];
es6中 let[a,b,c]=arr;

2)对象解构
例子:
const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
//同上例 把对象person值赋予其它变量
js中 const name = person.name;...
es6中 const { name, age, language } = person;//默认赋予变量名称就是对象中的key
        const { name: abc, age, language } = person; //若要赋予变量名称自定义用name: abc 即变量名称为abc

3）字符串扩展
例子：
        let str = "hello.vue";
        console.log(str.startsWith("hello"));//true
        console.log(str.endsWith(".vue"));//true
        console.log(str.includes("e"));//true
        console.log(str.includes("hello"));//true

4）字符串模板
   1）反引号
    //js中字符串中出现回车等符号需要转换
    //es6中可以用反引号`处理
     let ss = `<div>
                    <span>hello world<span>
                </div>`;
    2）字符串可以插入变量和方法
     //js中字符串插入变量需要拼接 
     //es6可以通过${}插入变量和方法 
      例子：
        let abc="me";
        let age=10;
        function fun() {
            return "这是一个函数"
        }
        let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;

4）函数优化

1）为函数参数设默认值
    例子：
//js
    function add(a, b) {
            // 判断b是否为空，为空就给默认值1
            b = b || 1;
            return a + b;
        }
    // 传一个参数
        console.log(add(10));

//es6
    function add2(a, b = 1) {
            return a + b;
        }
        console.log(add2(20));

2)不定参数
例子：
    function fun(...values) {
            console.log(values.length)
        }
        fun(1, 2)      //2
        fun(1, 2, 3, 4)  //4

3）箭头函数=> 类似lambda
    1）// var print = function (obj) {
        //     console.log(obj);
        // }
        var print = obj => console.log(obj);
        print("hello");
    
    2) const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

        function hello(person) {
            console.log("hello," + person.name)
        }

        //箭头函数+解构
        var hello2 = ({name}) => console.log("hello," +name);
        hello2(person);

5）对象优化

1）一些对象处理的api
const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
console.log(Object.keys(person));//["name", "age", "language"]
console.log(Object.values(person));//["jack", 21, Array(3)]      console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]

        const target = { a: 1 };
        const source1 = { b: 2 };
        const source2 = { c: 3 };
        //{a:1,b:2,c:3}将对象合并到target
        Object.assign(target, source1, source2);
        console.log(target);

2）声明对象简写
const age = 23
        const name = "张三"
        const person1 = { age: age, name: name }

        const person2 = { age, name }
        console.log(person2);

3）对象的函数属性简写
let person3 = {
            name: "jack",
            // 以前：
            eat: function (food) {
                console.log(this.name + "在吃" + food);
            },
            //箭头函数this不能使用，对象.属性
            eat2: food => console.log(person3.name + "在吃" + food),
            eat3(food) {
                console.log(this.name + "在吃" + food);
            }
        }

4）对象拓展运算符
1、拷贝对象（深拷贝）
        let p1 = { name: "Amy", age: 15 }
        let someone = { ...p1 }
        console.log(someone)  //{name: "Amy", age: 15}
2、合并对象
        let age1 = { age: 15 }
        let name1 = { name: "Amy" }
        let p2 = {name:"zhangsan"}
        p2 = { ...age1, ...name1 } 
        console.log(p2)

6）map和reduce

1.map
let arr = ['1', '20', '-5', '3'];       
        //map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
        //  arr = arr.map((item)=>{
        //     return item*2
        //  });
         arr = arr.map(item=> item*2);
         console.log(arr);

2.reduce
let arr=[2, 40, -10, 6];
let result = arr.reduce((a,b)=>{
            console.log("上一次处理后："+a);
            console.log("当前正在处理："+b);
            return a + b;
        },100);
        console.log(result);
打印：
            上一次处理后：100
1.html:46 当前正在处理：2
1.html:45 上一次处理后：102
1.html:46 当前正在处理：40
1.html:45 上一次处理后：142
1.html:46 当前正在处理：-10
1.html:45 上一次处理后：132
1.html:46 当前正在处理：6
    

7）Promise 封装ajax异步操作

例子：先查用户信息 再根据用户信息查课程 再根据课程查分数
//js中
        // $.ajax({
        //     url: "mock/user.json",
        //     success(data) {
        //         console.log("查询用户：", data);
        //         $.ajax({
        //             url: `mock/user_corse_${data.id}.json`,
        //             success(data) {
        //                 console.log("查询到课程：", data);
        //                 $.ajax({
        //                     url: `mock/corse_score_${data.id}.json`,
        //                     success(data) {
        //                         console.log("查询到分数：", data);
        //                     },
        //                     error(error) {
        //                         console.log("出现异常了：" + error);
        //                     }
        //                 });
        //             },
        //             error(error) {
        //                 console.log("出现异常了：" + error);
        //             }
        //         });
        //     },
        //     error(error) {
        //         console.log("出现异常了：" + error);
        //     }
        // });


//使用Promise可以封装异步操作 resolve是成功时操作 reject失败时
// let p = new Promise((resolve, reject) => {
        //     //1、异步操作
        //     $.ajax({
        //         url: "mock/user.json",
        //         success: function (data) {
        //             console.log("查询用户成功:", data)
        //             resolve(data);
        //         },
        //         error: function (err) {
        //             reject(err);
        //         }
        //     });
        // });

        // p.then((obj) => {
        //     return new Promise((resolve, reject) => {
        //         $.ajax({
        //             url: `mock/user_corse_${obj.id}.json`,
        //             success: function (data) {
        //                 console.log("查询用户课程成功:", data)
        //                 resolve(data);
        //             },
        //             error: function (err) {
        //                 reject(err)
        //             }
        //         });
        //     })
        // }).then((data) => {
        //     console.log("上一步的结果", data)
        //     $.ajax({
        //         url: `mock/corse_score_${data.id}.json`,
        //         success: function (data) {
        //             console.log("查询课程得分成功:", data)
        //         },
        //         error: function (err) {
        //         }
        //     });
        // })


//进一步封装类
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((data) => {
                console.log("用户查询成功~~~:", data)
                return get(`mock/user_corse_${data.id}.json`);
            })
            .then((data) => {
                console.log("课程查询成功~~~:", data)
                return get(`mock/corse_score_${data.id}.json`);
            })
            .then((data)=>{
                console.log("课程成绩查询成功~~~:", data)
            })
            .catch((err)=>{
                console.log("出现异常",err)
            });

8）模块化 //就是调用其它类的方法/变量

1）
user.js//导出
var name = "jack"
var age = 21
function add(a,b){
    return a + b;
}
// 导出变量和函数
export {name,age,add}


main.js//导入 import{}中变量名称与export{}中的变量名称需一致
import {name,add} from "./user.js"
console.log(name);
add(1,3);

2）export default可以重命名
// 导出后可以重命名
hello.js
export default {
    sum(a, b) {
        return a + b;
    }
}

main.js
import abc from "./hello.js"
abc.sum(1,2);