ES6基础知识

ES6基础知识

• 🍓定义变量
• 🍓函数
• • 🍒🍒箭头函数
  • 🍒🍒函数默认值
• 🍓解构赋值
• 🍓模板字符串
• 🍓展开运算符
• 🍓类语法

🍓定义变量

• 📌var：

  1. 🍁预解析，即在定义变量语句前也可以使用这个变量
  2. 🍁相同变量名可以重复定义
  3. 🍁块级作用域无法限制var定义的变量的使用范围

• 📌let与const：不存在上面三种特征，let与const的区别：

  • 🍁let定义的是变量，值是可以改变的
  • 🍁const定义的是常量，值是不能被改变的，所以const在定义的常量的时候就要给他赋值

🍓函数

🍒🍒箭头函数

• 📌箭头函数的语法：
  将function关键字省略，在() {}之间加上箭头 =>
• 📌箭头函数的特殊之处：
  1. 🍁当你的形参【只有一个】的时候可以省略()，注意，没有形参不能省略
  2. 🍁当你的函数体【只有一句话】的时候可以省略{}
  3. 🍁箭头函数内部没有【arguments】对象
  4. 🍁箭头函数内部的this与定义箭头函数的外部作用域的this相同

//1. 定义函数
//ES6之前定义方式
const fun1 = function(val) {console.log('Hello world!')}
//箭头函数定义方式
const fun2 = (val) => {console.log('Hello world!')}
//箭头函数省略()
const fun3 = val => {console.log('Hello world!')}
//箭头函数省略{}
const fun4 = val => console.log('Hello world!')

🍒🍒函数默认值

function fun(a = 100) {}

🍓解构赋值

// 1. 解构数组
let[a, b] = [100, 200];
// 2. 解构对象
let{name, age} = {name:"zhangsan", age:23}
// 3. 解构对象映射
let{name:myName, age:myAge} = {name:"zhangsan", age:23}

🍓模板字符串

模板字符串与普通字符串的区别：

1. 📌采用``包裹
2. 📌字符串内部可以换行
3. 📌可以使用${}解析变量

let age = 23;
let name = '张三';
let[a, b, c] = ['篮球', '足球', '排球']
let content = `大家好，我叫${name}, 今年${age}岁，我的爱好有：
- ${a}
- ${b}
- ${c}`
console.log(content)

🍓展开运算符

• 📌展开运算符：...
  作用： 展开数组和对象
• 📌展开数组的常见场景：
  • 🍁合并数组
  • 🍁函数传值
• 📌展开对象的常见场景：
  复制对象

🍓类语法

• 📌class类语法就是解决构造函数的弊端
• 📌构造函数的弊端：
  1. 🍁构造函数本质上也是函数，也可以不通过new关键字直接调用，但是就没有了意义
  2. 🍁构造函数在编写成员方法时，为了提高性能，采用成员方法挂在构造函数原型上的形式，但这段代码需要另外写，不好
  3. 🍁构造函数在编写静态成员时，静态成员挂在函数对象身上，这段代码也需要另外写，不好

class Person{
    //构造函数
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    //成员方法
    sayHi() {
        console.log('Hello world!')
    }
    
    //静态成员
    static a = 100

    //静态方法
    static sayHello() {
        console.log('Hello world!')
    }
}