面试题（六）

news2024/11/15 11:02:25

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>
    )
  }
}