ES6 汇总

Minfai
120 阅读6分钟

let 和 const

let 、const、var都是用来声明变量的

其中let、const与var不同的是它们虽然也有变量提升，但是它们存在着暂时性死区，在声明之前不可以使用，调用会报错；

var声明没有其块级作用域，但是它也有着它们没有的变量提升，在其定义之前使用可以访问到，但是其值为undefined；提到提升的话还有函数声明是优先于变量声明提升的

fun()
var a = 123
function fun() {
    console.log(a) // undefined
}
console.log(a) // 123

// 相当于 
function fun() {
    console.log(a); // undefined
}
var a;
fun();
a = 123;
console.log(a); // 123
  • var 有着变量提升 没有作用域，如果想要其作用域可以用闭包将其包裹 可以重新赋值和声明
  • let 有其作用域 可以重新赋值不可以重复声明
  • const 有块级作用域 不可以重新赋值不可以重复声明 ，通常用来定义常量，平时不会改变的值；当赋值为对象形式不可以重新赋值，但是可以修改其属性，也就是说不可以修改其指针地址

解构赋值

就是将数据集合（无论是数组、对象），如果是数组则依次赋值到列举的变量中，如果是对象则将名一致的将值赋予给它

let arr = [1, 2]
const [a, b] = arr
console.log(a, b) // 1 2

展开运算符

可以通过... 去展开一个数据 可以在函数、数组、对象中展开使用 fun(...arr) 、 [...arr] 、{...obj}

箭头函数

箭头函数其实就是匿名函数的简写，用于处理es5中函数嵌套中this混乱的问题

在箭头函数里面没有自己this，this为外层作用域的this，而普通函数的this指向调用它的this

不可以作构造函数，因为它没有对应的prototype

没有arguments实参，arguments是伪数组数据用作接收函数传递的参数，其实是一个对象，有着length属性对应着长度，一些数组方法没办法使用，可以使用Array.from(数组名)，Array.prototype.slice.call(数组名),[...数组名]去转换为数组

无法通过call、apply、bind修改this

字符串模板

便捷的拼接字符串和变量

Symbol

Symbol是ES6新引入的基本数据类型，用于生成独一无二的值。

所以现在基本数据类型： Number、String、Boolean、Null、Undefined、Symbol、BigInt

引用数据类型：Object、Array、Function

模块化

因为当项目代码越来越多，复杂度的提高，需要将代码分模块

想要引用模块使用export导出多个 和 export default默认导出一个，使用import引入

export a;
export b;
export deflut c;
// 引入
import {a, b} from 文件
import c from 文件

可以使用as作别名引入 import {a as 别名} from 文件

Promise

Promise是异步编程的一种解决方案，它本质上是一个构造函数，可以实例化一个对象。当实例一个Promise时需要传入一个执行函数，并携带着两个回调函数 resolve() 和 reject()，promise实例有三个状态进行中、已完成、已拒绝，其状态的改变是不可逆的，已完成的时候会调取resolve，拒绝的时候会调取reject。

Promise的返回值是一个新的promise对象，这个对象可以调用then、catch、finally方法，其中then方法可以接收两个回调函数作为参数，第一个为promise对象状态完成时调用，是作为处理操作成功后的业务，第二个回调函数是状态变为rejected时调用，处理操作异常的业务。

catch只接受一个参数，一般来说我们做业务时不会在then定义第二参数函数，用catch去捕获错误，因为它返回还是一个promise对象，可以继续链式调用使用then方法

finally无论promise对象最后状态如何都会执行的操作

Promise有着处理多个promise实例，包装成一个新的promise实例的方法，其中有all()，向all传入多个实例的数组，当其全部成功时返后一个结果数组，失败时返回最先状态为失败的值。

还有race()，和all差不多接收参数是promise数组，返回的值为最快执行完成promise的值

any(),只要有一个 promise 成功，会返回首个成功的 promise 的值，方法提前结束,如果全都失败，则状态变为rejected，返回报错信息。

优点

  • 避免层层嵌套的回调函数，将异步操作以同步操作的流程表达出来
  • 提供统一的接口，使控制异步操作更加容易

缺点

  • 无法取消Promise，一旦新建它就会立即执行，无法中途取消。
  • 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
  • 当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

类

// 类的声明
class Person {
  // 类的构造方法
  // 注意: 一个类只能有一个构造函数
  // 1.在内存中创建一个对象 moni = {}
  // 2.将类的原型prototype赋值给创建出来的对象 moni.__proto__ = Person.prototype
  // 3.将对象赋值给函数的this: new绑定 this = moni
  // 4.执行函数体中的代码
  // 5.自动返回创建出来的对象
  constructor(name, age) {
    this.name = name
    this.age = age
  }
}
 
var p1 = new Person("why", 18)
var p2 = new Person("kobe", 30)
console.log(p1, p2)//Person { name: 'why', age: 18 } Person { name: 'kobe', age: 30 }

类的数据类型也是个函数，让对象原型的写法更加清晰，更像面向对象的编程

可以使用son extends Person继承父类 使用super(name，age)使用父类数据

构造函数和的类之间的区别：

  • 语法：构造函数使用函数声明的方式来定义，而类使用class关键字来定义。

  • 继承：类支持更简单和更灵活的继承方式，同时也支持多重继承。构造函数也可以实现继承，但是需要使用原型链来实现。

  • 可读性：类的语法更加易于阅读和理解，因为它使用了更加自然的面向对象编程方式。

  • 实例化：构造函数需要使用new关键字来创建新的实例，而类可以直接调用构造函数来创建新的实例。

普通函数没有返回值，返回undfined，可以直接调用； 构造函数new person()创建一个新对象并将这个对象作为返回值[object， object]，使用new关键字调用

构造函数执行流程

  • 立刻在堆内存中创建一个新的对象

  • 将新建的对象设置为函数中的this

  • 逐个执行函数中的代码

  • 将新建的对象作为返回值

avatar
文章
阅读
粉丝