5.19-5.26 快速搞定前端技术一面（3.27更新）

作者： 作者的头像   bubboo123 ,  2022-05-19 11:30:11 ,  所有人可见 ,  阅读 458

0


CSS面试题

如果理解HTML语义化

  1. 让人更容易读懂(增加代码可读性)
  2. 让搜索引擎更容易读懂 (SEO )

CSS布局

盒子模型的宽度如何计算？

盒模型.png

补充:如果让 offsetWidth 等于 100px，该如何做 ?
设置box-sizing: border-box;

margin纵向重叠问题

Snipaste_2023-03-27_10-39-56.png

margin负值的问题

fuzhi.png

BFC的理解和应用

常见应用：清除浮动 overflow: hidden;

Block format context，块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

bfc.png

浮动

  1. 脱标且不保留原来的位置
  2. 想要块级元素一行内显示，用浮动它们之间不会有缝隙，但是设置为行内块就会有缝隙

fudong.png

如何实现圣杯布局和双飞翼布局

三栏布局，中间一栏最先加载和渲染(内容最重要）
两侧内容固定，中间内容随着宽度自适应
一般用于PC网页

技术总结
  1. 使用float 布局
  2. 两侧使用 margin 负值，以便和中间内容横向重叠
  3. 防止中间内容被两侧覆盖，一个用 padding 一个用 margin
圣杯布局 用padding留白
记得加padding

Snipaste_2023-04-01_11-42-11.png 

<!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>圣杯布局</title>
  <style>
    html *{
      margin: 0;
      padding: 0;
    }

    #header{
      height: 100px;
      width: 100%;
      background-color: pink;
    }
    #container{
      /* container设置padding */
      padding-left: 200px;
      padding-right: 200px;
    }
    /* container每一列都设置浮动 */
    #center{
      float: left;
      width: 100%;
      background-color: orange;
    }
    #left{
      float: left;
      width: 200px;
      background-color: green;
      margin-left: -100%;
      /* 相对于原来位置左移自身宽度 */
      position: relative;
      right: 200px;
    }
    #right{
      float: left;
      width:200px;

      background-color: green;
      margin-right: -200px;

    }
    #footer{
      height: 100px;
      width: 100%;
      background-color: pink;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <header id="header">头部</header>
  <section id="container">
    <div id="center">中间</div>
    <div id="left">左边</div>
    <div id="right">右边</div>
  </section>
  <footer id="footer">尾部</footer>
</body>
</html>
双飞翼布局 用margin留白

Snipaste_2023-04-01_11-22-29.png 

<!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>双飞翼布局</title>
  <style>
    html * {
      margin: 0;
      padding: 0;
    }

    .col{
      float: left;
    }


    #container{
      width: 100%;
      height: 100px;

    }

    #center{
     margin: 0 200px 0 200px;
     height: 100px;
     background-color: red;
    }
    #left{

      width: 200px;
      height: 100px;
      background-color: green;
      margin-left: -100%;

    }
    #right{

      width:200px;
      height: 100px;
      background-color: green;
      margin-left: -200px;
    }

  </style>
</head>
<body>
  <div id="container" class="col">
    <div id="center"中间></div>
  </div>
  <div id="left"  class="col">左</div>
  <div id="right"  class="col">右</div>
</body>
</html>

clearfix CSDN介绍

  1. display:table可以解决父子外边距重叠的问题。
  2. clearfix这样写既可以解决子元素浮动撑不开父元素的问题，又可以解决父子外边距重叠的问题。【下面那个zoom没什么必要】
    11.png

flex实现一个三点的色子

1.png
align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

1.png
11.png

123456.png
161.png
163.png

居中对齐有哪些实现方式？

111.png

最后一个方法兼容性最好，第三个方法的transform兼容性不好

1111.png

CSS图文样式

line-height的继承问题

131.png
1311.png

CSS响应式

rem是什么？

rem单位的使用是相对于根元素的字体大小，配合媒体查询等技术实现响应式布局。

如何实现响应式

1111111111.png

CSS3

关于CSS3动画【不是面试重点】

JS高级进阶

eventloop

161.png
Snipaste_2023-03-27_15-23-45.png

promise

Snipaste_2023-03-27_15-25-30.png

Snipaste_2023-03-27_15-36-45.png
Snipaste_2023-03-27_15-38-43.png

Snipaste_2023-03-27_15-39-54.png

async await

Snipaste_2023-03-27_15-41-39.png
Snipaste_2023-03-27_15-47-33.png
Snipaste_2023-03-27_15-47-54.png
Snipaste_2023-03-27_15-49-45.png
Snipaste_2023-03-27_15-51-04.png

Snipaste_2023-03-27_15-53-55.png
Snipaste_2023-03-27_15-55-46.png

Snipaste_2023-03-27_15-57-29.png

Snipaste_2023-03-27_16-04-29.png
Snipaste_2023-03-27_16-08-04.png
Snipaste_2023-03-27_16-08-48.png
Snipaste_2023-03-27_16-41-21.png

宏任务和微任务

Snipaste_2023-03-27_16-33-33.png

什么是宏任务和微任务，两者区别

Snipaste_2023-03-27_16-15-03.png

为什么有这种先后区别

Snipaste_2023-03-27_16-34-28.png

Snipaste_2023-03-27_16-17-50.png
Snipaste_2023-03-27_16-21-19.png

Snipaste_2023-03-27_16-25-52.png
Snipaste_2023-03-27_16-32-34.png

场景题

Snipaste_2023-03-27_16-46-49.png
Snipaste_2023-03-27_16-49-22.png
Snipaste_2023-03-27_16-49-40.png

手写Promise 5-17 5-20

Snipaste_2023-03-27_16-56-16.png

怎么同时执行两个async函数

const [result1, result2] = await Promise.all([func1(), func2()]);

第2章 JS基础-变量类型和计算

题目：

  1. typeof 能判断哪些类型
  2. 何时使用 === 何时使用 ==
  3. 值类型和引用类型的区别（做个题写出运行结果）
  4. 手写深拷贝

1.png
2.png

1. typeof运算符

  • 识别所有值类型
  • 识别函数
  • 判断是否是引用类型'object'（但区分不出来）

手写深拷贝

  • 不需要深拷贝的直接返回
  • 根据深拷贝对象类型，给result设定用数组装还是对象装
  • obj.hasOwnProperty(key)的属性才拷贝
  • 拷贝要用递归
/**
 * 深拷贝
 * @param {Object} obj 要拷贝的对象
 */
function deepClone(obj = {}) {
    if (typeof obj !== 'object' || obj == null) {
        // obj 是 null ，或者不是对象和数组，直接返回
        return obj
    }

    // 初始化返回结果
    let result
    if (obj instanceof Array) {
        result = []
    } else {
        result = {}
    }

    for (let key in obj) {
        // 保证 key 不是原型的属性
        if (obj.hasOwnProperty(key)) {
            // 递归调用！！！
            result[key] = deepClone(obj[key])
        }
    }

    // 返回结果
    return result
}

2. 变量计算 - 类型转换

(1). 字符串拼接

3.png

(2). == 它会隐式地给你做类型转换然后让它们尝试相等

4.png

5.png

(3). if 语句和逻辑运算

truly 变量：!!a === true的变量
falsely 变量：!!a === false的变量

6.png

其实 if 语句判断不是 true or false ，而是 truly 和 falsely 变量

7.png

第3章 JS基础-原型和原型链【三座大山之一，必考！！！】

题目：

  1. 如何准确判断一个变量是不是数组？
    a instanceof Array 结合原型链理解
  2. class 的原型本质，怎么理解？
    原型和原型链的图示，属性和方法的执行规则
  3. 手写一个简易的jQuery，考虑插件和扩展性【可以更好地理解class和继承】
class jQuery {
    constructor(selector) {
        const result = document.querySelectorAll(selector)
        const length = result.length
        for (let i = 0; i < length; i++) {
            this[i] = result[i]
        }
        this.length = length
        this.selector = selector
    }
    get(index) {
        return this[index]
    }
    each(fn) {
        for (let i = 0; i < this.length; i++) {
            const elem = this[i]
            fn(elem)
        }
    }
    on(type, fn) {
        return this.each(elem => {
            elem.addEventListener(type, fn, false)
        })
    }
    // 扩展很多 DOM API
}

// 插件
jQuery.prototype.dialog = function (info) {
    alert(info)
}

// “造轮子”
class myJQuery extends jQuery {
    constructor(selector) {
        super(selector)
    }
    // 扩展自己的方法
    addClass(className) {

    }
    style(data) {

    }
}

// const $p = new jQuery('p')
// $p.get(1)
// $p.each((elem) => console.log(elem.nodeName))
// $p.on('click', () => alert('clicked'))

1. 原型和原型链

8.png

9.png

11.png

2. 类型判断 instanceof

比如你让 xialuo instanceof Array ，结果是等于 false 的

因为数组的原型 不在 xialuo 的这个体系内（xialuo顺着隐式原型往上找找不到数组的显式原型）

第4章 JS基础-作用域和闭包【三座大山之二，不会闭包，基本不会通过】

题目：

  1. this 的不同应用场景，如何取值？
    • 当作普通函数被调用【直接返回window】
    • 使用call apply bind 【传入什么就绑定什么】
    • 作为对象方法调用【返回对象本身】
    • 在class的方法中调用【返回实例对象本身】
    • 箭头函数【找的是它上级作用域的this】
  2. 手写 bind 函数
    你这里的self是指fn1，类比想象一下xialuo.say()的this其实是指向xialuo
    Array.prototype.slice.call(arguments)能将具有length属性的对象（且key值为数字）转成数组
    16.png
    17.png
  3. 实际开发中闭包的应用场景，举例说明
    • 隐藏数据，只对外界提供API
    • 如做一个简单的cache工具
      18.png
  4. 创建10个<a>标签，点击的时候弹出来对应的序号【考作用域】
    错：输出的i永远是10，当你点击的时候早就循环完 i 变成10了，你这个自由变量 i 往上找这个全局作用域的 i ，次次都是10
    12.png
    对：这样for循环里每次都产生一个新的块作用域，每次都是在这个块作用域找 i
    19.png

1. 作用域

  • 全局作用域
  • 函数作用域
  • 块级作用域（ES6新增）

自由作用域：

  • 一个变量在当前作用域没有定义，但被使用了
  • 向上级作用域，一层一层依次寻找，直到找到为止
  • 如果到全局作用于都没找到，则报错 xx is not defined

2. 闭包

作用域应用的特殊情况。有两种表现：

  • 函数作为参数被传递
  • 函数作为返回值被返回

所有的自由变量的查找，是在函数定义的地方向上级作用域查找，不是在执行的地方！

以下两个代码都是输出 100

13.png

3. this

this取什么值，是在函数执行的时候确认的

14.png{width=61%}

箭头函数的 this 取的是它上级作用域的 this

15.png

第5章 JS基础-异步【三座大山之三，必考！！！】

题目：

  1. 同步和异步的区别
    • 异步是基于JS是单线程语言
    • 异步不会阻塞后面代码的执行
    • 同步会阻塞代码执行（比如alert之后你不点击确认，后面的console就执行不了）
  2. 前端使用异步的场景有哪些
    • 网络请求，如 ajax 图片加载
    • 定时任务，如setTimeout
  3. 场景题【打印：13542】
    20.png{width=43%}
  4. 手写用Promise加载一张图片 4.27 Promise Fetch axios 
function loadImg(src) {
    const p = new Promise(
        (resolve, reject) => {
            const img = document.createElement('img')
            img.onload = () => {
                resolve(img)
            }
            img.onerror = () => {
                const err = new Error(`图片加载失败 ${src}`)
                reject(err)
            }
            img.src = src
        }
    )
    return p
}

// const url = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
// loadImg(url).then(img => {
//     console.log(img.width)
//     return img
// }).then(img => {
//     console.log(img.height)
// }).catch(ex => console.error(ex))

const url1 = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
const url2 = 'https://img3.mukewang.com/5a9fc8070001a82402060220-100-100.jpg'

loadImg(url1).then(img1 => {
    console.log(img1.width)
    return img1 // 普通对象
}).then(img1 => {
    console.log(img1.height)
    return loadImg(url2) // promise 实例
}).then(img2 => {
    console.log(img2.width)
    return img2
}).then(img2 => {
    console.log(img2.height)
}).catch(ex => console.error(ex))

第6章 JS-Web-API-DOM【学会DOM，才能具备网页开发的基础】

题目

  1. DOM是哪种数据结构【树、DOM树】
  2. DOM操作的常用API
    • DOM节点操作
    • DOM结构操作
    • attribute和property
  3. attr和property的区别【推荐property】
    • property：修改对象属性，不会体现到html结构中
    • attribute：修改html属性，会改变html结构
    • 两者都有可能引起DOM重新渲染
  4. 一次性插入多个DOM节点，考虑性能
    10.png

DOM的本质：DOM是从HTML文件解析出来的一棵树

DOM节点操作：

  • 获取DOM节点
    26.png
  • attribute 修改的是标签的属性
    2.png
  • property 修改的是JS的属性
    1.png

DOM结构操作

  • 新增/插入节点
    4.png
  • 获取子元素列表 & 获取父元素
    5.png
  • 删除节点
    6.png

DOM性能

  • DOM操作非常“昂贵”，避免频繁的DOM操作
  • 对DOM查询做缓存
  • 将频繁操作改为一次性操作

7.png

8.png
9.png

第7章 JS-Web-API-BOM【内容虽然不多，但是你不能不会】

题目：

  1. 如何识别浏览器的类型
    14.png
  2. 分析拆解url各个部分
    13.png

11.png

12.png

第8章 JS-Web-API-事件【事件不会，基本等于半残废，必考！必考！】

题目：

  1. 描述事件冒泡的流程
    • 基于DOM树形结构
    • 事件会顺着触发元素往上冒泡
    • 应用场景：代理
  2. 无限下拉的图片列表，如何监听每个图片的点击？
    • 事件代理
    • 用e.target获取触发元素
    • 用matches来判断是否是触发元素
  3. 编写一个通用的事件监听函数【支持普通和代理绑定】
    • element.mathces(seletor);判断当前DOM节点是否能完全匹配对应的CSS选择器，如果匹配成功，返回true，反之则返回false
function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, event => {
        const target = event.target
        if (selector) {
            // 代理绑定
            if (target.matches(selector)) {
                fn.call(target, event) 
                //当点击的是selector匹配的这个元素时才调用
            }
        } else {
            // 普通绑定
            fn.call(target, event)
        }
    })
}

// 普通绑定【fn里的this指向绑定元素】
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', function (event) {
    // console.log(event.target) // 获取触发的元素
    event.preventDefault() // 阻止默认行为
    alert(this.innerHTML)
})

// 代理绑定【fn里的this指向触发元素】
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a', function (event) {
    event.preventDefault()
    alert(this.innerHTML)
})

第9章 JS-Web-API-Ajax【每个工程师必须熟练掌握的技能】

题目：

  1. 手写一个简易的ajax
    15.png

  2. 跨域的常用实现方式

    • JSONP
    • CORS

1. XMLHttpRequest

5.png

6.png

3.png

4.png

2. 同源策略（仅限浏览器，爬虫那种不同）

7.png

8.png{width=81%}

9.png{width=81%}

3. 跨域

10.png

4. JSONP【面试一般是问原理】

11.png

12.png

13.png

5. CORS-服务器设置 http header 【知晓即可】

14.png

6. ajax的常用插件

  • jQuery
  • fetch
  • axios

第10章 JS-Web-API-存储【内容虽然不多，但不可不会】

题目：

  1. 描述cookie localStorage sessionStorge区别

20.png{width=61%}

16.png
17.png
18.png
19.png

Http面试题

常见Request Headers

Snipaste_2023-03-28_10-23-10.png

Snipaste_2023-03-28_10-24-50.png
Snipaste_2023-03-28_10-26-28.png

常见Response Headers

Snipaste_2023-03-28_10-30-41.png
Snipaste_2023-03-28_10-31-20.png

自定义headers axios文档说明

Snipaste_2023-03-28_10-34-58.png

缓存headers

Snipaste_2023-03-28_10-35-37.png

http缓存

第二点常考

Snipaste_2023-03-28_10-40-35.png

为什么需要缓存

  1. 相对于cpu计算，资源请求是很慢的，优化可以从这方面开始
  2. 网络不稳定性（就导致页面加载不稳定）
  3. 可以缓存的是静态资源（js css img），业务数据就不行（因为后端随时会修改）

强制缓存

Snipaste_2023-03-28_10-50-06.png
Snipaste_2023-03-28_10-55-30.png
Snipaste_2023-03-28_10-56-00.png

协商缓存（对比缓存）

Snipaste_2023-03-28_10-59-18.png
Snipaste_2023-03-28_11-00-40.png

Snipaste_2023-03-28_11-02-43.png
Snipaste_2023-03-28_11-04-37.png

Snipaste_2023-03-28_11-06-09.png

Snipaste_2023-03-28_11-07-22.png

Snipaste_2023-03-28_11-08-31.png
Snipaste_2023-03-28_11-09-43.png

三种刷新操作

Snipaste_2023-03-28_11-13-21.png
Snipaste_2023-03-28_11-15-31.png

https

Snipaste_2023-03-28_11-19-10.png

333.png
Snipaste_2023-03-28_11-27-39.png

Snipaste_2023-03-28_11-30-47.png

第11章 开发环境【不会这些，你就会被认定是菜鸟小白，没做过项目】

1. Git常用命令

  • 创建远程仓库
  • 创建ssh公钥、私钥文件，打开pub文件到远程仓库里配置公钥，本地配置用户名、邮箱
    把远程仓库的内容克隆到本地
    git status 查看状态
    git branch 查看现有分支
    git commit 提交到仓库
    git log（git show id）查看修改记录
    git checkout . 恢复修改
    git push origin master 推送到远程仓库
    git pull origin master 从远程仓库拉取到本地
    git checkout -b xin 开发新功能就建立新分支
  • 协同开发完后，你作为项目负责人，把分支pull下来，然后merge到main上，再把main分支push回git主分支上（后同）
  • 如果合并分支有冲突，打开vscode解决完冲突后，git add. ，git commit -m " " 再git merge等等
  • 如果一不小心在master上修改了，但是你修改了蛮多又不想重来，可以在master运行git stash把修改先暂存，让main干净起来，再切换分支，运行git stash pop把暂存的修改释放出来，接着就可以git add，git commit了，再合并分支等等

2.chrome 调试工具

  • Application 主要是看storage、cookies

3. 抓包

移动端h5页面，查看网络请求需要用工具抓包

  • windows一般用fiddler
  • MacOS一般用charles

抓包（演示charles）

  • 手机和电脑连同一个局域网
  • 将手机代理到电脑上（手机上选“代理”->“手动”，填电脑网络的那个IP），端口号可以在Proxy-Proxy Settings里看（默认是8888）
  • 手机浏览网页既可抓包
  • 查看网络请求
  • 网址代理
  • https

webpack和babel

  • ES6模块化，浏览器暂不支持
  • ES6语法，浏览器并不完全支持
  • 压缩代码，整合代码，可以让网页加载更快

webpack搭建环境步骤

  • 初始化webpack环境 npm init -y，运行后会创建一个package.json的文件
  • 安装webpack cnpm install webpack webpack-cli -D
  • 建立webpack.config.js文件，webpack默认配置文件名字
    1.png
  • package.json文件scripts下新增"build":"webpack"
  • 然后 npm run build就可以打包完成了，这时就有dist文件了
  • 下载一个解析html的插件npm install html-webpack-plugin -D
  • 下载一个能启动本地服务的插件npm install webpack-dev-server -D
    2.png
  • 再到package.json文件中新增"dev":"webpack-dev-server"
  • 然后npm run dev运行一下

babel

因为你写的ES6语法webpack打包后还是显示ES6，我们希望变成ES5代码，这时就需要babel了
  • npm install @babel/core @babel/preset-env babel-loader -D
  • 新建.babelrc文件，配置如下
    3.png
  • webpack.config.js新增
    4.png
  • 再次运行npm run dev

webpack-ES6-Module

  • 导出用export default 的话到时候导入必须是import XX from './xx'
  • 导出用export 的话到时候可以用解构赋值import {xx,xx} from './xx'

webpack配置生产环境

  • 新建webpack.prod.js文件，把以前的webpack.config.js的内容拷过来。【一个配置文件做开发环境下的，一个做生产环境的】
  • webpack.prod.js里修改"mode":"production"，然后devServer不要了
    5.png 6.png
  • 运行npm run build命令

Linux命令

  • 本地登录到线上机器ssh 线上机器用户名@线上机器ip地址，然后输入密码
  • ls查看目录，ls -a可查看隐藏文件（linux中以.开头的都是隐藏文件）
  • ll看列表型目录，clear清屏，mkdir abc创建文件夹
  • rm -rf abc删除文件夹，加-rf会把文件夹内容清空，不加可能会出问题
  • mv index.html index1.html 修改文件名，mv还可以移动文件位置
  • cp a.js b.js拷贝a成b文件
  • touch d.js新建文件
  • vi d.js没有的话新建文件并打开（有则直接打开），之后点一下i就可以输入了，点击键盘上Esc，接着输入:w然后回车代表保存写入，再点回车+:q退出。不想保存强制退出:q!
  • cat a.js查看文件把文件内容全部显示出来
  • head a.js打印前面几行 tail a.js打印后面几行
  • grep "babel" a.js在a.js文件中查找babel关键字

第12章 运行环境【这些会了，你就可以飞了】

题目：

  1. 从输入url到渲染出页面的整个过程
    5.png{width=81%}
  2. window.onload和DOMContentLoaded的区别
    6.png

1. 页面加载和渲染

21.png{width=60%}
1.png{width=63%}
2.png{width=68%}
3.png{width=81%}

  • 建议把css放head里
  • js放body最后

4.png

2. 性能优化

7.png{width=81%}

8.png{width=81%}

9.png{width=81%}

10.png{width=81%}

11.png

12.png

13.png

3. 防抖debounce

15.png

4. 节流throttle

16.png

5. 安全

  1. 常见的web前端攻击方式有哪些?
    • XSS跨站请求攻击
      1.png
      2.png
      3.png
    • XSRF跨站请求伪造
      4.png
      5.png
      6.png{width=81%}

第13章 课程总结【很有必要带你避免面试犯低级错误】

略

第14章 真题模拟【我是来告诉你答案是什么】

题目：

  1. var和let const的区别
    7.png
  2. typeof返回哪些类型
    8.png{width=81%}
  3. 列举强制类型转换和隐式类型转换
    9.png
  4. 手写深度比较，模拟loadash.isEqual
// 判断是否是对象或数组
function isObject(obj) {
    return typeof obj === 'object' && obj !== null
}
// 全相等（深度）
function isEqual(obj1, obj2) {
    if (!isObject(obj1) || !isObject(obj2)) {
        // 值类型（注意，参与 equal 的一般不会是函数）
        return obj1 === obj2
    }
    if (obj1 === obj2) {
        return true
    }
    // 两个都是对象或数组，而且不相等
    // 1. 先取出 obj1 和 obj2 的 keys ，比较个数
    const obj1Keys = Object.keys(obj1)
    const obj2Keys = Object.keys(obj2)
    if (obj1Keys.length !== obj2Keys.length) {
        return false
    }
    // 2. 以 obj1 为基准，和 obj2 一次递归比较
    for (let key in obj1) {
        // 比较当前 key 的 val —— 递归！！！
        const res = isEqual(obj1[key], obj2[key])
        if (!res) {
            return false
        }
    }
    // 3. 全相等
    return true
}

// 测试
const obj1 = {
    a: 100,
    b: {
        x: 100,
        y: 200
    }
}
const obj2 = {
    a: 100,
    b: {
        x: 100,
        y: 200
    }
}
// console.log( obj1 === obj2 )
console.log( isEqual(obj1, obj2) )

const arr1 = [1, 2, 3]
const arr2 = [1, 2, 3, 4]
  1. split()和join()的区别
    • split() 方法用于把一个字符串分割成字符串数组。
    • join() 方法将数组作为字符串返回。元素将由指定的分隔符分隔。默认分隔符是逗号,

12.png

  1. 数组的pop push unshift shift分别做什么

    • 功能是什么？
    • 返回值是什么？
    • 是否会对原数组造成影响？
      3.png{width=81%}
      4.png

  2. 数组slice和splice的区别

    • 功能区别（slice -切片 splice -剪接）
    • 参数和返回值
    • 是否纯函数？
      10.png{width=76%}
      9.png
  3. [10,20,30].map(parseInt)返回结果是什么？【其实就是”//拆解”里的那个意思】
    7.png
  4. ajax请求get和post的区别？
    8.png
  5. 函数call和apply的区别【传参形式不同】
    11.png{width=54%}
  6. 闭包是什么，有什么特性？有什么负面影响？
    12.png{width=81%}
    13.png{width=60%}14.png{width=40%}
  7. 解释jsonp的原理，为何它不是真正的ajax？
    15.png
  8. 函数声明和函数表达式的区别
    17.png18.png
    16.png{width=81%}
    19.png
  9. new Object()和Object.create()的区别
    20.png
  10. 关于this的场景题【this指向谁要看调用的时候】
    22.png{width=81%}
  11. 作用域和自由变量的场景题1
    所有的自由变量的查找，是在函数定义的地方向上级作用域查找
    23.png
  12. 正则表达式【菜鸟教程 】 【正则表达式30分钟入门教程】
    \w匹配字母、数字、下划线，等价于 [A-Za-z0-9_]
    24.png
  13. 手写字符串trim方法，保证浏览器兼容性
    1.png
  14. 如何获取多个数字中的最大值【两种方法】
    2.png3.png
  15. 如何用JS实现继承？
    • class继承【更推荐】
    • prototype继承
  16. 如何捕获JS程序中的异常？
    4.png
  17. 什么是JSON？
    5.png
  18. 获取当前页面url参数
    6.png
  19. 将url参数解析为JS对象【两种方法】
    7.png
    8.png
  20. 手写数组flatern，考虑多层级
    11.png
    10.png
  21. 数组去重
    • 传统方式，遍历元素挨个比较、去重
    • 使用Set
    • 考虑计算效率
      12.png{width=61%}
  22. 手写深拷贝【注意Object.assign不是深拷贝】
    13.png{width=81%}
  23. 介绍一下RAF requestAnimateFrame
    14.png
    15.png
  24. 前端性能如何优化？一般从哪几个方面考虑？
    16.png

0 评论