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

简介: ③. 模板字符串④. 箭头函数

③. 模板字符串


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


  • ②. 在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>
相关文章
|
23天前
|
机器学习/深度学习 算法 编译器
【C++ 泛型编程 中级篇】深度解析C++:类型模板参数与非类型模板参数
【C++ 泛型编程 中级篇】深度解析C++:类型模板参数与非类型模板参数
46 0
|
19天前
|
安全 Java 数据安全/隐私保护
【深入浅出Spring原理及实战】「EL表达式开发系列」深入解析SpringEL表达式理论详解与实际应用
【深入浅出Spring原理及实战】「EL表达式开发系列」深入解析SpringEL表达式理论详解与实际应用
42 1
|
24天前
|
设计模式 算法 数据安全/隐私保护
【C++ 引用 】C++深度解析:引用成员变量的初始化及其在模板编程中的应用(二)
【C++ 引用 】C++深度解析:引用成员变量的初始化及其在模板编程中的应用
25 0
【C++ 引用 】C++深度解析:引用成员变量的初始化及其在模板编程中的应用(二)
|
24天前
|
存储 算法 编译器
【C++ 引用 】C++深度解析:引用成员变量的初始化及其在模板编程中的应用(一)
【C++ 引用 】C++深度解析:引用成员变量的初始化及其在模板编程中的应用
35 0
|
22天前
|
存储 程序员 编译器
【C++ 模板类与虚函数】解析C++中的多态与泛型
【C++ 模板类与虚函数】解析C++中的多态与泛型
46 0
|
24天前
|
安全 编译器 程序员
【C++ 11 模板和泛型编程的应用以及限制】C++11 模板与泛型深度解析:从基础到未来展望
【C++ 11 模板和泛型编程的应用以及限制】C++11 模板与泛型深度解析:从基础到未来展望
76 0
|
29天前
|
存储 算法 编译器
【C++ 泛型编程 进阶篇】C++模板元编程深度解析:探索编译时计算的神奇之旅
【C++ 泛型编程 进阶篇】C++模板元编程深度解析:探索编译时计算的神奇之旅
85 0
|
30天前
|
Java 开发者
深入解析Java中的Lambda表达式
本文深入探讨Java编程语言中的Lambda表达式,介绍了Lambda表达式的定义、优势以及在实际开发中的应用场景,旨在帮助读者更好地理解和运用这一特性。
|
1月前
|
存储 索引
【冲击蓝桥篇】动态规划(下):你还在怕动态规划!?进来!答题模板+思路解析+真题实战
【冲击蓝桥篇】动态规划(下):你还在怕动态规划!?进来!答题模板+思路解析+真题实战
|
1月前
|
自然语言处理 JavaScript 前端开发
Vue.js 深度解析:模板编译原理与过程
Vue.js 深度解析:模板编译原理与过程

推荐镜像

更多