js之es新特性

ES6 (ECMAScript 2015)

1. let 和 const

  • let 允许声明一个块作用域的变量。
  • const 允许声明一个块作用域的常量。
let x = 10;
if (x === 10) {let x = 20; // 这里的 x 和外面的 x 不是同一个变量console.log(x); // 20
}
console.log(x); // 10const y = 5;
// y = 10; // 会抛出错误,因为y是一个常量

2. 模板字符串

  • 允许字符串内嵌表达式,可以用反引号 (``) 来定义。
let name = "world";
console.log(`Hello, ${name}!`); // "Hello, world!"

3.箭头函数

  • 提供了一种更简洁的写法来声明匿名函数。
let add = (a, b) => a + b;
console.log(add(2, 3)); // 5

4.解构赋值

  • 允许用类似数组或对象字面量的语法来分配值到变量中。
// 数组解构
let [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2// 对象解构
let {firstName, lastName} = {firstName: "John", lastName: "Doe"};
console.log(firstName); // John
console.log(lastName); // Doe

5.Promise

  • 提供了一种更好的异步编程解决方案,比传统的回调函数方式更易于理解和维护。
let promise = new Promise(function(resolve, reject) {setTimeout(() => resolve("done"), 1000);
});promise.then(result => console.log(result), // "done"error => console.log(error)
);

ES7 (ECMAScript 2016)

1.数组的 includes 方法

  • 判断数组是否包含某个值。
let arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

2.指数运算符

  • 简化了幂运算的书写。
console.log(2 ** 3); // 8

ES8 (ECMAScript 2017)

1.async/await

  • 使异步代码看起来更像同步代码。
async function asyncCall() {console.log('calling');let result = await new Promise((resolve) => {setTimeout(() => resolve("resolved"), 1000)});console.log(result);
}asyncCall();

2.Object.values()

  • 该方法返回一个给定对象自身的所有可枚举属性值的数组,不包括原型链上的属性。
const object = { a: 1, b: '2', c: true };
console.log(Object.values(object)); // [1, '2', true]

3.Object.entries()

  • 与Object.values()类似,Object.entries()返回一个给定对象自身的所有可枚举属性[key,
    value]对的数组。
const object = { a: 1, b: '2', c: true };
console.log(Object.entries(object)); // [['a', 1], ['b', '2'], ['c', true]]

4.String Padding

  • 两个实用的字符串实例方法:padStart()和padEnd()允许以一种便捷的方式给字符串前后填充字词,直到达到目标长度。
padStart()
let str = "5";
console.log(str.padStart(2, "0")); // "05", 填充至长度2,用"0"填充
padEnd()
let str = "5";
console.log(str.padEnd(2, "0")); // "50", 填充至长度2,用"0"填充

5.Object.getOwnPropertyDescriptors();

  • 此方法用于获取一个对象的所有自身属性的描述符。若没有任何自身属性,则返回空对象。
const obj = {property1: 42
};
const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors.property1.writable); // true
console.log(descriptors.property1.value); // 42

6.尾部逗号 (Trailing commas) 在函数参数列表和调用中

  • ES8 允许在函数参数定义和调用时使用尾部逗号,这有助于版本控制系统中清晰地查看实际更改的参数,避免因格式更改引起的不必要的差异。
function myFunc(param1,param2, // 尾部逗号
) {// 函数体
}myFunc(1,2, // 尾部逗号
);

ES9 (ECMAScript 2018)

1. 异步迭代(for-await-of)

  • 允许使用 for…of 循环迭代异步操作,特别是对异步生成的集合。
async function* asyncGenerator() {let i = 0;while (i < 3) {// 模拟异步操作await new Promise(resolve => setTimeout(resolve, 100));yield i++;}
}(async () => {for await (let num of asyncGenerator()) {console.log(num);}
})();

2.Promise.prototype.finally()

  • 可以指定一个在promise执行之后无论是fulfilled还是rejected都会执行的回调函数。
new Promise((resolve, reject) => {// 异步操作setTimeout(() => resolve("Success"), 1000);
})
.then(result => console.log(result))
.catch(error => console.error(error))
.finally(() => console.log("Promise is settled."));

3.Rest/Spread 属性

  • 对象现在也支持 rest 参数和 spread 属性。
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }let n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }

ES10 (ECMAScript 2019)

1.Array.prototype.flat() 和 Array.prototype.flatMap()

  • 可以按照指定的深度递归地将数组扁平化。
let arr = [1, [2, [3, [4]]]];console.log(arr.flat()); // 默认深度为1, 结果: [1, 2, [3, [4]]]
console.log(arr.flat(2)); // 指定深度为2, 结果: [1, 2, 3, [4]]
console.log(arr.flat(Infinity)); // 指定深度为Infinity, 结果: [1, 2, 3, 4]

2.String.prototype.trimStart() 和 String.prototype.trimEnd()

  • 分别用于去除字符串开头和结尾的空白字符。
let greeting = '   Hello world!   ';console.log(greeting.trimStart()); // "Hello world!   "
console.log(greeting.trimEnd()); // "   Hello world!"

3.Object.fromEntries()

  • 把键值对列表转换为一个对象
let entries = [['name', 'John'], ['age', 30]];
let obj = Object.fromEntries(entries);console.log(obj); // { name: "John", age: 30 }

ES11 (ECMAScript 2020)

1.BigInt 类型

  • 支持任意精度的整数。
let bigInt = 1234567890123456789012345678901234567890n;console.log(bigInt + 1n); // 1234567890123456789012345678901234567891n

2.动态导入(import())

  • 允许你按需动态加载模块
(async () => {if (condition) {const module = await import('./module.js');module.doSomething();}
})();

3.Promise.allSettled()

  • 返回一个在所有给定的promise已经fulfilled或rejected后的promise,并带有每个promise的结果。
let promises = [Promise.resolve(33),new Promise(resolve => setTimeout(() => resolve(66), 0)),Promise.reject(new Error('an error'))
];Promise.allSettled(promises).then(results => results.forEach((result) => console.log(result.status)));

ES12 (ECMAScript 2021)

1.String.prototype.replaceAll()

  • 允许替换字符串中出现的所有匹配项。
let quote = 'To be or not to be';
console.log(quote.replaceAll('be', 'test')); // "To test or not to test"

2.逻辑赋值运算符

  • 包含逻辑与 (&&=), 逻辑或 (||=) 和逻辑空值 (??=) 赋值运算符。
let x = 0;
let y = 1;x &&= 2; // x = x && 2
console.log(x); // 0y ||= 2; // y = y || 2
console.log(y); // 1let z = null;
z ??= 2; // z = z ?? 2
console.log(z); // 2

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/689365.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PyCharm 新建目录 (directory or folder)

PyCharm 新建目录 [directory or folder] 1. 新建目录2. Enter new directory name -> OKReferences 1. 新建目录 right mouse click on the project -> New -> Directory 2. Enter new directory name -> OK ​​​ References [1] Yongqiang Cheng, https:/…

go redis

go redis 快速入门 安装&#xff1a; go get github.com/redis/go-redis/v9然后创建客户端&#xff1a; package mainimport "github.com/redis/go-redis/v9"func main() {rdb : redis.NewClient(&redis.Options{Addr: "47.109.87.142:6379",Pa…

C++_design_model_observer

/* 观察者模式是一种常用的设计模式&#xff0c;用于在对象之间建立一种一对多的依赖关系&#xff0c;当被观察的对象发生变化时&#xff0c; 所有依赖于它的对象都能够得到通知并自动更新。下面是一个使用C实现观察者模式的例子&#xff1a; */#include <iostream> #inc…

Redis篇----第六篇

系列文章目录 文章目录 系列文章目录前言一、Redis 的持久化机制是什么?各自的优缺点?二、Redis 常见性能问题和解决方案:三、redis 过期键的删除策略?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章…

已经打包好了的vue dist文件夹,如何用electron打包成exe桌面应用

先在项目根目录下&#xff08;非dist根目录&#xff09;安装electron electron-packager npm install electron再在项目根目录下&#xff08;非dist根目录&#xff09;安装electron-packager npm install electron-packager 然后在dist文件夹下创建main.js文件,内容为 cons…

如何查看springboot依赖的JDK版本

通过maven构建Java项目或者使用源代码进行Java编译时&#xff0c;常常遇到JDK版本和Springboot版本不匹配的问题&#xff0c;导致编译失败&#xff0c;比如出现如下错误&#xff1a; org/springframework/beans/factory/InitializingBean.class [ERROR] 类文件具有错误的…

Unix I/O 模型及Java I/O 模型详解

在Unix Socket的输入操作中&#xff0c;可以将其分为以下几个阶段&#xff1a; 等待数据就绪(内核空间)&#xff1a; 在这个阶段&#xff0c;应用程序通过调用阻塞式的读取函数&#xff08;如recv&#xff09;或非阻塞式的读取函数&#xff08;如recv、recvfrom&#xff09;等待…

可扩展性和性能:数字化成功的支柱

在动态的数字技术世界中,用户的期望和对数字系统的需求不断增加,可扩展性和性能已成为孪生要素。在本文中,我们将全面探讨软件和系统设计的两个基本方面:水平扩展、垂直扩展和性能优化。 简介:关键当务之急 考虑一个场景:您正在管理一个电子商务平台,限时抢购导致网站…

入门级10寸加固行业平板—EM-I10J

亿道信息以其坚固耐用的智能终端设备而闻名&#xff0c;近日发布了一款理想入门级 10 英寸加固平板电脑—I10J。 EM-I10J​​ 这是一款 10 英寸的平板电脑&#xff0c;主要运行 Windows 10操作系统&#xff0c;带有硬化塑料外壳&#xff0c;具有 IP65 防水防尘功能和 MIL-STD 8…

线性dp之石子合并

设有 N堆石子排成一排&#xff0c;其编号为 1,2,3,…,N。 每堆石子有一定的质量&#xff0c;可以用一个整数来描述&#xff0c;现在要将这 N 堆石子合并成为一堆。 每次只能合并相邻的两堆&#xff0c;合并的代价为这两堆石子的质量之和&#xff0c;合并后与这两堆石子相邻的…

注册及搭建小程序开发环境

一、注册小程序账号 打开微信公众平台&#xff0c;通过邮箱注册小程序账号&#xff08;每个邮箱账号&#xff0c;只能注册一个小程序&#xff09;。 注册完成后&#xff0c;登录邮箱&#xff0c;打开激活地址&#xff0c;按照邮件提示&#xff0c;填写信息&#xff0c;激活账号…

MongoDB语言命令

文章目录 MongoDB shellMongoDB数据类型数据插入数据查询数据删除数据更新MongoDb数组更新和时间序列MongoDB特殊索引mongoDB权限设置 MongoDB shell 1、MongoDB用文档的形式存储数据&#xff0c;BSON的数据格式。 2、MongoDB与传统数据库相比&#xff0c;集合相当于表&#x…

springboot 任务执行和调度详细介绍

Spring Boot支持任务执行和调度&#xff0c;这可以通过Spring框架的TaskExecutor和TaskScheduler接口来实现。这些功能允许你异步执行任务和定时执行任务&#xff0c;这在处理批量作业、定时任务和异步服务时非常有用。 任务执行 Spring的TaskExecutor接口提供…

redis的hash数据结构底层简记

hash&#xff1a;k和v都是string的hash表。 HSET&#xff08;设置集合数据&#xff0c;4.0之前只能设置1个&#xff0c;之后可以设置多个&#xff09;&#xff0c;HSETNX(若k不存在则设置对应v)&#xff0c;HDEL&#xff08;删除指定kv&#xff0c;可以一次删除多个&#xff09…

Eclipse - 查看工程或者文件的磁盘路径

Eclipse - 查看工程或者文件的磁盘路径 1. Help -> Eclipse Marketplace -> Find: Explorer -> Eclipse Explorer 4.1.0 -> Install2. right-click -> Open in ExplorerReferences 1. Help -> Eclipse Marketplace -> Find: Explorer -> Eclipse Explo…

Java 中使用Collections类来反转集合的顺序

如何使用Collections类来反转集合的顺序 在Java中&#xff0c;Collections类提供了一些有用的静态方法&#xff0c;用于操作集合。然而&#xff0c;Collections类并没有直接提供反转集合顺序的方法。但是&#xff0c;你可以使用List接口中的Collections.reverse(List<?>…

门店数字化之旅:如何跨越那些难以逾越的鸿沟?

在数字化浪潮席卷全球的背景下&#xff0c;连锁门店运营正面临着一场深刻的变革。这场变革不仅关乎技术的升级&#xff0c;更涉及到商业模式、管理理念以及消费者体验的根本性转变。然而&#xff0c;在这场转型之路上&#xff0c;许多门店却常常遭遇各种痛点&#xff0c;让数字…

2023年总结与2024展望

今天是春节后上班第一天&#xff0c;你懂的&#xff0c;今天基本上是摸鱼状态&#xff0c;早上把我们负责的项目的ppt介绍完善了一下&#xff0c;然后写了一篇技术文章&#xff0c;《分布式系统一致性与共识算法》。接着就看了我近几年写的的年度总结&#xff0c;我一般不会在元…

一个服务器实现本机服务互联网化

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 一个服务器实现本机服务互联网化 前言痛点关于中微子代理实战演练搭建服务端搭建客户端服务端配置代理实现 前言 在数字世界的网络战场上&#xff0c;中微子代理就像是一支潜伏在黑暗中的数字特工队&…

自动化上位机开发C#100例:雷赛运动控制卡EtherCAT总线卡C#封装类

自动化上位机开发C#100例:雷赛运动控制卡EtherCAT总线卡C#封装类 文章目录 LTDMC.dll下载LTDMC.cs LTDMC.dll C#调用封装下载ICard.cs 运动控制卡接口Card.cs 运动控制卡抽象类CardLTDMC.cs 雷赛运动控制卡EtherCAT总线卡实现类CardList.cs 总线卡列表封装 LTDMC.dll下载 最新…