2022 秋招前端面试题（十）（附答案）

let bar = { a: 1, b: 2 };let baz = { ...bar }; // { a: 1, b: 2 }复制代码

let bar = { a: 1, b: 2 };let baz = Object.assign({}, bar); // { a: 1, b: 2 }复制代码

let bar = {a: 1, b: 2};let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}复制代码

console.log(...[1, 2, 3])// 1 2 3console.log(...[1, [2, 3, 4], 5])// 1 [2, 3, 4] 5复制代码

function add(x, y) {  return x + y;}const numbers = [1, 2];add(...numbers) // 3复制代码

const arr1 = [1, 2];const arr2 = [...arr1];复制代码

const arr1 = ['two', 'three'];const arr2 = ['one', ...arr1, 'four', 'five'];// ["one", "two", "three", "four", "five"]复制代码

const [first, ...rest] = [1, 2, 3, 4, 5];first // 1rest  // [2, 3, 4, 5]复制代码

const [...rest, last] = [1, 2, 3, 4, 5];         // 报错const [first, ...rest, last] = [1, 2, 3, 4, 5];  // 报错复制代码

[...'hello']    // [ "h", "e", "l", "l", "o" ]复制代码

// arguments对象function foo() {  const args = [...arguments];}复制代码

const numbers = [9, 4, 7, 1];Math.min(...numbers); // 1Math.max(...numbers); // 9复制代码

1.读取缓存：         搜索自身的 DNS 缓存。(如果 DNS 缓存中找到IP 地址就跳过了接下来查找 IP 地址步骤，直接访问该 IP 地址。)2.DNS 解析:将域名解析成 IP 地址3.TCP 连接：TCP 三次握手，简易描述三次握手           客户端：服务端你在么？            服务端：客户端我在，你要连接我么？            客户端：是的服务端，我要链接。            连接打通，可以开始请求来4.发送 HTTP 请求5.服务器处理请求并返回 HTTP 报文6.浏览器解析渲染页面7.断开连接：TCP 四次挥手
关于第六步浏览器解析渲染页面又可以聊聊如果返回的是html页面根据 HTML 解析出 DOM 树根据 CSS 解析生成 CSS 规则树结合 DOM 树和 CSS 规则树，生成渲染树根据渲染树计算每一个节点的信息根据计算好的信息绘制页面复制代码

vue-router是vuex.js官方的路由管理器，它和vue.js的核心深度集成，让构建但页面应用变得易如反掌
<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址
<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。
<keep-alive> 组件是一个用来缓存组件
router.beforeEach
router.afterEach
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
介绍了路由守卫及用法，在项目中路由守卫起到的作用等等复制代码

git branch 查看本地所有分支git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支git branch -r 查看远程所有分支git commit -am "nit" 提交并且加注释 git remote add origin git@192.168.1.119:ndshowgit push origin master 将文件给推到服务器上 git remote show origin 显示远程库origin里的资源 git push origin master:developgit push origin master:hb-dev 将本地库与服务器上的库进行关联 git checkout --track origin/dev 切换到远程dev分支git branch -D master develop 删除本地库developgit checkout -b dev 建立一个新的本地分支devgit merge origin/dev 将分支dev与当前分支进行合并git checkout dev 切换到本地dev分支git remote show 查看远程库git add .git rm 文件名(包括路径) 从git中删除指定文件git clone git://github.com/schacon/grit.git 从服务器上将代码给拉下来git config --list 看所有用户git ls-files 看已经被提交的git rm [file name] 删除一个文件git commit -a 提交当前repos的所有的改变git add [file name] 添加一个文件到git indexgit commit -v 当你用－v参数的时候可以看commit的差异git commit -m "This is the message describing the commit" 添加commit信息git commit -a -a是代表add，把所有的change加到git index里然后再commitgit commit -a -v 一般提交命令git log 看你commit的日志git diff 查看尚未暂存的更新git rm a.a 移除文件(从暂存区和工作区中删除)git rm --cached a.a 移除文件(只从暂存区中删除)git commit -m "remove" 移除文件(从Git中删除)git rm -f a.a 强行移除修改后文件(从暂存区和工作区中删除)git diff --cached 或 $ git diff --staged 查看尚未提交的更新git stash push 将文件给push到一个临时空间中git stash pop 将文件从临时空间pop下来

for(var i = 0; i < 10; i++){    setTimeout(()=>console.log(i),0)}// 控制台输出10遍10.for(var i = 0; i < 10; i++){    (function(a){    setTimeout(()=>console.log(a),0)    })(i)} // 控制台输出0-9复制代码

// 栗子：var d = 'abc';function a(){    console.log("函数a");};console.log(a);   // ƒ a(){ console.log("函数a"); }a();              // '函数a'var a = "变量a";  console.log(a);   // '变量a'a();              // a is not a functionvar c = 123;
// 输出结果及顺序：// ƒ a(){ console.log("函数a"); }// '函数a'// '变量a'// a is not a function
// 栗子预编后相当于：function a(){    console.log("函数a");};var d;console.log(a);  // ƒ a(){ console.log("函数a"); }a();              // '函数a'
a = "变量a";     // 此时变量a赋值，函数声明被覆盖
console.log(a); // "变量a"a();         // a is not a function
复制代码

var AO = {    a = function a(){console.log("函数a");};    d = 'abc'}复制代码

//举个栗子 function bar(a, b, c) {    console.log(arguments);  // [1, 2]    console.log(arguments[2]); // undefined}bar(1,2)复制代码

console.log(a); // function a() {console.log('Is a ?') }function a() {    console.log('Is a');}function a() {  console.log('Is a ?')}
/**ps: 在执行第一行代码之前，函数声明已经创建完成.后面的对之前的声明进行了覆盖。**/复制代码

console.log(a); // function a() {console.log('Is a ?') }console.log(b); // undefinedfunction a() {  console.log('Is a ');}function a() {console.log('Is a ?');}var b = 'Is b';var a = 10086;
/**这段代码执行一下，你会发现 a 打印结果仍旧是一个函数，而 b 则是 undefined。**/复制代码

console.log(a); // function a() {console.log('fjdsfs') }console.log(b); // undefinedfunction a() {   console.log('Is a');}function a() { console.log('Is a?');}var b = 'Is b';console.log(b); // 'Is b'var a = 10086; console.log(a);  // 10086var b = 'Is b?';console.log(b); // 'Is b?'复制代码

// 创建过程EC= {  VO： {}; // 创建变量对象  scopeChain: {}; // 作用域链}VO = {  argument: {...}; // 当前为全局上下文，所以这个属性值是空的  a: <a reference> // 函数 a  的引用地址  b: undefiend  // 见上文创建变量对象的第三步}
复制代码

 1: let top = 0; //  2: function createWarp() { 3:   function add(a, b) { 4:     let ret = a + b 5:     return ret 6:   } 7:   return add 8: } 9: let sum = createWarp()10: let result = sum(top, 8)11: console.log('result:',result)

复制代码

//通过call调用数组的slice方法来实现转换Array.prototype.slice.call(arrayLike)
//通过call调用数组的splice方法来实现转换Array.prototype.splice.call(arrayLike,0)
//通过apply调用数组的concat方法来实现转换Array.prototype.concat.apply([],arrayLike)
//通过Array.from方法来实现转换Array.from(arrayLike)复制代码

1.ES6引入来严格模式    变量必须声明后在使用    函数的参数不能有同名属性, 否则报错    不能使用with语句 (说实话我基本没用过)    不能对只读属性赋值, 否则报错    不能使用前缀0表示八进制数,否则报错 (说实话我基本没用过)    不能删除不可删除的数据, 否则报错    不能删除变量delete prop, 会报错, 只能删除属性delete global[prop]    eval不会在它的外层作用域引入变量    eval和arguments不能被重新赋值    arguments不会自动反映函数参数的变化    不能使用arguments.caller (说实话我基本没用过)    不能使用arguments.callee (说实话我基本没用过)    禁止this指向全局对象    不能使用fn.caller和fn.arguments获取函数调用的堆栈 (说实话我基本没用过)    增加了保留字（比如protected、static和interface）
2.关于let和const新增的变量声明
3.变量的解构赋值
4.字符串的扩展    includes()：返回布尔值，表示是否找到了参数字符串。    startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。    endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。5.数值的扩展    Number.isFinite()用来检查一个数值是否为有限的（finite）。    Number.isNaN()用来检查一个值是否为NaN。6.函数的扩展    函数参数指定默认值7.数组的扩展    扩展运算符8.对象的扩展    对象的解构9.新增symbol数据类型
10.Set 和 Map 数据结构     ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set 本身是一个构造函数，用来生成 Set 数据结构。
    Map它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。11.Proxy    Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问    都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。    Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。    Vue3.0使用了proxy12.Promise    Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。    特点是：        对象的状态不受外界影响。        一旦状态改变，就不会再变，任何时候都可以得到这个结果。13.async 函数     async函数对 Generator 函数的区别：    （1）内置执行器。    Generator 函数的执行必须靠执行器，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。    （2）更好的语义。    async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。    （3）正常情况下，await命令后面是一个 Promise 对象。如果不是，会被转成一个立即resolve的 Promise 对象。    （4）返回值是 Promise。    async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。14.Class     class跟let、const一样：不存在变量提升、不能重复声明...    ES6 的class可以看作只是一个语法糖，它的绝大部分功能    ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。15.Module    ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。    import和export命令以及export和export default的区别复制代码

<audio src='' controls autoplay loop='true'></audio>复制代码

<video src='' poster='imgs/aa.jpg' controls></video>复制代码

<video>     <source src='aa.flv' type='video/flv'></source>     <source src='aa.mp4' type='video/mp4'></source></video>复制代码

<img draggable="true" />复制代码

<canvas id="myCanvas" width="200" height="100"></canvas>复制代码

<html lang="en" manifest="index.manifest">复制代码

CACHE MANIFEST    #v0.11    CACHE:    js/app.js    css/style.css    NETWORK:    resourse/logo.png    FALLBACK:    / /offline.html复制代码

<!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">    <title>Document</title></head><body>    <!-- v-model 只是语法糖而已 -->    <!-- v-model 在内部为不同的输入元素使用不同的property并抛出不同的事件 -->    <!-- text和textarea 元素使用value property 和 input事件 -->    <!-- checkbox 和radio使用checked  property 和 change事件-->    <!-- select 字段将value 作为prop 并将change 作为事件 -->    <!-- 注意：对于需要使用输入法(如中文、日文、韩文等)的语言，你将会发现v-model不会再输入法    组合文字过程中得到更新 -->    <!-- 再普通标签上 -->    <input v-model="sth" />  //这一行等于下一行    <input v-bind:value="sth" v-on:input="sth = $event.target.value" />    <!-- 再组件上 -->    <currency-input v-model="price"></currentcy-input>        <!--上行代码是下行的语法糖         <currency-input :value="price" @input="price = arguments[0]"></currency-input>        -->         <!-- 子组件定义 -->        Vue.component('currency-input', {         template: `          <span>           <input            ref="input"            :value="value"            @input="$emit('input', $event.target.value)"           >          </span>         `,         props: ['value'],        })   </body></html>复制代码

 <!-- 响应式原理的改变 Vue3.x 使用Proxy取代 Vue2.x 版本的Object.defineProperty --> <!-- 组件选项声明方式Vue3.x 使用Composition API setup 是Vue3.x新增的一个选项，他    是组件内使用Composition API 的入口 --> <!-- 模板语法变化slot具名插槽语法 自定义指令 v-model 升级 --> <!-- 其它方面的更改Suspense支持Fragment(多个根节点) 和Protal (在dom其他部分渲染组建内容)组件     针对一些特殊的场景做了处理。基于treeshaking优化，提供了更多的内置功能。 -->复制代码

    Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。    解决来之前在请求中回调请求产生的回调地狱，使得现在的代码更加合理更加优雅，也更加容易定位查找问题。复制代码

.clearfix:after{    content: "\200B";    display: table;     height: 0;    clear: both;  }  .clearfix{    *zoom: 1;  }复制代码

<header></header>  头部
<nav></nav>  导航栏
<section></section>  区块（有语义化的div）
<main></main>  主要区域
<article></article>  主要内容
<aside></aside>  侧边栏
<footer></footer>  底部复制代码