前端基础知识总结_null作为函数的参数,表示该函数的参数不是对象-优快云博客

本文链接：https://blog.youkuaiyun.com/RollsRoycewk/article/details/111350976

1.null和undefined的区别?

null是一个空对象指针,指向一个空对象
undefined是找不到

2.null的使用场景

作为对象原型链的终点
作为函数的参数,表示该函数的参数不是对象
让一个对象变成垃圾对象
定义的变量准备在将来用于保存对象

3.undefined的使用场景

变量被声明但是没有赋值,等于undefined
调用函数时,应该提供的参数没有提供,该参数等于undefined
对象没有赋值的属性,该属性的值为undefined
函数没有返回值时,默认返回undefined

4.SelectorAPI和传统获取元素的区别?

它是静态的,传统的是动态的获取

5.如何快速获取html和body元素?

document.documentElement
document.body

6.节点的类型有哪些?

元素节点 element
属性节点 attr
文本节点 text
注释节点 comment
文档节点 document

7.如何获取obj的所有元素节点和父元素节点?

obj.children
obj.parentNode

8.js的组成部分及作用

ECMAScript 语法规范
DOM 文档对象模型,操作节点
BOM 浏览器对象模型,操作浏览器

9.window.onload 的作用

当整个文档内容（DOM节点+所需要的资源（音频、视频、图片、程序等等））全部加载完毕，script才会执行

10.请分析window对象

BOM 的核心对象是 window，它表示浏览器的一个实例，是客户端浏览器对象模型的基类。
在浏览器中，window 对象有双重角色，它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。
在网页中定义的任何一个对象、变量和函数，都以 window 作为其 Global 对象

11.鼠标的mouseover事件和mouseenter事件的区别

mouseover:鼠标移入(可以触发事件的冒泡)

mouseenter:鼠标移入(不会触发事件的冒泡)

12.手写点击切换

for(var i = 0; i < oTH2.length; i++){
    oTH2[i].onclick = function(){
        for(var i = 0; i < oTH2.length; i++){
            if (oTH2[i] === this) {
                oTH2[i].className = "active";
                oCSh[i].className = "show";
            }else{
                oTH2[i].className = "";
                oCSh[i].className = ""; 
            }
        }
    }
}

for(var i = 0; i < oT.length; i++){
    oT[i].index = i;
    oT[i].onclick = function(){
        for(var i = 0; i < oT.length; i++){
            oT[i].className = "";
            oS[i].className = "";
        }
        this.className="active";
        oS[this.index].className = "show"
    }
}

13.分析基本数据类型和引用数据类型的区别

基本数据类型：

null undefined string number boolean
引用数据类型：Object
基本数据类型特点：

我们不能给基本类型值添加属性和方法就算添加也是获取不到的

基本类型的比较是值的比较

基本类型的变量是存放在栈区的（栈区指内存里的栈内存),栈区包括了变量的标识符和变量的值
引用类型的特点:

引用类型的值是可变的，我们可以为引用类型添加属性和方法

引用类型的值是同时保存在栈内存和堆内存中的对象

引用类型的比较是引用地址的比较

14.书写一个任意随机数

console.log(Math.floor(Math.random()*(最大可能数 - 最小可能数 + 1)+最小可能数)));

15.如何设置设置两种计时器并清除计时器

超时调用
setTimeout()
cleartimeout(xxx)

间歇调用
setInterval()
clearInterval(xxx)

16.BOM 中有哪些对象分别是做什么的

navigator 存储了与浏览器相关的基本信息,如名称版本和系统等
screen 包含客户端屏幕信息
history 包含浏览器窗口访问过的URL信息
location 包含当前网页文档的URL信息
document 包含整个HTML文档可以用来访问文档内容及其所有页面元素

17.获取窗口的高度

document.documentElement.clientHeight

18.offsetWidth 和 clientWidth 的区别

(content+padding+border) offset

(content+padding) client

19.display:none 和 visibility:hidden 的区别

display:none

从渲染中删除，不占用空间

子元素因为父级被渲染树中移除，会跟着消失

不可以在js中获取宽高
visibility:hidden

隐藏了，但是还在渲染树中，并占用空间

父元素的visibility属性继承，导致子元素隐藏，只要给子元素visibility：visible属性即可显示

可以通过js获取宽高

20.获取时间戳的方法有哪些

Date.now()

new Date().getTime()

+new Date()

new Date()-0

Number(new Date())

(new Date()).valueOf()

21.如何设置和获取系统滚动条的位置信息

横向

window.pageXOffset

document.body.scrollLeft

document.documentElement.scrollLeft

纵向

window.pageYOffset

document.body.scrollTop

document.documentElement.scrollTop
设置

widow.scrollTo(x,y)

scrollTop = number;

scrollLeft = number;

22.如果获取窗口的高度和文档的高度

 document.documentElement.clientHeight
 document.documentElement.offsetHeight

23.解释 offsetLeft、offsetWidth、clientLeft、clientWidth、scrollLeft

offsetLeft：元素左边框的外侧相对于最近的包含块(定位元素)左边框的内侧的偏移位置，没有包含块就相对于初始包含块(HTML)

offsetWidth：表示元素在页面中所占用的总宽度（content+padding+border）

clientLeft：元素border-left的大小

clientWidth：可视部分的宽度，（content+padding）不包含可以滚动的区域

scrollLeft：元素左侧已经滚过的距离

24.创建一个新的 li 节点 2.给节点一个内容 3.把节点插入到 ul 中

<script>
  	//获取ul
	var o_ul = document.querySelector('ul');
	//创建li节点
	var new_li = document.createElement('li');
	//在创建的li中插入内容
	new_li.innerHTML = '一个内容';
	//将创建好的li插入到ul中
	o_ul.appendChild(new_li);
</script>

25.谈一下盒子模型

什么是盒子模型：

在html中，把每一个元素都当做成一个盒子，拥有盒子的平面外形和空间

盒子模型由 content padding border margin4 个部分构成

盒子模型分为标准盒子模型和怪异盒子模型（box-sizing:border-box）

标准盒子模型占用的空间是（content+padding+border+margin）

相当于设置了box-sizing：content-box

怪异盒子模型占用的空间是（content（包含了 padding 和 border）+margin）：width 设置的宽度是 content+padding+border

box-sizing：border-box

26.解释 innerHTML、innerText、outerHTML、outerText、textContent

innerHTML和outerHTML：

获取或设置某一个元素的内容（innerHTML不包含当前的元素，outerHTML包含当前的元素）

获取的时候，可以获取到里边的标签

设置的时候，直接把原有内容替换，并且可以解析标签
innerText和outerText：

获取或设置某一个元素的内容（innerText不包含当前的元素，outerText包含当前的元素）

获取的时候，直接获取文本内容

设置的时候，直接把原有内容替换，并且不可以解析标签，
textContent：

直接获取文本内容，设置时不会解析标签，可以获取displaynone隐藏元素的内容，获取的文本带有格式，兼容是ie8以上。

27.旧方法设置删除获取自定义属性

ele.getAttribute(key);

获取元素某个自定义属性的值

ele.setAttribute(key,value);

设置一个新的属性

ele.removeAttribute(key);

删除某一个属性

28.新方法设置删除获取自定义属性

ele.dataset.key = value

ele.dataset.key

设置和获取自定义属性。

delete dataset.key

删除自定义属性

29.分析懒加载思路

图片进入窗口内容之前，不进行加载可以不设置真实的 src 属性，把 src 属性保存在其他的自定义属性上

当图片即将进入页面的时候，把自定义属性的路径赋值给 src 属性

（当图片距离屏幕顶部的距离 <= 屏幕的高度的时候）到临界值

30.html 标签的语义化

- 语义化标签更具有可读性，便于团队的开发和维护

- 没有 css 的情况下，网页也能很好的呈现出内容结构和代码结构

- 关于 SEO，搜索引擎更能理解到网页中各部分之间的关系，更准确更快速搜索信息

1.更好的阅读

2.良好样式

3.SEO（搜索引擎优化）

31.DOM0 和 DOM2 绑定事件的区别

DOM0：只能绑定一次绑定多次会覆盖，默认冒泡

DOM2：可以绑定同一个事件多次，可以选择或者冒泡，DOM2 的事件只能是 DOM2 方法绑定

有的事件是DOM2级事件，只能通过DOM2级的方式去绑定（DOMContentLoaded事件）

32.如何移除 DOM0 和 DOM2 的事件

移除DOM0级事件：DOM0 将事件函数设置为 null

移除DOM2级事件：使用removeEventListener()

参数1：要移除的事件类型

参数2：要移除的事件函数

33.DOMContentLoaded 事件和 window.onload 事件的区别

DOMContentLoaded事件：当所有的节点加载完成后执行（不需要等待图片加载）

window.onload事件：所有的节点及资源全部加载完成以后执行

34.阻止默认事件和阻止传播

阻止默认事件

return false：必须书写在函数的末尾，因为return会退出函数

event事件对象中也提供了阻止默认事件的方法

e.preventDefault();

e.returnValue = false;（低版本ie）

阻止传播

event对象中的方法

event.stopPropagation() ;

ev.cancelBubble = true;

event.cancelBubble = true;（低版本ie）

35.请分析拖拽思路

当鼠标按下以后，因为无论怎么拖拽，鼠标相对于box的位置是不会改变的

方法一

首先要获取鼠标到元素边缘的距离信息

当鼠标按下以后，再给元素绑定move事件（因为只要按下才可以拖拽）

move事件绑定给document，让元素无论移动到哪里都可以正常使用

元素定位就是clientX 减去按下的时候获取的offsetX

判断临界值（用窗口的宽高去减元素的宽高来判断是否移出屏幕）

添加鼠标松开事件，清除move事件，解除移动控制；清除自身，节省空间，下次点击的时候还要再次添加上去

给元素绑定鼠标按下事件，当鼠标按下以后，先获取元素的初始位置（offsetLeft）；再获取当前鼠标到屏幕窗口边缘的距离（clientX）

再给document绑定move事件，用最新的clientX减去鼠标按下的时候的clientX 可以得到元素改变位置的大小，然后把元素改变位置的大小加上初始位置即可以得到定位位置

判断临界值和添加鼠标松开事件与方法一相同

36.请描述W3C事件流

捕获事件从document沿着文档树向下触发直到目标节点
目标事件执行注册在目标上的事件执行
冒泡事件从目标节点向上触发直到document对象

37.什么是事件委托?事件委托的原理?事件委托的优点?

委托就是自己不绑定事件，而是把事件委托给父元素或者祖辈元素进行绑定，
根据冒泡原理，触发事件
减少for循环，提升效率/可以对未来的元素绑定事件

38.如何禁用系统滚动条?

设置 body：scroll 的时候系统有滚动条

设置 html：scroll 的时候系统有滚动条

结论：系统滚动条的来历是 body 和 html，此时要同时禁用 html 和 body 的滚动条

39.谈一下滚轮事件(兼容性)

onmousewheel:e.wheelDelta

DOMMouseScroll:e.detail

40.如何判断数据类型,及每次方法可以检测类型是什么?

typeof

undefined、number、boolean、string、function、object

instanceof、constructor

Object、Array、Function、RegExp

null、undefined

Object.prototype.toString（）

任何类型很具体[]object，Array]

41.什么是回调函数？

自己定义的
自己没有调用
最后执行了
比如:事件、ajax 、生命周期

42.匿名函数的调用方法及作用

赋值给变量（函数表达式）
自调用（IIFE）

作用：构建一个局部作用域，

防止污染全局变量

可以构建模块化

43.请描述对象属性操作中点操作符和中括号操作符的区别

.操作符后只能跟对象的属性（直接解析为对象的属性，不会当成变量解析）
[]操作符可以进行运算和解析变量，当然也可以直接写入字符串作为对象的属性

44.描述一下对象销毁的方法

函数保存在堆中，当函数运行的时候，会在栈中设置一个区域，让函数运行，运行完成后，把栈中的内容删除此时局部的变量和对象都会销毁
全局的变量和对象不会自己销毁，但是当对象没有被引用的时候，这个对象就会变成一个垃圾对象，等待回收。
我们可以主动把对象引用的变量设置为 null 让对象没有被引用，即可销毁

45.变量的类型有哪些？数据的类型有哪些

变量类型

主要说的是变量保存的值得类型

基本类型
引用类型

数据类型

主要说的就是数据的类型

基本类型
对象类型

46.函数传参的时候，赋值是值的传递还是引用传递

只有值传递没有引用传递。

函数传参的时候，是把变量保存的值传递给了形参的变量

47.使用 Object 的 toString 检测数据类型举例说明，并说出返回值

Object.prototype.toString.call(obj) ‘[object Object]’

48.谈一谈 call apply bind

call apply bind：都是改变 this 指向

call apply:首先改变 this 指向，然后调用函数，但是两个的传参不同，call 的传参的方式是多个形参，apply 的传参是一个数组格式

bind：指挥改变 this 的执行，传参方式和 call 相同，但是不会调用函数，会返回一个函数，供我们调用

49.谈一谈显式原型

每一个函数都有自己的显式原型（prototype）

显式原型指向函数的原型对象

只有实例化的对象才能访问原型对象

原型对象默认存在，是一个空对象

50.谈一谈原型链

每一个函数都有自己的显式原型（prototype）

每个对象都有自己的隐式原型

对象的隐式原型指向其构造函数的显式原型

设置对象属性的时候，会直接设置给当前的对象

获取对象属性的时候，会沿着原型链依次查找当前属性

51.谈一谈 this

this 是在函数调用的时候确定的

this 是一个指针，指向当前调用函数的对象

● call apply bind 硬绑定 this 指向 call 方法规定的对象

● new 实例化调用 this 指向实例化对象

● 隐式绑定 obj.fn() this 指向调用函数的上下文对象

● 隐式丢失 fn = obj.fn 赋值的传递是引用值的传递，所以 fn 调用后指向 window

● 默认绑定 fn 直接调用的函数其实是 window.fn() 所以指向 window

52.A instanceof B

B 的原型对象在 A 的原型链上的时候，就返回 true

53.new 的过程

创建一个对象 o（最后会返回当前对象）
把构造函数的 this 指向指向对象 o 并调用构造函数和传参（call apply）
o 的隐式原型指向构造函数的原型对象
考虑构造函数中有没有 return 对象类型，如果有，则丢弃 o 返回 return 的对象类型

54.什么是闭包？闭包的优点？闭包的缺点？

闭包是函数嵌套函数，是包含了内部函数引用外部函数变量的对象
闭包的构成条件：1.函数嵌套函数 2.内部函数引入外部函数变量 3.调用外部函数
闭包特点：1.延长局部变量的生命周期，可以长期驻留在内存中 2.外部可以间接访问内部的局部变量
缺点：局部变量长期驻留在内存中，可能占用过多内存，造成内存泄漏

55.谈一谈作用域链

作用域链是在函数定义的时候就确定了，在函数调用的时候，把当前的变量添加到已经存在的作用域链顶端，构成完整的作用域链
作用域链：保证对内部执行环境对所有变量和函数的有序访问
当查找一个变量的时候，会沿着作用域链一次查找
作用域最末尾一定是 window

56.什么是执行上下文

执行上下文是在函数调用的时候才产生，是一段代码开始执行的时候做的准备工作
分为全局执行上下文和局部执行上下文
因为执行上下文过多，所以会把执行上下文放在一个执行上下文栈中保存
当某段代码执行完毕，则把当前执行上下文弹出
执行上下文包含：1：变量对象 2.确定this 3.激活作用域链

57.区分公有私有静态特权概念

设置给实例对象的属性和方法被称作为公有属性和公有方法
在构造函数中声明的变量和函数被称作为私有属性和私有方法
给构造函数当做对象，扩展的属性和方法被称作为静态属性和方法
特权方法：在构造函数中给实例对象扩展的方法

58.谈一谈变量对象

变量对象在执行上下文确定后产生
保存了当前作用域所有的变量和方法
分为全局和局部变量对象，全局的变量对象就是 window
局部的变量对象首先保存形参和实参
再提升函数，如果函数和形参重复，则直接覆盖
最后提升变量，如果变量和函数或实参重复，则在变量赋值前忽略变量的值

59.说一下事件轮询机制

js是单线程执行代码,先执行同步代码,等待同步代码执行完成后才执行异步代码
enent loop两个重要内容:

○ 事件管理模块

○ 回调队列

执行初始化同步代码,把相应的回调给到浏览器对应的管理模块(事件回调==> 事件管理模块、计时器回调==》计时器管理模块、ajax回调==》 ajax管理模块)
当事件发生或计时器到期等等，就会把相应的回调函数添加到回调队列中，等待执行
等初始化代码指向完毕，js引擎就会循环的检查回调队列中的回调函数，并执行

60.说一下进程和线程

○ 是程序的某一次执行,主要在内存开启一定的空间

■ 有的进程是单线程,有的进程是多线程(多个线程可以共享数据)

■ 有的程序是单进程的,有的程序是多进程的(多个进程不可以共享数据)

○ 是进程的一个独立单元,是cpu的基本调度单位

○ 单线程

■ 编程简单

■ 效率低

○ 多线程

■ 可以提高cpu的利用率

■ 创建多个线程的时候会有额外开销

■ 切换线程的时候也会有额外的开销

■ 容易产生死锁(活锁/饿死)

61.描述多态和封装

多态

JS对象多态性是与生俱来的：同一操作作用于不同的对象上面，可以产生不同的解释和不同的执行结果，从而，给不同的对象发送同一个消息时，这些对象根据这个消息分别表示不同的反馈。

封装

对于封装而言，一个对象它所封装的是自己的属性和方法，所以它是不需要依赖其他对象就可以完成自己的操作。
1、良好的封装能够减少耦合。
2、类内部的结构可以自由修改。
3、可以对成员进行更精确的控制。
4、隐藏信息，实现细节

62.简单描述h5新属性多线程的书写过程

html主线程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DNxJEjuc-1608222205552)(C:\Users\zerowk\AppData\Roaming\Typora\typora-user-images\image-20201214005856309.png)]

js分线程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-85o8cg6g-1608222205558)(C:\Users\zerowk\AppData\Roaming\Typora\typora-user-images\image-20201214005919913.png)]

63.定义一个请浮动的混合，并调用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-07HvS6Wv-1608222205560)(C:\Users\zerowk\AppData\Roaming\Typora\typora-user-images\image-20201214005934365.png)]

64.分析模式匹配、重载、守卫

● 匹配：根据调用混合时传递的参数，选择使用哪种混合

● 重载：根据调用混合时传递参数的个数，选择使用哪种混合

● 守卫：根据调用混合时传递的参数的判断结果，选择使用哪种混合

65.举例说明转义和字符串插值

● 转义：需要引入无效的CSS语法或Less不能识别的字符，需要进行转义，在字符串前面加一个 ~，并将需要转义的字符串放在 “” 中。

● 字符串插值：通过**@{name}**这样的结构插入字符串值

66.AB 两个元素垂直排列，A 元素高度是 100px B 元素占用剩余高度（3 种）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LpJA0ATz-1608222205565)(C:\Users\zerowk\AppData\Roaming\Typora\typora-user-images\image-20201214010034802.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UJkMcPUc-1608222205570)(C:\Users\zerowk\AppData\Roaming\Typora\typora-user-images\image-20201214010040287.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0qQesgOm-1608222205572)(C:\Users\zerowk\AppData\Roaming\Typora\typora-user-images\image-20201214010047226.png)]

67.jQuery 对象和 js 对象互换

● jQuery对象转成dom对象

○ 下标取值

○ 即[index]或者.get(index)

○ (eq()也是下标但是获取的是 jq 对象)

● js对象转换成jQuery

○ $()把dom对象包装起来

68.jQuery 的执行时机怎么书写和其他的区别

● $(function(){ })

○ 只需要等待网页中的DOM解构加载完毕,就能执行包裹的代码

○ 可以执行多次,第N次都不会被上一次覆盖

● window.load

○ 当DOM及所有的资源全部加载完成才会执行.并且因为是DOM0级事件,是以只能绑定一次

● window.addEventListener(“load”)

○ 当DOM及所有的资源全部加载完成才会执行,但是可以绑定多次

● DOMContentLoaded

○ 当所有的DOM节点加载完成以后即可执行

69.分析 jQuery 的结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HiY4iKqC-1608222205576)(C:\Users\zerowk\AppData\Roaming\Typora\typora-user-images\image-20201214010147457.png)]

70.表单的新的属性有哪些及作用

● placeholder：占位符

● autocomplete：是否提示用户曾经输入过的值默认是on 关闭是off

● autofocus：默认自动获取焦点，他有唯一一个值是autofocus

● required：必填项，当提交的时候，此表单必须填写

● disabled：禁用任何表单元素，这个元素就被禁止输入或选择等等操作

● checked：单选框或多选框默认被选中

● readonly：对于可编辑的表单来说表示不能再次被编辑但是是可以被提交的

● form：

○ 如果input存在form属性，表示当前的input属于某一个表单

○ 此时form表单的id的值就是这个input的值

○ 那么form表单和当前的input就进行关联了

○ 无论input书写在哪里，都能随着表单发送数据

71.表单的所有 type 类型

● type旧类型：

○ text：文本框

○ password：密码框

○ radio：单选框

○ checkbox：多选框

○ hidden：隐藏域

○ file：文件域

○ button：按钮

○ reset：重置按钮

○ submit：提交按钮

● type新类型

○ color：用来引入或者打开指定颜色的控件

○ date：日期的控件（年月日）

○ week：日期的控件（年周）（火狐不支持）

○ month：日期的控件（年月）（火狐不支持）

○ email：编辑email的字段
自带验证，但是验证不完整，一般还是自己书写
在移动端上有相对应的自动弹出键盘包含 @ .com 等按键

○ number：用来输入数字的控件
多了一个上下的按键，可以增加和降低数字大小
验证必须是数字
其他属性
- min：最少数量
- max：最大数量
- value：当前数量
- step：每次累加累减数量

○ search：用来搜索框，当用户输入内容后，在末尾有一个删除按钮，单击可以删除输入好的文字

○ tel：电话号码输入框

○ url：url地址

○ range：输入一个拖拽的控件
属性：
- max：最大值
- min：最小值
- step：每次走的最小单位
- value：当前值

72.书写一个自定义动画实现 show或者是hide方法案例（只需要实现动画效果）

<script>
       $(".box").animate({
           width:0,
           height:0,
           opacity:.5
       },2000,function(){
           $("this").css("display","none")
       })
</script>

73.stop 方法解析

stop()方法会结束当前正在进行的动画，并立即执行队列中的下一个动画

参数一:控制是否清空当前动画队列

参数二:控制当前被停止的动画是否走到末尾

74.元素设置插入

jq 方法：1.设置一个新的元素（div.con）插入到父级（div.out）中 2.新元素.con 中有一个子元素 a 标签，点击 a 标签可以删除当前的 con 元素
$(" < d i v c l a s s =^{'} c o n^{'} > < a > 删除 < / a > < / d i v > ") . a p p e n d T o ($ (".out")).children().click(function(){
$(this).parent().remove()
})

75.html5 新的标签及解析

header

定义文档（网页或者是某一个段落）的页眉（头部）
footer

代表一个网页或者章节内容的底部区域（页脚）
section 部分

是html中一个独立的区域（主要针对网页分块），没有其他语义，一般会包含一个独立的标题
article 文章

代表文档、页面、或程序中，可以独立的完整的被外部引用的内容
nav

表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接
aside 在旁边

表示一个和其余页面内容几乎无关的区域

76.排序

已知数组[{name:“lily”,age:18},{name:“lucy”,age:19},{name:“laowang”,age:12}]，请让数组按照年龄排序

var arr = [{name:"lily",age:18},{name:"lucy",age:19},{name:"laowang",age:12}]
       for (var j = 0; j < arr.length ; j++){
           for (var i = 0; i < arr.length - j - 1; i++){
               if (arr[i].age > arr[i+1].age) {
                   var cup = arr[i]
                   arr[i] = arr[i+1]
                   arr[i+1] = cup
               }
           }
       }

arr.sort(function(a,b){
           return a.age - b.age
})

77.谈一谈严格模式

使用

1) 在全局或函数的第一条语句定义为: ‘use strict’,

2.作用

1) 优化：有时候，相同的代码，严格模式可以比非严格模式下运行得更快

2) 安全：消除代码运行的一些不安全之处，为代码的安全运行保驾护航

3) 为未来新版本的JavaScript做好铺垫

3.语法和行为改变

1) 变量必须声明才能使用

2) 严格模式下，如果函数自己调用，this是undefined

3) 严格模式下，创建了eval作用域

4) 禁止调用栈

5) 严格模式下不可以删除变量

78.json对象和字符串的互换举例说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zUO97nHc-1608222205579)(C:\Users\zerowk\AppData\Roaming\Typora\typora-user-images\image-20201214010650625.png)]

79.Object.create创建对象说明每一个的含义

object.create (prototype, descriptors)

- prototype:必须参数,指定原型对象,可以为null

- descriptors可选参数,包含一个或多个属性描述符的 JavaScript对象。属性描述符包含数据特性和访问器特性,其中数据特性说明如下

- value:指定属性值

- writable:默认为 false,设置属性值是否可写

- enumerable:默认为 false,设置属性是否可枚举( for/in)

- configurable:默认为false,设置是否可修改属性特性和删除属性

803.举例使用defineProperty属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vymmdUu6-1608222205581)(C:\Users\zerowk\AppData\Roaming\Typora\typora-user-images\image-20201214010727334.png)]

81.谈一谈getter和setter及使用

getter:读取

get propertyName(){} 用来得到当前属性值的回调函数

setter:设置

set propertyName(){} 用来监视当前属性值变化的回调函数

82.谈一谈let和const和var

1-let

作用域是块级作用域
没有声明提升
不允许重复声明

2-const

作用域是块级作用域
声明一个只读的常量
声明的常量不得改变值
声明的常量如果是对象，可以修改对象的内容
一旦声明变量，就必须立即初始化，不能留到以后赋值
命令声明的常量也是不提升
不允许重复声明

3-var

作用域是函数作用域
存在变量声明提前

83谈一谈模板字符串

用反引号（`）标识。可以嵌套变量，可以换行，可以包含单引号和双引号。
可以当作普通字符串使用，也可以用来定义多行字符串。模板字符串中嵌入变量，需要将变量名写在${}之中
大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性

84.描述扩展运算符和rest参数

扩展运算符是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，目前也可以用来展开数组。
rest 参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
和普通参数混合使用的时候，需要放在参数的最后

85.谈谈箭头函数的写法和特点

只有一个参数并函数体是一句话的时候（如果是返回值则可以省略return）
没有参数或者多个参数的时候，参数的括号不能省略
当函数体不是一句话的时候,要写return
箭头函数没有自己的this，箭头函数内部的this并不是调用时候指向的对象,而是定义时指向的对象
箭头函数不能用于构造函数，也就是不能使用new关键字调用
箭头函数没有arguments对象
箭头函数不能使用yield命令，意味着不能当作gennerator函数

86.for in 和 for of

for…in循环，只能获得对象的键名，不能直接获取键值
for…of循环，允许遍历获得键值,如果要通过for…of循环，获取数组的索引，可以借助数组实例的entries方法和keys方法

87.谈一谈新增的两种数据类型

Symbol表示独一无二的值

○ Symbol中传入的字符串没有任何意义，只是用来描述Symbol的

○ Symbol不能使用New调用

○ 类型转换的时候，不能转数字

○ 如果把Symbol当作一个对象的属性和方法的时候，一定要用一个变量来储存，否则定义的属性和方法没有办法使用

○ for in 不能遍历出来，可以使用Object.getOwnPropertySymbols方法来拿
Big解决js大数字和计算精度问题

○ 只用来表示整数，没有位数的限制，任何位数的整数都可以精确表示。

○ 为了与 Number 类型区别，BigInt 类型的数据必须添加后缀n

○ BigInt 与普通整数是两种值，它们之间并不全等

○ typeof运算符对于 BigInt 类型的数据返回bigint

88.谈一谈新增的两种数据结构

Set
1. 它类似于数组，但是成员的值都是唯一的，没有重复的值
2. 本身是一个构造函数，用来生成 Set 数据结构
3. 可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化
Map
1. 它类似于对象，也是键值对的集合，
2. 但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键

89.手写iterator

const arr = ["a", "b", "c", "d"];
        Array.prototype.myIterator = function () {
            let index = 0;
            const _this = this;
            return {
                next() {
                    if (index < _this.length) {
                        return {
                            value: _this[index++],
                            done: false
                        }
                    } else {
                        return {
                            value: undefined,
                            done: true
                        }
                    }

                }

            }
        }
        const re = arr.myIterator();
        re.next()
        re.next()

90.谈一谈generator

是 ES6 提供的一种异步编程解决方案，内部封装了很多的状态，被称作状态机生成器
执行Generator会返回一个迭代器对象（iterator），使用iterator来遍历出Generator内部的状态
形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）

91.谈一下class

  class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            eat() {
                console.log("吃饭")
            }
            sex = "男";
            static hi = "hello";
        }

        const p1 = new Person("laowang",20)

92.使用extends书写一个继承

class Person {
  constructor(name, age) {
      this.name = name;
      this.age = age
  }
}
class child extends Person {
  constructor(sex, name, age) {
      super(name, age);
      this.sex = sex;
  }

93.解释Promise可以处理的问题

是一个异步变成的解决方案,可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称’回调地狱’)

94.解释promise的三种状态

Promise对象有三种状态：代表异步执行的状态,对象的状态只能改变一次

pending
异步代码还在执行中
Promise正在执行，或者你没有调用成功失败函数，那么promise的状态将一直都是pending
当代码正在执行的时候，promise中的值是{PromiseState：pending,PromiseResult:undefined}
resolved/fulfilled
成功状态
异步代码执行成功了,调用resolve函数，可以将promise对象的状态由pending变成resolved
rejected
失败状态
异步代码执行失败了,调用reject函数,可以将promise对象的状态由pedding变成rejected

95.then方法的返回值

then中的函数如果没有书写return 或者promise等，那么本身返回一个promise的fulfilled状态的对象
then中的函数，如果返回一个promise对象，then的返回值就是这个promise对象，promise对象的状态和内部返回的promise状态一直
then中的函数，返回值不是一个promise对象，则then还是返回成功状态的promise对象,但是值就是这个返回的值
如果then中的函数出错了（有异常了），则then返回一个失败的promise对象

96.解析Promise的静态方法 all allsettled race resolve reject

all

Promise.all([xx,xx,xx])
检测所有传入all中的promise对象，等待所有promise执行，当有一个返回rejected，则all方法返回rejected的promise对象,当所有的promise对象全部为fulfilled的时候则all方法返回fulfilled状态的promise对象
当Promise.all方法返回一个成功状态的promise对象的时候，他的PromiseResult的值是一个数组，保存的时候all方法中所有promise对象resolve的输出的值
当Promise.all方法返回一个失败状态的promise对象的时候，他的promise状态就是第一个失败的promise的状态

allsettled

Promise.allSettled([xx,xx,xx])
只要里边的promise对象没有执行完成，则allSettled返回pending状态的promise对象
只要里边的promise对象全部完成了，则allSettled返回fulfilled状态的promise对象（无论是否所有的promise都失败了）
当所有的请求完成，allSettled的状态值就是成功，allSettled的value就是一个数组，包含了所有的方法内返回promise对象

race

使用promise.race([XXX,XXX,XXX])
race方法返回promise对象，promise对象的状态是race中第一个执行完成的那个promise的状态（无论成功还是失败）

resolve

Promise.resolve():直接返回一个成功状态的promise对象

reject

Promise.reject():直接返回一个失败状态的promise对象

97.谈一谈async和await

async

async定义的函数，调用以后会返回一个promise对象

async函数返回值：

- 默认情况下返回成功状态的promise对象，值是undefined

- 如果return了一个值，则返回是成功的promise对象，值是return的内容

- 如果return了一个promise对象，则async函数的返回值就是这个promise对象

await：

await只会等待promise对象，其他的一概不等。

如果等待的promise对象返回成功状态，则继续向下运行，最后async函数返回一个成功的promise对象,

await的返回值是成功的promise对象的promiseReasult的值,

如果等待的promise对象返回的是失败状态，则停止运行，async函数返回这个失败的promise对象

98.谈一谈import

import动态加载js模块

import返回的是一个promise对象，如果正常加载进来，则返回成功promise，否则返回失败promise

99.nodejs轮询机制

1.nodeJS使用了第三方库libuv，nodeJS会把一些异步操作（I/O、文件的读写）交给libuv处理。nodejs的主线程没有必要等待，可以继续处理其他事情。

2.libuv会开启多个线程去执行这些异步操作，当异步代码操作完毕以后，会把回调函数放到回调队列中，主线程在适当的时候回去轮询回调队列。

3.nodeJs把异步代码分为了两大类，分别是微任务和宏任务。微任务优先宏任务执行。

4.宏任务也是根据异步代码不同，而产生多种回调队列，nodejs会依次轮询这几个回调队列：timers、pendding callback、idle、poll、check、close

1).timers阶段：处理setTimeout和setInterval的回调函数

2).pedding阶段：处理系统级别操作的回调函数

3).idle阶段：处理nodejs内部的回调函数

4).poll阶段：处理I/O或者网络请求等异步操作的回调函数

- 当poll阶段不为空的时候，那么执行完回调函数，就继续执行下个阶段check了

- 当poll阶段为空，会一直等待poll中有其他的回调函数

- 或者当poll阶段为空的时候，如果 timer阶段的计时器到期了，或者check阶段有setImmediate等待执行的时候，会直接跳入check阶段

5).check阶段：setImmediate的回调函数

6).close阶段：执行一些关闭的函数

100.微任务和宏任务

1.nodejs把所有的异步操作代码分为了微任务代码和宏任务代码

2.nodejs会优先执行微任务代码，然后才执行宏任务代码

3.微任务：process.nextTick，Promise的then\catch\finally、queueMicrotask

4.process.nextTick一定是最先执行，其他微任务根据书写代码依次执行

5.在宏任务每次执行下一个阶段之前，都会去检查微任务队列中是否有微任务需要执行，然后才会执行下一个阶段

101.nodejs模块化的暴露和引入

- 暴露：使用module.exports.XXX=XXX:给暴露的对象扩展一个XXX方法

使用module.exports = XXX:暴露的直接就是XXX方法

exports.XXX = XXX:给暴露的对象扩展一个XXX方法

exports = XXX:错误方法不能写！！！！

- 引入：

使用require方法引入即可，如果引入的是自定义模块，则方法的参数是模块路径

102.分析module.exports和exports的区别

- 模块真正暴露出来的是module.exports指向的对象，module.exports指向的对象可以随意修改。

- exports指向的是最module.exports对象，可以直接给exports扩展属性和方法，但是如果修改了exports对象的指向（exports = XXX），则exports指向的就不是暴露的对象了，就不能暴露了

103.分析node的外层函数

● 通过arguments.callee.toString(),可以查看外层函数

● function(exports,require,module,__filename,__dirname){}

exports：指向的是暴露对象module.exports
require：引入
module：module对象
__filename：文件的绝对路径
__dirname：文件夹的绝对路径

104.谈一谈Buffer

● Buffer是一个和数组类似的对象，Buffer是专门用来保存二进制数据的。

● Buffer类在全局作用域上，在Global上，可以直接使用。

Buffer.alloc(size[,fill,encoding])：返回一个指定大小的Buffer实例，不设置fill，则默认填满0
Buffer.allocUnsafe(size)：返回一个指定Buffer实例，但是它不会被初始化，所以它可能包含敏感的数据
Buffer.from(string[,encoding])：返回一个被string的值初始化的新的Buffer实例

105.谈谈process

● process对象是一个全局变量，无需使用require()引入，但是也可以使用require()显示地访问。

process.argv：返回一个数组，其中包含当启动Node.js进程时传入的命令行参数
process.argv0：保存当Node.js启动时传入的argv[0]的原始值的只读副本，即获取nodejs目录
process.cwd()：返回Node.js进程的当前工作目录。绝对路径
process.exit([code])：退出进程

106.谈谈path.resolve方法

path.resolve([…paths])：将路径或路径片段的序列解析为绝对路径。当没有参数的时候，默认时当前文件夹所在的绝对路径。

建议参数加上__dirname。即path.resolve(__dirname,“路径”)。

107.谈一谈fs文件系统

● fs全称file system

● fs模块是Node的核心模块，直接引入即可使用 const fs = require(“fs”);。

● 文件的同步写入
fs.openSync(路径,[系统标识,[mode]])
fs.writeSync(文件描述符,写入的内容,文件编码)
fs.closeSync(文件描述符)

● 文件的异步写入

○ 异步写入：一般都有回调函数

● fs.open(path, flags[, mode], callback)
path 要打开的文件的路径
flags 对文件做操作的类型
mode 设置文件的权限，默认0666，一般我们不传（尤其在windows中）
callback 回调函数，异步方法通过回调函数返回文件的描述符（fd）,同步方法通过返回值返回。

● 文件的简单写入
fs.readFileSync(path[, options])
fs.readFile(path[, options], callback)
options 配置对象默认如下： {encoding:“utf8”,flag:“w”,mode:0666}

● 文件的简单读取
同步方法：fs.writeFileSync(file, data[, options])
异步方法：fs.writeFile(file, data[, options], callback)
data 要写入的内容，可以是一个String也可以是一个Buffer

108.谈一谈加密

crypto模块提供了加密功能，通过require(‘crypto’)来访问该模块

○ 特点：

■ 生成的密文长度固定

■ 同样的明文加密后一定获得到同样的密文

■ 密文不能逆向解析成明文

○ 使用：
const crypto = require(“crypto”);
const pass = “123456789”;
const password = crypto.createHmac(“sha512”,pass);
console.log(password.digest(“hex”))

■ digest方法可以把HMAC对象转换成16进制显示或保存

109.什么是http协议

○ 协议就是：在网络通信中，两台计算机必须准守的规则或者规定。

○ http协议就是：超文本传输协议。在万维网中，服务器向浏览器传递超文本的时候准守的协议。

○ 在客户端和服务端互传的信息称作为报文，http协议规定了报文的格式。

服务端响应的报文称作为响应报文，客户端发送的报文称作为请求报

110.nodejs搭建一个服务端，并返回一个html数据

// 引入http模块
const http = require("http");
// 创建一个服务
const server = http.createServer((req, res) => {

    // 设置响应头的数据格式
    res.setHeader("Content-Type", "text/html;charset=utf-8");
    // 返回响应
    res.end("<h1>返回一个html数据</h1>");
})
// 端口号
const port = 3000;
// 主机名/域名
const host = "192.168.20.103";
// 启动服务器
server.listen(port, host, (err) => {
    if (err) {
        console.log("服务器启动失败：" + err);
        return;
   }
    console.log(`服务器启动成功：请访问http://${host}:${port}`)
})

111.书写一个快速读写文件

// 引入fs、path模块
const fs = require("fs");
const path = require("path");

// 拼接读取路径
const readFilePath = "目标文件的绝对路径"
// 拼接写入路径
const writeFilePath = path.resolve(__dirname, "文件名")

// 创建可读流
const ws = fs.createWriteStream(writeFilePath);
// 创建可写流
const rs = fs.createReadStream(readFilePath);

// 通过pipe方法直接将可读流写入可写流中
rs.pipe(ws);

112.请求方式及解析

1.GET请求：（查）

用于请求指定的页面信息，并返回一个实体

数据会在url地址上边发送（查询字符串 queryString）

2.POST(增)

- 向指定的资源提交数据进行处理（登录注册）

- 数据会在报文体中发送

3.PUT(改)

- 更改服务器数据

- 发送文件

4.DELETE(删)

- 删除指定的数据

5.OPTIONS（预检）

- 提前检查服务器支持的请求类型

113.常见响应状态码

1XX: 正在响应

100：请求继续，请继续发送请求

101：协议切换中

2XX: 响应成功

200：请求成功

204：请求成功，但是页面不需要任何更新

206：范围请求，只请求的部分资源

3XX: 重定向

301：永久重定向

302：临时重定向

304：读取缓存

4XX: 客户端错误导致响应失败

400：请求报文中有语法错误

403: 服务器拒绝客户端访问

404：找不到资源

5XX: 服务器错误

500：服务器出现了问题

503：服务器正在忙

114.什么是TCP三次握手

● 在发送数据之前,客户端和服务端要建立连接,所谓的建立连接其实就是双方都保存有对方的信息

● TCP三次握手的意义在于:客户端和服务端都能知道对方的接收和发送能力正常

客户端向服务端发送数据包,服务端收到数据包,说明客户端的发送能力正常
服务端收到数据包之后,向客户端发送数据包,客户端接收到服务端的数据包之后,说明服务端的接收和发送能力正常
客户端继续向服务端发送数据包,服务端接收到数据包之后,说明客户端的接收能力也正常

115.什么是TCP四次挥手

● 客户端和服务端总共要发送4个数据包,保证双方都知道对方的数据发送完毕

客户端发送数据包,表示请求数据发送完毕
服务端接收到客户端释放的信号,向客户端发送数据包,表示已经接收到客户端发送的释放信号
服务端的数据发送完毕后,会主动给客户端发送数据包,表示服务端的响应数据发送完毕
客户端向服务端发送数据包,表示收到,并同意断开连接

116.从输入url到解析出页面中间经历的过程

1.DNS解析

○ 解析域名得到服务器的公网IP,从而能访问服务器

DNS缓存

浏览器缓存

计算机缓存

路由器缓存

运营商缓存

2.TCP三次握手

○ 建立连接,确保双方发送和接收能力正常

3.发送请求

4.服务器返回响应

5.渲染页面

○ 解析html生成DOM树

○ 解析css生成CSSOM树

○ 解析js,可能会对DOM和样式修改

○ 根据DOM树和CSSOM树,生成渲染书(render Tree)

○ 分层:根据层叠上下文属性,将渲染书的节点进行分型

○ 生成图层绘制指令

○ 栅格化:将图层划分为图块

○ 合成和显示

6.TCP四次挥手

○ 断开连接

117.谈一谈cookie

1.“HTTP 是一个无状态的协议”:即使同一个客户端连续两次发送请求给服务器，服务器也识别不出这是同一个客户端发送的请求。为了解决 HTTP 无状态导致的问题，后来出现了 Cookie

2.Cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据

3.Cookie作为一段一般不超过 4KB 的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于控制 Cookie 有效期、安全性、使用范围的可选属性组成

4.Cookie的设置

- 客户端发送 HTTP 请求到服务器

- 当服务器收到 HTTP 请求时，在响应头里面添加一个 Set-Cookie 字段

- 浏览器收到响应后保存下 Cookie

- 之后对该服务器每一次请求中都通过 Cookie 字段将 Cookie 信息发送给服务器。

5.一些设置：

- Expires 用于设置 Cookie 的过期时间

- Max-Age 用于设置在 Cookie 失效之前需要经过的秒数

● - HTTPOnly：设置 HTTPOnly 属性可以防止客户端脚本通过 document.cookie 等方式访问 Cookie，有助于避免 XSS 攻击。

118.谈一谈缓存

1.缓存是性能优化中简单高效的一种优化方式。

一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷

2.缓存分为强缓存和协商缓存

○ 强缓存：不会向服务器发送请求，直接从缓存中读取资源，并且显示from disk cache或from memory cache字样，强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。

■ 协商缓存：协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程

■ 描述协商缓存过程

■ 第一次：由服务器返回 If-None-Match 和 If-Modified-Since 字段通过响应头方式返回

■ 第二次：下次浏览器请求时，携带了Etag（值为上一次的If-None-Match的值）和 Last-modified（值为上一次的If-None-Since的值）发送给服务器

■ 服务器先检查Etag是否等于最新的If-None-Match的值，如果相等直接走浏览器本地缓存，不相等就返回新的资源

■ 如果没有Etag，才看Last-modified的值，检查Last-modified是否等于最新的If-None-Since的值，如果相等直接走浏览器本地缓存，不相等就返回新的资源

119.谈一谈session

1.因为 Cookie 可以通过客户端修改，而 Session 只能在服务端设置，所以安全性比 Cookie 高，一般会用于验证用户登录状态

2 Session 是基于Cookie 实现的另一种记录服务端和客户端会话状态的机制

3 Session 是存储在服务端，而 SessionId 会被存储在客户端的 Cookie 中

4 描述Session的过程

○ connect-mongo express-session

○ request.session.xxx = yyy

120正则表达式的两种创建方式案例说明

var reg = new RegExp('box', 'ig'); //第二个参数可选模式修饰符 

var reg = /box/ig; //在第二个斜杠后面加上模式修饰符

// 父组件
<A v-solt:test='{userInfo}'>
{{userInfo.username}}
</A>

  asdasd = {
    userInfo:{
        username:'111'
      }
  }
// 子组件
<template>
  <div>
    <span name="test" :userInfo="userInfo">{{ userInfo.username }}</span>
  </div>
</template>
<script>
export default {
  name: "A",
  data() {
    return {
      userInfo: {
        username: "111",
      },
    };
  },
};
</script>

务器。