ES6基础知识

ES6基础知识

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

定义变量

  • var

    1. 预解析,即在定义变量语句前也可以使用这个变量
    2. 相同变量名可以重复定义
    3. 块级作用域无法限制var定义的变量的使用范围
  • letconst:不存在上面三种特征,letconst的区别:

    • 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!')
    }
}

你可能感兴趣的:(javaScript,es6,javascript,前端)