前端面试题(上)

简介: 前端面试题

1. 什么是事件委托?为什么这样做?

它还有一个名字叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
为什么这样做呢?通过事件委托可以减少事件处理程序数量,这样就能大大的减少与dom的交互次数,

2. js数据类型

JS的数据类型有8种。
在ES5的时候,我们认知的数据类型确实是 6种:Number、String、Boolean、undefined、object、Null。
ES6 中新增了一种 Symbol 。这种类型的对象永不相等,即始创建的时候传入相同的值,可以解决属性名冲突的问题,做为标记。
谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。(但是很多人不把这个做为一个类型)。
JS数据类型:Object 中包含了哪几种类型?其中包含了Date、function、Array等(这三种比较常用)。

3. for in、Object.keys()区别?哪个要用于遍历 原型链上的属性?

for-in 是javaScript中最常见的迭代语句,常常用来枚举对象的属性。
某些情况下,可能按照随机顺序遍历数组元素;而Object.keys(),可以返回以对象的属性为元素的数组。
数组中属性名的顺序跟使用,for-in遍历返回的顺序是一样的。
二者遍历的数量是不同的,for-in 不单可以枚举自身属性,也可以枚举继承自原型链上的属性,Object.keys()只可以枚举自身属性。 
for-in会遍历原型链上的属性,而Object.keys不会。

4. 4.NaN == NaN 的结果是什么?为什么?

NaN == NaN  的执行结果是 false。
因为JavaScript规定,NaN表示的是非数字,但是这个非数字也是不同的,因此 NaN 不等于 NaN,两个NaN永远不可能相等。

5. 说一下你对Promise的了解?说说你对Promise的原理的理解?

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。
所谓promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。
从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。

6. Promise.all(),一个失败后,其他的还返回吗?

不会返回,promise.all()失败的时候只返回最先被reject失败状态的那个实例对象的值

7. Promise.all()、Promise.race()区别?

两者都是可以同时调用多个promise实现,Promise.all可以将多个实例组装成一个新的实例,成功的时候返回一个成功数组,失败的时候则返回最先被reject失败状态的值;
其中有一个实例不成功则返回reject.race()是赛跑的意思,也就是说Promise.race([p1, p2, p3])里面的结果哪个获取的快,就返回哪个结果,不管结果本身是成功还是失败。

8. Promise有哪些状态。

有三个状态:pending : 等待、 fullfilled(resolved) :成功、 reject: 失败

9. 简单说一下async/await的了解?(****)(请参考https://www.jianshu.com/p/fd6933ff6b81

async/await是写异步代码的新方式,它是generator的语法糖,以前的方法有回调函数和 Promise。
async/await是基于Promise实现的,它不能用于普通的回调函数。
async/await与Promise一样,是非阻塞的。
async/await使得异步代码看起来像同步代码,这正是它的魔力所在。
单一的 Promise 链并不能发现 async/await 的优势,但是,如果需要处理由多个 Promise 组成的 then 链的时候,优势就能体现出来了

10. Async&await和promise有什么区别?(参考https://www.jianshu.com/p/51f5fd21588e

(1)函数前面多了一个async关键字。await关键字只能用在async定义的函数内。async函数会隐式返回一个promise。
(2)简洁:使用async和await明显节约了不少代码,不需要.then,不需要写匿名函数处理promise的resolve的值,不需要定义多余的data变量,还避免了嵌套代码。
(3)async/await让try/catch 可以同时处理同步和异步错误。
  try/catch不能处理JSON.parse的错误,因为他在promise中。
  此时需要.catch,这样的错误处理代码非常冗余。并且,在我们的实际生产代码会更加复杂
(4)async/await能够使得代码调试更简单。

11. get、post区别?

Get 方法通过 URL 请求来传递用户的数据,将表单内各字段名称与其内容,
以成对的字符串连接,置于 action 属性所指程序的 url 后,数据都会直接显示在 url 上,就像用户点击一个链接一样;
Post 方法通过 HTTP post 机制,将表单内各字段名称与其内容放置在 HTML 表头(header)内一起传送给服务器端交由 action 属性能所指的程序处理,
该程序会通过标准输入(stdin)方式,将表单的数据读出并加以处理;
Get 方式需要使用 Request,QueryString 来取得变量的值;而 Post 方式通过RequestForm 来访问提交的内容;
Get 方式传输的数据量非常小,一般限制在 2 KB 左右,但是执行效率却比 Post 方法好;
而 Post 方式传递的数据量相对较大,它是等待服务器来读取数据,不过也有字节限制,这是为了避免对服务器用大量数据进行恶意攻击。
建议:除非你肯定你提交的数据可以一次性提交,否则请尽量用 Post 方法;
Get 方式提交数据,会带来安全问题,比如一个登陆页面,通过 Get 方式提交数据时,用户名和密码将出现在 URL 上,
如果页面可以被缓存或者其他人可以访问客户这台机器,就可以从历史记录获得该用户的帐号和密码,
所以表单提交建议使用 Post 方法;
get是从服务器上获取数据,post是向服务器传送数据。
get方式的安全性较Post方式要差些,包含机密信息的话,建议用Post数据提交方式;
在做数据查询时,建议用Get方式;而在做数据添加、修改或删除时,建议用Post方式。

12. 有10个任务,使用promise如何同时运行5个任务

可以利用Promise.all()方法来同时支行5个任务

13. 简单介绍原型链?

所有对象都有自己的原型对象(prototype)。一方面,任何一个对象,都可以充当其他对象的原型;
另一方面,由于原型对象也是对象,所以它也有自己的原型。因此,就会形成一个“原型链”(prototype chain)
最终都可以上溯到Object.prototype Object.prototype对象有没有它的原型呢?
回答Object.prototype的原型是null。null没有任何属性和方法,也没有自己的原型。因此,原型链的尽头就是null。

14. const、let、var的区别?

var 声明的变量属于函数作用域,let 和 const 声明的变量属于块级作用域;
var 存在变量提升现象,而 let 和 const 没有此类现象;
var 变量可以重复声明,而在同一个块级作用域,let 变量不能重新声明,const 变量不能修改
Var 不存在暂时性死区,而let const存在暂时性死区

15. 如果后端有3个请求,如何保证顺序?

可以使用Promise链式调用,按顺序执行;也可以使用async函数和关键字await顺序执行

16. await后面可以是一个普通的函数吗?

可以,但是其结果会转化为promise的resolve状态

17. es6的set、map介绍?

set和map都是es6新增的数据结构。其中set是一个类数组结构,值是唯一的,没有重复的值。
map类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。
如果你需要“键值对”的数据结构,Map 比 Object 更合适。

18. 数组去重除了set外,还可以怎么做?

  • filter()和indexOf()实现去重
var arr = ["apple", "banana", "pear", "apple", "orange", "orange"];
var arr2 = arr.filter(function (value, index, self) {
  return self.indexOf(value) === index;
});
console.log(arr2); //["apple", "banana", "pear", "orange"]

reduce()和includes()实现去重

let originalArray = [1, 2, 3, 4, 1, 2, 3, 4];
let uniqueArray = originalArray.reduce((unique, item) => {
 unique.includes(item) ? unique : [...unique, item];
}, []);
// uniqueArray ==== [1, 2, 3, 4];

双重for循环 + push()

var arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5];
function norepeat(arr) {
  var temp = [];
  for (var i = 0; i < arr.length; i++) {
    if (temp.indexOf(arr[i]) == -1) {
      temp.push(arr[i]);
    }
  }
  return temp;
}
var arr2 = norepeat(arr);
console.log(arr2); //[1, 23, 3, 5, 6, 7, 9, 8]

双重for循环 + splice()

var arr = [1, 3, 5, 6, 3, 5, 6, 3, 7, 9, 23, 23];
function a(arr) {
  for (var i = 0; i < arr.length - 1; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i] == arr[j]) {
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}
var arr1 = a(arr);
console.log(arr1);

19. es6相关的知识知道哪些?

有很多,如Promise async函数 箭头函数 Symbol新的基本数据类型,class类等等
相关文章
|
3月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
24天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
60 1
|
2月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
3月前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
1月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
3月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
52 2
|
3月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
39 0
|
3月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题
|
3月前
|
存储 JavaScript 前端开发
|
3月前
|
Web App开发 存储 缓存