ES6语法

admin
2022-03-06 / 0 评论 / 73 阅读 / 正在检测是否收录...

ES6语法

一、let

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // {
        //     //var 声明的变量往往会跨域
        //     //let 声明的变量有严格局部作用域
        //     var a = 1;
        //     let b = 2;

        // }
        // console.log(a);  //1
        // console.log(b);  //Uncaught ReferenceError: b is not defined
        


        // //var 可以声明多次
        // //let 只能声明一次
        // var m = 3;
        // var m = 4;
        // let n = 5;
        // // let n=5;
        // console.log(m); //3
        // console.log(n); //Identifier 'n' has already been declared


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

        // // const 用于定义常量
        // //1、声明之后不允许改变。
        // //2、一旦声明必须初始化,否则会报错
        // const a = 1;
        // a = 3; //Assignment to constant variable.


    </script>
</body>
</html>

二、解构表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // //数组结构
        // 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);



        // //对象结构
        // const person = {
        //     name: "jack",
        //     age: 21,
        //     language: ['java','js','css']
        // }

        // // const name = person.name;
        // // const age = person.age;
        // // const language = person.language;
        // //新语法
        // const {name:abc, age, language} = person;
        // console.log(abc,age,language);




        // //字符串扩展
        // let str ="hello.vue";
        // console.log(str.startsWith("hello"));
        // console.log(str.endsWith(".vue"));
        // console.log(str.includes("e"));
        // console.log(str.includes("hello"));




        // //字符串模板
        // let ss = 
        //         `
        //         <div>
        //             <span>Hello World</span>
        //         </div>
        //         `;
        // console.log(ss);


        //字符串插入变量和表达式。变量名写在${}中,在${}中可以放入JavaScript表达式。注意符号是·不是单引号
        function fun(){
            return "这是一个函数";
        }
        let abc = "zhangsan";
        let age = 20;
        let info = `我是${abc},今年${age+10}岁了,我想说:${fun()}`;
        console.log(abc,age,info);
        
    </script>

</body>
</html>

三、函数优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // //在SE6,我们无法给一个函数参数设置默认值,只能采用变通写法;
        // function add(a, b){
        //     //判断是否为空,为空就给默认值1
        //     b = b || 1;
        //     return a + b;
        // }

        // console.log(add(10));

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

        // console.log(add2(10));

        


        // //不定参数
        // function fun(... values){
        //      console.log(values.length);
        // }
        // console.log(fun("1111","22",33));




        // //箭头函数
        // // var print = function (obj){
        // //     console.log(obj);
        // // }
        // // console.log(print("Hello"));

        // //现在写法,一个参数
        // var print = obj => console.log(obj);
        // print("China")

        // //多个参数
        // var sum = function(a, b){
        //     return a + b;
        // }
        // console.log(sum(1,9));

        // var sum2 = (a, b) => a+b;
        // console.log(sum2(1,9));


        // //以前写法
        // var sum3 = function(a, b){
        //     c = a +b; //多了一步操作
        //     return a + c;
        // }
        // console.log(sum3(1,9));
        // //新写法
        // var sum4 = (a, b) =>{
        //     c = a + b;
        //     return a + c;
        // }
        // console.log(sum4(1,9));




        //实战:箭头函数结合解构表达式
        const person = {
            name: "jack",
            age: 20,
            language: ['java','js','css']
        };

        function hello(person){
            console.log("你好:"+person.name);
        }
        hello(person);

        var hello2 = (person)=>console.log("你好哟:"+person.name);
        hello2(person);
        //箭头函数+解构表达式
        var hello3 = ({name})=>console.log("你好哟:"+ name);
        hello3(person);

    </script>
</body>
</html>

四、对象优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // const person = {
        //     name: "jack",
        //     age : 20,
        //     fun : ['jva','css','html']
        // };

        // console.log(Object.keys(person));
        // console.log(Object.values(person));
        // console.log(Object.entries(person));





        // const a ={aa: 1};
        // const b ={bb: 2};
        // const c ={cc: 3};

        // console.log(Object.assign(a,b,c));




        
        // //声明对象简写
        // const name ="zhangsan";
        // const age =10;
        // const person = {name, age};

        // console.log(person);





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

        // person.eat("香蕉");
        // person.eat2("苹果");
        // person.eat3("草莓");
        // person.eat3("芒果");




        //对象拓展运算符
        //1、拷贝对象(深拷贝)
        let p1 = {name: "zhangsan", age: 19};
        let p2 = {... p1};
        console.log(p2)
        //2、合并对象
        const a ={name: "lisi"}
        const b = {age: 20};
        //后面的name会覆盖之前的name
        let person = {name: "wangwu"};
        person = {...a, ... b};
        console.log(person);

    </script>
</body>
</html>

五、map和reduce

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //数组中新增了map和reduce方法。
        //map():接收一个函数,将原数组中的所有袁术用这个函数处理后放入新数组返回。
        let arr = ['1','2','-3','4'];
        // arr = arr.map((item)=>{
        //     return item * 2;
        // });

        arr =  arr.map(item => item*2);

        console.log(arr);

        //reduce()为数组中的每一个袁术一次执行回调函数,不包括数组中被删除或从未被赋值的元素。\
        //arr.reduce(callback,[initialValue])

        /**
         * 1、previousValue(上一次调用回调返回的值,或者是提供的初始值(initialValue))
         * 2、currentValue(数组中当前被处理的元素)
         * 3、index(当前元素在数组中的索引)
         * 4、array(调用reduce的数组)
         **/
        let result = arr.reduce((a,b )=>{
            console.log("上一次处理后:"+a);
            console.log("当前正在处理:"+b);
            return a+b;
        },100);

        console.log(result);

    </script>
</body>
</html>

六、promise

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <!-- 
        案例:用户登录,并展示该用户的各科成绩。在页面发送两次请求:
        1. 查询用户,查询成功说明可以登录
        2. 查询用户成功,查询科目
        3. 根据科目的查询结果,获取去成绩
        
        分析:此时后台应该提供三个接口,一个提供用户查询接口,一个提供科目的接口,一个提
        供各科成绩的接口,为了渲染方便,最好响应json 数据。在这里就不编写后台接口了,而
        是提供三个json 文件,直接提供json 数据,模拟后台接口:
     -->
    <script>
        //原始写法
        // $.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写法
        // const promise = new Promise(function (resolve, reject) {
        //     // 执行异步操作
        //     if (/* 异步操作成功*/) {
        //         resolve(value);// 调用resolve,代表Promise 将返回成功的结果
        //     } else {
        //         reject(error);// 调用reject,代表Promise 会返回失败结果
        //     }
        // });

        // const promise = new Promise((resolve, reject) => {
        //     // 执行异步操作
        //     if (/* 异步操作成功*/) {
        //         resolve(value);// 调用resolve,代表Promise 将返回成功的结果
        //     } else {
        //         reject(error);// 调用reject,代表Promise 会返回失败结果
        //     }
        // });

        // promise.then(function (value) {
        //     // 异步执行成功后的回调
        // }).catch(function (error) {
        //     // 异步执行失败后的回调
        // })


        // new Promise((resolve, reject) => {
        //     $.ajax({
        //         url: "mock/user.json",
        //         success(data) {
        //             console.log("查询用户:", data);
        //             resolve(data.id);
        //         },
        //         error(error) {
        //             console.log("出现异常了:" + error);
        //         }
        //     });
        // }).then((userId) => {
        //     return new Promise((resolve, reject) => {
        //         $.ajax({
        //             url: `mock/user_corse_${userId}.json`,
        //             success(data) {
        //                 console.log("查询到课程:", data);
        //                 resolve(data.id);
        //             },
        //             error(error) {
        //                 console.log("出现异常了:" + error);
        //             }
        //         });
        //     });
        // }).then((corseId) => {
        //     console.log(corseId);
        //     $.ajax({
        //         url: `mock/corse_score_${corseId}.json`,
        //         success(data) {
        //             console.log("查询到分数:", data);
        //         },
        //         error(error) {
        //             console.log("出现异常了:" + error);
        //         }
        //     });
        // });




        // promise优化处理后写法
        let get = function (url, data) { // 实际开发中会单独放到common.js 中
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    type: "GET",
                    data: data,
                    success(result) {
                        resolve(result);
                    },
                    error(error) {
                        reject(error);
                    }
                });
            })
        }
        // 使用封装的get 方法,实现查询分数
        get("mock/user.json").then((result) => {
            console.log("查询用户~~:", result);
            return get(`mock/user_corse_${result.id}.json`);
        }).then((result) => {
            console.log("查询到课程~~:", result);
            return get(`mock/corse_score_${result.id}.json`)
        }).then((result) => {
            console.log("查询到分数~~:", result);
        }).catch(() => {
            console.log("出现异常了~~:" + error);
        });
    </script>
</body>

</html>

七、模块化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        模块化就是把代码进行拆分,方便重复利用。类似java 中的导包:要使用一个包,必须先
        导包。而JS 中没有包的概念,换来的是模块。
        
        模块功能主要由两个命令构成:`export`和`import`。
         `export`命令用于规定模块的对外接口。
         `import`命令用于导入其他模块提供的功能。
     -->
</body>
</html>
1

评论 (0)

取消