2021-04-20

30道大概率会考到的题( 1-5题)

1，const、let、var区别

主要从以下几个方面区分：

• 作用域不同(是否含有块级元素)
• 是否存在暂时性死区
• 是否存在变量提升
• 能否重复声明
• 变量能否被修改

1，作用域不同

块级作用域：声明的变量只在该代码块作用域内有效

var没有块级作用域，let、const有块级作用域

for (var i = 0; i < 5; i++) {
  console.log(i)
}
console.log('外层')
console.log(i)

image

以上代码var改为let

for (let i = 0; i < 5; i++) {
  console.log(i)
}
console.log('外层')
console.log(i)

image

2，暂时性死区：只要块级作用域有let、const命令，他们所声明的变量就绑定这个区域，不受外部影响

var a = 10
if (true) {
  console.log(a)
  var a = 20
}
// 10

以上代码改为以下let或const均报错:

var a = 10
if (true) {
  console.log(a)
  let a = 20
}
或
var a = 10
if (true) {
  console.log(a)
  const a = 20
}
// 报错：Uncaught ReferenceError: Cannot access 'a' before initialization

3，是否存在变量提升

变量提升：变量在声明之前可以使用

var声明的变量存在变量提升，let、const不存在变量提升

console.log(a)
var a = 10
// undefined

console.log(a)
let a = 10 || const a = 10
// 报错：Uncaught ReferenceError: Cannot access 'a' before initialization

4, 能否重复声明

var声明的可以重复声明, let const声明的不可以重复声明

var a = 10
var a = 20
console.log(a) // 20

var a = 10
let a = 20 || const a = 20
console.log(a)  // 报错：Uncaught SyntaxError: Identifier 'a' has already been declared

5, 变量能否被修改

var、let声明的变量可以被修改，const声明的常量不可修改

var a = 10  || let a = 10
a = 20
console.log(a)  // 20

const a = 10
a = 20
console.log(a)  // 报错：Uncaught TypeError: Assignment to constant variable.

2，rem、em区别

rem是基于html元素的字体大小决定的

em是相对父元素继承来的字体大小 em指的是当前元素的字体大小，如果当前元素的字体大小没有设置的话，就回继承父元素的字体大小

rem出现是为了解决em缺点，em是相对父元素的字体大小，当父元素字体大小改变时，需重新计算

rem可以解决这样的问题，rem只相对html元素

<div class="rem"></div>
<div class="em"></div>

.rem {
    font-size: 100px;
    width: 3rem;
    height: 3rem;
    background-color: aqua;
  }

  .em {
    font-size: 100px;
    width: 3em;
    height: 3em;
    background-color: aquamarine;
  }

image

3，js栈、堆内存

基本数据类型存在栈内存中：因为占用空间小，大小固定。基本数据类型：string、number、boolean、null、undefined、symbol

引用数据类型在栈中存储了指针，该指针指向堆内存中的地址，当解析器寻找引用值时，会先检索其在栈中的指针，取到指针后从堆中获取实体

let a1 = 1
let a2 = 'string'
let a3 = null
let b = {
  m: 20
}
let c = [1, 2, 3]

image

基本数据类型的复制

let a = 20
let b = a
b = 30
a // => 20
b // => 30

a、b 都是基本类型，它们的值是存储在栈内存中的，a、b 分别有各自独立的栈空间， 所以修改了 b 的值以后，a 的值并不会发生变化。

image

引用数据类型的复制:

引用数据类型变量大小不固定，所以把他们分配给堆中，让他们申请空间的时候自己确定大小，这样把它们分开存储能够使得程序运行起来占用的内存最小。

栈内存由于它的特点，所以它的系统效率较高。

堆内存需要分配空间和地址，还要把地址存到栈中，所以效率低于栈。

let m = {
  a: 10,
  b: 20
}
let n = m
n.a = 15
console.log(m.a) // => 15

image

栈内存和堆内存的垃圾回收

栈内存中变量一般在它的当前执行环境结束就会被销毁被垃圾回收机制回收， 
而堆内存中的变量则不会，因为不确定其他的地方是不是还有一些对它的引用。
堆内存中的变量只有在所有对它的引用都结束的时候才会被回收.

4, 事件委托，事件冒泡和事件捕获，阻止事件冒泡

事件委托(事件代理)，把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务，事件代理的原理是DOM元素的事件冒泡。

事件冒泡和事件捕获分别是由微软和网景公司提出的，这两个概念都是为了解决页面中的事件流(事件发生顺序)的问题。

<div id="div1">
  <div id="div2">
    <div id="div3"></div>
  </div>
</div>

事件冒泡

上面的例子，三个元素的执行顺序：div3 -> div2 -> div1

image

点击div3: div3 div2 div1

点击div2: div2 div1

点击div1: div1

事件冒泡，事件按照从最特定的事件目标到最不特定的事件目标。

可以想象成把一颗石头投入到水中，泡泡会一直从水底冒出水面。

事件捕获

事件捕获与事件冒泡相反，事件从最外层开始发生，直到最具体的元素，可以想象成警察逮捕屋子里的小偷，就要从外面一层层的进入到屋子内。

上面的例子，三个元素的执行顺序是：div1 -> div2 -> div3

image

点击div3: div1 div2 div3

点击div2: div1 div2

点击div1: div1

let dv1 = document.querySelector('#div1')
let dv2 = document.querySelector('#div2')
let dv3 = document.querySelector('#div3')
dv1.addEventListener('click', f1, true)
dv2.addEventListener('click', f1, true)
dv3.addEventListener('click', f1, true)

function f1() {
  console.log(this.id)
}

addEventListener语法

element.addEventListener(event, function, useCapture)
三个参数分别为：没有绑定的事件类型、事件处理函数、控制事件阶段

第3个参数Boolean值，true表示在事件捕获阶段调用事件处理函数，false表示在事件冒泡阶段调用事件处理函数

可以使用removeEventListener事件移除
ele.removeEventListener('click', f1, true)

阻止事件冒泡

1，e.stopPropagation()

let dv1 = document.querySelector('#div1')
let dv2 = document.querySelector('#div2')
let dv3 = document.querySelector('#div3')

dv1.onclick = function () {
  console.log(this.id)  // div1
}
dv2.onclick = function () {
  console.log(this.id)  // div2 div1
}
dv3.onclick = function (e) {
  console.log(this.id)  // div3
  e.stopPropagation()
}

2, window.event.cancelBubble = true (谷歌、IE浏览器兼容，不兼容火狐浏览器)

let dv1 = document.querySelector('#div1')
let dv2 = document.querySelector('#div2')
let dv3 = document.querySelector('#div3')

dv1.onclick = function () {
  console.log(this.id)  // div1
}
dv2.onclick = function () {
  console.log(this.id)  // div2 div1
}
dv3.onclick = function (e) {
  console.log(this.id)  // div3
  window.event.cancelBubble = true
}

5, 为什么先加载css后加载js

先加载css后加载js，因为css加载会阻塞浏览器渲染，为了打开网页白屏时间缩短，会优先选择加载css；后加载js是因为js中可能会修改DOM元素，js加载会阻塞浏览器解析html，造成获取不到DOM的情况。

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="css/*.css" rel="external nofollow" >
  <script src="js/*.js></script>
</head>

DOM文档的加载顺序是由上而下的顺序加载

1,DOM加载到link标签

css文件的加载是与DOM的加载并行的，也就是说，css在加载时Dom还在继续加载构建，而过程中遇到的css样式或者img，则会向服务器发送一个请求，待资源返回后，将其添加到dom中的相对应位置中；

2,DOM加载到script标签

由于js文件不会与DOM并行加载，因此需要等待js整个文件加载完之后才能继续DOM的加载，倘若js脚本文件过大，则可能导致浏览器页面显示滞后，出现“假死”状态，这种效应称之为“阻塞效应”；会导致出现非常不好的用户体验；

而这个特性也是为什么在js文件中开头需要$(document).ready(function(){})或者（function(){}）或者window.onload,即是让DOM文档加载完成之后才执行js文件，这样才不会出现查找不到DOM节点等问题；

js阻塞其他资源的加载的原因是：浏览器为了防止js修改DOM树，需要重新构建DOM树的情况出现；