跳至主要內容

ES6新特性-05

Heyn大约 8 分钟ES6Javascript

第十三章 Proxy 和 Reflect

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

使用 Proxy 进行代理:

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

javascript
复制代码let proxy = new Proxy(target, handler)  

其中,target 是被代理的目标对象,handler 是一个对象,用于定义拦截 target 对象操作的方法。handler 中可以定义的拦截方法包括:getsethasdeletePropertyapplyconstruct 等,例如:

  • 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.getReflect.setReflect.hasReflect.deletePropertyReflect.applyReflect.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 值或者一个操作结果,而不是抛出异常。

总结

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

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

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

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

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

javascript
复制代码Array.from(arrayLike[, mapFn[, thisArg]])  

其中,arrayLike是要转换成数组的对象,mapFn是一个可选参数,用来对每个元素进行映射处理,thisArgmapFn函数的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且类型为数字的情况,而是返回一个只包含该数字的数组。其基本语法如下:

javascript
复制代码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。它的基本语法如下:

javascript
复制代码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。它的基本语法如下:

javascript
复制代码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()方法返回一个包含指定对象的所有属性名的数组,其基本语法如下:

javascript
复制代码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()方法用于将所有可枚举的属性从一个或多个源对象复制到目标对象。其基本语法如下:

javascript
复制代码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()方法将obj1obj2两个对象合并成了一个新的对象newObj,并将其输出。

总结

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

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

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

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

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

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

javascript
复制代码str.includes(searchString[, position])  

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

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

javascript
复制代码str.startsWith(searchString[, position])  

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

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

javascript
复制代码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()方法返回一个重复指定次数的字符串。其基本语法如下:

javascript
复制代码str.repeat(count)  

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

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

javascript
复制代码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()。这些新方法可以让我们更方便地操作字符串,提高代码的简洁性和可读性。

上次编辑于:
贡献者: HeynXi