大型商城:前端知识补充-ES6

Es6

ES6是js的规范，比如jdk8是java的规范

vscode新建HTML文件，shift+！回车，快速生产HTML的模板

let 与 const

1.let不会作用到{}外，var会越域跳到{}外

    <script>
         {
             var a = 1;
             let b = 2;
         }
         console.log(a);  // 1
         console.log(b);  // ReferenceError: b is not defined
    </script>

2.var可以多次声明同一变量，let会报错

         var m = 1
         var m = 2
         let n = 3
//         let n = 4
         console.log(m)  // 2
         console.log(n)  // Identifier 'n' has already been declared

3.var定义之前可以使用，let定义之前不可使用。（变量提升问题）

         console.log(x);  // undefined
         var x = 10;
         console.log(y);   //ReferenceError: y is not defined
         let y = 20;

const

1. const声明之后不允许改变 ，一但声明必须初始化，否则会报错

       const a = 1;
        a = 3; //Uncaught TypeError: Assignment to constant variable.

解构表达式

1.数组解析

        let arr = [1,2,3];
        // // let a = arr[0];
        // // let b = arr[1];
        // // let c = arr[2];

        let [a,b,c] = arr;
        console.log(a,b,c)

2.对象解析

        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        //         const name = person.name;
        //         const age = person.age;
        //         const language = person.language;

        //对象解构 // 把name属性变为abc，声明了abc、age、language三个变量
        const { name: abc, age, language } = person;
        console.log(abc, age, language)

 字符串扩展

        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

//字符串模板 ``可以定义多行字符串 （直接输出HTML）（`` 在键盘左上角 esc 下面）

        let ss = `<div>
                    <span>hello world<span>
                </div>`;
        console.log(ss);

变量名写在 ${}

       function fun() {
            return "这是一个函数"
        }

        // 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
        let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;
        console.log(info);

函数优化

1.支持函数形参默认值 function add2(a, b = 1)

        //在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
        function add(a, b) {
            // 判断b是否为空，为空就给默认值1
            b = b || 1;
            return a + b;
        }
        // 传一个参数
        console.log(add(10));

        //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
        function add2(a, b = 1) {
            return a + b;
        }
        console.log(add2(20));

2.支持不定参数 function fun(...values)

        function fun(...values) {
            console.log(values.length)
        }
        fun(1, 2)      //2
        fun(1, 2, 3, 4)  //4

3.支持箭头函数 var print = obj => console.log(obj);

        //以前声明一个方法
        // var print = function (obj) {
        //     console.log(obj);
        // }
        var print = obj => console.log(obj);
        print("hello");
 // 例子1
        var sum2 = (a, b) => a + b;
        console.log(sum2(11, 12));
////箭头函数+解构
        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

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

       var hello = ( parm ) => console.log( "hello," + parm.name );
       hello(person);  // 将person传给parm
       //+解构
        var hello2 = ({name}) => console.log("hello," +name);
        hello2(person);

对象优化

1.可以获取map的键值对等Object.keys()、values、entries

    <script>
    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)]
</script>

2.Object.assgn(target,source1,source2) 合并

        const target  = { a: 1 };
        const source1 = { b: 2 };
        const source2 = { c: 3 };

        Object.assign(target, source1, source2);         //{a:1,b:2,c:3}

3.如果属性名和属性值的变量名相同，可以省略const person2 = { age, name } 代表age属性的值是变量age的值

        const age = 23
        const name = "张三"
        const person1 = { age: age, name: name }
        // 等价于
        const person2 = { age, name }//声明对象简写
        console.log(person2); //{age: 23, name: '张三'}

4.对象的函数属性简写

        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);
            }
        }

        person3.eat("香蕉");
        person3.eat2("苹果")
        person3.eat3("橘子");

5.对象拓展运算符     使用“...p1”为拷贝p1对象

        // 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)

map和reduce

map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

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

reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，

更多可以参考博客:https://blog.csdn.net/seimeii/article/details/121614775

• 1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
  2、currentValue （数组中当前被处理的元素）
  3、index （当前元素在数组中的索引）
  4、array （调用 reduce 的数组）

<script>
var  arr = [1, 2, 3, 4, 5];
sum = arr.reduce(function(prev, cur, index, arr) {
     //输出的是第一项的值或上一次叠加的结果，正在被处理的元素，正在被处理的元素的索引值
     console.log(prev, cur, index);  
     return prev + cur;
})
console.log(arr, sum); //输入数组本身和最后的结果
</script>

    <script>
        let arr = [1, 20, -5, 3];
        let result = arr.reduce((a,b)=>{
            console.log("上一次处理后："+a);
            console.log("当前正在处理："+b);
            return a + b;
        },100);    //100是处理器前给的默认值，不给就是按照数组的第一个值开始计算
        console.log(result)
    </script>

promise

优化异步操作。封装ajax

{
    "id": 1,
    "name": "zhangsan",
    "password": "123456"
}

{
    "id": 10,
    "name": "chinese"
}

{
    "id": 100,
    "score": 90
}

场景：请求user得到id为1，继续请求user_corse_1(user_corse_{id}),得到id为10，继续请求corse_score_10

<script>
    //1、查出当前用户信息
    //2、按照当前用户的id查出他的课程
    //3、按照当前课程id查出分数
     $.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);
         }
     });
</script>

        //1、Promise可以封装异步操作
        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)=>{ //失败的话catch
                console.log("出现异常",err)
            });

模块化import/export

• export用于规定模块的对外接口
• import用于导入其他模块提供的功能

user.js   导出name和age和方法add

var name = "jack"
var age = 21
function add(a,b){
    return a + b;
}
// 导出变量和函数
export {name,age,add} // `export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。

main.js  导入刚刚导入的变量和对象

import {name,add} from "./user.js"

abc.sum(1,2);
console.log(name);

如果导出一个未命名的方法 如下，那么导入的时候可以重命名import abc from "./xxx.js"

export default {
    sum(a, b) {
        return a + b;
    }