前端必备基础面试题

Posted stay_少年与梦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端必备基础面试题相关的知识,希望对你有一定的参考价值。


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的时候,说明无法访问该值了,垃圾回收机制清除该对象

以上是关于前端必备基础面试题的主要内容,如果未能解决你的问题,请参考以下文章

前端必备基础面试题

JS万字整理JavaScript相关基础技术面试题总结 - 前端面试必备 - 基础知识总结 - 秋招冲鸭

CSS面试题总结 - 基础知识总结 - 复习专用 - 前端面试必备 - 吐血整理

前端面试题之手写promise

2021前端面试必备题+答案

前端面试官必备-面试宝典HTML与CSS