京东零售一面 6.25面试 6.27登官网发现流程结束了 问题下面的回答是我整理的答案 不是我给到面试官的答案
1.js中有哪些常用的数据类型
js中的数据类型分为两类
①基本(原始)数据类型
number
string字符串
boolean布尔值
null
undefined
bigint 可以表示超出number安全整数(Number.MAX_SAFE_INTEGER)范围的大整数
symbol
②引用数据类型
object对象
array数组
function函数
原始数据类型和引用数据类型的区别:
原始数据类型直接存储在栈中,值本身不可变
引用数据类型的实际数据存储在堆中,栈中只保存指向堆内存的引用地址
2.节流和防抖的区别,分别说一下是如何实现的
3.深拷贝和浅拷贝
浅拷贝:
将原对象或数组的值复制到一个新的对象或数组中,但新的对象或数组的元素或属性依然是原对象或数组的引用
常见的浅拷贝方法:
①Object.create(obj)
创建一个新对象,并将原对象作为新对象的原型
新对象可以访问原对象的所有属性和方法
const obj2=Object.create(obj1);
②Object.assign({},obj)
用于将一个或多个源对象的属性复制到目标对象中
let a={
name:'A',
like:{n:'coding'}
}
let b=Object.assign({},a);
a.name='B';
a.like.n='running';
console.log(b.name); //A
console.log(b.like.n); //running
原始类型不会跟着a修改,引用类型会
因为对原始数据类型复制的是值本身
对引用类型复制的是引用地址(栈内存中的地址),源对象和目标对象会指向同一个堆内存地址
③[].concat(arr)
用于将一个或多个数组合并成一个新数组
修改时同上
④[...arr]数组解构
同上
⑤arr.slice()
从数组中提取指定区间的元素创建一个新的数组
接受两个参数:开始索引和结束索引
深拷贝:
将原对象或数组的值复制到一个新的对象或数组中,
新的对象或数组的属性或元素完全独立于原对象或数组,不共享引用地址
常见的深拷贝方法:
JSON.parse(JSON.stringify(obj))
JSON.stringify将js对象或值转换为JSON字符串
JSON.parse将JSON字符串解析为对应的js对象或值
4.tcp的握手和挥手
①tcp三次握手建立连接
第一次握手:客户端-->服务器端
将报文标志位SYN置为1,随机产生序列号seq=j
第二次握手:服务器端-->客户端
将报文标志位SYN和ACK都置1 ack=j+1 随机序号seq=k
第三次握手:客户端-->服务器端
报文标志位ACK置1,ack=k+1
②tcp四次挥手关闭连接
由于TCP连接是全双工的,每个方向都要单独进行关闭
挥手请求可以从任意一端发起
第一次挥手:Client端-->Server端
发送FIN报文 FIN=1 序列号seq=u
第二次挥手:Server端-->Client端
收到FIN之后发送ACK报文 ack=u+1
第三次挥手:Server端-->Client端
发送FIN报文 FIN=1 seq=w ack=u+1
第四次挥手:Client端-->Server端
发送ACK报文 ack=w+1 seq=u+1
5.水平垂直居中实现的方式
6.flex布局的对齐方式都有哪些
①主轴对齐(默认水平方向)
使用justify-content属性来控制
flex-start:子项对齐到容器的起始端
flex-end:对齐到末尾端
center:居中对齐
space-between:子项之间等距分布,首尾子项对齐到容器的起始和末尾端
space-around:每个项目两侧的间距相等
space-evenly:
②交叉轴对齐(默认垂直方向)
使用align-items属性来控制
flex-start:
flex-end:
center:
baseline:对齐到基线
stretch:子项拉伸以填满容器的高度
③单个子项的对齐
④多行对齐
7.标准盒子模型/怪异盒子模型的宽度
标准盒子模型 content
宽度content
总宽度:content+padding+border+margin
怪异的盒子模型
content+padding+border
8.什么是虚拟DOM
本质上,虚拟DOM是一个js对象,通过对象的方式来表示DOM结构
在代码渲染到页面之前,react把代码转换成一个对象(虚拟DOM),
以对象的形式来描述真实的DOM 结构,最终渲染到页面
每次数据发生变化前,虚拟DOM 都会缓存一份,进行新旧比较
使跨平台渲染成为可能
使用虚拟DOM的原因:
①保证性能下限
虚拟DOM的更新DOM的准备工作耗费更多时间
保证的是不需要手动优化的情况下依然能提供过得去的性能
②跨平台
9.React里for循环中key值的作用
为每个列表项提供了唯一的标识
避免使用索引作为默认key值 在列表项顺序变化时出现性能问题
10.react中常见的hooks
11.useeffect的第二个参数的作用
是依赖数组 指定什么值的变化会触发回调函数的重新执行
如果依赖为空数组,回调函数只在组件加载时执行一次
如果不传依赖,每次渲染时都执行
useEffect:
接受两个参数:回调函数和依赖数组
useEffect(() => {
// 副作用逻辑
}, [dependencies]); // 依赖数组
12.usememo和memo和usecallback 的区别
①useMemo
是hook 用于缓存计算值
接受两个参数:一个计算函数和一个依赖数组
避免在每次渲染时重新计算复杂的值
减少不必要的计算
②React.memo
是API 通过记忆上一次的渲染结果,仅当props发生变化时才会重新渲染
③useCallback
是hook 用于缓存函数
接受两个参数:一个函数和一个依赖数组
依赖数组的值发生变化时,重新创建函数
13.最后让我在本地编辑器上写了一道题
把一维数组[1,2,3,4,5,6]改成二维数组[[1,2],[3,4],[5,6]]
const oneDArray = [1, 2, 3, 4, 5, 6];
const twoDArray = [];
for (let i = 0; i < oneDArray.length; i += 2) { twoDArray.push(oneDArray.slice(i, i + 2));
}
console.log(twoDArray); // 输出:[[1, 2], [3, 4], [5, 6]]