您现在的位置是：网站首页> 编程资料编程资料
JavaScript ECMAScript 6(ES2015~ES2022)所有新特性总结_javascript技巧_
2023-05-24
344人已围观
简介 JavaScript ECMAScript 6(ES2015~ES2022)所有新特性总结_javascript技巧_
前言
自从ECMAScript在2015年正式发布了ES6起，到现在已经有了8个年头了，而自从2015年起，每年的6月都会发布一个新的版本，以当时的年作为版本号。
在这众多的版本中已经出现了很多新特性，为了方便记忆，我将所有的新特性全部整理在这一篇文章中。
ps：有的资料称ES2015后的所有版本统称为ES6，也有的称ES6表示ES2015，ES7表示ES2016以此类推，这里不做讨论。
目录如下：
ES2015(ES6)
ES2015是改动最大的一个版本，基本上对ES2015之前的所有的内容都做了扩展，大体如下图所示：
let、const关键字和块级作用域
在ES6之前只有一种声明变量的方式，就是使用var关键字，在ES2015中新增了let和const关键字来声明变量与常量，
代码如下：
// 声明变量 let v = 100 v = 200 // 声明常量 const V = 200 // 修改常量 // V = 300 // 报错
同时使用let和const关键字声明的变量或者常量是具有块级作用域的，
示例代码如下：
{ var v = 100 } { let val = 200 } console.log(v) console.log(val) // 报错 val is not defined值得注意的是使用let或者const关键字声明的变量不具有变量提升的特性，且存在暂时性死区的特性。
函数的扩展
在ES2015中允许函数使用默认值，示例代码如下：
// es2015之前 function foo(v) { v = v ? v : 100 return v } // es2015 function bar(v = 100) { return v }值得注意的是如果有多个参数时，默认参数必须从后向前使用。
在ES2015中新增了箭头函数，这是函数的一种简写形式，示例代码如下：
function foo(v) { return v`` } // 箭头函数写法 const foo = (v) => { return v } // 简写形式 1 const foo = v => { // 只有一个参数可以省略括号 return v } // 简写形式 2 const foo = v => v // 语句中只有return时可以省略return和花括号值得注意的是箭头函数的this是根据执行上下文决定的，内部并不会绑定this。
使用箭头函数时内部并不存在arguments对象，而是采用剩余参数的方式代替，
示例代码如下：
const foo = (...args) => { // console.log(arguments) // ReferenceError: arguments is not defined console.log(args) // args 是一个数组 } foo(1, 2, 3, 4) // [ 1, 2, 3, 4 ]在ES2015中为函数增加的要给name属性，该属性指向函数的名称，
示例代码如下：
function foo(v) { return v } const bar = v => v console.log(foo.name) // foo console.log(bar.name) // bar数值的扩展
在ES2015中对数值的扩展主要时为Math和Number两个对象增加一些方法，以及二进制和八进制的表示方法。
在ES2015中使用0b或者0B表示二进制，使用0o或者0O表示八进制。
示例代码如下：
console.log(0b111111111 === 511) // true console.log(0o777 === 511) // true
为Number扩展的属性和方法如下：
| 属性/方法名 | 描述 |
|---|---|
| Number.EPSILON | 数值最小精度 |
| Number.MIN_SAFE_INTEGER | 最小安全数(-2^53) |
| Number.MAX_SAFE_INTEGER | 最大安全数(2^53) |
| Number.parseInt() | 把参数解析为整数并返回 |
| Number.parseFloat() | 把参数解析为浮点数并返回 |
| Number.isFinite() | 判断是否为有限数值 |
| Number.isNaN() | 判断是否为NaN |
| Number.isInteger() | 判断是否为整数 |
| Number.isSafeInteger() | 判断数值是否在安全范围内 |
为Math扩展的方法如下：
| 方法名 | 描述 |
|---|---|
| Math.trunc() | 返回数值整数部分 |
| Math.sign() | 返回数值类型(正数1、负数-1、零0) |
字符串的扩展
ES2015引入模板字符串，使用反引号(`)定义，模板字符串会保留格式，且可以使用变量，
示例代码如下：
// 使用 ` 定义模板字符串 let str = `一碗周` // 模板字符串可以保留格式 let str2 = `一 碗 周` // 模板字符串可以使用变量 const myName = '一碗周' let str3 = `author: ${myName}` // 使用 ${} 进行包裹ES2015还为String和String的实例扩展了一些方法，如下：
| 方法名 | 描述 |
|---|---|
| String.fromCodePoint() | 用于从 Unicode 码点返回对应字符 |
| String.raw() | 返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法。 |
| String.prototype.codePointAt() | 返回字符对应码点(String.fromCodePoint()的逆操作) |
| String.prototype.normalize() | 把字符的不同表示方法统一为同样形式，返回新字符串(Unicode正规化) |
| String.prototype.repeat() | 把字符串重复n次，返回处理后的字符串 |
| String.prototype.includes() | 判断是否存在指定字符串 |
| String.prototype.startsWith() | 判断字符串是否存在原始字符串的头部 |
| String.prototype.endsWith() | 判断字符串是否存在原始字符串的尾部 |
数组的扩展
在ES2015中提供了展开运算符，即...，在数组中使用可以将数组展开，并以逗号分隔，
示例代码如下：
const arr = [1, 2, 3, 4, 5, 6] const newArr = [...arr] // 复制数组 console.log(Math.max.call(null, ...arr)) // 将数组中的每一项作为参数使用
除此之外，还为Array以及数组提供了一系列方法，来逐个介绍：
Array.from()：将类数组对象或者可迭代对象创建为一个新的数组，示例代码如下：
function foo() { return Array.from(arguments) // 将 arguments 转换为数组 } console.log(foo(1, 2, 3, 4, 5, 6)) // [ 1, 2, 3, 4, 5, 6 ]Array.of()：创建一个具有可变数量参数的新数组实例，示例代码如下：
Array.of(1) // [1] Array.of(true, 1, '一碗周') // [true, 1, '一碗周']
Array.prototype.copyWithin()，浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。
示例代码如下：
const arr = [1, 2, 3, 4] // 从索引 2 开始，到结束 将内容复制到索引 0 的位置 arr.copyWithin(0, 2) // [ 3, 4, 3, 4 ]
Array.prototype.find()，根据给定的回调函数，找到匹配的第一个元素，找不到返回undefined，示例代码如下：
const arr = [1, 2, 3, 4] arr.find(item => item === 2) // 2（表示元素）、
Array.prototype.findIndex()，根据给定的回调函数，找到匹配的第一个元素的索引，找不到返回-1，示例代码如下：
const arr = [1, 2, 3, 4] arr.findIndex(item => item === 2) // 1 (表示索引)
Array.prototype.fill()，将给定值填充数组，示例代码如下：
const arr = [1, 2, 3, 4] // 将给定值填充索引1-3 arr.fill('一碗周', 1, 3) // [ 1, '一碗周', '一碗周', 4 ]Array.prototype.keys()，返回一个可迭代的对象，其内容为数组的key，示例代码如下：
const arr = [1, true, '一碗周'] const keys = arr.keys() for (const i of keys) { console.log(i) // 遍历结果 0 1 2 }
Array.prototype.v
相关内容
- JavaScript中let与const命令使用_javascript技巧_
- vue parseHTML源码解析hars end comment钩子函数_vue.js_
- 简述冻结JS对象方法技术_javascript技巧_
- Vue编译器optimize源码分析_vue.js_
- vue编译器util工具使用方法示例_vue.js_
- JavaScript数组实例的9个方法_javascript技巧_
- JS实现图片轮播跑马灯_javascript技巧_
- 在vue中写jsx的几种方式_vue.js_
- Vue编程三部曲之模型树优化示例_vue.js_
- uni-app和原生小程序混合开发的具体实现过程_javascript技巧_
