ES6-ES11

简介

1）ES全称ECMAScript，是脚本语言的规范，而平时经常编写的js，是es的一种实现，所以es新特性其实指的就是js的新特性

2）ECMA（European Coumputer Manufacturers Association）：中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准、1964年后该组织改名为Ecma国际

3）ECMAScript：是由Ecma国际通过ECMA-262标准化的脚本程序设计语言

ES6

ES6兼容性查看

ECMAScript 6 compatibility table

let

和var一样使用，如：

let a;
let a,b,c;
let a = 100;
let a = 100,b = '我';c = [];

注意：

1）变量不能重复声明

let a = 100;
let a = 200;//输出报错

2）块级作用域

{
    let a = 100;
}
console.log(a);//输出未定义a

3）不存在变量提升

//会先把var a;提取上来
console.log(a);//输出undefined
var a = 100;
​
console.log(b);//输出报错
let b = 200;

4）不影响作用域链

let a = 10;
function fn(){
    console.log(a);//输出10
};
fn();

const

定义常量：值不能修改的量称为常量

const A = 100;

注意：

1）一定要赋初始值

const A;//报错

2）一般常量使用大写

3）常量值不能修改

const A = 100;
A = 200;//报错

4）块级作用域

5）对数组和对象元素的修改，不算做对常量的修改，不会报错

const TEAM = ['UZI','MLXG','Ming','Letme'];
TEAM.push('Xiaohu')//不会报错

变量解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值。这被称为解构赋值

//数组的解构
const F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xiao,liu,zhao,song] = F4;
console.log(xiao);//输出小沈阳
console.log(liu);//输出刘能
console.log(zhao);//输出赵四
console.log(song);//输出宋小宝
//对象的解构
const Zhao = {
    name: '赵本山',
    age: '不详',
    xiaopin:function(){
        console.log('我演小品');
    }
}
let {name,age,xiaopin} = Zhao;
console.log(name);//输出赵本山
console.log(age);//输出刘能
console.log(xiaopin);//输出ƒ () {console.log('我演小品');}
xiaopin();//输出我演小品

模板字符串

ES6引入新的声明字符串的方式``

let str = `我是字符串`;
console.log(str);//输出我是字符串

特点：

1）内容中可以直接出现换行符

let str = '我是一个一个一
个';//报错
let a = `你是一个一个一
个`;//不报错

2）变量拼接

let a = '旭旭宝宝';
let b = `${a}是个大潮种`;
console.log(b);//输出旭旭宝宝是个大潮种

简化对象写法

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法

let a = '旭旭宝宝';
let b = function () {
	console.log('是个潮种');
        };
const c = {
	a,
    b,
    improve(){};//是improve:function(){}的简写
        };
console.log(c);//输出{a: '旭旭宝宝' , b: ƒ , improve: ƒ improve()}

箭头函数以及声明特点

ES6允许使用 => 定义函数

let fn = function(){};
//——可以简化为
let fn = () => {};

注意：

1）this是静态的。始终指向函数声明时所在作用域下的this的值。

function fn(){
    console.log(this.name);
};
let fn1 = () => {
    console.log(this.name);
};
window.name = '我';
const School = {
    name:'你';
};
//直接调用
fn();//输出我
fn1();//输出我
//call方法调用
fn.call(School);//输出你
fn1.call(School);//输出我

2）不能作为构造函数实例化对象

let Person = (name,age) => {
    this.name = name;
    this.age = age;
};
let me = new Person('xiao',30);
console.log(me);//报错

3）不能使用arguments(保存实参)变量

let fn = () => {
    console.log(arguments);
};
fn(1,2,3);//报错

4）箭头函数的简写

//1.省略小括号。当形参有且只有一个的时候
let add = n => {
    return n + n;
};
console.log(add(9));//输出18
//2.省略大括号。当代码体只有一条语句的时候
//而且return必须省略，此时语句的执行结果就是函数的返回值
let pow = (n) =>n*n;//或let pow = n => n*n;
console.log(pow(9));//输出81

箭头函数适合与this无关的回调。如：定时器、数组的方法回调

箭头函数不适合与this有关的回调。如：事件回调、对象的方法

箭头函数没有自己的this，只能指向外层的this

函数参数的默认值设置

ES6允许给函数参数（形参）赋值初始值

function add(a,b,c = 10){
    return a + b + c;
};
let result = add(1,2);
console.log(result);//输出13

与解构赋值结合

function connect({host,username,password}){
    console.log(host);//如果给host设置默认值，实参没有传值，则输出默认值。如果设置了默认值，实参也传递了值，则输出实参值
    console.log(username);
    console.log(password);
};
connect({
    host:'localhost',
    username:'root',
    password:'root'
});

rest参数

用于获取函数的实参，用来代替arguments

语法：...标识符

function fn(...args){
    console.log(...args);//输出的为一个数组[1,2,3]
};
fn(1,2,3);

rest参数必须放在参数最后

function fn(a,b,...args){
    console.log(a);//输出1
    console.log(b);//输出2
    console.log(...args);//输出[3,4,5,6]
}
fn(1,2,3,4,5,6);

扩展运算符

...：能将数组转换为逗号分隔的参数序列

const xyj = ['唐三藏','孙悟空','猪八戒','沙和尚'];
function qujing(){
    console.log(arguments);
};
qujing(...xyj);//等同于qujing('唐三藏','孙悟空','猪八戒','沙和尚'),输出为'唐三藏','孙悟空','猪八戒','沙和尚'

应用

//1.数组合并
const kz = ['肖央','王太利'];
const fhcq = ['玲花','曾毅'];
const hb = [...kz,...fhcq];
console.log(hb);//输出为['肖央','王太利','玲花','曾毅']

//2.数组克隆
const A = ['b','c','d'];
const B = [...A];
console.log(B);//输出['b','c','d']

<!-- 3.将伪数组转为真数组 -->
<div></div>
<div></div>
<div></div>
<script>
	const divs = document.querySelectorAll('div');
    console.log(divs);//输出结果为[div,div,div]类型为对象
    const divArr = [...divs];
    console.log(divArr);//输出结果为[div,div,div]类型为数组
</script>

Symbol

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。是js语言的第七种数据类型，是一种类似于字符串的数据类型

数据类型：USONB ——you are so niubility
U: undefined
S: string symbol
O: object
N: null number
B: bollean

//创建Symbol
let s = Symbol();
console.log(s, typeof s);//输出Symbol()  'symbol'
//还可以通过Symbol.for创建
let s = Symbol.for();
console.log(s, typeof s);//输出Symbol()  'symbol'

特点：

• Symbol值是唯一的，用来解决命名冲突的问题

  let s1 = Symbol('张三');
  let s2 = Symbol('张三');
  console.log(s1 === s2);//输出false
  
  let s3 = Symbol.for('张三');
  let s4 = Symbol.for('张三');
  console.log(s3 === s4);//输出true

• Symbol值不能与其他数据类型进行运算

• Symbol定义的对象属性不能使用for in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名

应用

//往对象中添加方法
let game = {};
let methods = {
            up:Symbol(),
            down:Symbol()    
           }
game[methods.up] = function(){
    
}
game[methods.down] = function(){
	
}
console.log(game);//输出{Symbol():f(),Symbol():f()}
//对象名[对象名.键]——用来获取键名
//调用添加的函数 game[methods.up]()

//如果直接在对象里面添加Symbol，需要写在[里面]。如：
let a = {
    [Symbol()]:function(){
        
    }
}

迭代器

迭代器（iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署iterator接口，就可以完成遍历操作

1）ES6创造了一种新的遍历命令for...of循环，iterator接口主要供for...of消费

let xyj = ['唐三藏','孙悟空','猪八戒','沙和尚']
for(let v of xyj){
    console.log(v);//输出唐三藏,孙悟空,猪八戒,沙和尚
}

2）原生具备iterator接口的数据（可用for...of遍历）

• Array

• Arguments

• Set

• Map

• String

• TypedArray

• NodeList

3）工作原理

1. 创建一个指针对象，指向当前数据结构的起始位置

2. 第一次调用对象的next方法，指针自动指向数据结构的第一个成员

3. 接下来不断调用next方法，指针一直往后移，直到指向最后一个成员

4. 每调用next方法返回一个包含value和done属性的对象

注：需要自定义遍历数据的时候，要想到迭代器

生成器

生成器函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同

生成器其实就是一个特殊的函数

function * gen(){
    console.log(1)
}
let a = gen();
iterator.next();//输出1

函数中可以包含yield语句——函数代码的分隔符

function * gen(){
    console.log(1);
    yield '一只没有耳朵';
    console.log(2);
    yield '一只没有嘴巴';
    console.log(3);
    yield '真奇怪';
    console.log(4);
}
let iterator = gen();
iterator.next();//输出1
iterator.next();//输出2
iterator.next();//输出3
iterator.next();//输出4
console.log(iterator.next());//输出{value: '一只没有耳朵', done: false}
console.log(iterator.next());//输出{value: '一只没有嘴巴', done: false}
console.log(iterator.next());//输出{value: '真奇怪', done: false}
console.log(iterator.next());//输出{value: 'undefined', done: true}
//遍历
for(let v of gen()){
    console.log(v);
}

参数传递

next方法可以传入实参

function * gen(arg){
    console.log(arg);//输出AAA，有输出必须有一个next方法
    let one = yield 111;
    console.log(one);//输出BBB
    let two = yield 222;
    console.log(two);//输出CCC
    let three = yield 333;
    console.log(three);//输出DDD
}
let iterator = gen('AAA');
console.log(iterator.next());//输出{value: 111, done: false}
console.log(iterator.next('BBB'));//输出{value: 222, done: false}
console.log(iterator.next('CCC'));//输出{value: 333, done: false}
console.log(iterator.next('DDD'));//输出{value: undefined, done: true}

Promise

Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果

//实例化Promise对象
const p = new Promise(function(resolve,reject){
    setTimeout(function(){
        let data = '数据';
        resolve(data);//成功
        
        let err = '读取失败';
        reject(err);//失败
    },1000)
})
//调用Promise对象的then方法
p.then(function(value){
    console.log(value);//成功时返回结果——数据
},function(reason){
    console.log(reason);//失败是返回结果——读取失败
})

then方法

调用then方法 then方法的返回结果是Promise对象，对象状态由回调函数的执行结果决定

1. 如果回调函数中返回的结果是 非Promise 类型的数据，则状态为成功，返回值为对象成功的值

2. 如果回调函数中返回的结果是 Promise 类型的数据，则状态为内部Promise状态

const p = new Promise((resolve,reject)=>{
    setTimeout(=>{
               resolve('数据');
               },1000)
})
const result = p.then(value => {
    console.log(value);
    //1.非Promise数据
    return 111
    //2.Promise数据
    return new Promise((resolve,reject)=>){
                        resolve('ok');//内部为成功，返回也为成功
    					reject('error');//内部为失败，返回也为失败
                        })
},reason => {
    
})

//链式调用
p.then(value=>{
    
},reason=>{
    
}).then(value=>{
    
},reason=>{
    
})

catch方法

const p = new Promise((resolve,reject)=>{
    setTimeout(=>{
               reject('出错！');
               },1000)
})
p.catch(function(reason){
    console.log(reason);//输出  出错！
})

set

ES6提供了新的数据结构Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用扩展运算符和for...of进行遍历

let s = new Set(['小事','大事','小事'])
console.log(s);//输出{'小事','大事'}——自动去重

属性和方法

属性和方法	返回值
size	返回集合的元素个数
add	增加一个新元素，返回当前集合，在元素后添加
delete	删除元素，返回布尔值
has	检测集合中是否包含某个元素，返回布尔值
clear	清空集合

let s = new Set(['好事','小事','大事','小事'])
console.log(s.size);//输出4
s.add('大好事');//输出{'好事','小事','大事','小事','大好事'}
s.delete('大事');//输出{'好事','小事','小事','大好事'}
s.has('大好事');//返回true
s.has(1);//返回false
s.clear;
//for of遍历
let s = new Set(['好事','小事','大事','小事'])
for(let v of s){
    console.log(v);//输出好事 小事 大事 小事
}

应用

//数组去重
let arr = [1, 2, 3, 4, 3, 2, 1];
let result = [...new Set(arr)];
console.log(result);//输出[1,2,3,4]

Map

ES6提供了Map数据结构，它类似于对象，也是键值对的结合。但’键‘的范围不限于字符串，各种类型的值（包括对象）都可以当做键。Map实现了iterator接口，所以可以使用扩展运算符和for...of进行遍历

let m = new Map();

属性和方法

属性和方法	返回值
size	返回Map的元素个数
set	添加一个新的元素，返回当前Map
get	返回键名对象的键值
has	检测Map中是否包含某个元素，返回布尔值
clear	清空，返回undefined

let m = new Map();
m.set('name','刘德华');//添加键值对类型
let key = {
    name : '张学友';
}
m.set(key,['北京','上海']);

m.delete('name');//删除键位name的键值对

class

ES6提供了更接近传统语言（java、c#等）的写法，引入了class(类)这个概念，作为对象的模板。通过class关键字，可以定义类。基本上ES6的class可以看作只是一个语法塘，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象的原型的写法更加清晰、更像面向对象编程的语法而已

class Phone{
    //构造方法 名字固定
    constructor(brand,price){
        this.brand = brand;
        this.price = price;
    }
    //方法必须使用该语法，不能使用ES5的对象完整形式
    call(){//相当于ES5中 call：function(){}
        console.log('我可以打电话');
    }
}

类的静态成员

class Phone{
    //静态属性
    static name = '手机'
}
let nokia = new Phone();
cosole.log(nokia.name);//输出undefined
cosole.log(Phone.name);//输出手机
//statci标注的属性属于类，不属于实例化对象

类继承

class Phone{
    //构造方法
    constructor(brand,price){
        this.brand = brand;
        this.price = price;
    }
    //父类的成员属性
    call(){
        console.log('打电话')
    }
}
class SmartPhone extends Phone{
    //构造方法
    constructor(brand,price,color,size){
        super(brand,price);//等同于构造继承中的Phone.call((brand,price)
        this.color = color;
        this.size = size;
    }
    photo(){
        console.log('拍照')
    }
    playGame(){
        console.log('玩游戏')
    }    
}
const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
//小米可以使用photo、playGame和父类的call方法

子类对父类方法的重写

//在子类中添加与父类同名方法，会调用子类的方法

class中的get和set

//get
class Phone{
    get price(){
        console.log('数据被读取了')
        return 'iloveyou'
    }
    
}
let s = new Phone()
console.log(s.price)//输出数据被读取了   和  iloveyou(函数的返回值就是属性的值，没有就是undefined)
//set
//set方法必须有参数
class Phone{
    set price(newVal){
        console.log('数据被修改了')
    }    
}
let s = new Phone()
s.price = 'free'//输出数据被修改了，修改方法时触发

数值扩展

0）Number.EPSILON是js中表示的最小精度。EPSILON属性的值接近于2.22*10的-16次方。主要用于浮点数运算

//因为浮点数的运算是有误差的。比如：
console.log(0.1 + 0.2 === 0.3);//输出false

//运用
function equal(a,b){
    if(Math.abs(a-b) < Number.EPSILON){//Math.abs求绝对值
        return true;
    }else{
        return false;
    }
}
console.log(0.1 + 0.2, 0.3);//true

1）二进制和八进制

2）Number.isFinite 检测一个数值是否为有限数

console.log(Number.isFinite(100));//true(100为有限数)
console.log(Number.isFinite(100/0));//false

3）Number.isNaN 检测一个数值是否为NaN

console.log(Number.isNaN(100));//false

4）Number.parseInt、Number.parseFloat 字符串转整数

console.log(Number.parseInt('100'));//100
console.log(Number.parseFloat('3.1415926我'));//3.1415926

5）Number.isInterger判断一个数是否为整数

console.log(Number.isInterger(100));//true
console.log(Number.isInterger(3.14));//false

6）Math.trunc将数字的小数部分抹掉

console.log(Number.trunc(3.14));//3

7）Math.sign判断一个数是正数、负数还是0

//如果是正数输出1；0输出0；负数输出-1
console.log(Number.sign(57));//1
console.log(Number.sign(0));//0
console.log(Number.sign(-44));//-1

对象方法扩展

1）Object.is 判断两个值是否完全相等

console.log(Object.is(57,57));//true
console.log(Object.is(57,58));//false
//和===的区别
console.log(Object.is(NaN,NaN));//true
console.log(NaN === NaN);//false

2）Object.assign对象的合并

const star1 = {
    name:'刘德华',
    age:59
}
const star2 = {
    name:'张学友',
    age:60
}
console.log(Object.assign(star1,star2));//star2会把star1覆盖
//如果star1的属性star2没有，则会合并
//如果star1和star2的属性重名，则后面的会覆盖前面的

3）Object.setPrototypeOf、Object.getPrototypeOf

//设置原型对象Object.setPrototypeOf
const star = {
    name:'刘德华',
}
const sang = {
    gequ:['冰雨','爱不完']
}
Object.setPrototypeOf(star,sang);
console.log(Object.getPrototypeOf(star));//gequ:['冰雨','爱不完']
console.log(star);//star的原型对象会有gequ:['冰雨','爱不完']

模块化

模块化是指讲一个打的程序文件，拆分成许多小的文件，然后将小文件组合起来

模块化的好处

1）防止命名冲突

2）代码复用

3）高维护性

模块化语法

模块功能主要由两个命令构成：export和import

• export命令用于规定模块的对外接口

• import命令用于输入其他模块提供的功能

模块暴露数据语法汇总

1）分别暴露

可以将js文件中所有export后面跟的内容（暴露数据）引入到html

//新建一个js文件(如：m1.js)
export let star = '刘德华';
export function sang(){
    console.log('冰雨')
} 

<!--html文件 -->
<script type="module">
    //引入m1.js模块内容
    import * as m1 from "xxx/m1.js";//文件地址
    //调用方法
    m1.sang();
</script>

2）统一暴露

将多个数据一起暴露

//文件名（m2.js）
let star = '刘德华';
function sang(){
    console.log('冰雨')
} 
export{star,sang};

<!--html文件 -->
<script type="module">
    //引入m2.js模块内容
    import * as m2 from "xxx/m2.js";//文件地址
    //调用方法
    m2.sang();
</script>

3）默认暴露

//文件名（m3.js）
export default{
    star : '刘德华',
    sang : function(){
       console.log('冰雨') 
    }
}

<!--html文件 -->
<script type="module">
    //引入m3.js模块内容
    import * as m3 from "xxx/m3.js";//文件地址
    //调用方法
    m3.default.sang();
</script>

引入模块数据语法汇总

1）通用形式

<!--html文件 -->
<script type="module">
    //引入 模块内容
    import * as m1 from "xxx/m1.js";//文件地址
</script>

2）解构赋值

<!--html文件 -->
<script type="module">
        //引入 模块内容
    //对应分别暴露和统一暴露
    import {star,sang} from "xxx/m1.js";
        //如果重名可以添加as重新赋名
    import {star as mingxing,sang as gequ} from "xxx/m2.js";
    console.log(mingxing,gequ);
    //对应默认暴露
    import {default as m3} from "xxx/m3.js";//不能直接使用default，所以要用as给default起别名
</script>

3）简便形式

只有默认暴露可以使用

import m3 from "xxx/m3.js";

4）新建js文件

//新建一个js文件（如：m.js）
//将m1.js、m2.js、m3.js等引入到这个js文件中
import * as m1 from "xxx/m1.js";
import * as m2 from "xxx/m1.js";
import * as m3 from "xxx/m1.js";

<!--将m.js文件引入到html页面中-->
<script src="xxx/m.js" type="module"></script>

ES7

Array.prototype.includes

includes方法用来检测数组中是否包含某个元素，返回布尔值类型

const sdmz = ['西游记','红楼梦','水浒传','三国演义']
console.log(sdmz.includes('西游记'));//true
console.log(sdmz.includes('金瓶梅'));//false

指数操作符

在ES7中引入指数运算符 【**】，用来实现幂运算，功能与Math.pow结果相同

console.log(2 ** 10);//输出1024。2的10次方。等同于Math.pow(2,10);

ES8

async和await

async和await两种语法结合可以让异步代码像同步代码一样

async函数

• async函数的返回值是promise对象

• promise对象的结果由async函数执行的返回值决定

//async函数
async function fn(){
    return '好！'
}
const result = fn();
console.log(result);//输出Promise对象
//只要返回的结果不是一个Promise类型的对象，则async函数返回的结果就是一个成功的Promise对象
​
//throw new Error('出错啦')
//抛出错误，返回的就是一个失败的Promise对象
​
//返回的结果如果是一个Promise对象，Promise对象成功，返回值也成功；Promise对象失败，返回值也失败

await表达式

• await必须写在async函数中

• await右侧表达式一般为Promise对象

• await返回的是Promise成功的值

• await的Promise失败了，会抛出异常，需要通过try...catch捕获处理

const p = new Promise((resolve,reject) => {
    resolve('成功');
})
async function fn(){
    let result = await p;
    console.log(result);//输出成功
}
fn();

const p = new Promise((resolve,reject) => {
    reject('失败');
})
async function fn(){
    try{
    let result = await p;
    }catch(e){
        console.log(e);//输出失败
    }
    }
fn();

结合发送AJAX请求

//发送ajax请求，返回的是promise对象
function sendAJAX(url){
    return new Promise((resolve,reject) =>{
    //创建对象
    const x = new XMLHttpRequest();
    //初始化
    x.open('GET',url);
    //发送请求
    x.send();
    //绑定事件
    x.onreadystatechanfe =function(){
        if(x.reaydState === 4){
            if(x.status >= 200 && x.status < 300){
                resolve(x.response);
            }else{
                reject(x.status);
            }
        }
    }
        })
}
//Promise then方法测试
sendAJAX('https://xxx.com').then(value=>{
    console.log(value);
},reason=>{})
//async和await 测试
async function main(){
    //发送AJAX请求
    let result = await sendAJAX('https://xxx.com');
    console.log(result);
}

对象方法扩展

Object.values

获取对象中所有的值

const lol = {
    name:'英雄联盟',
    daqu:['电信','网通'],
    duanwei:['黑铁','黄铜','白银','黄金','铂金','钻石','宗师','大师','王者']    
}
//获取所有的键
console.log(Object.key(lol));
//获取所有的值
console.log(Object.values(lol));

Object.entries

将每个返回对象转换成数组

Object.getOwnPropertyDescriptors

返回对象属性的描述对象

ES9

扩展运算符

const Q = {
    q:'天音波';
}
const W = {
    w:'金钟罩';
}
const E = {
    e:'天雷破';
}
const R = {
    r:'猛龙摆尾';
}
const LeeSin{...Q,...W,...E,...R};//将四个对象合并到一个

rest参数

function fn({host,port,...user}){
    console.log(host);
    console.log(port);
    console.log(user);//除了host和port的参数都会存到user中
}
fn({
    host:'127.0.0.1',
    port:3306,
    username:'root',
    password:'root'
})

正则扩展

命名捕获分组

let str = '<a href="https://www.baidu.com/">百度</a>'
//提取url与标签文本
​
//1.不用命名捕获
const reg = /<a href="(.*)">(.*)<\/a>/;
const result = reg.exec(str);
console.log(result[1]);//输出第1个小括号中的内容-https://www.baidu.com
console.log(result[2]);//输出第2个小括号中的内容-百度
//2.使用命名捕获
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
const result = reg.exec(str);
console.log(result.groups.url);//输出：https://www.baidu.com
console.log(result.groups.text);//输出：百度

反向断言

let str = 'JS1314我我哦我555啦啦啦'
//正向断言
const reg = /\d+(?=啦)/;
const result = reg.exec(str);
console.log(result);//提取555
//反向断言
const reg = /(?<=我)\d+/;
const result = reg.exec(str);
console.log(result);//提取555

dotAll模式

dot有.的意思，.指正则表达式中元字符（除换行符外的任意单个字符）

 

ES10

对象扩展方法

Object.fromEntries

将二维数组转化为对象

 

 

Object.entries将对象转化为二维数组（ES8）

 

字符串方法扩展

trimStart和trimEnd

• trim清除字符串两侧空白

• trimStart清除字符串左侧空白

• trimEnd清除字符串右侧空白

let str = '   iloveyou   '
console.log(str);//输出   iloveyou   。
console.log(str.trimStart);//输出iloveyou   。
console.log(str.trimEnd);//输出   iloveyou。

数组方法扩展

flat和flatMap

• flat有平的意思

• 将多维数组转化为低维数组

• 可以添加参数，参数为数字，意为深度。默认为1

//flat
const arr = [1,2,3,[4,5]];
console.log(arr.flat());//输出[1,2,3,4,5]
const arr1 = [1,2,3,[4,5,[6,7]]];
console.log(arr1.flat());//输出[1,2,3,4,5,[6,7]]
console.log(arr1.flat(2));//输出[1,2,3,4,5,6,7]

//flatMap
const arr = [1,2,3,4,5];
const result = arr.flatMap(item => [item*10]);
console.log(result);//[10,20,30,40,50]

Symbol扩展

Symbol.prototype.description

用于获取Symbol字符串描述

let s = Symbol('德玛西亚');
console.log(s.description);//输出德玛西亚

ES11

私有属性

• 私有属性在前面加#

• 私有属性只能在对象里面获取，在外部输出不了

class Person{
    //公有属性
    name;
    //私有熟悉
    #age;
    #weight;
    //构造方法
    constructor(name,age,weight){
        this.name = name;
        this.#age = age;
        this.#weight = weight;
    }
    fn(){
       console.log(girl.#age);//输出18 
    }
}
//实例化
const girl = new Person('小红',18,'45kg');
console.log(girl.#age);//获取不了

Promise.allSettled

• 返回的Promise对象，是成功的

• Promise.all返回的Promise对象，只要有一个失败就是失败的
   

 

String.prototype.matchAll

 

输出标签内容

可选链操作符 ?.

判断前面的值传入没有，再去执行下一步

 

动态import

按需加载

<button id="btn"></button>
<script type="module">
    const btn = document.querySelector('#btn');
    btn.onclick = function(){
        import('xxx/hello.js').then(module =>{
            module.hello();
        })
    }
</script>

//文件（hello.js）
export function fn(){
    alert('你好！')
}

BigInt

大整形

在数字后+n

let n = 521n;
console.log(n,typeof(n));//521n   BigInt

函数

不能使用浮点数

let n = 520;
console.log(BigInt(n));//520n

主要用于大数值运算

let max = Number.MAX_SAFE_INTEGER;//最大数
//不能正常运算
console.log(max+1);
console.log(max+2);
//可以正常输出
console.log(BigInt(max)+BigInt(1));
console.log(BigInt(max)+BigInt(2));

globalThis

始终指向全局对象