【Java Web】ECMA6Script语法

目录

一、ES6概述

二、let、const和模板字符串

2.1 let声明变量

2.2 const声明只读常量

2.3 模版字符串的使用

三、解构表达式

四、箭头函数

五、rest和spread的使用

六、对象创建语法糖

七、深拷贝和浅拷贝

八、模块化处理

1.JS模块文件制作

2.其它JS文件导入来使用模块

---

一、ES6概述

ECMAScript6，简称ES6，是JavaScript语言的一次重大更新。它于2015年发布，是原来的ECMAScript标准的第六个版本。ES6带来了大量的新特性，包括箭头函数、模版字符串、let和const关键字、解构、默认参数值、模块系统等，大大提高了JS的开发体验。VUE3中大量使用了ES6的语法，所以ES6成为了学习VUE3的门槛之一。

二、let、const和模板字符串

2.1 let声明变量

            1. let不能重复声明变量而var可以

                let i=20

                let i=34

            2. let有块级作用域，非函数的花括号遇见let会有块级作用域，也就是只能在花括号里面访问。

                {

                   var age1=20

                   let age=23

                }

                console.log(age1,age)

            3. let不能预解析进行变量提升即不能先使用变量、后声明

                console.log(a,b)

                var a=3

                let b = 4

            4. let定义的变量不会作为window对象的属性字段

                var name="Orion"

                let rename="Gsy"

                console.log(window.name,window.rename)

说明: 在ES6中推荐使用let关键字来声明变量

2.2 const声明只读常量

const是用来声明只读常量的、类似于C语言中的const关键字

            1、const声明的常量必须在定义的时候初始化

                const PI=3.14

                console.log(PI)

            2、const声明的常量不能在定义后修改值

                const PI=3.14

                PI=3.1415926

                console.log(PI)

2.3 模版字符串的使用

模版字符串主要是用来解决普通的字符串不能换行和拼接值的问题

                let price=100

                let list=`<ul>

                            <li>${price}</li>

                            <li>${price}</li>

                            <li>${price}</li>

                            <li>${price}</li>

                        </ul>`

                console.log(typeof(list),list)

三、解构表达式

解构表达式是另一种获取数组或对象的成员元素值的方式。

1.取数组元素值(一一对应)

                arr=[1,2,3,4,10]

                let [a,b,c,d,e=5]=arr

 2.取对象元素的值(根据对象属性名一一对应映射)

                var animal={

                    name:'小黄',

                    age:23,

                    eat: named => this.animal

                }

                let {name,age,eat}=animal

                console.log(name,age,eat())

            3.解构表达式作为函数形参使用

                person=['Orion','Gsyue','yran']

                let lam=([name1,name2,name3,name4='Nshan'])=>{

                    console.log(name1,name2,name3,name4)

                }

                lam(person)

四、箭头函数

JS中的箭头函数类似于Java中的lambda匿名函数表达式，只不过在Java中使用'->'，而在JS中使用'=>'罢了。例如:

                        ●传统匿名函数

                        let run=function(){

                            console.log(this)

                        }

                        run()

                        ●箭头函数

                        let run=(arg1,arg2)=>{

                            console.log(arg1,arg2)

                        }

1.箭头函数简写

• 当箭头函数的形参只有一个时，可省略形参的小括号

            let run = arg1=>{

                console.log("Hello!")

            }

• 当箭头函数的函数体只有一行代码且需要将此行代码的结果返回时，可省略方法体的大括号

            let sum = (a,b)=>a+b

           

注意:

1、若在JS对象的方法体中访问其所在对象的属性变量字段时，必须使用'this.属性名'的方式。若直接使用对象的属性名即使方法体没有其名形参也不会访问到对象的属性。

2.在function关键字的函数中，this指代的是当前成员所在对象；而在箭头函数方法体中this指代的是其所在位置的上下文中的this所指代的对象。

3.JS上下文中的最外层的this所指代的是windows对象。

                            let house={

                                address:'鹿邑',

                                enter:function(){

                                    console.log(this) //这里的this指代的是house对象

                                }

                            }

                            house.enter()

                           // 而

                            console.log(this)

                            let house2={

                                address:'鹿邑',

                                enter:()=>{

                                    console.log(this) //这里的this指代的是windows对象

                                }

                            }

                            house2.enter()

五、rest和spread的使用

1.rest即剩余(形参使用)，类似于Java中的可变参数，表示形式为‘...args’。

            只能作为函数的最后一个形参、有且只有一个;用于接收任意多个实参传递过来的值；

            在方法体中...args作为数组类型的变量使用。

                     let mojito=(arg1,b,...a)=>{

                        console.log(arg1,b,a)   //...a可变参数在方法体中作为数组使用

                    }

                    mojito(1,2,3,6,[1,2,3,4])

           

2.spread即扩散(实参使用)，用在调用函数的实参中类似python中的序列解包、将实参集合中的数值

            一一赋值给函数的形参。

                    let print=function(a,b,c){

                        console.log(a,b,c)

                    }

                    arr=[1,2,3]

                    print(...arr)

           

            3.合并数组

                    let arr1=[1,2,3,4,5]

                    let arr2=[6,7,8,9,10]

                    let maxture=[...arr1,...arr2]  //spread合并数组

                    console.log(maxture)

           

            4.合并对象

                    let person={

                        name:'Orion',

                        age:24

                    }

                    let stu={

                        sno:12206,

                        major:'计科&计网'

                    }

                    let Gyue={...person,...stu}   //spread合并对象

                    console.log(Gyue)

六、对象创建语法糖

在ES6中对象的创建支持类似于Java的对象创建方式。

可以使用class关键字定义类、然后使用定义好的类创建对象。

例如:

            class Student{

                //公有属性定义

                name

                //#表示私有属性

                #sno

                //构造器

                constructor(name,sno){

                    this.name=name

                    this.#sno=sno

                }

                //属性字段的get和set方法

                get name(){

                    console.log('getName方法执行了!')

                    return this.name

                }

                set name(name){

                    console.log('setName方法执行了!')

                    this.name=name

                }

                get sno(){

                    return this.#sno

                }

                set sno(arg){

                    this.#sno=arg

                }

                //实例方法

                learning(){

                    return `${this.#sno}每天都要好好学习哈!`   //模版字符串

                }

                //静态方法

                static eat(thing){

                    console.log(`${this.name}再吃晚饭!`)

                }

               

            }

            class Child extends Student{

                address

                constructor(name,sno,address){

                    super(name,sno) //调用父类中的构造器

                    this.address=address

                }

            }

            let stu1=new Student('Orion',21736)

            console.log(stu1.name,stu1.sno,stu1.learning())

            Student.eat()

            let child1=new Child('Gsyue',21736,'鹿邑')

            console.address=3

            console.log(child1.sno)

           

 注意:

1、'对象.属性名'，如果该对象有此属性则访问或修改的是此属性，若对象中实际没有此属性字段则访问或修改时调用的是该属性同名的get或set方法。

2、ES6中私有属性只需在属性名前加“#”符号。

七、深拷贝和浅拷贝

JS中的浅拷贝和深拷贝类似于python中的深拷贝和浅拷贝。

1、所谓的浅拷贝就是将数据的引用地址赋值给了另个变量而数据本身并没有开辟新的内存空间，两个变量都指向同一块堆区中的内存数据

            例如：

                    arr=['关山月','Orion',24]

                    arr1=arr

                    arr[0]='Gsyue'

                    console.log(arr1)

2、所谓的深拷贝不仅会将数据的引用地址复制一份还会将数据复制一份，修改原变量中的数据新变量中的数据并不会跟着变化。

• 深拷贝方式一（spread方式）:

            let obj={color:'red',draw:()=>this.obj.color}

            let obj1={...obj}

            obj.color='white'

            console.log(obj.color,obj1.color)//obj1.color属性的值没有改变

• 深拷贝方式二(JSon转化):

            let obj={color:'red',draw:()=>this.obj.color}

            let jsonStr=JSON.stringify(obj)   //将JS对象转化为JSON格式串

            let obj1=JSON.parse(jsonStr)  //将JSON格式串转化为JS对象（期间会为转化后的JS对象申请新的内存空间存放）

            obj.color='orange'

            console.log(obj.color,obj1.color)

八、模块化处理

ES6支持JS代码的模块化即将一些经常使用的变量、方法和类等单独放到一个JS文件中作为一个模块，其它JS代码需要时只需把模块文件中的成员导入即可，有点类似于C语言中的

头文件、Java中的类库、Python中的模块。

1.JS模块文件制作

        JS-module.js:

                    //变量

                    let flag='模块文件'

                    //方法

                    function testModule(){

                        console.log('你好呀!努力的您.')

                    }

                    //类

                    class Animal{

                        constructor(){

                            this.name='loog'

                            this.life='suprisation'

                        }

                    }

1.1 分别导出成员：在成员前面加上export关键字。

        例如: export let flag='模块文件'

1.2 统一导出成员: 在模块文件的末尾使用export{成员1,成员2,...}的方式统一导出成员供其他JS文件使用。

        例如: export{flag,testModule,Animal}

1.3 默认导出成员: 在模块文件中使用'export default 成员名'的方式只能导出一个默认成员，其导出的成员会被作为导入对象的一个default属性存在。

说明：分别导出、默认导出、统一导出这三种成员导出方式可以同时在一个模块文件中使用。

       

2.其它JS文件导入来使用模块

不管模块中的成员使用什么方式导出的，其导入的所有成员都将视为一个对象中的属性。

方式一: 导入指定模块文件中（./JS-module.js）所有的(*)已导出的成员并将其作为obj对象的属性存在

        import * as obj from './JS-module.js'

       

方式二: 利用解构表达式将模块成员导入（变量名要一一对应）

        import {flag as 别名,testModule,Animal} from './JS-module.js'

方式三: 如果要导入的是单独一个默认成员则可以直接使用default属性的别名来访问默认成员。

        import rename from './JS-module.js'

        或者

        import {default as rename} from './JS-module.js'

这里的rename就是导入的default属性的别名，而default属性代表的又是模块文件中默认导出的成员，因此，对rename的操作就是对模块中默认导出的成员进行操作。

@声明：“山月润无声”博主知识水平有限，以上文章如有不妥之处，欢迎广大IT爱好者指正，小弟定当虚心受教！