文章目录
- 1.一万条数据怎么优化页面不卡顿?
- 2.CSS跑马灯实现?
- 3.Pormise几种状态以及使用场景?
- 4.Object的方法(ES6)?
- 5.数组遍历的方法?那些会修改原数组?
- 6.TS泛型?
- 7.真实dom为什么消耗性能?
- 8.Router传值方法?
- 9.useRef会拿到什么?
- 10.高阶函数和高阶组件?
- 11.父子传参和多层级传参区别?
- 12.react常用的高级函数?
- 13.setState同步还是异步?
- 14.瀑布流布局?
- 15.jsx和js区别?
- 16.嵌套函数和闭包区别?
- 17.Http能用Https吗?反过来可以吗?
- 18.redux和context?
- 19.数组迭代器方法?
- 20.map和forEach能打断吗?
- 21.Pormise能打断吗?
- 22.css,less,scss区别?
- 23.react合成事件?
- 24.无视跨域的标签?
- 25.async() => 1 返回什么?
- 26.伪元素和伪类?
- 27.闭包,使用场景,优缺点?
- 28.作用域?作用域链?
- 29.原型?原型链?
- 30.arguments?
- 31.实现吸顶 纯css?
- 32.事件冒泡与捕获以及使用场景?
- 33. $ router和$ route(Vue)
- 34.写一个方法,判断比如121,12321,输入符合规律的数组返回true
- 35. 节流函数,传入count,在规定时间内执行count
- 36.数组扁平化+去重+排序
- 37.实现sleep函数
- 38.请求拦截,响应拦截
- 38.ajax多并发
- 39.useState为什么要写最外边
- 40.随机打乱(洗牌算法)
- 41.模拟lodash的get
- 42.纯函数与副作用
- 43.工具函数
- 44.Pormise (catch方法)
- 45.react中用script
1.一万条数据怎么优化页面不卡顿?
当时听到这个题目,愣可一下心想不让分页一个接口返回,怎么只拿到接口一部分数据,接口还能没请求完就返回数据嘛?之所以会这么想是因为之前的调的一个接口请求完成都用了10多秒,而且日常都是写分页,失策失策。
下来百度了一下,就是等接口拿到后再优化…这种都优化方式就是1秒或者一段时间内去更新部分数据直到最后数据全部展示,或者使用下拉加载的方式。
2.CSS跑马灯实现?
简单来说判断文字长度是否大于盒子长度 然后往左滚动,使用计时器更新偏移量,或者用定时器每秒移动多少。
参考
3.Pormise几种状态以及使用场景?
三种状态
初始化 就是没有调用 resolve 或者 reject
成功 : resolve
失败: reject
4.Object的方法(ES6)?
我个人用的比较少吧
// 返回一个给定对象自身的所有可枚举属性值的数组
Object.value
// 传入对象,返回属性名
Object.key
//判断类型
Object.prototype.toString.call()
// 将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。
Object.assign
//方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)
obj.hasOwnProperty
//测试一个对象是否存在于另一个对象的原型链上
obj.prototype.isPrototypeOf
5.数组遍历的方法?那些会修改原数组?
不会改变原数组的:
concat 返回合并后的数组,不会改变原数组
join 返回字符串,不会改变原数组
slice 截取,返回被截取的对象以数组的形式,不会改变原数组
isArray 判断一个值是不是数组,不会改变原数组 也有其他方法typeof()/instanceof()等
inCludes 检测数组 site 是否包含 一个指定元素,不会改变原数组
toString() 方法用于将数组转换为字符串。 使用数组名称调用它,并返回包含以逗号分隔的数组元素的字符串
会改变原数组的:
reverse 翻转会改变原数组
push 将一个元素从数组的最后面添加,会改变原数组
pop 将数组头部删除一个元素,返回被删除的元素会改变原数组
unshift 将数组头部增加一个元素,会改变原数组
shift 将数组尾部删除一个元素,返回被删除的元素会改变原数组
splice splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
sort 排序方法,会改变原数组
循环
会改变
for for循环没有返回值,会改变原数组
for of ,for in
不会改变
forEach 遍历数组中的每一项,没有返回值,对原数组没有影响,但不支持IE,通过下标也会改变原数组
map 相当于把数组中的每一项改变,但并不影响原来的数组
filter 它不会改变原始数组,但是直接返回一个新数组。
6.TS泛型?
?????
7.真实dom为什么消耗性能?
JavaScript中js引擎和渲染引擎(浏览器内核)是独立实现的。使用js 去操作 DOM 时,本质上是 JS 引擎和渲染引擎之间进行了“跨界交流”。每操作一次 DOM,都要跨界一次。跨界的次数一多,就会产生比较明显的性能问题。
8.Router传值方法?
state,query,props
9.useRef会拿到什么?
10.高阶函数和高阶组件?
高阶函数: 接收的参数是函数类型,返回值是函数;
高阶组件: 接收一个组件作为参数并返回一个新组件的函数;
11.父子传参和多层级传参区别?
父子类传参直接传递,多层级需要存到类似redux的仓库中去,拿取更方便
12.react常用的高级函数?
Promise、setTimeout、arr.map()
13.setState同步还是异步?
默认异步,在原生事件和setTime中都是同步的
14.瀑布流布局?
css方法分列
js方法存储当前高度,由低到高进行图片插入
添加链接描述
15.jsx和js区别?
1.js,是一种直译式脚本语言
2.jsx,JavaScript XML是一种在React组件内部构建标签的类XML语 法。
16.嵌套函数和闭包区别?
嵌套函数就是一个闭包
17.Http能用Https吗?反过来可以吗?
http网页引用https资源 -> 可以;
https网页引用http资源 -> 不行(浏览器认为不安全)
18.redux和context?
19.数组迭代器方法?
forEach, map , every(全对才返回true), some(一个对就返回),reduce, map, filter
20.map和forEach能打断吗?
只能用throw 抛出错误来打断
21.Pormise能打断吗?
只能中断不能打断在 .then里重新写一个return new Promise(()=>{{ })
22.css,less,scss区别?
23.react合成事件?
简单来说就是在原本js的时间上封装了一层自己的事件。
24.无视跨域的标签?
cript、img、link、iframe、a
25.async() => 1 返回什么?
返回的是Pormise对象
26.伪元素和伪类?
伪类:简单理解就是添加的样式
伪元素 :插入内容
伪类只能使用“:”
而伪元素既可以使用“:”,也可以使用“::”
因为伪类是类似于添加类所以可以是多个,而伪元素在一个选择器中只能出现一次,并且只能出现在末尾
27.闭包,使用场景,优缺点?
28.作用域?作用域链?
变量提升
29.原型?原型链?
30.arguments?
arguments会拿到实参
参考
31.实现吸顶 纯css?
js版本思路:监听到顶部的距离 然后fixed
纯css:position:static
32.事件冒泡与捕获以及使用场景?
事件捕获–》事件委托给父元素不用每个子元素都写
事件冒泡–》参考下链
事件冒泡
33. $ router和$ route(Vue)
$ router是用来操作路由的,$ route是用来获取路由信息的。
34.写一个方法,判断比如121,12321,输入符合规律的数组返回true
个人思路:遍历,前后数字比较
35. 节流函数,传入count,在规定时间内执行count
防抖与节流
36.数组扁平化+去重+排序
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]
// 扁平化
let flatArr = arr.flat(4)
// 去重
let disArr = Array.from(new Set(flatArr))
// 排序
let result = disArr.sort(function(a, b) {
return a-b
})
37.实现sleep函数
???
38.请求拦截,响应拦截
38.ajax多并发
39.useState为什么要写最外边
40.随机打乱(洗牌算法)
41.模拟lodash的get
42.纯函数与副作用
纯函数:无变量
副作用:会修改变量
参考
43.工具函数
获取时间,键盘事件,获取URL参数
参考
44.Pormise (catch方法)
45.react中用script
useEffect(()=>{
let script2 = document.createElement('script');
script2.type = 'text/javascript';
script2.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0';
document.getElementById('root').appendChild(script2);
},[]
);