面试题(六)

news2024/9/24 7:19:39

1、等于操作符 “ == ” 和全等操作符 “ === ” 区别

  • == 有类型隐式转换,会先进行类型转换,再确定操作数是否相等(若类型比较)。 null == undefined 结果为 true
  • === 没有类型隐式转换,只有两个操作数在不转换的前提下相等,才返回 true。即类型相同,值也要相同。 null == undefined 结果为 false

2、null 和 undefined 的区别

null和undefined都是js中的特殊值,表示缺失或未定义的值。
null 表示一个空对象指针,即该变量应该指向一个对象,但是现在没有指向任何一个对象。
undefined 表示一个未定义的值,即该变量没有被赋值,或者被赋值为 undefined
在条件判断中,null 和 undefined 都会被转化为 false

区别:

  • 相等但不全等
  • 在数字运算中,被转换为 number 类型的值不同,在 null 上执行算数转换时,值为 0, let a = 10 + null; =》 a=10,undefined 执行算数转换时,得到的结果是 NaN let b = 10 + undefined; =》 b = NaN
	typeof undefined	// undefined
	typeof null			// object
场景:

null :
初始化一个变量,表示该变量母亲没有任何值。
作为函数的参数,表示该函数的参数不需要传递人格值
作为对象的属性,表示该属性母亲没有任何值

undefined:
变量声明但未初始化时,变量的默认值是 undefined。
对象属性不存在时,访问该属性返回的值是 undefined。
函数没有返回值是,返回的值默认是 undefined。

2、promise 有哪些方法,什么场景下使用 promise

方法:

all():

Promise.all()方法用于将多个 Promise实例,包装成一个新的 Promise实例。
const p = Promise.all([p1, p2, p3]);

  • 只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数
  • 只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数
race()

Promise.race()方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。

  • 只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。率先改变的 Promise 实例的返回值则传递给p的回调函数
resolve()

将现有对象转为 Promise对象

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected

const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))
Promise.any()

Promise.any() 会过滤掉所有rejected 的promise,而关注第一个fulfilled的promise的值。

使用场景

当下个异步请求依赖上个请求结果的时候
一个页面,有多个请求,我们需求所有的请求都返回数据后再一起处理渲染 all()

3、什么场景下使用 全局状态管理

大型单页应用

4、react 类式组件和函数式组件的区别

针对两种React组件,其区别主要分成以下几大方向:

  • 编写形式:函数式和类式

  • 状态管理:在hooks出来之前,函数组件就是无状态组件,不能保管组件的状态,不像类组件中调用setState,如果想要管理state状态,可以使用useState

  • 生命周期:在函数组件中,并不存在生命周期,这是因为这些生命周期钩子都来自于继承的React.Component;函数组件使用useEffect也能够完成替代生命周期的作用

  • 调用方式:如果是一个函数组件,调用则是执行函数即可;如果是一个类组件,则需要将组件进行实例化,然后调用实例对象的render方法

  • 获取渲染的值

5、pina和vuex的区别

1、核心概念

(1)vuex:state、getters、actions、mutations、modules(分模块进行管理 Vuex)
(2)pina:state、getters、actions

2、异步处理:

(1)Vuex: 在vuex中,异步操作通常需要在actions中处理,这可能导致代码相对冗长。
(2)Pinia:pinia支持在模块中使用async/await来更轻松地处理异步操作,使代码更加清晰。

3、类型支持:

(1)Vuex:Vuex在处理类型和TypeScript支持方面相对较弱。虽然可以使用TypeScript,但需要额外的工作。
(2)Pinia: Pinia专门为 TypeScript 设计,具有更强大的类型支持。它充分利用了 Vue3的 Composition API的类型推断,使得开发者可以更容易地2编写类型安全的代码。

4、写法

(1)vuex: 选项式写法
(2)pina:选项式、组合式写法。通过 defineStore(id, func | obj)

6、vue和react区别

1)相同点

  • 都有组件化开发和 Virtual DOM
  • 都支持 props 进行父子组件间数据通信
  • 都支持数据驱动视图,不直接操作真实 DOM,更新状态数据,界面就会自动更新
  • 都支持服务端渲染
  • 都有支持 native 的方案,React 的 React Native,Vue 的 Weex

2)不同点

  • 数据绑定:vue实现了数据的双向绑定,data(视图)更新会刷新视图(data);react数据流是单向的,只能是 data 更新,刷新视图
  • 组件写法不一样:vue中使用模板语法,一个 .vue 文件就是一个组件,文件中包含 html、css、js,由 webpack 的 loader 对文件进行转化;react 推荐 JSX,也就是把 html、css 全都写到 js 中,即“all in js”
  • vue 中,数据由 data 属性管理;react 中,要用 state 更新状态,刷新视图
  • 组件声明方式: vue 可以使用 Vue.component 方法全局注册,也可以使用 单文件组件进行局部注册; react 有函数式组件和类式组件。使用函数式组件时,直接调用函数方法,接收 props 作为参数并返回表示 UI 的React 元素。使用类式组件时,组件继承自 React.Component ,通过 render 方法返回 React 元素

7、鸿蒙使用 http

ohos.permission.INTERNET

8、ajax,axios,websockt区别

ajax

  • 基于原生的 XHR,XHR 本身架构不清晰
  • 由 jQuery 封装,使用 ajax 就要引入整个 jQuery

axios

  • 从浏览器中创建 XMLHttpRequests
  • 从 nodejs 创建 http 请求
  • 支持Promise API
  • 拦截请求和响应
  • 客户端支持防御 XSRF

websocket

  • 双全工连接,建立一次连接,客户端和服务的可以长时间处于连接状态,双方可以随时通信,客户端通过 send 发送消息给服务端,客户度通过 onmessage 获取服务端发送给前端的数据。

9、react样式隔离

按照截图方式在同一个组件中引用多个组件,如果 Hello 和 Welcome 组件存在相同类的不同样式时,后者会覆盖前者,所以需要样式隔离,使其互不影响。
在这里插入图片描述

css 模块化

  • 将 .css 文件改为 .module.css 文件
  • 引入 css 文件时,使用 import hello from "./Hello.module.css" 代替 import "./Hello.module.css"
  • 组件标签中使用 hello.title,<h1 className={hello.title}>Hello 组件</h1>
    编译出来是如下效果:
    在这里插入图片描述

namespaces

利用约定好的命名来隔离 CSS 的作用域,所有的 class 名以命名空间为前缀。

/* A.less */
.comA {
    &__title {
        color: red;
    }
}

/* B.less */
.comB {
    &__title {
        font-size: 14px;
    }
}
<div class="comA">
    <h1 class="comA__title">组件A的title</h1>
    <div class="comB">
        <h1 class="comB__title">组件组件的title</h1>
    </div>
</div>

CSS in JS

使用 JS 语言写 CSS,也是 React 官方有推荐的一种方式。

reactCSS
class Component extends React.Component {
  render() {
    const styles = reactCSS({
      'default': {
        card: {
          background: '#fff',
          boxShadow: '0 2px 4px rgba(0,0,0,.15)',
        },
        title: {
          fontSize: '2.8rem',
          color: this.props.color,
        },
      },
    })
    return (
      <div style={ styles.card }>
        <div style={ styles.title }>
          { this.props.title }
        </div>
        { this.props.children }
      </div>
    )
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1996438.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何在 Android 手机/平板电脑上恢复误删除的 DCIM 文件夹

DCIM 文件夹是智能手机和平板电脑上最重要的文件夹之一。许多人报告说他们在 Android 设备上遇到了 DCIM 文件夹为空的问题。实际上&#xff0c;这种情况大多数情况下都会发生&#xff0c;当您意外从 Android 设备中删除 DCIM 文件夹或因病毒攻击、应用程序问题和意外格式化等原…

Android系统安全 — 6.5 Bluetooth安全连接原理

1 蓝牙协议架构和简称 蓝牙协议栈主要分&#xff1a;APPS层&#xff08;应用层&#xff0c;包括音频播放器&#xff0c;蓝牙遥控&#xff0c;智能家居APP等&#xff09;&#xff0c; HOST层&#xff08;中间层协议&#xff0c;包括GAP,SMP,ATT/GATT, L2CAP, AMP Manager&#x…

6自由度机械手DH坐标系建立

一、建立机械臂DH坐标系 Z为转动关节的转轴&#xff0c;Xi垂直于关节轴i和i1所在的平面&#xff0c;则根据上述方法可以建立坐标系如下图&#xff1a; 二、DH参数表 DH参数设定&#xff1a;机器人的每个连杆可以用4个运动学参数表示&#xff0c;DH法建立坐标系&#xff0c;xi-…

『状态模式』

首先创建一个项目 打开项目后复制至3个场景 命名为 创建一个空物体 命名为GameLoop 创建一个脚本GameLoop.cs 编写代码如下 将代码挂载至空物体GameLoop 将三个场景拖拽至Scenes In Build 分析下状态模式的类图 我们创新类图中的代码 编写ISceneState.cs 编写三个状态子类继承构…

Rust学习----Rust安装

如何安装Rust&#xff1f; 1.官网&#xff1a;https://www.rust-lang.org/zh-CN/ 2.Linux or Max: curl https://sh.rustup.rs -sSf | sh 3.Windows按官网指导安装。 4.Windows Subsystem for Linux&#xff1a; curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs…

2024年软件测试八股文(含答案+文档)

1、你的测试职业发展是什么&#xff1f; 测试经验越多&#xff0c;测试能力越高。所以我的职业发展是需要时间积累的&#xff0c;一步步向着高级测试工程师奔去。而且我也有初步的职业规划&#xff0c;前3年积累测试经验&#xff0c;按如何做好测试工程师的要点去要求自己&…

Redis 数据结构深度解析

在浩瀚的数据存储海洋中&#xff0c;Redis以其卓越的性能和丰富的数据结构脱颖而出&#xff0c;成为众多开发者心中的瑰宝。作为一个高性能的键值存储系统&#xff0c;Redis不仅支持基础的字符串类型&#xff0c;还提供了哈希、列表、集合、有序集合等复杂数据结构&#xff0c;…

Git详细命令大全

一、创建版本库 创建目录&#xff1a;mkdir zzz 目录路径 进入目录&#xff1a;cd zzz 目录路径 查看当前目录路径&#xff1a;pwd 将当前目录变成Git仓库 &#xff1a;git init 二、代码存储 提交 添加文件到暂存区&#xff1a; 当前代码&#xff1a;git add . add与.之间有空…

医疗行业解决方案参考

医疗行业解决方案 互联网医院架构 患者门户&#xff1a;提供患者信息查询、挂号、缴费等基本服务。 预约挂号&#xff1a;允许患者在线预约挂号&#xff0c;减少现场排队等候时间。 挂号查询&#xff1a;患者可以查询挂号状态和相关信息。 院内导诊&#xff1a;提供院内导航…

2-60 基于matlab的时滞系统广义预测控制(GPC)算法仿真

基于matlab的时滞系统广义预测控制&#xff08;GPC&#xff09;算法仿真&#xff0c;不同控制加权矩阵控制效果对比&#xff0c;输入参数预测时域、控制时域、控制加权矩阵、误差加权矩阵。输出对比结果。程序已调通&#xff0c;可直接运行。 2-60 控制加权矩阵 误差加权矩阵 -…

Qgis 开发初级 《数据库和图层》

Qgis 可以加载很多数据源&#xff0c;像shapefile 文件&#xff0c; gdb文件等&#xff0c;还可以直接链接企业数据库。在这里&#xff0c;我只介绍比较常用的本地数据库 gdb。gdb 是esri 开发的数据库&#xff0c;gdb数据库不是开源的&#xff0c;qigs用了OpenFileGdb的驱动读…

ThreadPoolExecutor 理解

参数的理解&#xff1a; 核心和最大池大小 Core and maximum pool sizes ThreadPoolExecutor将根据corePoolSize 和 maximumPoolSize 设置的边界自动调整线程池大小&#xff0c;在方法execute&#xff08;Runnable&#xff09;中提交新任务时&#xff0c;如果运行的线程数少于…

http参数污染利用php小特性绕过贷齐乐waf

分析源码 GET/POST/REQUEST/COOKIE都会经过这个替换str_ace(array(&, ", <, >,(,)), array(&, ", <, >,&#xff08;,&#xff09;), $string) GET/POST/REQUEST三个变量&#xff0c;都会经过这个正则&#xff1a;select\|insert\|update\|delet…

【Linux】系列入门摘抄笔记-2-语法格式与内置、外部、帮助命令

语法格式与命令 1、命令的语法格式 command [选项] [参数] &#xff08;1&#xff09;command : 称为命令&#xff0c;是必须的&#xff0c;要执行的操作。 &#xff08;2&#xff09;选项&#xff1a;对命令的功能进行微调&#xff0c;决定这个命令将如何执行&#xff0c;同…

xshell连接云服务器 出现“所选的用户密钥未在远程主机上注册”的解决办法

欢迎来到雲闪世界。最近刚刚开启了谷歌云&#xff0c;有空了准备开台小鸡折腾下onedrive索引工具pyone。但是开了台小鸡之后&#xff0c;高兴的使用xshell生成密钥&#xff0c;把公钥复制到谷歌云控制台。然后新建主机&#xff0c;输入ip一套操作行云流水&#xff0c;可是出了点…

HarmonyOS Developer之实现点赞效果

待实现效果 点赞按钮通过一个div组件关联click事件实现。div组件包含一个image组件和一个text组件&#xff1a; image组件用于显示未点赞和点赞的效果。click事件函数会交替更新点赞和未点赞图片的路径。text组件用于显示点赞数&#xff0c;点赞数会在click事件的函数中同步更…

解锁多场景,EasyCVR视频汇聚网关赋能业务数字化转型

在信息化高速发展的今天&#xff0c;视频监控系统已成为各行各业不可或缺的一部分。从公共安全到企业管理&#xff0c;从智慧城市建设到个人生活安全&#xff0c;视频监控的覆盖范围日益广泛。而视频汇聚网关&#xff0c;作为视频监控系统中的核心设备&#xff0c;扮演着承上启…

程序员学长 | 超强!六大优化算法全总结

本文来源公众号“程序员学长”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;超强&#xff01;六大优化算法全总结 今天我们将详细讨论一下用于训练神经网络&#xff08;深度学习模型&#xff09;时使用的一些常见优化技术&#…

FlexBV电路查看软件

FlexBV - Macbook, iPhone, PC/Laptop & Electronics BoardViewer with PDF Cross Referencing 免费。 支持tvw&#xff0c;cad格式。 支持Windows,Linux,Mac。 而且我发现cad格式是文本的&#xff01;意味着可以自由编辑&#xff01;

springboot窝窝酒店管理系统-计算机毕业设计源码91798

摘 要 随着时代的进步与发展&#xff0c;互联网技术的应用也变得日益广泛。窝窝酒店管理系统在当今社会体系中扮演了一个非常重要的角色&#xff0c;它能大大地提高效率并减少了资源上的浪费。本文首先介绍了窝窝酒店管理系统的优势以及重要性&#xff1b;然后描述了这个系统的…