ES6新特性全面汇总39条你知道多少？（五）

导言

这篇文章是我开启ES6新特性全面汇总的第五章，我将在未来每天更新一篇后续，我将会较为详细深入的向大家介绍我们ES6+的新特性，而不是简单的标注一共有哪一些特性，本篇文章关于其中的三条：Proxy 和 Reflect 新的数组和对象方法 字符串的扩展方法。大家可以翻阅目录寻找想要了解的内容，如果后续文章尚未发布可以关注作者并订阅专栏，专栏每日更新，敬请期待~

第十三章 Proxy 和 Reflect

Proxy 和 Reflect 是 ES6 中新增的两个内置对象，它们的出现使得 JavaScript 中的对象操作更加灵活和可控。在这一章里我们将会简单介绍 Proxy 和 Reflect 的基本用法和常见方法。

使用 Proxy 进行代理:

Proxy 对象是用于拦截目标对象操作的一个代理，通过Proxy对象，我们可以拦截对目标对象的一些操作，比如读取属性、设置属性、调用方法等。它的语法如下：

let proxy = new Proxy(target, handler)  

其中，target 是被代理的目标对象，handler 是一个对象，用于定义拦截 target 对象操作的方法。handler 中可以定义的拦截方法包括：get、set、has、deleteProperty、apply、construct 等,例如：

• get(target, property, receiver)：拦截对目标对象属性的读取操作
• set(target, property, value, receiver)：拦截对目标对象属性的写入操作
• deleteProperty(target, property)：拦截对目标对象属性的删除操作
• apply(target, thisArg, argumentsList)：拦截对目标对象方法的调用操作

让我给你看一个例子，下面的代码演示了如何使用 Proxy 对象拦截读取属性的操作：

let person = {  
  name: 'Tom',  
  age: 20  
}  
  
let proxy = new Proxy(person, {  
  get(target, property) {  
    console.log(`读取了 ${property} 属性`)  
    return target[property]  
  }  
})  
  
console.log(proxy.name) // 读取了 name 属性，输出 Tom  
console.log(proxy.age) // 读取了 age 属性，输出 20  

在上面的代码中，我们使用 Proxy 对象拦截了对 person 对象属性的读取操作，当我们读取属性时，会先执行 get 方法，输出一段提示信息，然后返回属性值。

Reflect 对象的方法:

Reflect 对象也是 ES6 中新增的一个内置对象，它提供了一系列静态方法，用于操作对象，与 Proxy 对象配合使用效果更佳。Reflect 对象的方法包括：Reflect.get、Reflect.set、Reflect.has、Reflect.deleteProperty、Reflect.apply、Reflect.construct 等。

下面是对Reflect对象的常见方法的简述：

• Reflect.get(target, property, receiver)：读取目标对象的属性值
• Reflect.set(target, property, value, receiver)：设置目标对象的属性值
• Reflect.has(target, property)：判断目标对象是否存在某个属性
• Reflect.deleteProperty(target, property)：删除目标对象的某个属性
• Reflect.apply(target, thisArg, argumentsList)：调用目标对象的方法

例如，下面的代码演示了如何使用 Reflect 对象的方法替代原有的一些操作：

let person = {  
  name: 'Tom',  
  age: 20  
}  
  
console.log(Reflect.get(person, 'name')) // 输出 Tom  
Reflect.set(person, 'age', 21)  
console.log(person.age) // 输出 21  
console.log(Reflect.has(person, 'name')) // 输出 true  
Reflect.deleteProperty(person, 'age')  
console.log(person.age) // 输出 undefined  

在上面的代码中，我们使用 Reflect 对象的方法来获取、设置、判断和删除对象的属性，这些方法与原有的操作方法类似，但是它们返回的是一个 Boolean 值或者一个操作结果，而不是抛出异常。

总结

Proxy 和 Reflect对象是 ES6 中新增的两个内置对象，它们的出现使 JavaScript 中的对象操作变得更加灵活和可控。通过 Proxy 对象，我们可以拦截目标对象的一些操作，从而实现对对象的代理操作；通过 Reflect 对象，我们可以替代原有的一些操作方法，将操作变得更加安全和可控。

第十四章 新的数组和对象方法

在ES6中，为了更方便地操作数组和对象，增加了一些新的数组和对象方法。在这一章请让我来给大家介绍一下以下几个新方法吧：

1. Array.from() 和 Array.of()

Array.from()方法可以将类似数组的对象和可迭代对象（如Set、Map、字符串等）转换成数组。它的基本语法如下：

Array.from(arrayLike[, mapFn[, thisArg]])  

其中，arrayLike是要转换成数组的对象，mapFn是一个可选参数，用来对每个元素进行映射处理，thisArg是mapFn函数的this值。

例如，我们可以将一个Set对象转换成一个数组：

const set = new Set([1, 2, 3])  
const arr = Array.from(set)  
console.log(arr) // 输出 [1, 2, 3]  

Array.of()方法可以创建一个具有指定元素的数组。与Array()构造函数不同，Array.of()不会忽略参数个数为1且类型为数字的情况，而是返回一个只包含该数字的数组。其基本语法如下：

Array.of(element0[, element1[, ...[, elementN]]])  

例如，我们可以使用Array.of()来创建一个指定元素的数组：

const arr1 = Array.of(1, 2, 3)  
console.log(arr1) // 输出 [1, 2, 3]  
   
const arr2 = Array.of(5)  
console.log(arr2) // 输出 [5]  

2. 数组的find()和findIndex()

数组的find()方法用于查找符合条件的第一个元素，返回该元素的值；如果没有找到，则返回undefined。它的基本语法如下：

array.find(callback[, thisArg])  

其中，callback是一个用来测试每个元素的函数，它接收三个参数：当前元素的值，当前元素的索引和数组本身。thisArg是可选的参数，用来指定callback函数的this值。

例如，我们可以使用find()方法查找数组中第一个大于等于5的元素：

const arr = [1, 3, 5, 7, 9]  
   
const result = arr.find((item) => item >= 5)  
   
console.log(result) // 输出 5  

数组的findIndex()方法其实与find()方法类似，只不过它返回的是符合条件的第一个元素的索引。如果没有找到，则返回-1。它的基本语法如下：

array.findIndex(callback[, thisArg])  

例如，我们可以使用findIndex()方法查找数组中第一个大于等于5的元素的索引：

const arr = [1, 3, 5, 7, 9]  
   
const index = arr.findIndex((item) => item >= 5)  
   
console.log(index) // 输出 2  

3. Object.keys()和Object.assign()

Object.keys()方法返回一个包含指定对象的所有属性名的数组，其基本语法如下：

Object.keys(obj)  

其中，obj是要返回属性名的对象。

例如，我们可以获取一个对象的所有属性名：

const obj = {  
    name: "Tom",  
    age: 18,  
    gender: "male"  
}  
  
const keys = Object.keys(obj)  
  
console.log(keys) // 输出 ["name", "age", "gender"]  

在上面的代码中，我们通过Object.keys()方法获取了obj对象的所有属性名，并将其输出。

Object.assign()方法用于将所有可枚举的属性从一个或多个源对象复制到目标对象。其基本语法如下：

Object.assign(target, ...sources)  

其中，target是目标对象，sources是一个或多个源对象。该方法会从源对象中复制所有可枚举的属性（包括Symbol属性），并将它们合并到目标对象中。如果有相同的属性，后面的源对象会覆盖前面的源对象。

例如，我们可以将两个对象合并成一个新的对象：

const obj1 = {  
    name: "Tom",  
    age: 18  
}  
   
const obj2 = {  
    gender: "male",  
    address: "Beijing"  
}  
   
const newObj = Object.assign({}, obj1, obj2)  
   
console.log(newObj) // 输出 { name: "Tom", age: 18, gender: "male", address: "Beijing" }  

在上面的代码中，我们通过Object.assign()方法将obj1和obj2两个对象合并成了一个新的对象newObj，并将其输出。

总结

这一章里我们介绍了一下ES6中新增的几个数组和对象方法，包括Array.from()和Array.of()、数组的find()和findIndex()、Object.keys()和Object.assign()。这些新方法可以让我们更方便地操作数组和对象，提高代码的简洁性和可读性。

第十六章 字符串的扩展方法

在ES6中，为了更方便地操作字符串，增加了一些新的字符串方法。在这一章请让我来给大家介绍一下以下几个新方法吧：

1. includes()、startsWith()和endsWith()

这三个方法都是关于查找相关的方法让我们看看它们有什么不同吧~

includes()方法用于判断一个字符串是否包含另一个字符串，返回布尔值。其基本语法如下：

str.includes(searchString[, position])  

其中，searchString是要查找的字符串，position是可选参数，表示从哪个位置开始查找。

startsWith()方法用于判断一个字符串是否以另一个字符串开头，返回布尔值。其基本语法如下：

str.startsWith(searchString[, position])  

其中，searchString是要查找的字符串，position是可选参数，表示从哪个位置开始查找。

endsWith()方法用于判断一个字符串是否以另一个字符串结尾，返回布尔值。其基本语法如下：

str.endsWith(searchString[, length])  

其中，searchString是要查找的字符串，length是可选参数，表示在字符串str的前length个字符中查找。

例如，我们可以使用includes()、startsWith()和endsWith()方法来判断一个字符串是否包含、开头或结尾某个特定的字符串：

const str = 'hello world'  
   
console.log(str.includes('world')) // 输出 true  
console.log(str.startsWith('hello')) // 输出 true  
console.log(str.endsWith('ld')) // 输出 true  

2. repeat()和

repeat()方法返回一个重复指定次数的字符串。其基本语法如下：

str.repeat(count)  

其中，count表示重复的次数。

例如，我们可以使用repeat()方法来重复一个字符串：

console.log('hello'.repeat(3)) // 输出 'hellohellohello'  

3. padStart()和padEnd()

padStart()方法和padEnd()方法都是用于将一个字符串填充到指定的长度。但它们有点不同，顾名思义，start就是从头填充，end就是从尾填充，其基本语法如下：

str.padStart(targetLength[, padString])  
str.padEnd(targetLength[, padString])  

其中，targetLength是要填充的长度，padString是可选参数，表示用来填充的字符串，默认为' '。

让我们来试试使用padStart()和padEnd()方法来将一个字符串填充到指定的长度：

console.log('hello'.padStart(10, '-')) // 输出 '-----hello'  
console.log('hello'.padEnd(10, '-')) // 输出 'hello-----'  

总结

在这一章里面我们介绍了ES6中新增的几个字符串方法，包括includes()、startsWith()、endsWith()、repeat()、padStart()和padEnd()。这些新方法可以让我们更方便地操作字符串，提高代码的简洁性和可读性。

那么这篇文章到这里就结束啦~

如果你想了解更多这类文章，点赞关注作者更新更多后续~