ES6➜ES11新特性汇总（图文详解可温故与快速查找~）

您所在的位置：网站首页 › es6新增的函数参数定义的特性 › ES6➜ES11新特性汇总（图文详解可温故与快速查找~）

ES6➜ES11新特性汇总（图文详解可温故与快速查找~）

2024-07-08 23:46| 来源: 网络整理| 查看: 265

快速查找目录：一.ES6新特性（重）：1. let 声明变量：2.const 声明常量：3.变量解构赋值：3.模板字符串：4.对象简化写法：5. 箭头函数：6.函数参数的默认值设置：7. rest参数：8.扩展运算符：9. Symbol：10. 迭代器：11.生成器：12.promise：13. Set(集合)：14.Map：15.class类：16. 数值扩展17.对象方法扩展：18.模块：二.ES7新特性：1. includes（）：2.指数操作符：三.ES8新特性：1.async 与 await：2. 对象方法扩展：三.ES9新特性：1.对象展开：四.ES10新特性：1.Object.fromEntries()2.trimStart()与trimEnd()：3.flat与flatMap：五.ES11新特性：1.私有属性：2.Promise.allSettled()：3.matchAll() ：4.可选链操作符5.BigInt:6.globalThis：六.总结：

一.ES6新特性（重）： 1. let 声明变量：

ES6新增加了两个重要的 JavaScript 关键字: let 和 const。

书写格式：

let a; let b,c; let d=10,f='asd',e=[];

注意事项：

1.变量不能重复声明：

let a=12; let a=13;

运行结果：在这里插入图片描述 2. 只在块级作用域内有效：

{ let a=12; } console.log(a);

运行结果：在这里插入图片描述 3.不存在变量提升：

console.log(a); let a=12;

运行结果：在这里插入图片描述 4.不影响作用域链效果：

{ let blog = 'night'; function fn(){ console.log(blog); } fn(); }

运行结果：在这里插入图片描述案例：点击盒子切换颜色：

无法实现：

let items = document.querySelectorAll('.item'); // var声明 for(var i=0;i{ console.log(this.name); } //分别调用 getName1.call(peopel); getName2.call(peopel);

使用 call() 方法，您可以编写能够在不同对象上使用的方法。运行结果：在这里插入图片描述

看出getName1的this指向已经变了，不再是全局的name，而是对象里的name，而箭头函数getName2没变，因为它始终指向函数声明时所在作用域下的this值。

2.不能作为构造实例化对象：

let night = (a,b)=>{ this.a=a; this.b=b; } let out = new night(); console.log(out);

运行结果：在这里插入图片描述 3. 不能使用arguments变量：略… 4.箭头函数简写：（1）当形参仅仅只有一个时可以省略括号：

let night = (n)=>{ return n+1; }

相当于：

let night = n=>{ return n+1; }

（2）当代码体只有一条语句时，可以省略花括号，且return这个单词也要省略：

let night = n=> n+1;

案例：点击盒子两秒后变色：

var item = document.querySelector('.item'); item.onclick = function(){ //保存当前this let _this = this; setTimeout(function(){ _this.style.background = 'blue'; },2000) }

我们这里可以看到要保存this，然后在定时器里才能用this，否则它会指向全局。而使用箭头函数就不用这样，因为箭头函数this始终指向函数声明时所在作用域下的this值，如下：

var item = document.querySelector('.item'); item.onclick = function(){ /* let _this = this; */ setTimeout(()=>{ this.style.background = 'blue'; },2000) }

运行结果：在这里插入图片描述

6.函数参数的默认值设置：

1.允许给函数参数赋初始值（潜规则是有初始值的参数要放最后一个）：

let add = (a,b,c=5)=>{ return a+b+c; } console.log(add(1,2));

运行结果：在这里插入图片描述

7. rest参数：

新增的 rest参数用来获取函数的实参，代替arguments

ES5方式（得到对象）：

function arr(){ console.log(arguments); } arr('sky','sea','tree');

运行结果：在这里插入图片描述 ES6方式（得到数组）：

function arr(...night){ console.log(night); } arr('sky','sea','tree');

运行结果：在这里插入图片描述注意如果有多个参数，rest参数要放最后。

8.扩展运算符：

“…” 扩展运算符能将 “数组” 转换为逗号分隔的参数序列，如：

var arr = ['sea','sky','tree']; function night(){ console.log(arguments); } night(...arr);

运行结果：在这里插入图片描述

看到没，传入的参数不是一整个arr数组了，转换成三个参数了。相当于这么传：

night('sea','sky','tree');

应用：

合并两个数组： ES5写法：

var arr = ['sea','sky','tree']; var item = ['nature','moon','wind']; var world = arr.concat(item);

运行结果：在这里插入图片描述 ES6写法（就问你快不快）：

var arr = ['sea','sky','tree']; var item = ['nature','moon','wind']; var world = [...arr,...item];

数组克隆：

var arr = ['sea','sky','tree']; var world = [...arr];

一个字，快！

伪数组转成真数组：

//伪数组 var arr = document.querySelectorAll("div"); //变真了 var world = [...arr]; 9. Symbol：

ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。且Symbol值不能与其他数据进行运算。且Symbol定义的对象属性不能使用fr…in 循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名。

创建：(会返回一个symbol对象)

let a = Symbol();

写入字符串，相当于描述注释这东西：

let a = Symbol('It is a');

也可以这样，返回函数对象：

let a = Symbol.for('It is a');

你看不到它独一无二，其实暗地里它已经由自己的某些方法让自己独一无二了。都会生成唯一的symbol值。

使用（给对象添加独一无二的属性和方法）：

let people = { name: 'night', [Symbol('age')]: function(){ console.log("I am 22"); }, [Symbol('sex')]:function(){ console.log("I am man"); } } console.log(people);

运行结果：在这里插入图片描述

10. 迭代器：

迭代器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口（其实就是对象里的一个属性），就可以完成遍历操作。 1.ES6创造了一种新的遍历命令fo…of 循环，Iterator接口主要供 for…of消费。 2.原生具备 iterator 接口的数据可用 for of 遍历。比如数组等都有。

let arr = ['sea','moon','wind']; for(let v of arr){ console.log(v); }

运行结果：在这里插入图片描述插一嘴，for in 循环保存的是键名。for of 保存的是键值。

案例：

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

运行结果：在这里插入图片描述

14.Map：

ES6提供了Map数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值(包括对象)都可以当作键。Map也实现了iterator 接口，所以可以使用[扩展运算符」和[for…of…]进行遍历。Map的属性和方法:

size 返回Map的元素个数。set 增加一个新元素，返回当前Map。get 返回键名对象的键值。has 检测Map中是否包含某个元素，返回boolean值。clear 清空集合，返回undefined。

例如（声明）：

let m =new Map(); //新添元素，一个是键，一个是键值 m.set('name','北极光之夜。'); m.set('say',function(){ console.log("hello"); }) console.log(m);

运行结果：在这里插入图片描述

15.class类：

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

class 声明类。constructor 定义构造函数初始化。extends。继承父类。super 调用父级构造方法。static定义静态方法和属性。父类方法可以重写。

ES5构造实例化对象写法：

function Phone(price,processor){ this.price = price; this.processor = processor; } //添加方法 Phone.prototype.advert=function(){ console.log("米西米西"); } // 实例化对象 let phone = new Phone('5000','good'); phone.advert(); console.log(phone);

运行结果：在这里插入图片描述 ES6 class类定义：

class Phone{ //构造方法，固定使用constructor constructor(price,processor){ this.price = price; this.processor = processor; } //添加方法，固定写法 advert(){ console.log("米西米西"); } } // 实例化对象 let phone = new Phone('5000','good'); phone.advert(); console.log(phone);

运行结果：在这里插入图片描述静态属性：

若有 static 定义的属性和方法只属于类，不属于实例对象：

class Phone{ static say = 'hello'; static advert(){ console.log("米西米西"); } } let phone = new Phone(); console.log(phone.say); phone.advert();

运行结果：在这里插入图片描述构造函数继承：

//有一个构造函数 function People(name,age){ this.name = name; this.age = age; //它有一个say函数方法 this.say = function(){ console.log('哈哈哈，你也能用我啦~'); } } // 空的构造方法 function Xiaoming(){} // 我想让Xiaoming也有People里面的say方法。 // 利用原型链机制，让一个引用类型继承另一个引用类型的属性和方法 Xiaoming.prototype = new People('小明',18); var xiaoming = new Xiaoming(); xiaoming.say();

运行结果：在这里插入图片描述类继承：

class Phone{ constructor(price,processor){ this.price = price; this.processor = processor; } advert(){ console.log("米西米西"); } } // extens关键字继承父类 class huawei extends Phone{ constructor(price,processor,color){ //继承父类构造方法 super(price,processor); this.color = color; } say(){ console.log("hello world"); } } let hw = new huawei('5000','good','white'); hw.advert(); hw.say(); console.log(hw);

运行结果：在这里插入图片描述

16. 数值扩展

Number . EPSILON 是JavaScript 表示的最小精度 EPSILON 属性的值接近于2. 2204460492503130808472633361816E-16

二进制和八进制Number. isFinite检测-一个数值是否为有限数。Number .isNaN 检测一个数值是否为 NaN。Number.parseInt Number.parseFloat字符串转整数。Number. isInteger判断一个数是否为整数。Math. trunc 将数字的小数部分抹掉。Math.sign判断一个数到底为正数负数还是零。

这个就不细写，用到哪个百度就好~

17.对象方法扩展：

Object.is()判断两个数值是否相等：

console.log(Object.is(5,5));

运行结果：在这里插入图片描述 Object.assign对象合并

Object.assign(night,item);

放入两个对象就行。

18.模块：

什么是模块? 当一个js文件可以独立完成一个功能的时候，这个js文件就是一个模块。当一个多个.js文件共同完成一个功能的时候，这个些js文件就是一个模块。模块就是module (模块的意思)。

模块可以看这篇文章的第六点，很详细~ 或者这篇文章的第六点，很详细：https://bbs.huaweicloud.com/blogs/269816

二.ES7新特性： 1. includes（）：

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

var world = ['sea','wind','moon']; console.log(world.includes('sea'));

运行结果：在这里插入图片描述

2.指数操作符：

指数运算符 ** 可以快速实现次方运算，与Math.pow方法结果一样：

console.log(2 ** 3);

运行结果：在这里插入图片描述

三.ES8新特性： 1.async 与 await：

async与await使用请点击链接看该文章的第十一与第十二点与第十三点~

或者查看该文章的第十一与第十二点与第十三点:https://bbs.huaweicloud.com/blogs/258414

2. 对象方法扩展：

Object.keys（）获取对象所有的键：

var people = { name:'nignt', age: '22', like:['sea','star','wind'] } console.log(Object.keys(people));

运行结果：在这里插入图片描述 Object.values（）获取对象所有的值：

var people = { name:'nignt', age: '22', like:['sea','star','wind'] } console.log(Object.values(people));

运行结果：在这里插入图片描述 Object.entries（）获取对象所有的键与值：配合Map（）使用更佳：

var people = { name:'nignt', age: '22', like:['sea','star','wind'] } var m = new Map(Object.entries(people)) console.log(m);

运行结果：在这里插入图片描述对象属性描述对象： Object.getOwnPropertyDescriptors();

var people = { name:'nignt', age: '22', like:['sea','star','wind'] } console.log(Object.getOwnPropertyDescriptors(people));

运行结果：在这里插入图片描述

三.ES9新特性： 1.对象展开：

Rest参数与spread 扩展运算符在ES6 中已经引入，不过ES6 中只针对于数组，在ES9中为对象提供了像数组一样的rest参数和扩展运算符。

如下：

function connect({one,two,...more}){ console.log(one); console.log(two); console.log(more); } connect({one:1,two:2,three:3,six:6})

运行结果：在这里插入图片描述应用：

合并几个对象里的属性：

var one = { a:'sea' } var two = { b:'star' } var three = { c:'night' } var sum = {...one,...two,...three}; console.log(sum);

运行结果：在这里插入图片描述

四.ES10新特性： 1.Object.fromEntries()

Object.fromEntries() 方法接收一个键值对的列表参数，并返回一个带有这些键值对的新对象。

传入二维数组形式：

var sum = Object.fromEntries([ ['name','sky'], ['age','22'] ]); console.log(sum);

看结果：在这里插入图片描述传入Map形式：

const m =new Map(); m.set('age','22'); var sum = Object.fromEntries(m); console.log(sum);

结果：在这里插入图片描述

2.trimStart()与trimEnd()：

trimStart与trimEnd方法。 trimStart() 方法从字符串的开头删除空格。trimLeft() 是此方法的别名。 trimEnd()方法从字符串末尾删除空格。trimRight()是此方法的别名。

var sum = " 北极光之夜。 "; console.log(sum); console.log(sum.trimStart()); console.log(sum.trimEnd());

运行：在这里插入图片描述

3.flat与flatMap：

flat(n) 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。n表示深度，可将多维数组转成低维。 flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与map连着深度变量1的 flat 几乎相同，但 flatMap通常在合并成一种方法的效率稍微高一些。

const arr = [1,2,[3,4]]; console.log(arr.flat());

运行：在这里插入图片描述

五.ES11新特性：

好家伙终于到ES11了。一杯茶搞定看来还是有点玄呀。

1.私有属性：

在类里的私有属性前加个#号。就是说在这个类外部查找不到私有属性，只能在这个类的内部，来找到这个私有属性。

class people{ name; #age; constructor(name,age){ this.name =name; this.#age = age; } out(){ console.log(this.#age); } let ha = new people(); console.log(ha.#age);

结果：在这里插入图片描述

2.Promise.allSettled()：

Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果。而它的返回结果始终会是成功。当您有多个彼此不依赖的异步任务成功完成时，或者您总是想知道每个promise的结果时，通常使用它。

const p1 = new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve('yes!!') },500) }) const p2 = new Promise((resolve,reject)=>{ setTimeout(()=>{ reject('No!!') },500) }) let results = Promise.allSettled([p1,p2]); console.log(results);

运行：在这里插入图片描述

3.matchAll() ：

matchAll() 方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。

4.可选链操作符

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。

5.BigInt:

BigInt 是一种内置对象，它提供了一种方法来表示大于 253 - 1 的整数。这原本是 Javascript中可以用 Number 表示的最大数字。BigInt 可以表示任意大的整数。可以用在一个整数字面量后面加 n 的方式定义一个 BigInt ，如：10n，或者调用函数BigInt()。主要运用于大数值的运算。

//最大安全整数 let max = Number.MAX_SAFE_INTEGER; // 超过最大安全整数仍然能计算 console.log(BigInt(max)+BigInt(2));

结果：在这里插入图片描述

6.globalThis：

全局属性 globalThis 包含全局的 this 值，类似于全局对象（global object。意思就是不管如何，它始终指向全局对象。

六.总结：

2333，一杯茶到这也该喝完了~

在这里插入图片描述

其它文章：文字烟雾效果 html+css+js 环绕倒影加载特效 html+css 气泡浮动背景特效 html+css 简约时钟特效 html+css+js 赛博朋克风格按钮 html+css 仿网易云官网轮播图 html+css+js 水波加载动画 html+css 导航栏滚动渐变效果 html+css+js 书本翻页 html+css 3D立体相册 html+css 霓虹灯绘画板效果 html+css+js 记一些css属性总结（一） Sass总结笔记 …等等进我主页看更多~

【本文地址】

ES6➜ES11新特性汇总（图文详解可温故与快速查找~）

ES6➜ES11新特性汇总（图文详解可温故与快速查找~）

今日新闻

推荐新闻