刷题 | 牛客 - js中等题-下(更ing)30/54知识点解答
知识点汇总:
数组:
Array.prototype.pop()
:从数组末尾删除一个元素,并返回这个元素。
Array.prototype.shift()
:从数组开头删除一个元素,并返回这个元素。
array.reverse():
将数组元素反转顺序。
array.join():
将数组 拼接成字符串。
JS30 回文字符串
描述
请补全JavaScript代码,要求以Boolean的形式返回参数字符串是否为回文字符串。
法一: array.pop() + array.shift()
取数组的前和后的字符做对比
const _isPalindrome = string => {// 补全代码// 法四:let str = string.split('');while(str.length > 1){if(str.pop()!=str.shift()){return false;}}return true;}
法二:字符串访问(字符串索引访问)
// 前后字符相等,如何取到第一个字符,和最后一个字符let len = string.lengthfor(let i = 0;i < len/2; i++){if(string[i] != string[len-i-1]){return false;}}return true;
法三:数组反转【正序 array.join() 和 倒序 array.reverse().join()】
// 法三:// 字符串转数组并拼接,对比 从前往后 和 从后往前(倒过来),是否相等。let oldArr = string.split('').join()let newArr = string.split('').reverse().join();if(oldArr === newArr){return true;}return false;
法四:前后指针
// 法四:let left = 0;let right = string.length - 1;while(left<right){// 相等 则继续;不相等 则返回falseif(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。
法一:
let count = 0const _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
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:访问和修改属性
const 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); // 触发 getproxy.age = 18; // 触发 set
2. has:检查属性是否存在
const proxy = new Proxy({ a: 1}, {has(target, prop){console.log(`判断"${prop}"是否在对象中`);return prop in target;} }) console.log('a' in proxy);
3. deleteProperty: 删除属性
const proxy = new Proxy({ name: 'Tom'}, {deleteProperty(target, prop){console.log(`删除属性"${prop}"`);return Reflect.deleteProperty(target, prop);} }) delete proxy.name;