JavaWeb，ES6的学习

概述

ECMAScript 6，简称ES6，是JavaScript 语言的一次重大更新。它于2015年发布，是原来的ECMAScript标准的第六个版本。ES6带来了大量的新特性，包括箭头函数、模板字符串、let和const关键字、解构、默认参数值、模块系统等等，大大提升了JavaScript的开发体验。

let和const

let

1、let 不能重复声明

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

3、let不会预解析进行变量提升（要访问必须要在声明let变量代码后）

4、let 定义的全局变量不会作为window的属性

5、let在es6中推荐优先使用

const

1、新增const和let类似，只是const定义的变量不能修改，即const为不可更改的let

2、并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。

3、const用来定义不可更改的常量

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识
1、字符串中可以出现换行符

2、模板字符串内输出变量和拼接变量使用 ${xxx} 形式

例：

javascript 复制代码

let num = 8
        let str = `aaa
                   a${num}a
                   bbb
                   ccc`
console.log(str)

控制台的输出结果为

aaa

a8a

bbb

ccc

解构表达式

解构赋值是一种方便的语法，可以快速将数组或对象中的值拆分并赋值给变量。解构赋值的语法使用花括号 {} 表示对象，方括号 [] 表示数组。

通过数组解构将数组中的值赋值给变量

javascript 复制代码

let [a, b, c] = [1, 2, 3]; //新增变量名任意合法即可，本质是按照顺序进行初始化变量的值
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

数组 [1, 2, 3] 中的第一个值赋值给 a 变量，第二个值赋值给 b 变量，第三个值赋值给 c 变量。可以使用默认值为变量提供备选值，在数组中缺失对应位置的值时使用该默认值。例如：

javascript 复制代码

let [a, b, c, d = 4] = [1, 2, 3];
console.log(d); // 4

对象解构赋值给变量

可以通过对象解构将对象中的值赋值给变量：

javascript 复制代码

let {a, b} = {a: 1, b: 2};
//新增变量名必须和属性名相同，本质是初始化变量的值为对象中同名属性的值
//等价于 let a = 对象.a  let b = 对象.b

console.log(a); // 1
console.log(b); // 2

该语句将对象 {a: 1, b: 2} 中的 a 属性值赋值给 a 变量，b 属性值赋值给 b 变量。可以为标识符分配不同的变量名称，使用 : 操作符指定新的变量名。例如：

javascript 复制代码

let {a: x, b: y} = {a: 1, b: 2};
console.log(x); // 1
console.log(y); // 2

函数参数解构赋值

解构赋值也可以用于函数参数：

javascript 复制代码

function add([x, y]) {
  return x + y;
}
add([1, 2]); // 3

该函数接受一个数组作为参数，将其中的第一个值赋给 x，第二个值赋给 y，然后返回它们的和。
ES6 解构赋值让变量的初始化更加简单和便捷。通过解构赋值，我们可以访问到对象中的属性，并将其赋值给对应的变量，从而提高代码的可读性和可维护性。

箭头函数

箭头函数类似于Java中的Lambda表达式

普通的函数声明：
javascript 复制代码
let fun1 = function(){} //普通的函数声明
箭头函数声明的格式：
javascript 复制代码
let fun2 = ()=>{} //箭头函数声明 lambda表达式
let fun3 = (x)=>{return x+1}
参数列表中有且仅有一个参数，()括号可以省略不写：
javascript 复制代码
let fun4 = x=>{return x+1}
如果函数体中只有一行代码，{}可以省略不写：
javascript 复制代码
let fun5 = x=>console.log(x)
如果函数体中只有一行代码而且只有一个return语句，{}和return都可以不写
javascript 复制代码
let fun6 = x=>x+1

注

在箭头函数中，调用this时，this指的不是本函数的调用者，而是更外层的this

rest和spread

rest参数,在形参上使用和JAVA中的可变参数几乎一样，格式为...args

html 复制代码

<script>
    // 1 参数列表中多个普通参数  普通函数和箭头函数中都支持
    let fun1 = function (a,b,c,d=10){console.log(a,b,c,d)}
    let fun2 = (a,b,c,d=10) =>{console.log(a,b,c,d)}
    fun1(1,2,3)
    fun2(1,2,3,4)
    // 2 ...作为参数列表,称之为rest参数 普通函数和箭头函数中都支持 ,因为箭头函数中无法使用arguments,rest是一种解决方案
    let fun3 = function (...args){console.log(args)}
    let fun4 = (...args) =>{console.log(args)}
    fun3(1,2,3)
    fun4(1,2,3,4)
    // rest参数在一个参数列表中的最后一个只,这也就无形之中要求一个参数列表中只能有一个rest参数
    //let fun5 =  (...args,...args2) =>{} // 这里报错
</script>

spread参数,在实参上使用rest，格式为...数组名或 ...对象名

html 复制代码

<script>
    let arr =[1,2,3]
    //let arrSpread = ...arr;// 这样不可以,...arr必须在调用方法时作为实参使用
    let fun1 =(a,b,c) =>{
        console.log(a,b,c)
    }
    // 调用方法时,对arr进行转换 转换为1,2,3
    fun1(...arr)
    //应用场景1 合并数组
    let arr2=[4,5,6]
    let arr3=[...arr,...arr2]
    console.log(arr3)
    //应用场景2 合并对象属性
    let p1={name:"张三"}
    let p2={age:10}
    let p3={gender:"boy"}
    let person ={...p1,...p2,...p3}
    console.log(person)

</script>

注

rest作为参数列表只能有一个，且只能在参数列表的最后一个

spread相当于将数组或对象其中的每个元素或属性一一罗列，且用逗号隔开，但是只能用于实参处

对象创建的语法糖

ES6中新增了对象创建的语法糖,支持了class extends constructor等关键字,让ES6的语法和面向对象的语法更加接近

具体的知识点见代码，例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        class Person{
            //属性,这些属性的类型省略，默认为let,属性前加上#就相当于加private，加上#后，在类中调用时也要加上#
            name //名字
            #age //年龄
            //getter和setter函数
            get getname(){
                return this.name
            }
            set setname(name){
                this.name=name
            }
            get getage(){
                return this.age
            }
            set setage(age){
                this.age = age
            }
            //Person类中的函数，也不需要声明函数返回值，静态函数在其函数名前加上static即可
            eat(food){
                console.log(food)
            }
            static sleep(){
                console.log("sleep")
            }
            //构造器，用constructor表示
            constructor(name,age){
                this.name=name
                this.#age=age
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

注

属性的类型省略，默认为let
属性前加上#就相当于加private，加上#后，在类中调用时也要加上#
Person类中的函数，也不需要声明函数返回值，静态函数在其函数名前加上static即可
调用构造函数时，使用 new 类名(参数) 即可

对象的深拷贝和浅拷贝

对象的拷贝是快速获得和已有对象相同的对象的方式

浅拷贝

html 复制代码

<script>
    let arr  =['java','c','python']
    let person ={
        name:'张三',
        language:arr
    }
    // 浅拷贝,person2和person指向相同的内存
    let person2 = person;
    person2.name="小黑"
    console.log(person.name)
</script>

深拷贝

html 复制代码

<script>
    let arr  =['java','c','python']
    let person ={
        name:'张三',
        language:arr
    }
    // 深拷贝,通过JSON和字符串的转换形成一个新的对象
    let person2 = JSON.parse(JSON.stringify(person))
    person2.name="小黑"
    console.log(person.name)
    console.log(person2.name)
</script>

模块化处理

概述

模块化是一种组织和管理前端代码的方式，将代码拆分成小的模块单元，使得代码更易于维护、扩展和复用。它包括了定义、导出、导入以及管理模块的方法和规范。

优势

提高代码可维护性：通过将代码拆分为小的模块单元，使得代码结构更为清晰，可读性更高，便于开发者阅读和维护。

提高代码可复用性：通过将重复使用的代码变成可复用的模块，减少代码重复率，降低开发成本。

提高代码可扩展性：通过模块化来实现代码的松耦合，便于更改和替换模块，从而方便地扩展功能。

ES6的几种暴露和导入方式

分别导出，分别导入

统一导出，统一导入

默认导出，默认导入

分别导出

向外暴露成员在相应的变量、函数、类前加上export即可，例：

javascript 复制代码

//1.分别暴露
// 模块想对外导出,添加export关键字即可!
// 导出一个变量
export const PI = 3.14
// 导出一个函数
export function sum(a, b) {
  return a + b;
}
// 导出一个类
export class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}

分别导入

{}中导入要使用的来自于module.js中的成员

{}中导入的名称要和module.js中导出的一致,也可以在此处起别名，使用as关键字，{}中如果定义了别名,那么在当前模块中就只能使用别名

{}中导入成员的顺序可以不是暴露的顺序

一个模块中可以同时有多个import，多个import可以导入多个不同的模块,也可以是同一个模块

javascript 复制代码

//import {PI ,Person ,sum }  from './module.js'
//import {PI as pi,Person as People,sum as add}  from './module.js'
import {PI ,Person ,sum,PI as pi,Person as People,sum as add}  from './module.js'
// 使用暴露的属性
console.log(PI)
console.log(pi)
// 调用暴露的方法
let result1 =sum(10,20)
console.log(result1)
let result2 =add(10,20)
console.log(result2)
// 使用暴露的Person类
let person1 =new Person('张三',10)
person1.sayHello()
let person2 =new People('李四',11)
person2.sayHello()

统一导出

使用export{成员名，成员名，......}的方式就可以将{}中的对象统一导出

javascript 复制代码

// 定义一个常量
const PI = 3.14
// 定义一个函数
function sum(a, b) {
  return a + b;
}
// 定义一个类
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}
// 统一对外导出(暴露)
export {
	PI,
    sum,
    Person
}

统一导入

导入其他文件的成员使用import关键字即可，如下代码所示，*代表所有成员，as后面的m1是对象名，是一个封装了./module.js中的所有暴露成员的对象

javascript 复制代码

/*
    *代表module.js中的所有成员
    m1代表所有成员所属的对象
*/
import * as m1 from './module.js'
// 使用暴露的属性
console.log(m1.PI)
// 调用暴露的方法
let result =m1.sum(10,20)
console.log(result)
// 使用暴露的Person类
let person =new m1.Person('张三',10)
person.sayHello()

默认导出

默认导出会在暴露成员中增加一个名为default的成员

javascript 复制代码

// 默认导出
export default sum

默认导入

javascript 复制代码

import {default as add} from './module.js' // 用的少