面试题整理--先手敲，不会的查漏补缺

本文整理了前端面试中常见的html、http、css、js、vuejs等方面的问题，包括h5新特性、http状态码、浏览器渲染过程、闭包、CSS布局、Vue双向绑定原理等内容，还涉及了面试中可能会问到的非技术问题，如团队规模、工作时长等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

（1）html，http，web基础篇
html篇
css篇
js篇
vuejs篇
其他

（1）html，http，web基础篇

html篇

1、h5新特性

1、新增了语义化标签
nav、header、footer、main、aside、article
2、audio、video
3、sessionstorage、localstorage
4、websocket

2、http和https的区别

1、http是明文传输传输不安全、https是加密传输，传输数据更安全
2、http的速度比https的速度快。因为https需要进行传输加密（包括公钥和私钥以及证书的确认）

3、http1.0、1.1、2.0、的特性，尤其是keep-alive和2.0的长连接

这个还不是很熟-----记录一下
优雅的谈论http

4、http状态码，尤其是301和302,304

301永久性转移，客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。
302暂时性转移

304 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。

5、http请求几种方法及区别，尤其get/post的幂等性

GET 请求获取Request-URI所标识的资源

POST 在Request-URI所标识的资源后附加新的数据

HEAD 请求获取由Request-URI所标识的资源的响应消息报头

PUT 请求服务器存储一个资源，并用Request-URI作为其标识

DELETE 请求服务器删除Request-URI所标识的资源

TRACE 请求服务器回送收到的请求信息，主要用于测试或诊断

CONNECT 保留将来使用

OPTIONS 请求查询服务器的性能，或者查询与资源相关的选项和需求

GET方法：在浏览器的地址栏中输入网址的方式访问网页时，浏览器采用GET方法向服务器获取资源，POST方法要求被请求服务器接受附在请求后面的数据，常用于提交表单。GET是用于获取数据的，POST一般用于将数据发给服务器之用。

幂等性的定义：

对同一个系统，使用同样的条件，一次请求和重复的多次请求对系统资源的影响是一致的
HTTP GET方法用于获取资源，不应有副作用，所以是幂等的。

比如：GET http://www.bank.com/account/123456，不会改变资源的状态，不论调用一次还是N次都没有副作用。

HTTP DELETE方法用于删除资源，有副作用，但它应该满足幂等性。比如：DELETE http://www.forum.com/article/4231，调用一次和N次对系统产生的副作用是相同的，即删掉id为4231的帖子；因此，调用者可以多次调用或刷新页面而不必担心引起错误。

POST和PUT的区别容易被简单地误认为“POST表示创建资源，PUT表示更新资源”；而实际上，二者均可用于创建资源，更为本质的差别是在幂等性方面。

POST所对应的URI并非创建的资源本身，而是资源的接收者。比如：POST http://www.forum.com/articles的语义是在http://www.forum.com/articles下创建一篇帖子，HTTP响应中应包含帖子的创建状态以及帖子的URI。两次相同的POST请求会在服务器端创建两份资源，它们具有不同的URI；所以，POST方法不具备幂等性。而PUT所对应的URI是要创建或更新的资源本身。比如：PUT http://www.forum/articles/4231的语义是创建或更新ID为4231的帖子。对同一URI进行多次PUT的副作用和一次PUT是相同的；因此，PUT方法具有幂等性。

6、cookie,session,localStorage区别，cookie的长度限制

webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage
2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信
3）sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
4）WebStorage的目标
提供一种在cookie之外存储会话数据的路径
提供一种存储大量可以跨会话存在的数据的机制
HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）
5）作用域的不同：
不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的
6）存储大小：
localStorage和sessionStorage的存储数据大小一般都是：5MB
7）存储位置：
localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信
8）存储内容类型：
localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
9）获取方式：
localStorage：window.localStorage;；sessionStorage：window.sessionStorage;

cookie为4KB

7、前段优化方法

减少http请求数

常用的减少http请求数有以下几种：

1）合并图片。当图片较多时，可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外，还可以充分利用缓存来提升性能。

2）合并压缩css样式表和js脚本，他们的共同目的都是为了减少http连接数。

3）去掉不必要的请求。开发写代码或者系统升级之后残留的无效请求连接。

4）充分利用缓存。这里说的缓存是客户端侧缓存或者说浏览器缓存。Expires头信息是客户端侧缓存的重要依据，格式类似于Expires:sun ,20 Dec 2017 23:00:00 GMT。如果当前时间小于Expires指定的时间，浏览器就会从缓存中直接获取相关的数据信息或html文件，如果当前时间大于Expires指定的时间，浏览器会向服务器发送请求来获取相关数据信息。

以Apache为例，可在Apache的配置文件httpd.conf中设置Expires。

图片优化

优化方法：

1）尽可能的使用PNG格式的图片，它相对来说体积较小。

2）对于不同格式的图片，在上线之前最好进行一定的优化。

3）图片的延迟加载，也叫做赖加载。

使用CDN

CDN即内容分发网络，可以使用户就近取得所需内容，解决网络拥挤的状况，提高用户访问网站的响应速度。

开启GZIP

GZIP即数据压缩，用于压缩使用Internet传输的所有文本资源。开启GZIP的方法很简单，到对应的web服务配置文件中设置一下即可。以Apache为例，在配置文件httpd.conf中添加。

样式表和JS文件的优化

一般我们会把css样式表文件放到文件的头部。比如，放到<head>标签中，这样可以让CSS样式表尽早地完成下载。对应js脚本文件，一般我们把他放到页面的尾部。

8、浏览器输入url后发生了什么

1、url。
2、DNS解析。
3、TCP连接。
4、发送http请求。
5、返回http响应。
6、浏览器解析渲染页面。

超详细

9、websocket

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

其他特点包括：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

10、强缓存，协商缓存

字太多直接上链接

11、常见的块元素，行内元素

块：
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等
行内元素：
span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）

12，懒加载

    let  imgList=document.querySelectorAll('img');
    function loadLay(imgList,imgData) {
        let observer=new  IntersectionObserver(entries => {
            entries.forEach(enter=>{
                if (enter.intersectionRatio>0){
                    enter.target.src=imgData.shift;
                    observer.unobserve()
                }
            })
        });
        imgList.forEach(item=>{
            observer.observe(item)
        })
    }
    loadLay(imgList,imgData)

14、xss攻击

XSS全称是Cross Site Scripting即跨站脚本，当目标网站目标用户浏览器渲染HTML文档的过程中，出现了不被预期的脚本指令并执行时，XSS就发生了。

防御措施：

避免使用客户端数据，尽量服务端生成
JavaScript变量输出时先编码
XSS过滤（js-xss, http://jsxss.com）
CSP(Content Security Policy)

15、csrf攻击

CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。
　
　可以这么理解CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账…造成的问题包括：个人隐私泄露以及财产安全。

CSRF工具的防御手段：

尽量使用POST，限制GET
加验证码
Anti CSRF Token使用token

16、CDN

Content Delivery Network，即内容分发网络。（和西天取经一个道理，唐僧取经之前，国内想看经书只能跑老远去西天看经书，唐僧取经回来，再去国内各地传播，之后各地的人想听佛法就去最近的寺庙听就好了）

17、DNS

DNS（Domain Name System），即域名系统。
就是把www.baidu.com翻译成220.181.111.188让机器理解。

18、osi七层模型

1、应用层

网络服务与最终用户的一个接口。
协议有：HTTP FTP TFTP SMTP SNMP DNS TELNET HTTPS POP3 DHCP
2、表示层
数据的表示、安全、压缩。（在五层模型里面已经合并到了应用层）
格式有，JPEG、ASCll、EBCDIC、加密格式等 [2]

3、会话层
建立、管理、终止会话。（在五层模型里面已经合并到了应用层）
对应主机进程，指本地主机与远程主机正在进行的会话

4、传输层

定义传输数据的协议端口号，以及流控和差错校验。
协议有：TCP UDP，数据包一旦离开网卡即进入网络传输层

5、网络层

进行逻辑地址寻址，实现不同网络之间的路径选择。
协议有：ICMP IGMP IP（IPV4 IPV6）

6、数据链路层

建立逻辑连接、进行硬件地址寻址、差错校验 [3] 等功能。（由底层网络定义协议）
将比特组合成字节进而组合成帧，用MAC地址访问介质，错误发现但不能纠正。

7、物理层
建立、维护、断开物理连接。（由底层网络定义协议）

19、常用端口号

MS SQL*SERVER数据库server，默认的端口号为1433/tcp 1433/udp

HTTPS（securely transferring web pages）服务器，默认端口号为443/tcp 443/udp

HTTP协议代理服务器常用端口号：80/8080/3128/8081/9098

css篇

20、link和@import的区别

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其du他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

21、盒模型

ie盒模型和w3c
ie盒子模型设置的width就是盒子的真实大小，而w3c还需要加上margin，border等。可以通过boxsizing来进行修改。

22、display:none，visibility:hidden和opcatity:0的区别

display：直接从dom树删除，会引起回流。
visibility：隐藏，但是位置不会改变，但是上边绑定的事件不会在触发。
opcatity：透明度为0。除了视觉变化没有其他改变。

23、BFC

BFC(Block formatting context)直译为"块级格式化上下文"
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

24、margin塌陷

在文档流中，父元素的高度默认是被子元素撑开的
也就是说子元素有多高，父元素就有多高
但是当子元素设置浮动之后，子元素会完全脱离文档流
此时将会导致子元素无法撑开父元素的高度，导致父元素高度塌陷

清除浮动（伪元素，bfc）

25、选择器优先级

！important 特殊性最高

内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 关系选择器 = 伪元素选择器 > 通配符选择器

26、水平垂直居中

1、margin：0
2、flex
3、translate-50%

27、css画圆和三角

主要是操纵边
三角形让其他三条边为透明就可以了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*vw平分屏幕100份*/
    .yuan{
        box-sizing: border-box;
        border-radius: 50%;
        border: solid aqua calc(100vw/8);
        width: calc(100vw/8);
        height: calc(100vw/8);
    }
</style>
<body>
<div class="yuan"></div>
</body>
</html>

如果对长度有要求可以用vw作为长度单位（把屏幕宽度平分一百份）

28、媒介查询相关的自适应布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    @media screen and (min-width: 800px) {
        div {
            width: 500px;
            min-height: 500px;
            background-color: pink;
        }
    }
    @media screen and (min-width: 1200px){
        div{
            width: 300px;
            min-height: 200px;
            background-color: red;
        }
    }
    @media screen and (max-width: 800px){
        div {
            width: 500px;
            min-height: 500px;
            background-color: aqua;
        }
    }
</style>
<body>
<div>
</div>
</body>
</html>

29、px，em，rem

绝对长度单位。绝对长度单位表示为一个固定的值，不会改变。不利于页面渲染。
in,英寸
cm, 里面
mm, 毫米
pt
pc
相对长度单位。其长度单位会随着它的参考值的变化而变化。
px,像素
em,元素的字体高度
%,百分比
rem,根元素的font-size
vm,视窗宽度，1vw=视窗宽度的1%
vh,视窗高度，1vh=视窗高度的1%

30、回流和重绘

什么是回流
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

什么是重绘
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

31、精灵图（雪碧图）

1、精灵图技术产生的目的：很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。

2、精灵图技术的本质：所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。

js篇

32、闭包，内存泄漏

闭包是函数内部的函数，可以保存变量不被销毁。也可以保护内部变量不被外部访问。
但是可能会导致内存泄漏（一直在内存中）

33、作用域链，变量提升

每次进入一个新的执行环境，都会创建一个用于搜索变量和函数的作用域链。作用域链是函数被创建的作用域中对象的集合。作用域链可以保证对执行环境有权访问的所有变量和函数的有序访问。

作用域链的最前端始终是当前执行的代码所在环境的变量对象（如果该环境是函数，则将其活动对象作为变量对象），下一个变量对象来自包含环境（包含当前还行环境的环境），下一个变量对象来自包含环境的包含环境，依次往上，直到全局执行环境的变量对象。全局执行环境的变量对象始终是作用域链中的最后一个对象。

标识符解析是沿着作用域一级一级的向上搜索标识符的过程。搜索过程始终是从作用域的前端逐地向后回溯，直到找到标识符（找不到，就会导致错误发生）。

变量提升：

function test () {
    console.log(a);  //undefined
    var a = 123; 
};

相当于

function test () {
    var a;
    console.log(a);
    a = 123;
}
test();

面试题1：

a = 1;
var a;
console.log(a); //1

面试题2：

console.log(v1);
var v1 = 100;
function foo() {
    console.log(v1);
    var v1 = 200;
    console.log(v1);
}
foo();
console.log(v1);

结果

//undefined
//undefined
//200
//100

函数提升和变量提升不一样
函数提升是整个代码块提升到它所在的作用域的最开始执行。

34、手撕bind源码

Function.prototype.mybind=function (obj1,...args) {
   let thisa=this;
    return function (...args2) {
        let thisArgs=[...args].concat(...args2)
        let fn=Symbol('my')
        obj1[fn]=thisa;
        obj1[fn](thisArgs)
        delete  obj1[fn]
    }
}

35、promise

Promise完全版暂时还是手写不出来…（简易版的还可以）

这个问题先放一下。。以后有时间再过来

36、ajax原理

Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。

举一个例子：
领导想找小李问点事，就委托秘书去叫小李，自己就接着做其他事情，直到秘书告诉他小李已经到了，最后小李跟领导汇报工作。

Ajax请求数据流程与“领导想找小李汇报一下工作”类似。其中最核心的依赖是浏览器提供的XMLHttpRequest对象，它扮演的角色相当于秘书，使得浏览器可以发出HTTP请求与接收HTTP响应。浏览器接着做其他事情，等收到XHR返回来的数据再渲染页面。

var xhr = new XMLHttpRequest();
xhr.open("GET", url, false);
xhr.onreadtstatechange = function () {
    if (xhr.readystate == 4) {
        //响应内容解析完成，可以在客户端调用了
        if (xhr.status == 200) {
            //客户端的请求成功了
            alert(xhr.responseText);
        }
    }
}
xhr.send(null);

37、设计模式

单例模式
这种设计模式的思想是确保一个类只有唯一实例，一般用于全局缓存，比如全局window，唯一登录浮窗等。
工厂模式
工厂模式是创建对象的常用设计模式，为了不暴露创建对象的具体逻辑，将逻辑封装在一个函数中，这个函数就称为一个工厂。本质上是一个负责生产对象实例的工厂。工厂模式根据抽象程度的不同可以分为：简单工厂，工厂方法和抽象工厂。通常用于根据权限生成角色的场景，抽象工厂方法的实现如下
策略模式

策略模式的本意将算法的使用与算法的实现分离开来，避免多重判断调用哪些算法。适用于有多个判断分支的场景，如解决表单验证的问题。你可以创建一个validator对象，有一个validate()方法。这个方法被调用时不用区分具体的表单类型，它总是会返回同样的结果——一个没有通过验证的列表和错误信息

代理模式

代理模式是为其他对象提供一种代理，也就是当其他对象直接访问该对象时，如果开销较大，就可以通过这个代理层控制对该对象的访问。常见的使用场景为懒加载，合并http请求和缓存

观察者模式

也叫发布订阅模式，在这种模式中，一个订阅者订阅发布者，当一个特定的事件发生的时候，发布者会通知（调用）所有的订阅者

模块模式
构造函数模式

38、js动画和css动画区别

1、代码复杂度方面，简单动画，css 代码实现会简单一些，js 复杂一些。复杂动画的话，css 代码就会变得冗长，js实现起来更优。
2、动画运行时，对动画的控制程度上，js 比较灵活，能控制动画暂停，取消，终止等，css动画不能添加事件，只能设置固定节点进行什么样的过渡动画。
3、兼容方面，css 有浏览器兼容问题，js 大多情况下是没有的。
4、性能方面，css动画相对于优一些，css 动画通过GUI解析，js 动画需要经过j s 引擎代码解析，然后再进行 GUI 解析渲染。

39、dom0级事件dom2级事件

<a href="#" id="hash" onclick="fn();fn();">
<button type="button">返回上面进行开通</button>
</a> 
var btn=$('#hash').get();
btn.onclick=function(){
alert('');
};
btn.onclick=function(){
alert('');
};

像上面把onclick写在标签内，都是dom0级事件，fn和fn1依次执行; 第二种获取元素，绑定onclick事件也是dom0级，第二个会覆盖第一个onclick，也会覆盖行内的onclick，只会弹出222。

btn.addEventListener('click',function(){
alert('原生dom2级第一次click')
},false);
btn.addEventListener('click',function(){
alert('原生dom2级第二次click')
},false)

以上的绑定都属于dom2级事件绑定，前面两种都是jq的绑定方式，后面都是原生js的绑定方式，不会覆盖，会依次执行jq的绑定方法和原生的绑定方法，这就是于dom0级的去别处；

40、防抖节流

节流

   let div1=document.getElementsByTagName('div')
    function jieliu(fn,layout) {
        div1[0].addEventListener('click',()=>{
            clearTimeout( fn.timer)
            fn.timer=setTimeout( () =>{
                    fn()
            },layout)

          })
    }
    function fn(div1) {
      console.log('1223')
    }
    jieliu(fn,1000)

相比于防抖,节流就是在让函数在特定的时间内只执行一次

    var canRun = true;
    document.getElementById("throttle").onscroll = function(){
        if(!canRun){
            return
        }
        canRun = false
        setTimeout( function () {
            console.log("函数节流")
            canRun = true
        }, 500)
    }

41、深浅拷贝

方式一：

 JSON.parse(JSON.stringify(a))

方式二：

function aaa(obj1) {
    if (typeof obj1 != 'object') return obj1;
    let result = Object.prototype.toString.call('obj1') == '[object Array]' ? [] : {};
    for (key in obj1) {
        if (typeof obj1[key] == 'object') {
            result[key] = aaa(obj1[key])
        } else {
            result[key] == obj1[key]
        }
    }
    return result
}

42、事件流

1，事件捕获阶段。

2，处于目标阶段。

3，事件冒泡阶段。

43、浏览器渲染过程.

DOM Tree：浏览器将HTML解析成树形的数据结构。

CSS Rule Tree：浏览器将CSS解析成树形的数据结构。

Render Tree: DOM和CSSOM合并后生成Render Tree

layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。

painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。

reflow（回流）：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow
　　
　repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

44、为什么0.1+0.2！=0.3

0.1加0.2为什么就不等于0.3昵？要回答这个问题，得先了解计算机内部是如何表示数的

1. 计算机内部如何表示整数

2. 计算机内部如何表示小数

3. 如何用二进制表示0.1
十进制整数转二进制方法：除2取余；十进制小数转二进制方法：乘2除整

十进制0.1转换成二进制，乘2取整过程：

0.1 * 2 = 0.2 # 0
0.2 * 2 = 0.4 # 0
0.4 * 2 = 0.8 # 0
0.8 * 2 = 1.6 # 1
0.6 * 2 = 1.2 # 1
0.2 * 2 = 0.4 # 0

.....

从上面可以看出，0.1的二进制格式是：0.0001100011…。这是一个二进制无限循环小数，但计算机内存有限，我们不能用储存所有的小数位数。那么在精度与内存间如何取舍呢？

答案是：在某个精度点直接舍弃。当然，代价就是，0.1在计算机内部根本就不是精确的0.1，而是一个有舍入误差的0.1。当代码被编译或解释后，0.1已经被四舍五入成一个与之很接近的计算机内部数字，以至于计算还没开始，一个很小的舍入错误就已经产生了。这也就是 0.1 + 0.2 不等于0.3 的原因。

vuejs篇

45、双向绑定原理，手撕简单源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1">
<span id="s"></span>
</body>

<script>
    let a={};
    input1=document.getElementById('i1');
    Object.defineProperty(a,'hello',{
        set(v) {
            document.getElementById('s').innerText=v;
            document.getElementById('i1').value=v;
            a.name=v;
            console.log(a);
        }
    })
    input1.addEventListener('keydown',function (e) {
        a.hello=e.target.value;
    });
</script>
</html>

46、vue3新特性，proxy和defineProperty的区别

Object.defineProperty(obj,"name",{
  set:function(val){
      if(var==='lisi'){
            console.log("誓死不叫这么土的名字")
      }else{
              objCopy.name = val
      }
  },
  get:function(){
    return objCopy.name.replace(/san/,'先生')
   }
})这个对每个data中的属性进行遍历绑定。而，

var objCopy = new Proxy(obj,{
          get:function(target,key){
                if(key=='name'){
                      return target[key].replace(/san/,'先生');
                }
          },
          set:function(target,key,value){
                if(key == 'name'){
                    value=='lisi'?target[key]:target[key] = value;
                }else{
                    target[key] = value;
                }
          }
   })

get，set方法的target参数即obj对象，key参数是要操作的属性，value参数是赋值动作时的值。此后，可通过objCopy.name的方式访问obj的name属性，也可以通过objCopy.name='lisi’的方式设置obj的name属性，而且不用给每个属性都设置set,get方法，不会触发循环调用，很是爽的。

vue3.0使用了Proxy替换了原先遍历对象使用Object.defineProperty方法给属性添加set,get访问器的笨拙做法。