ES6新特性小记

54 阅读4分钟
数据类型

基本类型:Number, String, null, undefined, symbol,Boolean,bigInt

引用类型:Object,Array,Date,function

let,const,var

新增了let,const 两个声明变量的关键字,let跟const可以用于声明基本类型跟引用类型,但区别在于const定义的基本类型,一经声明,便不可再做修改,而let声明的基本类型可以做修改。const声明的引用类型里的内容则可以做修改。这两个关键字声明的变量没有变量提升的功能。var关键字声明的变量通常都具有全局声明的功能(也存在函数作用域,只能在函数内部使用)。let跟const声明的变量只能在对应的局部作用域中使用,通常是最近的一个{}中。

数组的方法

对于数组新增了许多方法,比如

const arr = [1,2,3]
arr.push(4);//从后面插入一个或多个值,并返回新的数组
arr.pop();//从后面删除一个值,并返回删除的值
arr.shift();//从前面删除一个值,并返回删除的值
arr.unshift(1);//从前面增加一个或多个值,并返回新的数组
等等方法、
箭头函数
()=>{
  
},箭头函数的this继承自外部作用域,传统函数的作用域则取决于函数的调用方式(
  例如,通过对象方法调用、构造函数调用、使用 call、apply 或 bind 方法等)
Set,Map,weakMap,WeakSet
class语法糖、(#开头的私有属性以及私有方法),(static 静态属性以及静态方法)

使用#开头定义的方法,只能够在class类内进行访问,在类外无法访问调用,且无法继承。

static关键字定义的静态方法可以在类外进行访问执行,但是在实例无法访问。

class Person {
  // 私有字段,只能在类内部访问
  #name = "张三";

  // 静态属性,可以在类的外部访问
  static age = "15";

  // 私有方法,只能在类内部访问
  #getName() {
    console.log(this.#name);
  }

  // 公共方法,用于访问私有字段
  getName() {
    this.#getName(); // 调用私有方法
  }

  // 静态方法,不能访问实例的私有字段
  static getAge() {
    return this.age; // 只能访问静态属性
  }
}

// 测试代码
const person = new Person();

person.getName(); // 输出: 张三
console.log(Person.getAge()); // 输出: 15

// 下面的代码会报错,因为 #name 和 #getName 是私有的
// console.log(person.#name);
// person.#getName();
proxy与reflect

ProxyReflect 是两个重要的特性,它们提供了对对象操作的拦截和控制机制。

ProxyReflect 经常一起使用,以确保代理对象的行为与普通对象的行为一致。

const obj = {
  name:"张三",
  age:"18"
}
const proxyObj = new Proxy(obj,{
  getter(target,key){
    return target[key] + '1'
  },
  setter(target,key,value){
    target[key] = value;
  },
  has(target,key){
    return key in target
  }
})
rest跟spread运算符(...)
const arr = [1,2,3,4,5];
const arr1 = [7,...arr];// 这里用于拓展运算

function people(name,...other){
  //这里是用于剩余参数运算符
}
people("张三","李四","王五"); 
函数参数默认值

ES6中针对函数参数增加了默认值设置的功能,用于在调用函数没有入参时,给定一个默认值。举例如下

function person(name='张三'){
  console.log(name)
}
person();// 输出张三
bind,apply,call

作用:都用于修改函数/方法执行的作用,接受的第一个参数是要绑定给 this 的值,后面的参数则是需要传递的一些参数

入参上的区别:call接受参数列表作为参数,apply接受数组或类数组对象作为参数。

执行上的区别:bind方法不会立即执行(需要调用返回值进行执行),apply与call则会立即执行

对象解构赋值
const person = { name:"张三",age:"18",weight:"200",wallet:{CNY:100,USD:200} };
const { name,age } = person;
// 重命名
const { name : newName,age : newAge } = person;
// 嵌套结构
const { wallet:{ CNY,USD } } = person;
// 默认值
const { name = '王五' } = person;
Promise

用于解决过往的回调地狱问题,Promise是一个可链式调用的对象,有三个状态(进行中(pending),成功(fulfilled),失败(rejected)),默认是进行中。Promise的返回值也是一个promise对象。

const promise = new Promise((res,rej)=>{
  resolve(1)
});
promise.then(res=>{
  console.log(res) // 打印1
});

与Promise相关的还有以下

Promise.all();//当所有都成功完成时,才会返回一个成功的状态

Promise.any();// 任意一个成功时,就会返回一个对应的状态,如果全部失败,则返回失败的状态数组

Promise.race();// 返回第一个成功或失败的状态,race意味着赛跑的意思,谁先完成承诺返回谁

Promise.allSettlled();//返回所有的promise状态结果,是一个promise结果的数组
aysnc await

async function 声明创建一个绑定到给定名称的新异步函数。函数体内允许使用 await 关键字,这使得我们可以更简洁地编写基于 promise 的异步代码,并且避免了显式地配置 promise 链的需要。

await的返回值是一个promise对象。

async function(){
  const num = await 1
}
Generater函数, function*
function* generater(){
  yield 'a';
  yield 'b';
  yield 'c';
}

const gen = generater();
gen.next().value;//输入a
gen.next().value;//输入b
gen.next().value;//输入c

这里涉及到一个迭代器(iterator)的概念。
模块化
// a.js
const name = "张三";
const age = "18";
export default  name  ;//默认导出
export age; // 具名导出

// b.js
import name from 'a.js'; // 默认导入
import { age } from 'a.js'//具名导入