!
也想出现在这里? 联系我们
广告区块

2022最全最新前端面试题(附加解答)

JS

1、说一下innerHTML 与 innerText的作用与区别?

  1. 作用:都可以获取或者设置元素的内容
  2. 区别:innerHTML可以解析内容中的html标签
  3. innerText不能解析内容中的html标签

2、JavaScript 由以下三部分组成:

  1. ECMAScript(语法部分):JavaScript 语言基础
  2. DOM(文档对象模型):规定了访问 HTML 和 XML 的方法
  3. BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法

3、介绍 JS 有哪些内置对象?

  1. 数据封装类对象:Object、Array、Boolean、Number、String
  2. 其他对象:Function、Arguments、Math、Date、RegExp、Error
  3. ES6 新增对象:Symbol、Map、Set、Promises、Proxy、Reflect

4、JS 的基本数据类型和引用数据类型

  1. 基本(原始)数据类型: number、string、boolean、undefined, null, symbol
  2. 引用数据类型: Object、Function、Array

5、说几条写 JavaScript 书写的基本规范?

  1. 代码一定要正确缩进,建议使用”二个或者四个空格”缩进
  2. 语句结束使用分号;
  3. 规范定义 JSON 对象,补全双引号
  4. 用{}和[]声明对象和数组
  5. 变量和函数在使用前进行声明
  6. 以大写字母开头命名构造函数,全大写命名常量
  7. 代码段使用花括号{}包裹
  8. 还有要书写正确的标识标签

6、什么是标识符?

  • 在JS中,可以自定义命名的东西都属性标识符;
  • 比如变量名,函数名,参数名都是标识符

7、DOM 元素e的 e.getAttribute(propName)和 e.propName 有什么区别和联系

  1. e.getAttribute:获取的是标签上属性
  2. 可以通过e.setAttribute(propName, propValue)设置标签上属性
  3. e.propName:获取的是元素对象上属性

8、offsetWidth/offsetHeight,clientWidth/clientHeight,scrollWidth/scrollHeight 的区别?

  1. offsetWidth/offsetHeight 返回值包含 content + padding + border + 包含滚动条,效果与 e.getBoundingClientRect()相同
  2. clientWidth/clientHeight 返回值只包含 content + padding,如果有滚动条,也不包含滚动条
  3. scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸

9、检测浏览器版本版本有哪些方式?

  1. 根据 navigator.userAgent // UA.toLowerCase().indexOf(‘chrome’)

10、说一下元素节点、文本节点、属性节点的nodeType、nodeName、nodeValue分别是什么

  1. nodeType(节点类型) nodeName(节点名称) nodeValue(节点的值)
  2. 元素节点: 1 元素标签名 null(没有值)
  3. 属性节点: 2 属性名 属性值
  4. 文本节点: 3 text 节点内容

11、=====的区别

  1. 双等号判断时,只需要值相等
  2. 三等号判断时,需要值与类型都相等

12、函数声明与函数表达式的区别?

  1. 数声明就是直接通过function进行声明函数,例如:function show(){}可以在声明函数之前调用0函

13、数组方法pop() push() unshift() shift()

  1. pop()尾部删除
  2. push()尾部添加
  3. unshift()头部添加
  4. shift()头部删除

14、ajax请求的时候get 和post方式的区别

(1)get请求

参数要跟在url后面
安全性不高
传输数据比较小,但速度快
一般用于获取,删除

(2)post请求

参数会放在请求体中,
安全性相对高些
传输数据大,但相对速度慢些
post一般用于修改或者添加

15、解释什么是Json:

  1. json是一种轻量级的数据交换格式,一般用于数据传递
  2. 里边只允许出现双引号
  3. JSON的语法表示三种类型值,简单值(字符串,数值,布尔值,null), 数组,对象

16、dom事件委托什么原理,有什么优缺点
事件委托原理: 事件冒泡机制(把子元素的事件行为 委托给 父级元素执行优点)

优点:
1. 可以大量节省内存占用,减少事件注册
2. 可以实现当新增子对象时,无需再对其进行事件绑定

缺点:
如果把所有事件都用事件代理,可能会出现事件误判

17、Javascript的事件流模型都有什么?

  1. “事件冒泡”:事件逐级向上传播
  2. “事件捕捉”:事件逐级向下传播,一直到最具体的
  3. “DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡

18、split() join() 的区别

  1. split():以指定的字符分割字符串返回一个数组,字符串方法
  2. join(): 以指定的字符连接数组中元素返回一个字符串,数组方法

19、如何阻止事件冒泡

  1. ev.stopPropagation();

20、如何阻止默认事件

  • 答案:return false 或者 ev.prevent Default();

21、JavaScript中如何检测一个变量是一个 String 类型?

  1. typeof 变量
  2. 变量.constructor === String
  3. Object.prototype.toString.call(变量) // 推荐使用

22、javascript 的 typeof 返回哪些数据类型(至少六个)检测类型如下:

  1. string、 number、 boolean 、undefined 、object 、function 、symbol(ES6之后新增的类型)

23、如何判断变量为NaN

  • 通过isNaN()判断
  • isNaN(NaN) // 返回true
  • isNaN(1000) // 返回false
  • isNaN(‘小明’) // 返回true(判断前会转换成number类型)
  • isNaN(‘101’) // 返回false

24、什么是JS变量提升 与 块级作用域

  • 变量提升:就是会把变量定义提升到当前作用域的最上面
  • 块级作用域:JS 中作用域有:全局作用域、函数作用域。没有块作用域的概念。ES6中新增了块级作用域。块作用域由 { } 包括,if 语句和 for 语句里面的{ }也属于块作用域。在外边不能调用块作用域里边定义的变量

25、null / undefined 的区别

  • null值:属于null类型,代表“空值”,代表一个空对象指针;使用typeof运算得到 “object”,所以你可以认为它是一个特殊的对象值。
  • undefined值:属于undefined类型,当一个声明的变量未初始化赋值时,得到的就是undefined。使用typeof运算得到“undefined”,

26、foo = foo || bar,这行代码是什么意思?为什么要这样写?

  • 如果foo转为false, 则返回bar;否则直接返回foo
  • 逻辑或:如果第一个值为true,直接返回第一个值;否则直接返回第二个值
  • 逻辑与:如果第一个值为false,直接返回第一个值;否则返回第二个值、

27、target 和 currentTarget 区别

  • 都是事件对象上的属性
  • event.target:返回触发事件的元素
  • event.currentTarget:返回绑定事件的元素(相当于事件中this)

28、prototype 和 proto 的关系是什么

  • prototype: 所有函数都会有一个prototype属性, 它就是函数的原型对象
  • proto: 所有实例对象上都会有一个proto属性, 它等同于函数的原型对象

(补充说明)
原型链:因为所有实例对象都原型对象,原型对象也个对象,
所以它也自己原型对象(这样形成原型链)

答案:

  • 所有的对象都拥有proto属性,它指向对象构造函数的 prototype 属性
  • 所有的函数都同时拥有proto和 prototype 属性
  • 函数的proto指向自己的函数实现 函数的 protytpe 是一个对象(原型)
  • 所以函数的 prototype 也有proto属性 指向 Object.prototype
  • Object.prototype.proto指向 null

29、请说一下你常用的数组方法(至少七个)
答案:

  • 1)Array.push():此方法是在数组的后面添加新加元素,此方法改变了数组的长度:
  • 2)Array.pop():此方法在数组后面删除最后一个元素,并返回数组,此方法改变了数组的长度:
  • 3) Array.shift():此方法在数组后面删除第一个元素,并返回数组,此方法改变了数组的长度:
  • 4) Array.unshift():此方法是将一个或多个元素添加到数组的开头,并返回新数组的长度:
  • 5)Array.isArray():判断一个对象是不是数组,返回的是布尔值
  • 6) Array.concat():此方法是一个可以将多个数组拼接成一个数组:
  • 7)Array.toString() : 把数组作为字符串返回
  • 8) Array.join() :以指定字符拼接成字符串,然后返回
  • 9) Array.splice:(开始位置, 删除的个数,元素)
  • 10)Array.map():此方法是将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组
  • 11)Array.forEach():此方法是将数组中的每个元素执行传进提供的函数,没有返回值,直接改变原数组,注意和 map 方法区分
  • 12)Array.filter():此方法是将所有元素进行判断,将满足条件的元素作为一个新的数组返回
  • 13)Array.every():此方法是将所有元素进行判断返回一个布尔值,如果所有元素都满足判断条件,则返回 true,否则为 false:
  • 14)Array.some():此方法是将所有元素进行判断返回一个布尔值,如果存在元素都满足判断条件,则返回 true,若所有元素都不满足判断条件,则返回 false:
  • 15)Array.reduce():此方法是所有元素调用返回函数,返回值为最后结果,传入的值必须是函数类型:

与之相对应的还有一个 Array.reduceRight() 方法,区别是这个是从右向左操作

30、请说一下你常用的字符串方法(至少七个)

  • trim(): 去首尾空格
  • split(sep,limit):将字符串分割为字符数组,limit 为从头开始执行分割的最大数量
  • indexOf(str):返回 str 在父串中第一次出现的位置,若没有则返回-1
  • lastIndexOf(str):返回 str 在父串中最后一次出现的位置,若没有则返回-1
  • substr(start,length):从字符索引 start 的位置开始,返回长度为 length 的子串
  • substring(from,to):返回字符索引在 from 和 to(不含)之间的子串
  • slice(start,end):返回字符索引在 start 和 end(不含)之间的子串
  • toLowerCase():将字符串转换为小写
  • toUpperCase():将字符串转换为大写
  • replace(str1,str2):str1 也可以为正则表达式,用 str2 替换 str1
  • concat(str1,str2,…):连接多个字符串,返回连接后的字符串的副本
  • match(regex):搜索字符串,并返回正则表达式的所有匹配
  • charAt(index):返回指定索引处的字符串
  • charCodeAt(index):返回指定索引处的字符的 Unicode 的值
  • fromCharCode():将 Unicode 值转换成实际的字符串
  • search(regex):基于正则表达式搜索字符串,并返回第一个匹配的位置
  • valueOf():返回原始字符串值

31、原型和原型链

  • 原型:portoType这个属性就是函数的原型
  • 原型链:1.所有对象都有原型,而原型本身就是对象,所以原型也有自己的原型对象,就形成原型链
  • 如果对象本身没有属性,则就会去原型链上去找
  • Object原型对象的原型值为null

32、new操作符具体做了什么?

  1. 在内存创建一个新对象
  2. 把构造函数中this指向新建的对象
  3. 会在新对象上添加一个__proto__属性,指向函数的原型对象prototype
  4. 判断函数返回值,如果值是引用类型就直接返回值;否则返回this(创建的新对象)

33、说下什么是IIFE函数

  • IIFE(立即调用函数表达式)是一个在定义时就会立即执行的函数。

34、浅拷贝与深拷贝有何区别?如何实现?

  • 浅拷贝:拷贝的是原对象的内存地址
  • 深拷贝:在内存中把原对象复制一份
  • 浅拷贝的实现方式有:

(1)直接变量赋值

(2)Object.assign();但目标对象只有一层的时候,是深拷贝;

(3)扩展运算符(…);目标对象只有一层的时候,是深拷贝;

深拷贝就是在拷贝数据的时候,将数据的所有引用结构都拷贝一份。

  • 深拷贝的实现方式有:

(1)结合使用JSON.parse()和JSON.stringify()方法。

(2)手写遍历递归赋值;

35、字符串截取方法substr、 substring、 slice三者的区别

  • substr(n,m):截取的是字符串中索引为n开始的,并且截取m位
  • substring(n,m):从索引为n的位置开始截取,截取到索引为m的位置但是不包含索引为m这一项
  • slice(n,m):和substring一样,但是他可以支持负数索引

36、函数柯里化

概念:把一个接收多个参数的函数变成接收单一参数 并且返回能够接收新参数的函数;比如:

  1. add(1)(2)(3)(4) = 10;
  2. function add(num){
  3. var sum=num;
  4. var fn=function(v){
  5. sum+=v;
  6. return fn
  7. };
  8. fn.toString=function(){
  9. return sum
  10. };
  11. return fn
  12. }
  13. console.log(add(1)(2)(3)(4)) // 10

37、判断Array类型的几种方式0

  1. 1、[ ] instanceof Array
  2. 2、[ ].constructor === Array
  3. 3Object.prototype.toString.call([]) === '[object Array]'
  4. 4Array.isArray([])

38.this指向的各种情况都有什么?

  1. 全局作用域中的函数:非严格模式下其内部this指向window
  2. 对象内部的函数:其内部this指向对象本身:
  3. 构造函数:其内部this指向生成的实例:
  4. 由apply、call、bind改造的函数:其this指向第一个参数:
  5. 箭头函数:箭头函数没有自己的this,看其外层的是否有函数,如果有,外层函数的this就是内部箭头函数的this,如果没有,则this是window。(函数定义时的this,而不是调用时this)

39.什么是AJAX?如何实现?

  • ajax是一种能够实现网页局部刷新的技术,可以使网页异步刷新。
  • ajax的实现主要包括四个步骤:

(1)创建核心对象XMLhttpRequest;

(2)利用open方法打开与服务器的连接;

(3)利用send方法发送请求;(”POST”请求时,还需额外设置请求头)

(4)监听服务器响应,接收返回值。

40.什么是高阶函数?

  • 高阶函数是对其他函数进行操作的函数;
  • 高阶函数就是一个接收函数作为参数或将函数作为输出返回的函数。
  1. 例如,Array.prototype.map,Array.prototype.filter 和Array.prototype.reduce 是语言中内置的一些高阶函数。

41、描述浏览器的渲染过程?,DOM树和渲染树的区别?

  • 浏览器的渲染过程:
  1. 解析 HTML 构建 DOM(DOM树),并行请求 css/image/js
  2. CSS 文件下载完成,开始构建 CSSOM(CSS树)
  3. CSSOM 构建结束后 和 DOM 一起生成 Render Tree(渲染树)
  4. 布局(Layout):计算出每个节点在屏幕中的位置
  5. 显示(Painting):通过显卡把页面画到屏幕上
  • DOM 树 和 渲染树 的区别:
  1. DOM 树与 HTML 标签一一对应,包括 head 和隐藏元素
  2. 渲染树不包括 head 和隐藏元素,大段文本的每一个行都是独立节点,每一个节点都有对应的 css 属性

42、Javascript 如何实现继承?

  • 实例继承:将子构造函数的 prototype 指向父构造函数的一个实例
  • 原型继承:将子构造函数的 prototype 指向父构造函数的 prototype
  • 构造函数绑定:使用 call 或 apply 方法,将父对象的构造函数绑定在子对象上
  • 拷贝继承:如果把父对象的所有属性和方法,拷贝进子对象
  • ES6 语法 extends:class ColorPoint extends Point {}

43、Javascript 作用域链?

  • 如果当前作用域没有找到属性或方法,会向上层作用域查找,
    直至全局函数,这种形式就是作用域链

44、eval是做什么的?
eval 的功能是把对应的字符串解析成 JS 代码并运行

  • 应该避免使用 eval,不安全,非常耗性能(先解析成 js 语句,再执行)
  • 由 JSON 字符串转换为 JSON 对象的时候可以用 eval(‘(‘+ str +’)’);

45、js延迟加载的方式有哪些?
动态创建 DOM 方式(用得最多)、defer 和 async标签属性

46、defer 和 async区别

  • defer 并行加载 js 文件,会按照页面上 script 标签的顺序执行
  • async 并行加载 js 文件,下载完成立即执行,不会按照页面上 script 标签的顺序执行

47、同步和异步的区别?

  • 同步: 下面代码会等待上面 同步代码执行完毕
  • 异步: 下面代码不会等待上面异步代码执行完毕
  • 同步:浏览器访问服务器请求,用户看得到页面刷新,重新发请求,等请求完,页面刷新,
    新内容出现,用户看到新内容,进行下一步操作
  • 异步:浏览器访问服务器请求,用户正常操作,浏览器后端进行请求。
    等请求完,页面不刷新,新内容也会出现,用户看到新内容

48、documen.write 和 innerHTML 的区别

  • document.write 只能重绘整个页面
  • innerHTML 可以重绘页面的某一部分

49、说说你对闭包的理解
闭包有三个特性:

  • 函数嵌套函数
  • 函数内部可以引用外部的参数和变量
  • 参数和变量不会被垃圾回收机制回收,会永远留驻在内存中

使用闭包主要是为了设计私有的方法和变量。
优点:是可以避免全局变量的污染,

缺点:是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。

50、 把 放在

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
有新私信 私信列表
搜索