刷题 | 牛客 - js中等题-下(更ing)30/54知识点&解答

知识点汇总:

数组:

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代理的 典型应用场景
  1. 数据监控(如 Vue2 的响应式原理)

  2. 访问权限控制

  3. 属性校验(比如类型检查)

  4. 自动记录日志(如访问次数)

  5. 默认值处理

📚 常用拦截方法(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:访问和修改属性
javascript 复制代码
   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);        // 触发 get

proxy.age = 18;                        // 触发 set
2. has:检查属性是否存在
javascript 复制代码
const proxy = new Proxy({ a: 1}, {
    has(target, prop){
        console.log(`判断"${prop}"是否在对象中`);
        return prop in target;
    }
})
console.log('a' in proxy);
3. deleteProperty: 删除属性
javascript 复制代码
const proxy = new Proxy({ name: 'Tom'}, {
    deleteProperty(target, prop){
        console.log(`删除属性"${prop}"`);
        return Reflect.deleteProperty(target, prop);
    }
})
delete proxy.name;
相关推荐
无影无踪的青蛙3 分钟前
[C++]洛谷B3626 跳跃机器人(题干 + 详细讲解, BFS练习题)
开发语言·c++·算法·bfs·广度优先
zeijiershuai7 分钟前
SpringBoot项目配置文件、yml配置文件
java·spring boot·yml
江畔柳前堤10 分钟前
PyQt学习系列11-综合项目:多语言文件管理器
开发语言·网络·python·学习·django·pyqt
君莫愁。12 分钟前
【Unity】使用InputSystem实现UI控件与键盘输入绑定以及如何快速制作虚拟摇杆
开发语言·unity·c#·游戏引擎·input system·输入系统
眠修19 分钟前
Python 实现web请求与响应
开发语言·python
三三十二20 分钟前
Matlab实战训练项目推荐
开发语言·matlab
kyle~33 分钟前
C/C++---隐式显式转换
c语言·开发语言·c++
四谷夕雨35 分钟前
C++八股 —— 手撕定时器
开发语言·c++
Java永无止境41 分钟前
JAVASE:常见的算法
java·开发语言·数据结构·算法·排序算法
2301_8153577041 分钟前
Maven:在原了解基础上对pom.xml文件进行详细解读
java·开发语言·数据库