• ECMAScript 6(es6)


    1、ECMAScript 6

    1.1 什么是ECMAScript 6

    ECMAScript 6.0(简称ES6)是JAvascript语言的下一代标准。它的目标,是使得Javascript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

    1.2 ECMAScript 6和JAvascript的关系

    ECMAScript 6和JAvascript的关系是,前者是后者的规格,后者是前者的一种实现(另外的ECMAScript 方言还有Jscript和ActionScript)

    2、基本语法

    2.1 let声明变量

    //var 声明的变量没有局部作用域

    //let声明的变量有局部作用域,只能用在对应的代码块中

    {

    //定义变量

    var a=0

    let b=2

    }

    console.log(a)//0

    console.log(b)//b is not defined

    //var 声明的变量可以被多次赋值

    //let声明的变量只能被一次赋值

    var m=1;

    var m=2;

    let n=10;

    let n=20;

    console.log(m) //2

    console.log(n)//Identifier 'n' has already been declared

    2.2 const声明常量

    在es6中声明的常量必须赋值,并且不能再次赋值。

    const a=0;

    a=4;//Assignment to constant variable.

    const b;//Missing initializer in const declaration

    2.3 解构赋值

    解构赋值是对赋值运算符的扩展。它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。

    在代码书写上简洁且可读,语义更加清晰明了;也方便了复杂对象中数据字段获取 

     数组解构

    传统:

    let a=1,b=2,c=3;

    console.log(a,b,c)

    ES6:

    let[x,y,z]=[1,2,3]

    console.log(x,y,z)

    对象解构

    传统:

    let user={name:'Helen',age:18}

    let name1=user.name

    let age1=user.age

    console.log(name1,age1)

    ES6:

    let{name,age}=user //注意:结构的变量必须是user中的属性

    cosnole.log(name,age)

    2.4 模板字符串

    模板

    字符串相当于加强版字符串,用反引号`,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式 

    字符串中插入变量和表达式。变量名写在${}中,${}中可以放入JavaScript表达式。

    let name="lucy"

    let age=20

    let info=`My name is ${name} ,

    I am ${age+1}`

    console.log(info)

     

     2.5 声明对象简写

     //传统定义对象

         const name="lucy"

         const age=18

         const  user1={name:name,age:age}

         console.log(user1)

         //es6

         const user2={name,age}

         console.log(user2)

     2.6 对象扩展运算符

    扩展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象

        //1、拷贝对象

        let person1={name:"Amy",age:18}

        let someone={...person1}

        console.log(someone)

        //2、合并对象

        let age={age:18}

        let name={name:"Amy"}

        let person2={...age,...name}

        console.log(person2)

     

     2.7 箭头函数

    箭头函数多用于匿名函数的定义

     //传统

       var f1=function(a){

           return a

       }

       console.log(f1(1))

       //ES6使用箭头函数定义

       //参数=>函数体

       var f2=a=>a

       console.log(f2(1))

       var f3=function(m,n){

           return m+n

       }

       console.log(f3(1,2))

       var f4=(m,n)=>m+n

       console.log(f4(1,2))

     

     

  • 相关阅读:
    【无标题】
    【React源码】(十七)React 算法之深度优先遍历
    【Css】Less和Sass的区别:
    NginxWebUI runCmd 远程命令执行漏洞复现 [附POC]
    Springboot项目 配置热部署
    22.11.11打卡 牛客小白月赛60(A~C)
    理解RESTful Api设计
    被程序员的相亲规划整不会了......
    Java集合部分总结
    思维模型 布里丹毛驴效应
  • 原文地址:https://blog.csdn.net/m0_59860403/article/details/125465283