ES6 更新内容简介
标签搜索
侧边栏壁纸
  • 累计撰写 36 篇文章
  • 累计收到 59 条评论

ES6 更新内容简介

shthah
2023-11-22 / 4 评论 / 284 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2024年12月20日,已超过126天没有更新,若内容或图片失效,请留言反馈。

JavaScript 版本号 旧的 ECMAScript 版本由数字命名:ES5 和 ES6。
从 2016 年开始,版本按年份命名:ES2016、2018、2020

es6(ES2015) 新增

● let const 关键字
● 箭头函数 const x = (x, y) => x * y;
● 解构赋值
对象结构赋值

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

// Destructuring Assignment
let { firstName, age } = person;

数组结构赋值

const fruits = ["Banana", "Orange", "Apple", "Mango"];
 // Destructuring Assignment
let [fruit1, fruit2] = fruits;

● 展开运算符
1 合并对象或数组
2 转换数组
3 对象的展开
4 默认参数

const q1 = ["Jan", "Feb", "Mar"];
const q2 = ["Apr", "May", "Jun"];
const q3 = ["Jul", "Aug", "Sep"];
const q4 = ["Oct", "Nov", "May"];

const year = [...q1, ...q2, ...q3, ...q4];

const numbers = [23,55,21,87,56];
let maxValue = Math.max(...numbers);.

//es6
function fn(a=10){
    console.log(a);
}
fn();

● For/of

let arr = ["张三","李四","王五"];
for(let val of arr){
    console.log(val);//张三  李四  王五
}

● Map Objects
● Set Objects ES6新增了Set结构,用于保存唯一值的序列
● Classes

 关键字 创建构造函数

● Promises
● Symbol
● Default Parameters
● Function Rest Parameter
● String.includes() 判断是否包含某个字符,或者某个值
● String.startsWith() 通过什么开始
● String.endsWith() 通过什么结尾

let text = "Hello world, welcome to the universe.";
text.includes("world")    // Returns true

let text = "Hello world, welcome to the universe.";
text.startsWith("Hello")   // Returns true

var text = "John Doe";
text.endsWith("Doe")    // Returns true

● Array entries()
从数组 fruit 创建一个可迭代对象, 该对象包含了数组的键值对:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.entries();

[0, "Banana"]
[1, "Orange"]
[2, "Apple"]
[3, "Mango"]
● Array.from() 把伪数组转换成数组
● Array keys()
● Array find() 查找数组里符合条件的第一个值
● Array findIndex() 查找符合条件的第一个索引值

//1.Array.from()
var lis = document.querySelectorAll("li");
console.log(lis);//NodeList(5) [li, li, li, li, li]伪数组
console.log( Array.from(lis));//(5) [li, li, li, li, li]
//2.Array.of();创建一个数组 
var res =  Array.of(7,8);
console.log(res);//(2) [7, 8]
//3.find :查找数组里符合条件的第一个值
ar arr = [1,2,3,4,5];
var res = arr.find(function(item){
return item>3;
})
console.log(res);//4
// 4.findIndex: 查找符合条件的第一个索引值 
var arr = [1,2,3,4,5];
var res =  arr.findIndex(item=>item>3);
console.log(res);//3
//5.includes :判断是否包含某个字符,或者某个值
var arr = [1,2,3,4];
var res =   arr.includes(5);
console.log(res);
// 6.flat : 扁平化数组 :默认是1 只会扁平化一层数组 ,如果传入指定参数 那么就会扁平化指定层数
var arr = [1,2,3,[4,[5]]];  //3维数组

//ES5
var res =  arr.toString();
console.log(res);
var newArr = res.split(",");
console.log(newArr);//(5) ["1", "2", "3", "4", "5"]
console.log( Object.prototype.toString.call(newArr));//[object Array]

//ES6
var res =  arr.flat(2);
console.log(res);//(5) [1, 2, 3, 4, 5]
console.log( Object.prototype.toString.call(res));//[object Array]

● Math.trunc
● Math.sign
● Math.cbrt
● Math.log2
● Math.log10
● Number.EPSILON
● Number.MIN_SAFE_INTEGER
● Number.MAX_SAFE_INTEGER
● Number.isInteger()
● Number.isSafeInteger()
● New Global Methods
● JavaScript Modules

ES2016

● JavaScript Exponentiation (**)
幂操作 x ** y == Math.pow(x, y)
运算符表示幂运算,用于计算一个数的指数。例如,a b 表示将 a 的值提升到 b 次方。
● JavaScript Exponentiation assignment (**=)
在 JavaScript 中,= 是指数赋值运算符,用于对变量进行幂运算并将结果赋给左侧的操作数。例如,a = b 等同于 a = a ** b,表示将变量 a 的值提升到 b 次方,并将结果赋给变量 a。这个运算符通常用于简化幂运算和赋值的组合操作。
● JavaScript Array includes()
JavaScript 中用于检查数组中是否包含特定元素的方法。它返回一个布尔值,指示数组是否包含传入的元素。如果包含,则返回 true,否则返回 false。下面是一个简单的示例:
const numbers = [1, 2, 3, 4, 5];

console.log(numbers.includes(3)); // 输出 true
console.log(numbers.includes(6)); // 输出 false

ES2017

● JavaScript String padding
字符串填充是一种在字符串前面或后面添加特定字符,直到字符串达到指定长度的操作。在 JavaScript 中,可以使用 padStart() 和 padEnd() 方法来实现字符串填充。
● JavaScript Object entries()
Object.entries() 方法返回一个给定对象中可枚举属性的键值对数组。
● JavaScript Object values()
Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组。
● JavaScript async and await
async 和 await 是用于处理异步操作的 JavaScript 关键字。通过将 async 关键字放在函数声明之前,该函数就会成为一个异步函数。而使用 await 关键字,可以暂停异步函数的执行,等待 Promise 解决(resolve)之后再继续执行。
● Trailing Commas in Functions
在 JavaScript 函数中,在参数列表的最后一个参数后面允许添加逗号。这样做的好处是当需要添加新的参数时,只需在最后一个参数后面添加逗号,而不必调整之前的参数逗号。
● JavaScript Object.getOwnPropertyDescriptors
Object.getOwnPropertyDescriptors() 方法返回一个对象的所有自有属性的描述符。这对于获取对象属性的完整信息很有用,包括属性的值、是否可写、是否可枚举等。

ES2018

● Asynchronous Iteration: 异步迭代是指在 JavaScript 中处理异步操作的一种方法,特别是在处理生成器函数或异步迭代器时。它使您能够使用 for-await-of 循环来迭代异步可迭代对象,以便按照顺序处理异步任务。
● Promise Finally: Promise.finally() 是 Promise 的一个方法,无论 Promise 状态如何(已解决或已拒绝),都会执行相同的代码块。这对于在完成 Promise 之后需要执行清理操作或收尾工作很有用。
● Object Rest Properties: 对象剩余属性语法允许将对象中未被解构的其余属性收集到一个新的对象中。这样可以轻松地提取对象的一部分属性,并将剩余的属性放入一个新对象中。
● New RegExp Features: 最新的 ECMAScript 版本增加了一些正则表达式的功能,比如命名捕获组、dotAll 模式、lookbehind 等。这些功能使得正则表达式更强大且更易于使用。
● JavaScript Shared Memory: 共享内存是指多个 Web Workers 之间共享数据的机制。SharedArrayBuffer 和 Atomics API 是 JavaScript 中用于实现共享内存的机制,可以让多个 Worker 之间共享数据,但需要小心处理避免出现竞争条件和安全问题。

ES2019

● String.trimStart(): String.trimStart() 方法从字符串的开头移除空格或其他指定字符,并返回修改后的字符串。
● String.trimEnd(): String.trimEnd() 方法从字符串的末尾移除空格或其他指定字符,并返回修改后的字符串。
● Object.fromEntries: Object.fromEntries() 方法接收一个包含键值对的数组,然后返回一个基于这些键值对的新对象。它的作用相当于反转 Object.entries() 方法生成的数组。
● Optional catch binding: JavaScript 中的可选捕获绑定是指在使用 try...catch 语句时,可以不提供异常对象的变量名,而只使用 catch {}。这样做会导致不会创建异常对象。
● Array.flat(): Array.flat() 方法用于将嵌套数组展平为一个新数组,可以选择展平的层数。这对于去除多维数组中的嵌套结构非常有用。
● Array.flatMap(): Array.flatMap() 方法首先映射每个元素,然后将结果扁平化成一个新数组。类似于先使用 map() 方法,然后再使用 flat() 方法。
● Revised Array.Sort(): 改进的 Array.sort() 方法是指现代浏览器中优化的排序算法,以提高性能和稳定性。
● Revised JSON.stringify(): 修改后的 JSON.stringify() 方法可能包括更多参数或选项,以实现更灵活的序列化操作。
● Separator symbols allowed in string literals: JavaScript 允许在字符串字面量中使用分隔符符号,例如反斜杠或换行符,以便在代码中更清晰地表示长字符串或包含特殊字符的字符串。
● Revised Function.toString(): 对 Function.toString() 方法进行修订可能改善输出格式或提供更多关于函数源代码的信息。

ES2020

● BigInt: BigInt 是一种用来表示任意精度整数的新数据类型,在 JavaScript 中引入了 BigInt 类型,使得可以安全地存储和操作大整数值。
● String matchAll(): String.matchAll() 方法返回一个包含正则表达式匹配结果的迭代器。它允许你从字符串中找到所有匹配指定模式的子字符串。
● The Nullish Coalescing Operator (??): 空值合并运算符 ?? 用于判断一个值是否为 null 或 undefined。如果操作数为 null 或 undefined,它会返回其右侧的默认值。
● The Optional Chaining Operator (?.): 可选链操作符 ?. 允许在不确定对象是否存在或具有某个属性的情况下,避免出现 TypeError 错误。如果左侧的操作数为 null 或 undefined,整个表达式将返回 undefined,而不会导致错误。
● Logical AND Assignment Operator (&&=): 逻辑与赋值运算符 &&= 用于在条件为真时才将右侧的操作数赋给左侧的变量。
● Logical OR Assignment (||=): 逻辑或赋值运算符 ||= 用于在左侧值为假时才将右侧的操作数赋给左侧的变量。
● Nullish Coalescing Assignment (??=): 空值合并赋值运算符 ??= 类似于空值合并运算符 ??,但将结果赋给左侧的变量。
● Promise.allSettled(): Promise.allSettled() 方法返回一个 Promise,该 Promise 在所有给定的 Promise 都已解析或拒绝后解析,并带有一个对象数组,每个对象表示相应的 Promise 结果。
● Dynamic Import: 动态导入是 ES2020 的一个特性,它允许在运行时以异步方式导入模块,而不是在代码的头部静态声明。这可以帮助优化加载时间和资源使用。

ES2021

● Promise.any(): Promise.any() 是 Promise 的一个方法,用于接收一个 Promise 可迭代对象(例如数组),并在其中的任何一个 Promise 解决时解决,并返回一个由第一个完成的 Promise 返回值组成的 Promise。如果可迭代对象中没有任何 Promise 成功,则返回一个拒绝状态的 Promise。
● String replaceAll(): String.replaceAll() 方法通过替换所有匹配的子字符串来更新原始字符串。它使用给定的正则表达式或字符串来查找并替换所有出现的匹配项。
● Numeric Separators (_): 数字分隔符 _ 是 ECMAScript 2021 的新特性之一,允许在数字文字中插入下划线,以增加数字的可读性而不影响其值。这在长数字或大数值的代码中提高了可读性。

ES2022

● Array at(): Array.at() 是 ECMAScript 2022 中提议的一个新方法,用于获取数组中指定索引处的元素。与传统的 arr[index] 访问方式不同,Array.at() 方法在遇到无效索引时会抛出 RangeError 错误。
● String at(): 目前 JavaScript 中并没有名为 String.at() 的内置方法。可能是您的输入中有误,或者要表达的概念不太清楚。
● RegExp /d: 在正则表达式中,/d 不是一个有效的特殊字符或元字符。可能是一个拼写错误或误解。在正则表达式中,\d 表示匹配数字字符(0-9)。
● Object.hasOwn(): 可能是一个自定义函数或方法,JavaScript 中并没有名为 Object.hasOwn() 的内置方法。通常可以使用 Object.hasOwnProperty() 来检查对象是否有自己的属性。
● error.cause: 这可能是指在某些库或框架中用于获取错误原因的属性。通常,JavaScript 中的错误对象可能包含一个 cause 属性或类似的属性,用于描述导致错误的根本原因。
● await import: await import 是 JavaScript 中处理动态导入模块的语法。它允许您以异步的方式导入模块,当导入完成后再继续执行后续代码。
● Class field declarations: 类字段声明是 ECMAScript 2022 的新特性之一,允许在类中直接声明实例字段而无需在构造函数中初始化。这使得类定义更加简洁和直观。
● Private methods and fields: 私有方法和字段是 ECMAScript 2022 中的另一个新特性,允许在类中定义私有方法和字段,这些私有成员只能在类内部访问,而在外部不可见或访问。

ES2023

● Array findLast(): Array.findLast() 不是 JavaScript 中的内置方法。可能是您自定义的函数或库中的方法来查找数组中最后一个满足条件的元素。
● Array findLastIndex(): 同样,Array.findLastIndex() 也不是 JavaScript 中的内置方法。这个方法可能用于自定义实现中,在数组中查找最后一个满足条件的元素的索引。
● Array toReversed(): Array.toReversed() 也不是 JavaScript 中的标准方法。通常,要将数组反转,可以使用 Array.reverse() 方法。
● Array toSorted(): Array.toSorted() 同样并非 JavaScript 标准方法。若要对数组进行排序,应该使用 Array.sort() 方法。
● Array toSpliced(): Array.toSpliced() 也不是 JavaScript 中的内置方法。如果想在数组中插入、删除或替换元素,可以使用 Array.splice() 方法。
● Array with(): Array.with() 似乎不符合 JavaScript 中的标准语法或内置方法。如有需要,可以提供更多上下文信息来进一步帮助澄清。
● #! (Shebang): 在 Unix 和类 Unix 系统(例如 Linux)中,#!(shebang)是一个特殊字符序列,用于指定解释器程序的路径,以便运行脚本文件。在 JavaScript 中,这种写法通常在 Node.js 脚本的开头用于指定脚本的解释器路径。

0

评论 (4)

取消
  1. 头像
    suamfbzyxr
    Windows 10 · Google Chrome

    《凯文哈特:校对现实》剧情片高清在线免费观看:https://www.jgz518.com/xingkong/30775.html

    回复
  2. 头像
    rrpukphytw
    Windows 10 · Google Chrome

    《恶魔印记》科幻片高清在线免费观看:https://www.jgz518.com/xingkong/53289.html

    回复
  3. 头像
    sijrunjdus
    Windows 10 · Google Chrome

    哈哈哈,写的太好了https://www.lawjida.com/

    回复
  4. 头像
    kernuprtkg
    Windows 10 · Google Chrome

    哈哈哈,写的太好了https://www.lawjida.com/

    回复