ES6
ECMA6Script
ECMAScript 6，简称ES6，是JavaScript语言的一次重大更新
由于VUE3中大量使用了ES6的语法，所以ES6成为了学习VUE3的门槛之一
- 更加简洁：
- 更强大的功能
- 更好的实用性
ES6的变量和模板字符串
ES6中新增了let和const，用来声明变量，使用的细节存在差异
let和var的区别
- let不能重复声明
var i = 10
var i ="hello"
let j = 10
let j = "hello"//报错，let不能重复声明 Uncaught SyntaxError: Identifier 'j' has already been
- let有块级作用域，非函数的花括号遇见let也会有块级作用域
{
var i = 10
let j = 10
}
console.log(i) //10
console.log(j) //变量j未被定义 Uncaught ReferenceError: j is not defined
- let不会预解析进行变量提升
console.log(a) //undefined
var a =10
console.log(j) //变量j未被预解析 Uncaught ReferenceError: Cannot access 'j' before initialization
let j =10
- let定义的全局变量不会作为windows（Bom编程）的属性
var a = 10 //a会变成window的属性
console.log(window.a) //10
let b =10
console.log(window.b) //undefined
- let在es6中推荐优先使用
const
const中文释义：常数；恒量
const就是不可修改的let
类似于java中被final修饰的数（常量）
- const的值不可被修改
const a = 10
a = 20 // Uncaught TypeError: Assignment to constant variable.
- const的值不可为空
const a //Uncaught SyntaxError: Missing initializer in const declaration
- const可以设置常量值
const PI = 3.14;
- const内容为对象时，不可以修改其值的本质是不可修改引用，其内容还是可以发生变化的
const techers = ["张老师", "王老师", "李老师"];
//techers = ["","",""] //无法修改 Uncaught TypeError: Assignment to constant variable.
techers.push("赵老师");
console.log(techers); //['张老师', '王老师', '李老师', '赵老师']
模板字符串
模板字符串用以处理字符串换行和字符串拼接问题
" "或者' '中的传统字符串是不支持多行
``中的字符支持多行且拼接变量可以直接用${}的方式
` 反单引号（backquote），又称反引号，是西文字符中的附加符号，主要用于计算机领域
<script>
let city = "长春";
let str =
`<ul>
<li>${city}</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>`;
console.log(str);
</script>
${变量}在字符串中的使用是获取变量内容并进行字符串拼接
${表达式}在JSP中是EL表达式，作用是获取表达式的值
ES6的解构表达式
解构数组和对象
<script>
let arr = [11,22,33,44]
//解构表达式取出数组中的元素
let [a,b,c,d,e = 10] = arr
console.log(a,b,c,d,e) //11 22 33 44 10
let person = {
name : "xiaobai",
age : 18
}
//使用解构表达式获取对象的属性值
let {name,age} = person
console.log(name,age)
</script>
当使用解构表达式解构对象时，其属性值的获取是根据属性名获取的（不同于数组的索引）
所以无法给非属性名的变量赋值解构
let person = {
name : "xiaobai",
age : 18
}
//使用解构表达式获取对象的属性值
let {x,y} = person
console.log(x,y) //undefined undefined
解构表达式作为方法的形参
<script>
let arr = [11,22,33,44]
//解构表达式作为形参使用
function showArr([a,b,c=10]){
console.log(a,b,c)
}
showArr(arr)
</script>
ES6的箭头函数
ES6允许使用"箭头"函数，语法类似Java中的Lambda表达式
在java中，lambda表达式多用于结合函数式接口实现匿名内部类的功能，而js中多用于定义函数（方法）
其中括号内是形参，大括号是执行体，而js是弱类型无需函数返回类型和形参类型，函数名即为赋值给的变量名
<script>
let fun1 = function(){} //普通的函数声明
let fun2 = () => {} //箭头表达式（lambda）
let fun3 = (x) => { return x+1 }
let fun4 = x => { return x+1 } //当参数只有一个的时候 小括号省略
let fun5 = x => console.log(x) //当执行语句只有一条的时候 大括号省略
let fun6 = x => x+1 //当执行语句只有一条且时return时 大括号和return都省略
</script>
箭头函数中的this问题
箭头函数中，没有自己的this
箭头函数中的this时外层上下文环境的this
let person ={
name : "xiaobai",
showName:function(){
console.log(this.name)
},
viewName:() => {
console.log(this.name)
},
viewThis:() =>{
console.log(this)
}
}
person.showName() //xiaobai
person.viewName() //空白
person.viewThis() //Window对象
每当使用箭头函数时，其this为上一层对象，如果实在找不到this就直接打印出来
rest和spread
rest剩余参数
rest中文释义：剩余的
rest在js的用法相当于java的可变参数，其在形参中的最后使用且只能有一个，写法是... arr
无论参数的类型是什么，有多少，都以数组的形式接受剩余参数
let fun1 = (... arr) => { console.log(arr) }
fun1(1,2,3,4,5,6,7,8,9,"str")
spread实参传递
spread中文释义：扩散；展开
和rest的写法相同，在调用方法时作为实参使用
在传入实参时将数组内容扩散展开分别为形参赋值
let arr = [1,2,3]
let fun = (a,b,c) => {
console.log(a,b,c)
}
fun(arr) //[1, 2, 3] undefined undefined
fun(...arr) //1 2 3
在形参中使用解构表达式，直接将数组作为实参也能完成此功能
spread合并数组
spread可以快速合并数组
let a = [1,2,3]
let b = [4,5,6]
let c = [7,8,9]
let d = [...a,...b,...c]
console.log(d) //[1, 2, 3, 4, 5, 6, 7, 8, 9]
spread合并对象
spread可以快速合并对象
注：如果有重名对象，后者会覆盖前者
let person1 = {name:"张三",age:"10"}
let person2 = {name:"小白",age:"18",gender:"boy"}
let person3 = {salary:"3000"}
let person4 = {...person1,...person2,...person3}
console.log(person4)//{name: '小白', age: '18', gender: 'boy', salary: '3000'}
对象创建的语法糖
ES6中新增了对象创建的语法糖，支持了class extends constructor等关键字，让ES6的语法和面向对象的语法更加接近
class Person{
//属性
name;
#age;
//getter/setter
get name(){
return this.name
}
set name(name){
this.name = name
}
get setage(){
return this.#age
}
set setage(age){
this.#age = age
}
//实例方法
eat(food){
console.log(`${this.age}岁的${this.name}正在吃${food}`)
}
//静态方法
static sum(a,b){
return a+b
}
//构造方法
constructor(name,age){
this.name = name
this.#age = age
}
}
js中没有private关键字，要在私有属性前加#，但要注意的是，所有对此属性的操作时，属性名都有#
类的方法
在调用get/set方法时和调用普通的实例方法不同，相当于直接.属性赋值的形式调用
let person = new Person()
person.name = "xiaobai"
person.setage = 18 //调用set方法
console.log(person) //Person {name: 'xiaobai', age: 18}
//私有属性无法通过.属性名的方式访问
console.log(person.#age)//Uncaught SyntaxError: Private field '#age' must be declared in an enclosing class
//调用实例方法
person.eat("火锅") //18岁的xiaobai正在吃火锅
//调用静态方法
console.log(Person.sum(10,20)) //30
//调用构造方法
let person1 = new Person("xiaoming",20)
console.log(person1)
类的继承
在ES6的语法糖中，继承也是可以使用的
class Student extends Person{
score
study(){
console.log(`${this.getage}岁的${this.name}正在努力学习，考试获得了${this.score}分`)
}
constructor(name,age,score){
super(name,age)
this.score = score
}
}
let stu = new Student("xiaobai",18,100)
stu.study() //18岁的xiaobai正在努力学习，考试获得了100分
对象拷贝的语法糖
浅拷贝
浅拷贝是多一个引用指向同一个对象
let arr = [1,2,3]
let arr2 = arr
arr[0] = 100
console.log(arr2) // [100, 2, 3]
person = {name : "xiaobai",age : 18}
person2 = person
person.name = "xiaohei"
console.log(person2) //{name: 'xiaohei', age: 18}
深拷贝
深拷贝是完全一个全新的对象
可以通过spread展开赋值
let arr = [1,2,3]
let arr2 = [...arr]
arr[0] = 100
console.log(arr2) // [1, 2, 3]
person = {name : "xiaobai",age : 18}
person2 = {...person}
person.name = "xiaohei"
console.log(person2) //{name: 'xiaobai', age: 18}
还可以通过json字符串的转换来给对象重新赋值
先将对象转为JSON串，再转换回变量
person = {name : "xiaobai",age : 18}
person2 = JSON.parse(JSON.stringify(person))
person.name = "xiaohei"
console.log(person2) //{name: 'xiaobai', age: 18}