ES6新特性-05
第十三章 Proxy 和 Reflect
Proxy
和 Reflect
是 ES6 中新增的两个内置对象,它们的出现使得 JavaScript 中的对象操作更加灵活和可控。在这一章里我们将会简单介绍 Proxy
和 Reflect
的基本用法和常见方法。
使用 Proxy 进行代理:
Proxy
对象是用于拦截目标对象操作的一个代理,通过Proxy
对象,我们可以拦截对目标对象的一些操作,比如读取属性、设置属性、调用方法等。它的语法如下:
javascript
复制代码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
、字符串
等)转换成数组
。它的基本语法如下:
javascript
复制代码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且类型为数字的情况,而是返回一个只包含该数字的数组。其基本语法如下:
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()
方法将obj1
和obj2
两个对象合并成了一个新的对象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()。这些新方法可以让我们更方便地操作字符串,提高代码的简洁性和可读性。