前端面试（三）

突如其来的面试……

1）问：数组和列表的区别

在 java 中：Array数组定义时需要声明数组大小和存储的数据类型，可通过中括号和下标来存取数据；ArrayList底层通过数组实现，随着元素的增加而动态扩容，通过add 和 get 存取。（以前在学校肯定是学过的，不过现在还给老师了 T T...，有时候想想，其实那时候好好准备做 java 也未必不可行

js 当中数组不需要声明类型，数组长度可动态扩容，没有 ArrayList 的概念。

2）问：let 和 var 的区别

let 是块级声明，在块级作用域内有效，没有声明提升；var是函数级别的声明，在函数作用域内有效，有声明提升效果。

3）问：promise, async 和 await 的使用，如果 await 后面的 promise抛出错误会怎样

1. 与在期约处理程序中一样，在异步函数中抛出错误会返回拒绝的期约：

　　async function foo() {

　　　　console.log(1);

　　　　throw(3);

　　}

　　// 给返回的期约添加一个拒绝处理程序

　　foo().catch(console.log);

　　console.log(2);

　　// 1

　　// 2

　　// 3

2. 不过，拒绝期约的错误不会被异步函数捕获：

　　async function foo() {

　　　　console.log(1);

　　　　Promise.reject(3);

　　}

　　// Attach a rejected handler to the returned promise

　　foo().catch(console.log);

　　console.log(2);

　　// 1

　　// 2

　　// Uncaught (in promise): 3

3. 单独的 Promise.reject() 不会被异步函数捕获，而会抛出未捕获错误。不过，对拒绝的期约使用 await 则会释放（umwrap）错误值（将拒绝期约返回）

　　async function foo() {

　　　　console.log(1);

　　　　await Promise.reject(3);

　　　　console.log(4); // 这行代码不会执行

　　}

　　// 给返回的期约添加一个拒绝处理程序

　　foo().catch(console.log);

　　console.log(2);

　　// 1

　　// 2

　　// 3

4）问：对闭包的理解

闭包指的是那些引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现的。（因为闭包会保留它们包含函数的作用域，所以比其他函数更占用内存，过度使用闭包可能导致内存过度占用，因此建议仅在十分必要时使用。）

5）问：说一下跨域访问

1. 图片探测

2. JSONP

3. 跨源资源共享，CORS 使用自定义的HTTP 头部允许浏览器和服务器相互了解，以确实请求或响应应该成功还是失败。自定义的 HTTP请求有一个额外的Origin头部，Origin 头部包含发送请求的页面的源（协议、域名和端口），以便服务器确定是否为其提供响应。如果服务器决定响应请求，那么应该发送Access-Control-Allow-Origin头部，包含相同的源；或者如果资源是公开的，那么就包含“*”。现代浏览器通过 XMLHttpRequest 对象原生支持CORS，需要提供绝对 URL

6）问：说一下 css 伪类和伪元素

伪元素：::first-letter, ::first-line, ::before, ::after

伪类：超链接的伪类 :link, :visited, :hover, :focus, :active，结构化伪类：:nth-child(odd), :nth-child(3n+4)..., 表单伪类：:optional, :valid, :readonly

7）问：css 如何根据窗口大小，显示样式

1. 配置理想视口，按设备可见视口显示网页内容

2. 媒体查询@media 条件语句 => 断点

@media only screen and (min-width: 35em) {

　　.row-quartet > * {

　　　　width: 50%;

　　}

　　.subcategory-featured {

　　　　width: 100%;

　　}

@media only screen and (min-width: 50em) {

　　.row-quartet > * {

　　　　width: 25%;

　　}

　　.subcategory-featured {

　　　　width: 50%;

　　}

@media only screen and (min-width: 70em) {

　　.subcategory-header {

　　　　width: 20%;

　　}

　　.subcategory-content {

　　　　width: 80%;

　　}

3. 没有媒体查询的响应式Flexbox

　　　　<span class="item-name">Flux capacitor regulator</span>

　　　　</span>

　　</li>

</ul>

.ordering-widget {

　　list-style: none;

　　margin: 0;

　　padding: 0;

　　font-family: 'Avenir Next', Avenir, SegoeUI, sans-serif;

}

.item {

　　color: #fff;

　　background-color: #129490;

　　display: flex;

　　flex-wrap: wrap;

　　font-size: 1.5em;

　　padding: 0;

　　margin-bottom: 0.25em;

}

.item-name {

　　padding: 0.25em;

　　flex: 1 0 13em; /* basis 13em，若空间不够，则其他子标签自动换行 */

}

.item-controls {

　　flex: 1 0 4em;

　　display: flex;

}

.item-control {

　　flex: 1;

　　text-align: center;

　　padding: 0.25em;

　　cursor: pointer;

　　width: 100%;

　　margin: 0;

　　border: 0;

　　color: #fff;

　　font-size: inherit;

}

.item-increase {

　　background-color: #1e6f6d;

}

.item-decrease {

　　background-color: #1c5453;

}

4. 响应式网格与网格模板区

　　</div>

</section>

.grid-b .subcategory-header {

　　grid-area: hd;

}

.grid-b .story:nth-of-type(1) {

　　grid-area: st1;

}

.grid-b .story:nth-of-type(2) {

　　grid-area: st2;

}

.grid-b {

　　display: grid;

　　grid-template-columns: 1fr;

　　grid-template-areas: "hd" "st1" "." "st2" "."; /* 一列五行 */

}

@media only screen and (min-width: 37.5 em) {

　　.grid-b {

　　　　grid-template-columns: 1fr 1fr;

　　　　grid-template-areas: "hd hd"

　　　　　　　　　　　　　 "st1 ..."

　　　　　　　　　　　　　 "... st1" /* 两列三行 */

　　}

8）问：css 的页面布局

1. Float 浮动布局

2. inline-block 行内块布局

3. Flex

4. Grid

5. 表格布局

9）问：HTML5 新增的语义化标签

1. header：标记头部区域的内容（用于整个页面或页面中的一块区域）

2. footer：标记脚部区域的内容（用于整个页面或页面中的一块区域）

3. section：Web页面中的一块区域

4. article：独立的文章内容

5. aside：相关内容或者引文

6. nav：导航类辅助内容

10）问：css 的选择符优先级是怎样的

优先级最高的是行内样式，其次是id选择符，再者class选择符，最后是标签名选择符

11）问：react 的 useState 钩子

函数组件中定义组件状态的钩子，改变组件状态会引发函数组件的重新render

const [count, setCount] = useState(666);

事件回调当中用到的 count 是 capture value，情形如下：事件回调函数当中所有的count都是 666

setCount(count + 1); // render 667

console.log(count); // output 666

setCount(count + 1); // render 667

console.log(count); // output 666

如果需要多次更新 count，并render 累加的值，可以多次用 setCount((count) => count + 1); 此设置状态的回调函数中的参数会是最新值，！！！其他count 仍然是一开始的 capture state。

在React 的事件回调函数中如果有setState，执行完同步语句才会执行render；而在setTimeout 和 Promise 中，只要遇到setState就执行render，之后才接着执行后面的语句。

12）问：react 的 useMemo 钩子

13）问：react 的 useCallback 钩子

useMemo将定义好的组件放在内存中，下次调用可以直接访问该地址，不需要重新解析生成新的组件；useCallback将定义好的函数放在内存中，下次调用可以直接访问该地址，不需要重新解析函数声明生成新的地址；

请参考https://www.cnblogs.com/owenma/p/12035619.html

14）问：react 的 useRef 钩子

定义函数组件调用结束之后不释放内存的变量，下次调用函数组件，该值仍然有效，可用于存储组件数据（同步更新：）；另外可用于存储组件节点；

15）问：webpack 的配置文件

推荐bilibili 网站尚硅谷视频

16）问：git 推送如何解决 conflict

如果我和另一位同事同时在version1 上工作，然后同事先将ta 的改动push 到了GitHub上，那么我需要pull 下来，pull 下来默认等于fetch + merge，如果merge 没有冲突，那么我再将merge 后的版本 push到 GitHub上即可；如果merge 出现了冲突，那么有冲突的地方需要手动将自己的代码整合到同事的代码上，确认代码整合没有问题之后，再重新提交，重新推送到GitHub。

好像就这么多……

（代码部分摘自《JavaScript高级程序设计》和《精通CSS 高级Web标准解决方案》