一佳一

记录像1+1一样简洁的代码

导航

ES6 快速入门常用语法

Posted on 2022-06-27 11:34  一佳一  阅读(82)  评论(0编辑  收藏  举报

    <!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>

    </body>

    </html>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        const person = {
        name:'lyj',
        age:19,
        sex:1
    }
    //对象结构
   const {name,age} = person
   console.log(name,age);

   //字符串扩展
   let str ='linyijia';
   console.log(str.startsWith('lin'));
   console.log(str.endsWith('lin'));
   console.log(str.includes('lin'));

   //字符串模版
   let ss=`我叫${name},今年${age}`

    console.log(ss);

    //默认值
    function show(arg1='hello'){
        console.log(arg1+ss);
    }

    //不定参数
    function showmsg(...values){
        console.log("参数数量"+values.length);
    }

    show();

    showmsg(name,age,ss);

    //箭头函数 省掉了function 等价于
    // function sumvalue((v1,v2){
    //     let sum = v1+v2;
    //     return sum;
    // }
    let sumvalue = (v1,v2)=>{
        let sum = v1+v2;
        return sum;
    }
    console.log(sumvalue(10,20));

    //箭头函数+解构表达式 可以直接结构person对象的name 达到简化代码
    let hello = ({name})=>{console.log({name})};
    hello(person);

    //对象
    let iphone={
        version:'p6',
        show:function(obj){
            console.log('顾客'+obj+'您型号是'+this.version);
        },
        //省掉了function
        show2(obj){
            console.log('顾客'+obj+'您的型号是'+this.version);
        },
        //使用箭头函数不能用this,要用对象本身
        show3: obj =>{
            console.log('顾客'+obj+'您的型号是'+iphone.version);
        }
    }
   
    iphone.show(name);
    iphone.show2(name);
    iphone.show3(name);

    //合并对象
    let hebing ={...person,...iphone};
    console.log(hebing)

    //循环每一个元素
    let score = ['60','70','80','90'];
    //map完整写法
    // score = score.map((item)=>{
    //     return item = item*20;
    // })
    // //单个参数可以简写为
    score = score.map(item=>item*20);
    console.log(score)

    //循环每一个元素带回调
    score = score.reduce((a,b)=>{
        console.log("上一个请求"+a);
        console.log("当前正在处理"+b);
        return a+b;
    })
    console.log(score)

 
    //Pormise 异步封装请求
    function get(url,data){
      return new Promise((resolve,reject)=>{
            $.ajax({
                url:url,
                data:data,
                success:function(data){
                    resolve(data)
                },
                error:function(error){
                    reject(error)
                }
            })
        });
    }

    get("user.json").then((data) => {
            console.log(data)
        })
        .catch((erro)=>{
            console.log(erro)
        });

   
   
    // class类
    class Person{  
        constructor(name){  //构造函数
            this.name=name;
        }
        sayName(){
            console.log('name: '+this.name);
        }
    }
    var stu = new Person('jack');
    stu.sayName();


    // ?? 运算符被称为非空运算符。如果第一个参数不是 null/undefined,将返回第一个参数,否则返回第二个参数
    console.log(null ?? 5) // => 5
    console.log(2 ?? 5) // => 2

    function fn(obj){
        var a = obj ?? {};
        console.log(a);
    }
    // 等价于
    // function fn(obj){
    //     var a;
    //     if( obj === null || obj === undefined){
    //         a = {}
    //     } else {
    //         a = obj;
    //     }
    //     console.log(a);
    // }
   
    </script>

    <script type="module">
        import aa from '/tool.js';
    let value = aa.sum(10,30);
    console.log("模块计算结果"+value);
    </script>