小厂一面: 请准备好水(二)

前言

现在到了春招的黄金时期,本人和小伙伴们也都开始了面试,今天在这篇文章中记录我的第一个面试经历,不知道小伙伴们是否跟我一样,在第一次面试时都很紧张呢?

这是一家上海的小公司,工资200-250/天

查看对象里的所有属性

使用Object.keys(obj), 来查看对象中的属性,假设我们有一个对象:

js 复制代码
    let obj = {a: 1, b: 2, c: 3}
    Object.keys(obj)
    // 输出 ['a', 'b', 'c']

但是小伙伴们,这个方法只能查找对象中的可枚举属性,如果对象中有一个属性是不可枚举的,将查找不到。

js 复制代码
Object.defineProperty(obj, 'a', 
    { value: 1, enumerable: false // 将属性设置为不可枚举 
});

在JS中,这个方法可以将对象的属性设置为不可枚举属性。

两个等号和三个等号的区别

这个问题,在面试当中是十分容易被问到的,那他们有什么区别呢?

两个等号只判断值是否相等,当等号两边的类型不同时,会将两个数进行隐式类型转换,然后再比较值。当类型相同时,则会直接比较

三个等号会进行严格比较相等,会判断值和类型是否都相等。

js 复制代码
console.log(1 == '1');  // true,会进行类型转换,字符串 '1' 转换为数字 1
console.log(1 === '1'); // false,类型不同,不会进行类型转换,数字 1 和字符串 '1' 不相等

同时,这其中的重要知识点就是类型转换了,大家想具体了解的话可以翻翻我以前的文章,我有详细讲解过点击跳转:类型转换

如何判断两个对象是否相等

首先,两个对象是不可能相等的,因为对象是引用数据类型,他们的引用地址是不相同的。这里我们要判断的是两个对象当中的属性是否完全相同,如果完全相同,那么我们就判断这两个对象相等。

js中是没有提供方法让我们判断两个对象中的属性是否相等的,所以我们需要手写一个方法,判断是否相等。

js 复制代码
// 如何判断两个对象是否相等

function equal(v1, v2) {
    if ((typeof v1 === 'object' && v1 !== null) && (typeof v2 === 'object' && v2 !== null)) {
        if (Object.keys(v1).length !== Object.keys(v2).length) {
            return false
        }
        for (let key in v1) {
            if (v2.hasOwnProperty(key)) {
                if (!equal(v1[key], v2[key])) {
                    return false
                }
            } else {
                return false
            }
            return true
        }
    } else {
        return v1 === v2
    }
}

Vue

说说vue中的响应式远离

Vue 3 中的响应式原理主要基于 JavaScript 的 Proxy 对象。Proxy 对象用于定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等),因此在 Vue 3 中,它被用来捕获对象的基本操作,从而实现响应式数据的追踪和更新。

先给大家介绍一下Proxy:

js 复制代码
const target = {
  name: 'Alice',
  age: 30
};

const handler = {
  get(target, property) {
    console.log(`Getting ${property}`);
    return target[property];
  },
  set(target, property, value) {
    console.log(`Setting ${property} to ${value}`);
    target[property] = value;
  }
};

const proxy = new Proxy(target, handler);

proxy.name; // 输出: "Getting name"
proxy.age = 35; // 输出: "Setting age to 35"

这就是具体的Proxy的介绍以及他的用法,而在vue3中响应式原理主要就是靠Proxy代理一个对象来实现的,当然光是这样说肯定是不够的,小伙伴们可以看看掘金上其它大佬的文章,这里可以看看这位掘友的文章,写的十分的不错~点击此处跳转,手写简单的vue3响应式原理

相关推荐
极小狐20 分钟前
极狐GitLab 容器镜像仓库功能介绍
java·前端·数据库·npm·gitlab
程序猿阿伟32 分钟前
《Flutter社交应用暗黑奥秘:模式适配与色彩的艺术》
前端·flutter
rafael(一只小鱼)35 分钟前
黑马点评实战笔记
前端·firefox
weifont36 分钟前
React中的useSyncExternalStore使用
前端·javascript·react.js
初遇你时动了情40 分钟前
js fetch流式请求 AI动态生成文本,实现逐字生成渲染效果
前端·javascript·react.js
影子信息1 小时前
css 点击后改变样式
前端·css
几何心凉1 小时前
如何使用 React Hooks 替代类组件的生命周期方法?
前端·javascript·react.js
小堃学编程1 小时前
前端学习(1)—— 使用HTML编写一个简单的个人简历展示页面
前端·javascript·html
hnlucky2 小时前
通俗易懂版知识点:Keepalived + LVS + Web + NFS 高可用集群到底是干什么的?
linux·前端·学习·github·web·可用性测试·lvs
懒羊羊我小弟3 小时前
使用 ECharts GL 实现交互式 3D 饼图:技术解析与实践
前端·vue.js·3d·前端框架·echarts