知识点汇总:
数组:
Array.prototype
.pop():从数组末尾删除一个元素 ,并返回这个元素。
Array.prototype
.shift():从数组开头删除一个元素 ,并返回这个元素。
array
.reverse():
将数组元素反转顺序。
array.
join():
将数组 拼接成字符串。
JS30 回文字符串
描述
请补全JavaScript代码,要求以Boolean的形式返回参数字符串是否为回文字符串。
法一: array.pop() + array.shift()
取数组的前和后的字符做对比
javascript
const _isPalindrome = string => {
// 补全代码
// 法四:
let str = string.split('');
while(str.length > 1){
if(str.pop()!=str.shift()){
return false;
}
}
return true;
}
法二:字符串访问(字符串索引访问)
javascript
// 前后字符相等,如何取到第一个字符,和最后一个字符
let len = string.length
for(let i = 0;i < len/2; i++){
if(string[i] != string[len-i-1]){
return false;
}
}
return true;
法三:数组反转【正序 array.join() 和 倒序 array.reverse().join()】
javascript
// 法三:
// 字符串转数组并拼接,对比 从前往后 和 从后往前(倒过来),是否相等。
let oldArr = string.split('').join()
let newArr = string.split('').reverse().join();
if(oldArr === newArr){
return true;
}
return false;
法四:前后指针
javascript
// 法四:
let left = 0;
let right = string.length - 1;
while(left<right){
// 相等 则继续;不相等 则返回false
if(string[left] === string[right]){
left++;
right--;
}else{
return false;
}
}
return true;
知识点:
Array.prototype
.pop():从数组末尾删除一个元素 ,并返回这个元素。
Array.prototype
.shift():从数组开头删除一个元素 ,并返回这个元素。
array
.reverse():
将数组元素反转顺序。
array.
join():
将数组 拼接成字符串。
.join() ,不写,则用 逗号 , (默认分隔符)拼接;
.join('') ,传入
''
(空字符串),那么元素之间不会加任何符号,会直接拼接起来。
JS31 Proxy计数器
描述
请补全JavaScript代码,请给参数对象添加拦截代理功能,并返回这个代理,要求每当通过代理调用该对象拥有的属性时,"count"值加1,否则减1。
法一:
javascript
let count = 0
const _proxy = object => {
// 补全代码
// 法一:
let proxy = new Proxy(object, {
get: function(target, propKey){
// has:检查属性是否存在
if(propKey in target){
count++;
}else{
count--;
}
}
})
return proxy;
}
★🧠 知识点 ------ Proxy代理
Proxy代理,es6的新特性,用于创建 对象的代理 ,可以在对象的访问 或操作被执行时 进行 拦截 或 自定义处理。
是元编程工具,可以在不修改原对象 下,控制其行为。
语法:
const proxy = new Proxy(target, handler);
- target:你要代理的原始对象。
- handler:一个对象,里面定义了拦截操作的方法(称为"捕捉器"或"陷阱" trap)。
Reflect 的作用:在 handler 中,使用 Reflect
是为了以更一致、更安全的方式调用原始操作,比如:
**Reflect.get(**target, prop, receiver) <----> target[prop]
**Reflect.set(**target, prop, value, receiver) <------> target[prop] = value
javascript
Reflect.get(target, prop, receiver) // 等价于 target[prop]
Reflect.set(target, prop, value, receiver) // 等价于 target[prop] = value
✅ Proxy代理的 典型应用场景
数据监控(如 Vue2 的响应式原理)
访问权限控制
属性校验(比如类型检查)
自动记录日志(如访问次数)
默认值处理
📚 常用拦截方法(Trap)
拦截方法 | 说明 |
---|---|
get | 读取属性时触发 |
set |
写入属性时触发 |
has |
使用in操作符时触发 |
deleteProperty |
使用 delete 删除属性时触发 |
ownKeys |
使用 Object.keys() 、for...in 等操作时触发 |
defineProperty |
使用 Object.defineProperty() 时触发 |
getOwnPropertyDescriptor |
使用 Object.getOwnPropertyDescriptor() 时触发 |
1. Proxy(被代理的对象,处理方法)
- Proxy(target, handler):代理 一个对象 ,
handler
里可以定义 拦截的行为(如 get、set)。
2.get(要代理的对象,读取的属性,)
get(target, prop, receiver):当你访问 proxy.prop 时,get 被触发。
3. Reflect.get(...)
- 用来返回实际的属性值 ,相当于target[prop],但更安全、更规范。
例子:
1. get 和 set:访问和修改属性
javascriptconst proxy = new Proxy(obj, { get(target, prop, receiver){ console.log(`读取了属性${prop}`); count++; return Reflect.get(target, prop, receiver); // 安全地返回原属性 }, set(target, prop, value, receiver){ console.log(`设置属性"${prop}"为${value}`); return Reflect.set(target, prop, value, receiver); // 安全地设置值 } }); console.log(proxy.name); // 触发 get proxy.age = 18; // 触发 set
2. has:检查属性是否存在
javascriptconst proxy = new Proxy({ a: 1}, { has(target, prop){ console.log(`判断"${prop}"是否在对象中`); return prop in target; } }) console.log('a' in proxy);
3. deleteProperty: 删除属性
javascriptconst proxy = new Proxy({ name: 'Tom'}, { deleteProperty(target, prop){ console.log(`删除属性"${prop}"`); return Reflect.deleteProperty(target, prop); } }) delete proxy.name;