前端必备基础面试题

Posted 2021-07-04 stay_少年与梦

文章目录

• • HTML和css
  • • • 1.src和href引入图片的区别 ？
      • 2.页面元素隐藏方式和各自特点
      • 3.用过的盒模型
  • javascript
  • • • js基本数据类型是什么？如何判断该类型数据？ 数据类型强制转化和隐式转化的区别？
      • 如何判断一个对象是否具备某个属性？如何判断对象为空对象？
      • 判断数据类型有几种方法
      • `==`和`===`有什么区别
      • let const 和 var 的区别 ？
      • 箭头函数和普通函数的区别 ？
      • 解释什么叫回调地狱 ，以及怎么解决回调地狱 ？
      • 什么情况下会导致跨域？怎么解决
      • 什么是作用域，什么是作用域链？
      • 说明原生ajax的实现步骤？
      • 浅拷贝深拷贝
      • 什么是闭包？闭包的作用？闭包的应用？
      • 什么是内存泄漏
      • 为什么会导致的内存泄漏
      • 垃圾回收机制都有哪些策略？

---

html和css

1.src和href引入图片的区别 ？

	href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
	在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script、img 、iframe；

2.页面元素隐藏方式和各自特点

第一种：display属性为none，效果：元素不显示，不占位
第二种：设置css 中visibility属性为hidden，效果：元素不显示，但占位

3.用过的盒模型

标准盒模型（W3C盒子模型），设置的width或height是对 实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+border+margin
怪异盒模型（IE盒子模型），设置的width或height是对 实际内容（content）+内边距（padding）+边框（border）之和的width和height进行设置的，其盒模型的width（height）=设置的width（height）+外边距margin
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型

javascript

js基本数据类型是什么？如何判断该类型数据？ 数据类型强制转化和隐式转化的区别？

基本数据类型： Number、String、 boolean、 Underfind、Null、Object

使用typeof 查看该类型

隐式转换都是以强制转换为基础的。强制转换主要指使用一些特定函数，手动将各种类型的值，转换为其对应的类型。

如何判断一个对象是否具备某个属性？如何判断对象为空对象？

使用“!==”进行判断
使用in操作符，如果返回ture则存在
hasOwnProperty()
propertyIsEnumerable() 是hasOwnProperty() 的增强版

使用JSON.stringify把对象转为字符串,再判断字符串是否等于"{}"

判断数据类型有几种方法

1.typeof

缺点：typeof null的值为Object，无法分辨是null还是Object
2.instanceof

缺点：只能判断对象是否存在于目标对象的原型链上
3.constructor

4.Object.prototype.toString.call()

==和===有什么区别

==是非严格意义上的相等，

• 两边类型相同，比较大小

• 两边类型不同，根据下方，再进一步进行比较

  • Null == Undefined ->true
  • String == Number ->先将String转为Number，再去比较大小
  • Boolean == Number ->现将Boolean转为Number，再去进行比较
  • Object == String，Number，Symbol -> Object 转化为原始类型

===是严格意义上的相等，会比较两边的数据类型和值大小

• 数据类型不同返回false
• 数据类型相同，但值大小不同，返回false。

let const 和 var 的区别 ？

1. var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
2. let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
3. const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

箭头函数和普通函数的区别 ？

• 箭头函数：不能当做构造函数 相当于匿名函数，不可以使用new命令，this永远指向上下文的this无法改变其指向。
• 普通函数：this指向调用它的那个对象。

解释什么叫回调地狱 ，以及怎么解决回调地狱 ？

回调地狱就是函数作为参数层层嵌套.
解决方法：通过promise链式调用的方式

function buildCatList(list, returnVal) {
    return new Promise(function (resolve, reject) {
        setTimeout(function (name) {
            var catList = list === '' ? name : list + ',' + name
            resolve(catList)
        }, 200, returnVal)
    })
}

buildCatList('', 'Panther').then(function (res) {
	return buildCatList(res, 'Janguar')
}).then(function (res) {
	return buildCatList(res, 'Lion')
}).then(function (res) {
	console.log(res)
})

什么情况下会导致跨域？怎么解决

不同源策略时会导致跨域。
同源策略指同协议，同域名，同端口，违反其中一项就会导致跨域

解决方法：
正向代理和反向代理

1. jsonp：原理就是利用了script标签src属性外联引入文件不受同源策略的限制，在页面中动态插入了script，script标签的src属性就是后端api接口的地址，并且以get的方式将前端回调处理函数名称告诉后端，后端在响应请求时会将回调返还，并且将数据以参数的形式传递回去

2. document.domin:两个域名必须属于同一基础域名，并且所有的协议端口完全一致，否则无法跨域；例：beijing.58.com
   tianjing.58.com ；

3. iframe、hash ：父页面向子页面传输数据：将要传递的数据添加到子页面的url的hash值上，子页面通过location.hash
   并添加定时器实时地动态父页面传来的数据；子页面向父页面传输数据：利用window.name的特性，及页面重新加载但当前页的name值不变，即使换了一个页面。需要三个页面配合使用。一个应用页面，一个数据页面，一个代理文件。代理文件一般是一个没有任何内容的html页面，需要和应用页面在同一域下。将数据页面的窗口换成代理页面，代理页面通过window.name获取数据页面留下的数据，应用页面再访问和它同源的代理页面获取数据，就完成了跨域。

4. CORS(Cross-Origin-Resource-Sharing)：在服务器端设置的,不需要客户端进行操作。Cors背后的思想是使用自定义的http头部让浏览器和服务器进行沟通，从而决定请求或响应是否应该成功，还是应该失败。浏览器向服务器发送请求，如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部中回发相同的源信息（如果是公共资源，可以回发*）;如果没有这个头部，或者有这个头部但信息源不匹配，浏览器就会驳回请求。正常情况下，浏览器会处理请求。（请求和响应都不包含cookie信息）；

5. 服务器跨域，服务器中转代理：前端向本地服务器发送请求，本地服务器代替前端再向服务器接口发送请求进行服务器间通信，本地服务器是个中转站的角色，再将响应的数据返回给前端。

什么是作用域，什么是作用域链？

• 规定变量和函数的可使用范围称作作用域。
• 每个函数都有一个作用域链，查找变量或者函数时，需要从局部作用域到全局作用域依次查找，这些作用域的集合称作作用域链。

说明原生ajax的实现步骤？

1创建对象
2设置请求方式和请求地址
3发送请求
4监听状态变化
5返回数据

var xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function(){
                if(xhr.readyState != 4)return;
                if(xhr.status == 200 && xhr.readyState == 4){
                    console.log(xhr.responseText)
                }else{
                    console.log("请求失败")
                }
            }
            xhr.open("get","http://localhost:3030")
            xhr.send()

浅拷贝深拷贝

// ----------------------------------------------浅拷贝
// 只是把对象的属性和属性值拷贝到另一个对象中
var obj1 = {
  a: {
    a1: { a2: 1 },
    a10: { a11: 123, a111: { a1111: 123123 } }
  },
  b: 123,
  c: "123"
}
// 方式1
function shallowClone1(o) {
  let obj = {}

  for (let i in o) {
    obj[i] = o[i]
  }
  return obj
}

// 方式2
var shallowObj2 = { ...obj1 }

// 方式3
var shallowObj3 = Object.assign({}, obj1)

let shallowObj = shallowClone1(obj1);

shallowObj.a.a1 = 999
shallowObj.b = true

console.log(obj1);  //第一层的没有被改变，一层以下就被改变了

// -------------------深拷贝

function deepClone(o) {
  let obj = {}
  for (var i in o) {
    // if(o.hasOwnProperty(i)){
    if (typeof o[i] === "object") {
      obj[i] = deepClone(o[i])
    } else {
      obj[i] = o[i]
    }
    // }
  }
  return obj
}


var myObj = {
  a: {
    a1: { a2: 1 },
    a10: { a11: 123, a111: { a1111: 123123 } }
  },
  b: 123,
  c: "123"
}

var deepObj1 = deepClone(myObj)
deepObj1.a.a1 = 999
deepObj1.b = false
console.log(myObj);

什么是闭包？闭包的作用？闭包的应用？

闭包：函数执行，形成私有的执行上下文，使内部私有变量不受外界干扰，起到保护和保存的作用。

作用：

• 保护
  • 避免命名冲突
• 保存
  • 解决循环绑定引发的索引问题

特点：变量不会销毁
可以使用函数内部的变量，使变量不会被垃圾回收机制回收

应用：

• 设计模式中的单例模式
• for循环中的保留i的操作
• 防抖和节流

缺点
会出现内存泄漏的问题

什么是内存泄漏

内存泄露是指不再用的内存没有被及时释放出来，导致该段内存无法被使用就是内存泄漏

为什么会导致的内存泄漏

内存泄漏指我们无法在通过js访问某个对象，而垃圾回收机制却认为该对象还在被引用，因此垃圾回收机制不会释放该对象，导致该块内存永远无法释放，积少成多，系统会越来越卡以至于崩溃。

垃圾回收机制都有哪些策略？

• 标记清除法
  • 垃圾回收机制获取根并标记他们，然后访问并标记所有来自它们的引用，然后在访问这些对象并标记 它们的引用…如此递进结束后若发现有没有标记的（不可达的）进行删除，进入执行环境的不能进行删除
• 引用计数法
  • 当声明一个变量并给该变量赋值一个引用类型的值时候，该值的计数+1，当该值赋值给另一个变量的时候，该计数+1，当该值被其他值取代的时候，该计数-1，当计数变为0的时候，说明无法访问该值了，垃圾回收机制清除该对象