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

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: ③. 模板字符串④. 箭头函数

③. 模板字符串


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


  • ②. 在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>
相关文章
|
2月前
ES6中map对象的使用,确实比Object好使哈
ES6中Map对象的使用优势,包括任意类型作为键、直接获取大小、增删查改操作等。Map的键可以是函数、对象、NaN等,支持forEach循环和for...of循环。
32 1
ES6中map对象的使用,确实比Object好使哈
|
2月前
|
存储 PHP 数据安全/隐私保护
spl_object_hash() 函数
spl_object_hash() 函数
|
1月前
|
编译器 C++
【C++】模板进阶:深入解析模板特化
【C++】模板进阶:深入解析模板特化
|
2月前
|
C# Android开发 开发者
Uno Platform 高级定制秘籍:深度解析与实践样式和模板应用,助你打造统一且高效的跨平台UI设计
【9月更文挑战第7天】Uno Platform 是一个强大的框架,支持使用 C# 和 XAML 创建跨平台 UI 应用,覆盖 Windows、iOS、Android、macOS 和 WebAssembly。本文介绍 Uno Platform 中样式和模板的应用,助力开发者提升界面一致性与开发效率。样式定义控件外观,如颜色和字体;模板则详细定制控件布局。通过 XAML 定义样式和模板,并可在资源字典中全局应用或嵌套扩展。合理利用样式和模板能简化代码、保持设计一致性和提高维护性,帮助开发者构建美观高效的跨平台应用。
58 1
|
3月前
|
存储 关系型数据库 MySQL
|
5月前
|
JavaScript 前端开发 开发者
JavaScript中的const关键字解析
JavaScript中的const关键字解析
|
4月前
|
中间件 数据库 开发者
解析Python Web框架的四大支柱:模板、ORM、中间件与路由
【7月更文挑战第20天】Python Web框架如Django、Flask、FastAPI的核心包括模板(如Django的DTL和Flask的Jinja2)、ORM(Django的内置ORM与Flask的SQLAlchemy)、中间件(Django的全局中间件与Flask的装饰器实现)和路由(Django的urls.py配置与Flask的@app.route()装饰器)。这些组件提升了代码组织和数据库操作的便捷性,确保了Web应用的稳定性和可扩展性。
65 0
|
5月前
|
SQL 自然语言处理 前端开发
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
46 2
|
4月前
|
JSON JavaScript API
JS【详解】Map (含Map 和 Object 的区别,Map 的常用 API,Map与Object 的性能对比,Map 的应用场景和不适合的使用场景)
JS【详解】Map (含Map 和 Object 的区别,Map 的常用 API,Map与Object 的性能对比,Map 的应用场景和不适合的使用场景)
97 0
|
13天前
|
存储 Java 程序员
Java基础的灵魂——Object类方法详解(社招面试不踩坑)
本文介绍了Java中`Object`类的几个重要方法,包括`toString`、`equals`、`hashCode`、`finalize`、`clone`、`getClass`、`notify`和`wait`。这些方法是面试中的常考点,掌握它们有助于理解Java对象的行为和实现多线程编程。作者通过具体示例和应用场景,详细解析了每个方法的作用和重写技巧,帮助读者更好地应对面试和技术开发。
54 4

热门文章

最新文章

推荐镜像

更多