面试题（六）

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