1.使用css画出如下布局,大正方形400px，小正方形100px,要求使用flex布局?（10)★
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 400px;
height: 400px;
background-color: aqua;
display: flex;
align-items: center;
flex-wrap:wrap;
justify-content: space-around;
}
.small-box {
width: 100px;
height: 100px;
background-color: bisque;
border: 1px solid red;
}
</style>
<title>Document</title>
</head>
<body >
<div class="box">
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
</div>
</body>
</html>
复制代码
实现结果
2. 以下代码输出什么?（10)★
1.
0 == false
2.
[] == false
3.
nu1l == false
const a = [1,2，3]
const b = [1,2，3]
const c = "1,2，3"
4.
a == b
5.
a == c
复制代码
答案:
0 == false --->true
---------------------------------------------分割线-----------------------------------------
[] == false
---------------------------------------------分割线-----------------------------------------
nu1l == false ---> nu1l is not defined
---------------------------------------------分割线-----------------------------------------
const a = [1,2，3];
const b = [1,2，3];
const c = "1,2，3";
a == b ---> false
a == c ---> false
3. Pormse.all和await的区别。(10) ★
Promise: 的出现解决了传统callback函数导致的“地域回调”问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。而async await代码看起来会简洁些，使得异步代码看起来像同步代码，await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖，只有这一句代码执行完，才会执行下一句。
await: 是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数
1.promise.all
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候返回最先被reject的项。它是同步执行的，执行完成的总时间以最长的那个执行函数完成时间为准
2.promise.race
Promise.race([p1,p2,p3])里面哪个结果获得快，就返回哪个结果，不管结果本身是成功还是失败状态。
3.async和await
async 和awiat 是成对存在的， 执行顺序是按照程序的书写顺序依次执行的
参考出处链接：www.jianshu.com/p/463280af2…
4.以下代码输出什么? (需要描述时间间隔) (10) ★★
for (var index = 0; index < 5; index++) {
setTimeout(function() {
console. log(index);
},1000);
}
复制代码
const list = [1, 2, 3];
const run = num => {
return new Promise((resolve, reject) => {
setTimeout(O => {
resolve(num)
}, 1000)
})
}
function fn () {
list.forEach(async x => {
const res = await run(x)
console.log(res)
})
}
fn()
复制代码
答案:
1秒后输出5次5
console.log(index) ---> 5
console.log(index) ---> 5
console.log(index) ---> 5
console.log(index) ---> 5
console.log(index) ---> 5
复制代码
2.
2秒后输出
console.log(res) ---> 1
console.log(res) ---> 2
console.log(res) ---> 3
复制代码
5.用js递归的方式写1到100求和 (10) ★
方法一:
function Add (num, num2) {
num += num2;
num2++;
if (num2 > 100) {
console.log(num, num2, 'num')
return num;
}
else {
Add(num, num2)
}
}
Add(0, 1)
复制代码
方法二:
function num(n) {
if (n == 1) return 1;
return num(n - 1) + n;
}
let sum = num(100);
console.log(sum, "sum")
复制代码
参考出处链接：blog.csdn.net/rbgg_mp/art…
6. 列举2个目前市面上广泛使用的状态管理插件(数据流方案),并描述状态管理的2个优点(10) ★★
1.redux的优点
1. Redux 使状态可预测
在 Redux 中，状态始终是可预测的。如果将相同的状态和动作传递给减速器，则总是会产生相同的结果，因为减速器是纯函数。状态也是不可变的，永远不会改变。这使得执行诸如无限撤消和重做之类的艰巨任务成为可能。还可以在之前的状态之间来回移动并实时查看结果。
2. Redux 是可维护的
Redux 对代码的组织方式很严格，这使得具有 Redux 知识的人更容易理解任何 Redux 应用程序的结构。这通常使维护更容易。这也有助于用户将业务逻辑与组件树分离。对于大型应用程序，保持应用程序更具可预测性和可维护性至关重要。
3. Redux 调试简单
Redux 使调试应用程序变得容易。通过记录操作和状态，很容易理解编码错误、网络错误和生产过程中可能出现的其他形式的错误。除了日志记录，它还有很棒的 DevTools，允许时间旅行操作、页面刷新时的持久操作等。对于中型和大型应用程序，调试比实际开发功能花费更多的时间。Redux DevTools 使您可以轻松利用 Redux 提供的所有功能。
4.性能优势
我们可能会假设保持应用程序的状态全局会导致一些性能下降。在很大程度上，情况并非如此，因为 React Redux 在内部实现了许多性能优化，因此我们自己的连接组件仅在实际需要时才重新渲染。
5.易于测试
由于函数用于更改纯函数的状态，因此测试 Redux 应用程序很容易。
6.状态持久化
我们可以将应用程序的一些状态持久化到本地存储并在刷新后恢复它。这真的很漂亮。
7.服务端渲染
Redux 也可用于服务器端渲染。有了它，我们可以通过将应用程序的状态连同它对服务器请求的响应发送到服务器来处理应用程序的初始呈现。然后所需的组件以 HTML 格式呈现并发送到客户端
复制代码
Mobx
Mobx的**优点**是：
- 简单易学习；
- 代码可读性和可维护性高；
- OOP编码范式，易于上手。
参考原文链接:原文链接：blog.csdn.net/shanghongsh…
2.Vuex的优点
1. 能够在vuex中,集中管理共享的数据,易于开发和后期维护；
2. Vuex 的状态存储是响应式的，当 Vue 组件从 store中读取状态的时候，若 store 中的状态发生变化，能够触发3. 响应式的渲染页面更新 (localStorage就不会)，那么相应的组件也会相应地得到高效更新。
4. js 原生的数据对象写法, 比起 localStorage 不需要做转换, 使用方便
5. 限定了一种可预测的方式改变数据, 避免大项目中, 数据不小心的污染
原文链接：https://blog.csdn.net/qq_40922656/article/details/122111011
复制代码
参考原文链接:原文链接：blog.csdn.net/qq_40922656…
7.webpack中loader和plugin的区别是什么 (10分) ★★
loader，它是一个转换器，将A文件进行编译成B文件，比如：将A.less转换为A.css，单纯的文件转换过程。 webpack自身只支持js和json这两种格式的文件，对于其他文件需要通过loader将其转换为commonJS规范的文件后，webpack才能解析到
plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务。plugin是用于在webpack打包编译过程里，在对应的事件节点里执行自定义操作，比如资源管理、bundle文件优化等操作
复制代码
参考原文:原文链接：blog.csdn.net/weixin_4508…
8. 选做题 (10分) ★★★
1.用代码描述vue响应式的原理?
2.简要举例React有哪些常用的优化方式，并描述其原理(class, hooks 两方面各举一种)
9.选做(20分) ★★★
1.用React hooks写-个请求接口并渲染- 个字符串列表的组件(假设接口是function getList(): Promises<string[]>)。
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState([]);
useEffect(async () => {
const data = await getList();
setData(data);
});
return (
<ul>
{data.map((i,index) => (
<li key={index}>
{i}
</li>
))}
</ul>
);
}
export default App;
2.用小程序原生写个图片弹窗组件(需要有显隐参数、关闭事件、黑色遮罩) (需要有.wxml, .wXsS,.js/.ts, .json) 。
```
.wxm:
.wxss:
.js/ts:
.json:
```
复制代码
10.列举-些TypesSript的泛型工具，并描述其用法(附加题) (列举 个+1, 说出用法+4) ★★★
Partial
将传入的属性变为可选项
interface IPeople {
title: string;
name: string;
}
const people: Partial<IPeople> = {
title: 'Delete inactive users'
};
复制代码
Record<K, T>
将传入的属性变为可选项
interface Person {
name: string;
}
// 将x, y 作为Person的key
type Peoples = Record<"x" | "y", Person>;
const P: Peoples = {
x: {
name: '张三'
},
y: {
name: '李四'
}
}
参考链接:原文链接：www.cnblogs.com/Qooo/p/1493…
