ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

ES6简单基础(js)常量特点 let var 创建对象 定义方法(5种)对象运算符 模板字符串 箭头函数 数组,对象的解构

2021-07-03 10:01:10  阅读:141  来源: 互联网

标签:ES6 console log 解构 运算符 let var const name


  1. 常量特点
    1常量用const 必须初始化 不能被改变
    <script>
        const PI=3.1415926
        //PI=333  // Assignment to constant variable.不能被改变
        const b //必须被赋值       Missing initializer in const declaration
        //常量不能改变,且必须要被赋值
        console.log(PI);
    </script>


     

  2. 创建对象 定义方法
    1对象用{key:value,key:value} es6可以直接用对应属性名字的变量设置
     

    //为属性赋值
        const name="张三"
        const age=19
    
        //传统方式创建对象
        const p1={name:name,age:age}
        //console.log(p1)
    
        //es6方式创建对象
        const p2={name,age}
        //console.log(p2)

    2方法定义用
      1对象方法(5种)
         es6可以省略(

     //对象方法
          const p3={
            aaa:function(){
                console.log("hello");
            }
          }
          //调用
          p3.aaa()
    
    
        //es6
        const p4={
            aba(){
                console.log("aaann");
            }
          }
          //调用
          p4.aba()
    
    
          //普通方法
          function a1(){
            return 'aasa'
          }
          console.log(a1())
    
    
          //变量方法
          var m1=function(){
            return "qweqw"
          }
          console.log(m1())


     

  3. 对象运算符 复制和合并(...  ,  ...)

    <script>
        const name={name:"name"}
        const age={age:18}
    
        //对象复制
        const p={...name}
        console.log(p)
        //对象的合并
        const p1={...name,...age}
        console.log(p1)
    
    </script>


     

  4. 模板字符串·``飘(可以输出原格式,${}取值   调用方法)

    <script>
        //`字符内可以使用${}取值,以及实现原格式输出(创建一个字符串)
        //原格式输出
        let str1=`hellow
    word`
        console.log(str1)
        //``${}取属性的值
        let name="mmm"
        let age=13
        let str2=`你好${name},我是${age}的刘华建`
        console.log(str2)
    
        //``${}调用一个方法
        function f1(){
            return "hello f1"
        }
        let str3=`你好${f1()}`
        console.log(str3)
    </script>


     

  5. 箭头函数(=>)

     <script>
    
         //传统格式
         var f1=function(m){
             return m
         }
         console.log(f1(3))
    
         //箭头函数
         var f2=(m) => m
         console.log(f2(4))
        
    
        //复杂点的函数
        var f3=function(m,n){
            return m+n
        }
        console.log(f3(1,5))
    
        //箭头函数
        var f4=(m,n) => m+n
        console.log(f4(1,6))
     </script>


     

  6. 数组对象的解构(变量取值  名字相同一一对应)

    <script>
        //数组解构(定义数组)
            //传统
            let a=1,b=2,c=3
            //console.log(a,b,c);
            //es6结构
            let [x,y,z]=[3,2.1]
            //console.log(x,y,z);
        //对象的解构(取值)
            
            const user={name:'张三',age:18,}
            //传统
            let name1=user.name
            let age1=user.age
    
            console.log(name1,age1)
            //解构  (取值自动匹配相同属性名 定义的对象的属性个数与要要取值的个数一致
            // Invalid shorthand property initializer 属性初始值设定项无效少一个接收属性)
            let{name,age}=user//结构的变量必须是user中的属性 名称和个数一直
            console.log(name,age)
    
        
    </script>


     

  7. let var变量的特点和范围
    let是局部 var是全局
    let只能赋值一次类似于const var可以重复的赋值

    <script>
        var a=1
        var a=2
    
        let b=1
        let b=2
        console.log(a)
        console.log(b)
        //Identifier 'b' has already been declared
        //var可以覆盖 let只能一次赋值
    
    
    
    
        {
            var a=1
            let b=2
        }
        console.log(a)
        console.log(b)
        //b is not defined
        //var可以全局使用
        //let只能在局部使用
    </script>


     

标签:ES6,console,log,解构,运算符,let,var,const,name
来源: https://blog.csdn.net/m0_59813955/article/details/118435563

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有