且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

ES6语法_var、let 、 const、解析表达式、模板字符串、箭头函数、map 、reduce、Object优化(二)

更新时间:2021-09-08 05:05:35

③. 模板字符串


  • ①. 基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。


  • ②. 在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定


  • ③. 代码展示:


    <script>
        //1.基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
        let name1="xiaozhi";
        console.log("name"+name1);
        let name='xiaozhi'
        console.log(`name:${name}`);
        //2.在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定
        var test="hel\
        a";
        let msg=`<div>
          <h1>xiaozhi</h1>      
        </div>`
        console.log(`${msg}`);
        //3.对象初始化简写
        function person6(name,age) {
            return {name:name,age:age};
        }
        console.log(person6("tangzhi",25));//Object { name: "tangzhi", age: 25 }
        console.log(JSON.stringify(person6("tangzhi",25)));//{"name":"tangzhi","age":25}
        
        //以上代码可以简写为:
        function person7(name,age){
            return {name,age}
        }
        console.log("------------")
        console.log(JSON.stringify(person7("tangzhi",25)));//{"name":"tangzhi","age":25}

        //4.模板字符串中调用函数
        function fun() {
            return "我来了..."
        }
        console.log(`我想说${fun()}`)
    
       </script>


④. 箭头函数


  • ①. 箭头函数的作用:定义匿名函数


  • ②. 特点:


  1. 箭头函数不绑定this关键字,箭头函数中的this指向定义它时所在的作用域中的this


  1. 如果只有一个形参时、括号可以省略


  1. 函数体中只有一句代码,且代码的执行结果就是你想返回的值,可以省略大括号


  1. 注意:如果所定义的箭头函数外层没有函数则作用的是全局作用域(window)


  • ③. 语法:


  1. ( ) => { } //():代表是函数;=>:必须要的符号,指向哪一个代码块;{}:函数体


  1. const fn = ( ) => { }//代表把一个函数赋值给fn


    <script>
      
        /*1.只有一个参数的时候*/
        var print1=obj => console.log(obj);
        print1("print1");//print1
        /*2.有两个参数的时候,且只有一行代码,return可以省略*/
        var print2=(a,b)=> a+b;
        console.log(print2(2, 3));//5
        /*3.当函数中有多行代码的时候,return不能省略*/
        var print3=(c,d)=>{
            console.log("c是"+c);//c是4
            console.log("d是"+d);//d是5
            return c+d;
        }
        console.log(print3(4,5));//9
        /*4.在json对象中使用箭头函数*/
        var name2="tangzhi";
        let  person={
            "name":"xiaozhi",
             eat1:function (foot = "鱼") {
                  //xiaozhi吃鱼
                  console.log(`${this.name}吃${foot}`);
             },
             //注意:箭头函数不能使用this
             //xiaozhi吃meet
             eat2:foot=>console.log(`${person.name}吃....${foot}`),
             eat3(foot){
                 //xiaozhi吃虾
                 console.log(`${this.name}吃${foot}`);
             }
        };
        person.eat1("鱼");
        person.eat2("meet");
        person.eat3("虾");

        /*5.箭头函数加对象解构*/
        var person2={
            "name":"xiaozhi",
            "age":25
        };
        //你好:xiaozhi
        var print5=({name})=>console.log("你好:"+name);
        print5(person2);
        
        //6.扩展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象
        //1.深拷贝 Object { name: "TANGZHI", age: 25 }
        let person1 = { name: "TANGZHI", age: 25 }
        let someone = { ...person1 }
        console.log(someone);

        //2.合并对象
        let age = { age: 15 };
        let name = { name: "YANGXING" };
        let person2 = { ...age, ...name }
        //Object { age: 15, name: "YANGXING" }
        console.log(person2);
    </script>