189 8069 5689
这篇文章主要介绍“JavaScript ECMAScript6所有新特性怎么用”，在日常操作中，相信很多人在JavaScript ECMAScript6所有新特性怎么用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript ECMAScript6所有新特性怎么用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、成都做网站、且末网络推广、成都小程序开发、且末网络营销、且末企业策划、且末品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供且末建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com
ES2015是改动最大的一个版本，基本上对ES2015之前的所有的内容都做了扩展，大体如下所示：
在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.values()，返回一个可迭代的对象，其内容为数组的value，
示例代码如下：
const arr = [1, true, '一碗周']
const values = arr.values()
for (const i of values) {
console.log(i) // 遍历结果 1 true 一碗周
}Array.prototype.entries()，返回一个可迭代的对象，其内容是一个数组，索引0为原数组的元素，1为原数组该位置的值，
示例代码如下：
const arr = [1, true, '一碗周'] const iterator = arr.entries() console.log(Array.from(iterator)) // [ [ 0, 1 ], [ 1, true ], [ 2, '一碗周' ] ]
ES2015中允许对象的属性名和属性值一致时可以只写属性名，
示例代码如下：
const myName = '一碗周'
const age = 18
const person = { myName, age }
console.log(person) // { myName: '一碗周', age: 18 }还有就是在定义对象时，允许使用[]包裹表达式作为属性名，示例代码如下：
const myName = '一碗周'
const age = 18
const person = {
myName,
['a' + 'g' + 'e']: age,
}
console.log(person) // { myName: '一碗周', age: 18 }Object.is()：用于比较两个值是否相等，用于解决NaN ≠= NaN，+0 === -0的问题，
示例代码如下：
console.log(NaN === NaN) // false console.log(+0 === -0) // true console.log(Object.is(NaN, NaN)) // true console.log(Object.is(+0, -0)) // false
Object.assign()：将所有可枚举属性的值从一个或多个源对象复制到目标对象，并返回目标对象，
示例代码如下：
const person = Object.assign({}, { name: '一碗周' }, { age: 18 })
console.log(person) // { name: '一碗周', age: 18 }Object.getPrototypeOf()：获取原型对象；
Object.setPrototypeOf()：设置原型对象。
在ES2015中提出了类的概念，在语法的层面上有了类，示例代码如下：
class Person {
constructor(age) {
// 属性
this.myName = '一碗周'
this.age = age
}
// 静态方法
static print() {
console.log()
}
// 访问器
get myName() {
console.log('getter')
return '一碗周'
}
set myName(v) {
console.log('setter' + v)
}
setName(v) {
this.myName = v
}
}
const person = new Person(18)
person.setName('ywanzhou') // 触发 setter 访问器
console.log(person.myName) // 触发 getter 访问器在ES2015中提出ESModel模块化规范，这是第一个官方层面的模块化规范，在这个规范中允许我们使用export导出模块，使用import引入模块，
示例代码如下：
import a from 'm' // 导入模块 m 中的默认导出，将其命名为 a
import a, { b } from 'm' // 导入模块 m 中的默认导出以及单独导入成员 b
import * as A from 'm' // 导入模块中的所有成员
import 'm' // 执行 m 模块
export const b = 1 // 单独导出
export default b // 默认导出
export { b } // 按需导出
export { b as bb } // 改名导出
export { b } from 'm' // 导入模块 m 中的成员 b 并导出ES2015新增了解构赋值的语法，允许我们使用按照一定的模式，在数组或者对象中提取指定的值，
示例代码如下：
// 数组的解构赋值
let [name, age, hobby = 'coding' /* 结构赋值的默认值 */] = ['一碗周', 18]
// 交换两个变量的值
let a = 1
let b = 2
;[a, b] = [b, a]
console.log(a, b) // 2 1
// 对象的结构赋值
let { name: ObjName /* 解构赋值重命名 */, sex } = { name: '一碗周', sex: 1 }
// 函数参数的解构赋值
function bar({ name, age }) {
return name + age
}
bar({ name: '一碗周', age: 18 }) // 一碗周18Symbol是ES2015中新增的一种数据类型，通过Symbol()方法创建，可以传递一个字符串作为参数，用于描述该Symbol；
通过Symbol()方法创建的symbol值都是唯一的，示例代码如下：
/**
* 语法
* Symbol([description])
* * description -> 是一个可选的描述信息
*/
// 创建一个 Symbol 类型的值
const mySymbol = Symbol()
console.log(mySymbol) // Symbol()
const myName = Symbol('一碗周')
console.log(typeof myName) // symbolSymbol还有一系列属性和方法这里就不作介绍了。
Promise是ES2015中提供的一个异步解决方案，解决了回调地狱的问题。
通过Promise()构造函数可以创建一个promise对象，每一个Promise对象都具有以下几种状态：
pending:初始状态，既不是成功，也不是失败状态。
resolved:意味着操作成功完成。
rejected:意味着操作失败。
状态的切换只有两种，分别是：
pending→resolved
pending→resolved
一旦状态发生改变，就不会再次改变
Promise实例中存在要给then方法，允许我们在Promise实例中链式调用，每个then方法还会返回一个Promise实例，
如下图所示：
示例代码如下：
new Promise((resolve, reject) => {
console.log('我是第一个Promise中的log')
resolve()
})
.then(() => {
console.log('我是第一个then中的log')
})
.then(() => {
console.log('我是第二个then中的log，但是我出现了异常')
throw new Error('Error')
})
.then(() => {
console.log('我是第三个then中的第一个回调的log，但是我不会执行，因为我上面出现了异常')
}, () => {
console.log('我是第三个then中的第二个回调的log，我执行了')
})
.then(() => {
console.log('我是第四个then中的log，我可以正常执行')
})
/* 执行结果如下
我是第一个Promise中的log
我是第一个then中的log
我是第二个then中的log，但是我出现了异常
我是第三个then中的第二个回调的log，我执行了
我是第四个then中的log，我可以正常执行
*/有关Promise的一些方法如下：
Promise.prototype.then()：它最多需要有两个参数：Promise的成功和失败情况的回调函数；
Promise.prototype.catch()：等于then方法的第二个参数；
Promise.all()：将多个实例包装成一个新实例，返回全部实例状态变更后的结果数组(齐变更再返回)
Promise.race()：将多个实例包装成一个新实例，返回全部实例状态优先变更后的结果(先变更先返回)
Promise.resolve()：将对象转为Promise对象(等价于new Promise(resolve => resolve()))
Promise.reject()：将对象转为状态为rejected的Promise对象(等价于new Promise((resolve, reject) => reject()))
Iterator即迭代器，它是一种接口，为各种不同的数据结构提供了统一的访问机制，换句话说，只要有任何数据结构部署了迭代接口，就可以使用统一的方式的来遍历它。
实现可迭代接口的数据结构，一般都自身实现或继承了以Symbol.iterator属性的，就属于可迭代对象。Symbol.iterator属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。
一个包含next()方法的对象，才可以称为一个迭代对象。next()对象的会有返回一个对象，对象中包含两个值，
如下所示：
value：迭代器返回的任何JavaScript值。done为true时可省略。
done：一个布尔值，为false时表示迭代未停止，为true时立即停止迭代器，且可以省略value的值。
JavaScript原生提供的迭代器接口如下图所示：
现在我们为obj来实现一个迭代器，代码如下：
const obj = {
[Symbol.iterator] () {
return {
next () {
console.log('迭代器执行了');
return {
value: '',
done: true // 标志是否结束，true表示已经结束
}
}
}
}
}我们在next()方法中添加了一个打印，为了验证迭代器执行了，最终的运行结果为
迭代器执行了
Generator是ES2015中提供的一种异步编程解决方案，定义Generator函数在function关键字和函数名中间使用*星号，函数内部使用yield关键字定义不同的状态。
示例代码如下：
function* testGenerator() {
// yield定义一个状态
yield '一碗周'
yield 'es新特性'
return 'generator' // 终结Generator，后面即使有yield关键字也无效
}
const g = testGenerator() // 返回 Generator 对象，通过next()方法移动状态
g.next()
/* { value: '一碗周', done: false } */
g.next()
/* { value: 'es新特性', done: false } */
g.next()
/* { value: 'generator', done: true } */Proxy对象用于创建一个代理对象，从而实现基本操作的拦截和自定义，基本操作包含13种，如下表所示：
| 拦截 ⽅法 | 触发⽅式 |
|---|---|
| get(target, propKey, receiver) | 读取某个属性 |
| set(target, propKey, value, receiver) | 写⼊某个属性 |
| has(target, propKey) | in操作符 |
| deleteProperty(target, propKey) | delete操作符 |
| getPrototypeOf(target) | Object.getPropertypeOf() |
| setPrototypeOf(target, proto) | Object.setPrototypeOf() |
| isExtensible(target) | Object.isExtensible() |
| preventExtensions(target) | Object.preventExtensions() |
| getOwnPropertyDescriptor(target, propKey) | Object.getOwnPropertyDescriptor() |
| defineProperty(target, propKey, propDesc) | Object.defineProperty() |
| ownKeys(target) | Object.keys() 、Object.getOwnPropertyNames()、Object.getOwnPropertySymbols() |
| apply(target, thisArg, args) | 调⽤⼀个函数 |
| construct(target, args) | ⽤ new 调⽤⼀个函数 |
Vue3就是基于Proxy进行编写的，下面这段代码展示了Proxy对象的使用：