这篇博客详细探讨了JavaScript中的数组迭代方法如map、filter、forEach等的区别，以及如何判断一个数组。还讨论了函数的递归、常用地点、闭包、节流和防抖的使用场景。此外，涉及了对象的合并、解构、this的用法以及深拷贝和浅拷贝的区别。还涵盖了JavaScript中的其他关键概念，如JSONP、AJAX、异步处理、事件和作用域链。同时，文章也提及了CSS的显示属性、CSS3动画、盒模型以及CSS选择器的优先级。最后，讨论了HTML5的语义化标签和浏览器的工作流程。
JavaScript:
数组:
数组迭代方法map、filter、forEach，some,every有哪些相同点和不同点?
map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
map():也返回一个数组，而这个数组的每一项都是在原始数组中的对应项上运行传入函数的结果；
forEach()：对数组中的每一项运行给定函数，这个方法并没有返回值 ;
Filter():方法是对原数组进行过滤筛选，返回一个新的数组
filter():不会对空数组进行检测（如果对空数组进行筛选，返回值位undefined）
如何通过JS判断一个数组？
instanceof方
instanceof运算符是用来测试一个对象是否在其原型链原型构造函数的属性var arr = []; arr instanceof Array; // true
constructor方法constructor属性返回对创建此对象的数组函数的引用，就是返回对象相对应的构造函数var arr = []; arr.constructor == Array; //true
ES5新增方法isArray()var a = new Array(123); var b = new Date(); console.log(Array.isArray(a)); //true console.log(Array.isArray(b)); //false
数组方法:
join() 方法也可将所有数组元素结合为一个字符串。
pop() 方法从数组中删除最后一个元素：
push() 方法（在数组结尾处）向数组添加一个新的元素：
shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。返回被“位移出”的字符串：
unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素;返回新数组的长度。
splice() 方法可用于向数组添加新项：
第一个参数（）定义了应添加新元素的位置（拼接）。
第二个参数（）定义应删除多少元素。
其余参数（）定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组
concat() 方法通过合并（连接）现有数组来创建一个新数组：
concat() 方法不会更改现有数组。它总是返回一个新数组。
slice() 方法用数组的某个片段切出新数组。不会影响原数组
length() 返回数组数量
reverse() 方法反转数组中的元素。
sort() 方法以字母顺序对数组进行排序：
循环:
forEach() 方法为每个数组元素调用一次函数（回调函数）
map() 方法通过对每个数组元素执行函数来创建新数组。
map() 方法不会对没有值的数组元素执行函数。
map() 方法不会更改原始数组。
filter() 方法创建一个包含通过测试的数组元素的新数组。
reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。
reduce() 方法在数组中从左到右工作。另请参阅 reduceRight()。
reduce() 方法不会减少原始数组。
some:
every:
--- --- --- ---
函数:
什么是函数?
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
为何使用函数？
只要定义一次代码，就可以多次调用它。
够多次向同一函数传递不同的参数，以产生不同的结果。
函数什么时候会停止?
当 JavaScript 到达 return 语句，函数将停止执行。
什么是局部变量?
在 JavaScript 函数中声明的变量，会成为函数的局部变量。
递归:
定义:
函数调用函数,要有结束语句
1.在定义一个过程或函数时，出现直接或间接调用自己的成分，称之为递归。
2.直接调用自己称为直接递归间接调用自己称为间接递归
3.如果一个递归函数中调用递归语句是最后一条执行语句，则称这种递归调用为尾递归。递归的条件：
（1）需要解决的问题可以转化为一个或者多个子问题来求解，而这些子问题的求解方法与原问题相同，只是在数量和规模上不同。
（2）递归的次数是有限的。
（3）必须有结束递归的条件来终止递归。
优点：
1、代码简洁
2、易于理解
缺点：
1、时间和空间的消耗比较大
2、重复计算
3、调用栈溢出
常用地点:
斐波拉契数列,求和,爬楼梯,深拷贝,递归组件,城市分布图
回调函数:
回调函数就是一个被作为参数传递的函数
闭包函数:
当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包
常用场景:节流和防抖
节流:
定义:当持续触发事件时，保证一定时间段内只调用一次事件处理函数.
理解:点击之后触发,但下一次触发要和上一次触发有时间间隔
防抖:
定义:当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
理解:点击之后不会立即触发,要过段时间才会触发,如果在触发前再次点击会从新计时
--- --- --- ---
对象:
对象的方法?
Object.create(proto,[propertiesObject])：创建一个新对象，使用现有对象来提供新创建对象的__proto__。Object.assign() 对象合并
Object.defineProperties(obj,props)：直接在一个对象上定义新的属性或者修改现有属性并返回该对象.obj：在其上定义或者修改属性的对象。props：要定义其可枚举属性或者修改的属性描述符的对象，对象中存在的属性描述符主要有两中：数据描述符和访问器描述符。Object.entries()： 返回一个给定对象自身课枚举属性的键值对数组，其排列方式与使用for···in循环遍历该对象时返回的顺序一致（区别在于for···in循环枚举原型链中的属性）。
Object.freeze()：方法可以冻结一个对象，一个被冻结的对象再也不能被修改，冻结了一个对象则不能向这个对象添加新的属性，不能删除该对象以有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值，此外冻结一个对象后该对象的原型也不能被修改。返回和传入的参数相同的对象。
Object.fromEntries(iterable)：把键值对列表转换为一个对象。iterable：类似实现了可迭代协议Array或者Map或者其他对象的可迭代对象。返回一个包含提供的可迭代对象条目的对应属性的新对象。
Objection.is(value1,value2) 判断两个值是不是相同的值。两个参数是两个需要比较的值。返回一个布尔值表示是不是相同。
prototypeObj.isPrototypeOf（）： 用于测试一个对象是不是存在在另一个对象的原型链上。
object.toString()： 返回一个表示该对象的字符串。
如何实现对象合并？
扩展运算符，Object.assign
对象解构和数组解构的不同点？
对象通过属性名，数组通过位置。
instanceof作用是什么？
测试一个对象是否为一个类的实例
--- --- --- ---
函数:
箭头函数和function函数区别？
箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
箭头函数不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
箭头函数不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
不可以使用yield命令，因此箭头函数不能用作Generator函数。
不能改变this 不能使用new,arguments,yield
call、apply、bind的区别？
相同:都可以改变this执行
不同:call和apply立即执行，call传序列参数，apply传递数组或类数组；bind需要调用才能执行，传序列参数
js里面的this:
this总是指向函数的直接调用者（而非间接调用者）- 如果有
new关键字，this指向new出来的那个对象- 在事件中，
this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window
闭包是什么？有什么特性？
## 什么是闭包:
闭包是指有权访问另一个函数作用域中的变量的函数
何时使用闭包:
例如节流和防抖
## 闭包的特性：
①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在
总结:
函数内再嵌套函数
内部函数可以引用外层的参数和变量
参数和变量不会被垃圾回收机制回收
优缺点:
优点：1:变量长期驻扎在内存中；
2:避免全局变量的污染；
3:私有成员的存在 ；
特性：1:函数套函数；
2:内部函数可以直接使用外部函数的局部变量或参数；
3:变量或参数不会被垃圾回收机制回收 GC；
缺点:
常驻内存 会增大内存的使用量 使用不当会造成内存泄露，详解：
（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
（2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
this 关键词
在 JavaScript 中，被称为 this 的事物，指的是“拥有”当前代码的对象。
this 的值，在函数中使用时，是“拥有”该函数的对象。
请注意 this 并不是变量。它属于关键词。您无法改变 this 的值。
全局对象
当不带拥有者对象调用对象时，this 的值成为全局对象。
在 web 浏览器中，全局对象就是浏览器对象。
new
如果函数调用的前面是 new 关键字，那么这是一个构造函数调用。
它看起来像你创建一个新的函数，但由于 JavaScript 函数是对象，你实际上创建一个新对象：
----------------------------
其他:
深拷贝和浅拷贝:
定义和区别:
浅拷贝只是增加了一个指针指向已存在的内存地址，仅仅是指向被复制的内存地址，如果原地址发生改变，那么浅复制出来的对象也会相应的改变。
深拷贝是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存。
栈内存,放浅拷贝
基本数据类型的特点：直接存储在栈(stack)中的数据
- 引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里
Jsonp原理是什么？
利用<script>标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。
当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址,并提供一个回调函数来接收数据
Ajax步骤？
(1) 创建一个XMLHttpRequest异步对象
(2) 设置请求方式和请求地址
(3)用send发送请求
(4)监听状态变化
(5)接收返回的数据
创->设->发->监->接
什么是异步？
js从上到下执行主进程的语句，遇到事件、setTimeout、setInterval、ajax等语句时，将其执行的内容分支到任务进程，当主进程执行完毕之后，将任务进程纳入主进程继续执行，这些任务进程中的语句就是异步。
客户端不需要等待服务器的响应，在服务器处理请求的过程中，客户端可以进行其他操作。
如何把异步变成同步？
async await promise.all
W3C中定义事件的发生经历三个阶段：
捕获阶段（
capturing）、目标阶段（targetin）、冒泡阶段（bubbling）
Js事件的冒泡：
给子元素和父元素添加同样的事件，会发生事件冒泡
处理方法：给子元素添加（开发中常用）
法1：e.stopPropagation ();//阻止事件冒泡；用于JS
法2：e.preventDefault ();//阻止默认事件；
法3： return false;//阻止冒泡，用于JQ;
事件三要素是什么？
1.事件源 2.事件类型 3.事件处理程序
执行事件的步骤
1. 获取 事件源 2.注册 事件 3.添加 事件 处理程序
什么是事件轮询？
一个程序结构，用来等待和发送消息和事件。
Js延迟加载的方式？
1.defer属性 <script src="file.js" defer> </script>
2.async属性 <script src="file.js" async> </script>
3.动态创建DOM方式
4.使用Jquery的getScript()方法
5.使用setTimeout延迟方法的加载时间
一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载
a. 图片懒加载，滚动到相应位置才加载图片。
b. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。
c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。
d. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
说说你对作用域链的理解
- 作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到
window对象即被终止，作用域链向下访问变量是不被允许的- 简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期
javascript如何实现继承？
构造继承
原型继承
实例继承
拷贝继承
那些操作会造成内存泄漏？
- 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
setTimeout的第一个参数使用字符串而非函数的话，会引发内存泄漏- 闭包使用不当
面向对象编程思想:
- 基本思想是使用对象，类，继承，封装等基本概念来进行程序设计
优点:
- 易维护
- 采用面向对象思想设计的结构，可读性高，由于继承的存在，即使改变需求，那么维护也只是在局部模块，所以维护起来是非常方便和较低成本的
- 易扩展
- 开发工作的重用性、继承性高，降低重复工作量。
- 缩短了开发周期
-------------------------------------------------
CSS:
display:none与visibility:hidden的区别是什么？
如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏占据的空间消失。
给元素设置visibility: hidden也可以隐藏这个元素，但是仍然会影响页面布局。
CSS中link和@import的区别是?
加载页面时，link标签引入的 CSS 同时加载；link是xhtml的标签,link兼容老版本
@import引入的 CSS 将在页面加载完毕后被加载。import是css的标签,import不兼容ie5以下版本
css动画:
CSS 动画分类又分为过渡动画transition和关键帧动画keyframes
重绘和重排的区别？
1>重排(Reflow)：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。
2>重绘(Repaint)：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。比如改变某个元素的背景色、文字颜色、边框颜色等等
介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
有两种，
IE盒子模型、W3C盒子模型；盒模型： 内容(content)、填充(
padding)、边界(margin)、 边框(border)；区 别：
IE的content部分把border和padding计算了进去;
CSS优先级算法如何计算？
优先级就近原则，同权重情况下样式定义最近者为准
载入样式以最后载入的定位为准
优先级为:
!important > id > class > tagimportant比 内联优先级高
列出你所知道可以改变页面布局的属性
position、display、float、width、height、margin、padding、top、left、right、`
布局方式:
静态,流式,自适应,响应式,弹性 等布局
描述下拉加载的开发思路？
1.只要上拉, 触发 上拉加载的方法,就让page页+1; 然后调用接口 将页码传过去,拿到数据 追加到 数组中,刷新数据
2.只要下拉刷新,就让 让 page=1, 请求接口将page传递到后台,拿到数据后,首先将之前存储数据的数组清空,清空,清空,然后再把数据添加带该数组中,刷新数据.
2>"11"与"2">"11"的结果相同吗
不同,前一个是数字对比,后面的是unicode编码对比
其他数据类型转换成布尔值是false的值都有哪些？
undefined ull 0 NaN ""
localStorage的方法有哪些（要求写方法的参数），localStorage一个域下最多存储多少数据？
localStorage:仅在客户端存储不参与服务器通信，存储大小一般为5M，如果不是人为清除，那么即使是关闭浏览器也会一直存在。
sessionStorage:仅在客户端存储不参与服务器通信，存储大小一般为5M，会话级存储，也就是说如果关闭当前页面或者浏览器那么就会清除
cookie:客户端存储，参与服务器通信，存储大小为4k,可设置生命周期，在设置的生命周期内有效
为什么consol.log(0.1+0.2==0.3)为false
在JavaScript中的二进制的浮点数0.1和0.2并不是十分精确，在他们相加的结果并非正好等于0.3，而是一个比较接近的数字 0.30000000000000004 ，所以条件判断结果为false。
数组降维的方式写两种
1、数组字符串化
arr.split(',')2、递归
3、Array.flat()
描述箭头函数的特点。
没有自己的this
不存在arguments对象
没有prototype属性
不可以使用yield命令
列举数组的迭代方法。
filter()方法
some()方法
map()方法
reduce()方法
如何将‘100px’转换为100的number值？
let str = '100px'
let px = str.slice(0,str.length-2)
Number(px)jq对象转DOM对象？
//方法一
var $cr=$("#cr"); //jq对象
var cr = $cr[0]; //jq 转dom
//方法二
var cr=$("#cr"); //jq对象
var cr=$cr.get(0); //jq转dom什么是同源策略？
协议+域名+端口"三者相同
什么是jsx？
jsx是JavaScript的一种语法扩展，它跟模板语言很接近，但是它充分具备JavaScript的能力
对象转数组的方法:
let obj = {a:1,b:2,c:30}
// 对象属性转数组
let arr = Object.keys(obj)
//对象值转数组
let arr1 = Object.values(obj)js中的数据类型?
基本类型,引用类型
什么是工厂模式?
构造函数就是工厂模式,把一个函数做成一个模具
class类的底层封装原理?
JavaScript使用的是原型式继承，通过原型的特性实现类的继承
扩展运算符的用处?
展开数组,对象 合并数组,对象
-------------------------------
HTML5
<img>的title和alt有什么区别
通常当鼠标滑动到元素上的时候显示
alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。
什么是语义化标签?
看到知道干什么的,像是看到h1写表题,li写列表
---------------------------------
浏览器:
HTTP的几种请求方法用途
1、
GET方法
- 发送一个请求来取得服务器上的某一资源
2、
POST方法
- 向
URL指定的资源提交数据或附加新的数据3、
PUT方法
- 跟
POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有4、
HEAD方法
- 只请求页面的首部
5、
DELETE方法
- 删除服务器上的某资源
6、
OPTIONS方法
- 它用于获取当前
URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息7、
TRACE方法
TRACE方法被用于激发一个远程的，应用层的请求消息回路8、
CONNECT方法
- 把请求连接转换到透明的
TCP/IP通道
从浏览器地址栏输入url到显示页面的步骤
- 浏览器根据请求的
URL交给DNS域名解析，找到真实IP，向服务器发起请求；- 服务器交给后台处理完成后返回数据，浏览器接收文件（
HTML、JS、CSS、图象等）；- 浏览器对加载到的资源（
HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；- 载入解析到的资源文件，渲染页面，完成。
浏览器内核
主要分成两部分：渲染引擎(
layout engineer或Rendering Engine)和JS引擎
WEB标准以及W3C标准是什么?
标签闭合、标签小写、不乱嵌套、使用外链
css和js、结构行为表现的分离
-----------------------
vue的优缺点?
优点:轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。
缺点:
1、VUE不支持IE8
2、生态环境差不如angular和react
3、社区不大
vue路由封装原理?
history,hash
前端性能优化方案?
雪碧图,懒加载
node不要每次更新内容就要从新打开的方法?
下载nodemon
npm i -g nodemon
yarn比npm的优势?
加入了缓存机制,离线安装,速度更快
加入算法校验包完整性,更安全
使用详细,简洁的锁文件格式和明确的安装算法,yarn能够使用不同系统上无差异的工作,更可靠
冷启动和热启动:
冷启动:指app被后台杀死后,在这个状态打开app,这种启动方式叫做冷启动
热启动:指app没有被后台杀死,仍然在后台运行,通常我们再次去打开这个app,这种启动方式叫做热启动
扫一扫
1520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
