ES6+新增的语法

94 阅读6分钟

此处列举主要的:

  • let与块级作用域

{
    let foo = 'foo'
}
console.log(foo) // 报错
  • const关键字

const a = 1
a = 2 //报错
  • 对象简写

const name = 'foo'

const obj = {
    name,
    sayHi(){
        console.log('hi')
    }
}
  • 解构赋值

数组解构
const [a,b] = [1,2] 
对象解构
{name, age} = {name:'foo', age: 19} 
  • 字符串扩展

//模板字符串
`${变量/表达式}`

//字符串新增方法:
startsWith() 返回布尔值
endsWith() 返回布尔值 
includes() 返回布尔值 
repeat() 
padStart() ES8 补全 //message.padStart(100, '#') padEnd() ES8 补全 //message.padEnd(100, '#') 
matchAll() ES10 message.matchAll(/\w/) //返回迭代器(是所有匹配到的结果) 
trimStart() ES10 
trimEnd() ES10
  • 数值扩展

//指数运算符:
2 ** 2 //2的2次方
//二进制和八进制

0b10 // 二进制
0o71 //八进制

//Math对象新增方法:

Math.trunc() 去掉小数部分 
Math.sign() 判断一个数字是正数、负数、还是0 
Math.cbrt() 求立方根 
Math.hypot() 求所有参数的平方和的平方根(用于勾股定理计算斜边长度)
  • 参数默认值

function foo(a=1){

}
  • 剩余参数

function foo(...num){
    console.log(num) //得到的是数组
}
  • 箭头函数

const foo = ()=>{}
1.this
2.arguments
3. 不能作为构造函数
4. 不能作为生成器
  • 扩展运算符

const num = [1,2,3]
console.log(...num) //1 2 3 
  • Array函数新增方法

Array.from()   把类数组/字符串转为纯数组 
Array.of()     创建数组,参数是数组的成员(任意个数的参数)
  • Array实例新增方法

find() 参数是回调函数,返回第一个满足条件的元素 
findIndex() 参数是回调函数,返回第一个满足条件的元素的索引 
fill() 填充数组,覆盖数组中所有的元素;适合填充 new Array(20)创建的数组 
includes() 判断数组中是否包含某个元素,返回布尔值; ES7新增的 
flat() 把数组拉平(多维数组变为一维数组),参数默认是1(只拉1层), 可设置Infinity,不论维位数租 ES10新增 
flatMap() 参数是回调函数,相当于map和flat的结合 ES10新增
  • 对象扩展运算符...(与数组类似)

  • Object函数新增方法

Object.is() 用于比较两个数据是否相等,返回布尔值; 类似于全等,不同点NaN和Nan相等、+0和-0不相等 
Object.assign() 合并对象 
Object.getOwnPropertyDescriptor()   获取某个自身属性的描述信息 
Object.getOwnProppertyDescriptors() 获取对象所有自身属性的描述信息 ES8新增 
Object.getPrototypeOf() 获取对象的原型 
Object.setPrototypeOf()     给对象设置原型 
Object.keys() 返回数组,由对象的属性名组成。 
Object.values() 返回数组,由对象的属性值组成。 ES8新增 
Object.entries() 返回二维数组,由属性名和属性值 组成 ES8新增 
Object.getOwnPropertyNames()   返回数组,有对象的属性名组成 
Object.formEntries()   
Object.entries()的逆运算 ES8新增

  • Class语法(定义类)

  // 定义类
  class Person {
    // 属性,会添加到实例上
    // 把所有的属性在这里声明
    name = null;
    age = null;

    // 定义构造方法 实例化的时候自动执行
    constructor(name, age = 10) {
      this.name = name;
      this.age = age;
    }

    // 方法,添加到原型上
    say() {
      console.log('MY Name is ' + this.name);
    }
    eat() {
      console.log('My age is ' + this.age);
    }

    // 静态方法 没有添加到实例上,构造函数本身的方法
    // static getClassName() {
    //   console.log('类名是 Person 构造函数本身的方法');
    // }
  }
  //   Person.getClassName(); // 相当于 Person.getClassName = function(){}

  console.log(Person); //输出整个函数
  console.log(typeof Person); // Function
  console.log(Person.name); // Person ===> name指的是这个对象的名字

  // 不能调用
  // Person();

  // 实例化
  var p = new Person('曹操', 19);
  console.log(p); // Person {name: "曹操", age: 19}
  p.say(); // MY Name is 曹操

  var p1 = new Person('吕布', 21);
  console.log(p1); // Person {name: "吕布", age: 21}
  p1.say(); // MY Name is 吕布

  var p2 = new Person();
  console.log(p2); // Person {name: undefined, age: 10}
  • Class的静态方法static

class Person{
    static 方法名() {
    
    }
}

Person.方法名()

// 静态方法没有添加给实例,添加给构造函数(类)本身
  • Class的getter和setter

class Person {
    firstName = '东方';
    lastName = '不败';

    get fullName() {
      return this.firstName + '_' + this.lastName;
    }

    set fullName(val) {
      const name = val.split('_');
      this.firstName = name[0];
      this.lastName = name[1];
    }
  }

  let p = new Person();
  console.log(p); //Person {firstName: "东方", lastName: "不败"}

  console.log(p.fullName); //可读可写 东方_不败
  • extends继承

1. 使用 extends 来继承
2. 继承之后:
    子类的实例的原型指向父类的一个实例
    子类自己的原型指向父类 (静态方法也可以继承)
3. 可以在子类上添加属性和方法
4. 在子类上重写父类的方法,子类重写的方法必须调用super()

class 子类 extends 父类 {
    constructor() {
        super();
    }
}
  • 新数据类型Symbol

1. 创建一Symbol数据(只能调用,不能实例化)
    Symbol()

2. symbol数据特点:
    ① 每创建一个symbol类型的数据,都是唯一的。
    ② symbol类型的数据可以作为属性名,同字符串一样

3. 应用:
    给对象添加属性(不会被覆盖)

4. 注意:(可以作为对象的属性名,(字符串)symbol创建的都是唯一的)
    for...inObject.keys()、Object.values()、Object.entries()、Object.getOwnPropertyNames()  这些方法都取不到属性名时Symbol类型的属性
    Object.getOwnPropertySymbols()  获取类型是symbol的属性名
    Reflect.ownKeys(obj)  获取对象自身所有的属性(不论属性名时什么类型)
  • 新数据类型BigInt

通过 Number.MAX_SAFE_INTEGERNumber.MIN_SAFE_INTEGER  两个属性获得
如果整数超过了这个范围,无法按照整型的方式存储,计算会造成不精确

// 1. 字面量
var a = 100n
console.log(typeof a); //bigint

// 2 转换函数
var b = BigInt(1000)
console.log(b); //1000n
  • Set

new Set(); //创建的是空的Set 
new Set(数组); //把数组变为Set,去掉重复的值 
new Set(类数组)

//Set实例的方法
add(value)   添加一个值 
delete(value)   删除一个值 
has(value) 判断是否存在某个值 
clear() 删除所有的值 
keys() 返回遍历器 
values()       返回遍历器 
entries()       返回遍历器 
forEach() 用于遍历 size 属性 获取Set成员的个数
  • Map

// 创建空的 
new Map(); 
// 创建的时候,指定初始值 
new Map([   [key,value],   [key,value] ]);

get(key)        获取指定key的值
set(key,value)  设置或添加某个key的值
delete(key)     删除指定的某个key和他值
clear()         清空所有
has(key)        判断某个key是否存在
keys()          返回遍历器,所有key的集合
values()        返回遍历器,所有值的集合
entries()       返回遍历器,所有key-value的集合(二维)
forEach()       用于遍历
  • iterable可遍历对象

把部署了 iterator 接口的数据结构,称之为'iterable'(可遍历对象)
可以使用 for...of 遍历 iterable对象

iterator接口部署在了数据结构的Symbol.iterator属性上
一个对象,只有具有Symbol.iterator属性,且该属性指向一个返回遍历器的函数,该对象就是

Array
Set
Map
String
Arguments
NodeList
HTMLcollection
  • generator 生成器

生成器就是生成遍历器的函数

function* 生成器名() {
     yield 值;
     yield 值;
     yield 值;
     yield 值;
}
  • yield 关键字

yeild关键返回一个值, 遍历的时候每次得到就是yield的值 调用next(),执行到yield就会停止; 下一次调用next(),执行到下一个yield停止

调用生成器函数的时候,函数内不会执行

当调用next()的时候,才开始执行生成器函数内的代码; 执行到yield停止
  • 使用生成器函数给对象部署iterator接口

const obj = {
    name: '曹操',
    age: 18,
    score: 80,
    height: 170
};

// 把obj变为一个 iterable
// 部署iterator接口
obj[Symbol.iterator] = function* (){
    for (let i in obj) {
        yield [i, obj[i]];
    }
};

for (let i of obj) {
    console.log(i); //可遍历对象
}
  • 模块

模块中导出数据

// 模块内部
function say() {}
function eat() {}

export {
    say,
    eat
}

导入模块
import {say, eat} from '模块文件路径';
  • Proxy

  • Promise

参考:juejin.cn/post/699654…