JavaScript必看的10道面试题总结(推荐)

1.this指向

1.谁调用指向谁

例:

  function foo(){
        console.log("this",this);
      }
      new foo();

2.全局指向window

例:

 function foo(){
        console.log("this",this);
 }
 foo();

3.构造函数的this指向构造函数实例

4.call/apply/bind 强制改变this指向

5.箭头函数的this始终指向父级上下文

2.事件模型:事件委托、代理?如何让事件先冒泡后捕获

事件委托:又名事件代理。事件委托就是利用事件冒泡,就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡,那么委托也就没法实现了。

三个参数:事件名、事件的方法,是捕获还是冒泡

先冒泡后捕获

给一个元素绑定两个addEventListener,其中一个第三个参数设置为false(即冒泡),另一个第三个参数设置为true(即捕获),调整它们的代码顺序,将设置为false的监听事件放在设置为true的监听事件前面即可。

3.对象和面向对象

对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性

面向对象是一种编程思想(万物皆对象)与之对应的是面向过程(类:类的继承(子类继承父类的方法和属性)、封装(核心是低耦合高内聚)、多态(重载和重写)),js是一门面向对象的语言;

* js本身就是基于面向对象构建出来的(例如:JS中有很多内置类, Array, Object, Function, String; 像Promise就是ES6中新增的一个内置类, 我们可以基于new Promise来创建一个实例, 管理异编程),

* 一般我们平时用的VUE/REACT/JQUERY也都是基于面向对象构建出来,他们都是类,平时开发的时候都是创建他们的实例来操作.

4.for···in和for···of的区别

1、推荐在循环对象属性的时候,使用for…in,在遍历数组的时候使用for…of。

2、for…in 循环出的是 key,for…of 循环出的是 value

3、for…of 不能循环普通的对象,需要通过Object.keys()来强制使用

5.查找数组重复项

查找该元素首次出现的位置和最后出现的位置下标是否相同,同时判断新数组中是否不存在该元素,如果都满足则添加进新数组中去。

ES6-set

使用ES6中的set是最简单的去重方法

var arr  = [1,1,'true','true',true,true,15,15,false,false, undefined,
undefined, null,null, NaN,NaN,'NaN', 0, 0, 'a', 'a',{},{}];

function arr_unique1(arr){
return  [...new Set(arr)];
//或者
//return  Array.from(new Set(arr));
}
arr_unique1(arr); // (13)[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

利用Map数据结构去重

function arr_unique2(arr) {
  let map = new Map();
  let array = new Array();  // 数组用于返回结果
  for (let i = 0; i < arr.length; i++) {
    if(map .has(arr[i])) {  // 如果有该key值
      map .set(arr[i], true);
    } else {
      map .set(arr[i], false);   // 如果没有该key值
      array .push(arr[i]);
    }
  }
  return array ;
}

 console.log(arr_unique2(arr)); //(13) [1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

利用递归去重

function arr_unique3(arr) {
     var array= arr;
     var len = array.length;
     array.sort(function(a,b){   //排序后更加方便去重
     return a - b;
    })

 function loop(index){
        if(index >= 1){
            if(array[index] === array[index-1]){
                array.splice(index,1);
            }
            loop(index - 1);    //递归loop,然后数组去重
        }
    }
    loop(len-1);
    return array;
}

console.log(arr_unique3(arr)); //(14) [1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

forEach + indexOf

filter+indexOf

forEach + includes

6.数组扁平化

数组扁平化就是将一个多维数组转换为一个一维数组
实现基本方式

1、对数组的每一项进行遍历。

2、判断该项是否是数组。

3、如果该项不是数组则将其直接放进新数组。

4、是数组则回到1,继续迭代。

5、当数组遍历完成,返回这个新数组。

7.iframe的优缺点有哪些

优点:

①iframe能够原封不动的把嵌入的网页展现出来;

②如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。

③网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。

④可以由iframe来解决,加载缓慢的第三方内容如图标和广告,。

缺点:

①会产生很多页面不易管理;

②iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。

③代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化。

④设备兼容性差。

⑤iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。

8.函数柯里化(卡瑞化、加里化)

把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。

就是只传递给函数某一部分参数来调用,返回一个新函数去处理剩下的参数(闭包)

9.垃圾回收机制

浏览器的 Javascript 具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存。其原理是:垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存。但是这个过程不是实时的,因为其开销比较大并且GC时停止响应其他操作,所以垃圾回收器会按照固定的时间间隔周期性的执行

10.window的onload事件和domcontentloaded

window.onload:

当一个资源及其依赖资源已完成加载时,将触发onload事件。

document.onDOMContentLoaded:

当初始的HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,而无需等待样式表、图像和子框架的完成加载。

区别:

①onload事件是DOM事件,onDOMContentLoaded是HTML5事件。

②onload事件会被样式表、图像和子框架阻塞,而onDOMContentLoaded不会。

③当加载的脚本内容并不包含立即执行DOM操作时,使用onDOMContentLoaded事件是个更好的选择,会比onload事件执行时间更早。

总结

到此这篇关于JavaScript必看的10道面试题的文章就介绍到这了,更多相关JavaScript面试题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 一套比较完整的javascript面试题(部分答案)

    一.单选题 1.以下哪条语句会产生运行错误:(a) A.var obj = ();//语法错误 B.var obj = [];//创建数组 C.var obj = {};//创建对象 D.var obj = //; 原因:var obj = new Array ();是对的:JavaScript 中大括号表示创建对象.var obj = { id:1, name:"jacky" };alert(obj.name);上例表示创建一个具有属性 id (值为 1).属性 name(值为 ja

  • 80%应聘者都不及格的JS面试题

    共 5024 字,读完需 6 分钟,速读需 2 分钟,本文首发于知乎专栏前端周刊.写在前面,笔者在做面试官这 2 年多的时间内,面试了数百个前端工程师,惊讶的发现,超过 80% 的候选人对下面这道题的回答情况连及格都达不到.这究竟是怎样神奇的一道面试题?他考察了候选人的哪些能力?对正在读本文的你有什么启示?且听我慢慢道来 不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策.在考察候选人 JS 基础

  • 送你43道JS面试题(收藏)

    导读 这两天的GitHub Trending repositories被一个名叫 javascript-questions的项目霸榜了,项目中记录了一些JavaScript题目. 我大概从头到尾看了一遍,都是一些基础的题目,我大概花了半个小时(有些题很简单,可以一扫而过)把这些题做完了,虽然题目很简单,但是每道题都对应一个知识点,如果这个知识点你没有接触过,那肯定会做错,如果你接触过这些知识点,那么这些题对你来说就很容易. 建议大家也花半个小时来做一做,以便查漏补缺. 为方便大家能够更快的做题,

  • 网易JS面试题与Javascript词法作用域说明

    调用对象位于作用域链的前端,局部变量(在函数内部用var声明的变量).函数参数及Arguments对象都在函数内的作用域中--这意味着它们隐藏了作用域链更上层的任何同名的属性. 2010年9月14日,我去参加网易网页工程师招聘会,应聘JS工程师职位.有幸参加笔试,然后有幸栽在笔试,呵呵.废话少说,抓出音响极深的一题重新研究研究. 题目大概是:写出如下代码的输出结果并进行分析 复制代码 代码如下: var tt = 'aa'; function test(){ alert(tt); var tt

  • 你有必要知道的25个JavaScript面试题

    1.使用 typeof bar === "object" 判断 bar 是不是一个对象有神马潜在的弊端?如何避免这种弊端? 使用 typeof 的弊端是显而易见的(这种弊端同使用 instanceof): let obj = {}; let arr = []; console.log(typeof obj === 'object'); //true console.log(typeof arr === 'object'); //true console.log(typeof null

  • js前端面试题及答案整理(一)

    Part1 手写代码 现场手写代码是现在面试中很常见的一类面试题,考察基础的数据结构与算法能力. 1 数组去重的实现 基本数组去重 Array.prototype.unique = function(){ var result = []; this.forEach(function(v){ if(result.indexOf(v) < 0){ result.push(v); } }); return result; } •利用hash表去重,这是一种空间换时间的方法 Array.prototyp

  • 5个JavaScript经典面试题

    1:Scope作用范围 复制代码 代码如下: (function() {     var a = b = 5;  })();  console.log(b); 什么会被打印在控制台上? 回答 上面的代码会打印 5. 这个问题的诀窍是,这里有两个变量声明,但 a 使用关键字var声明的.代表它是一个函数的局部变量.与此相反,b 变成了全局变量. 这个问题的另一个诀窍是,它没有使用严格模式 ('use strict';).如果启用了严格模式,代码就会引发ReferenceError的错误:B没有定义

  • 一不小心就做错的JS闭包面试题

    由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) { console.log(o) return { fun:function(m){ return fun(m,n); } }; } var a = fun(0); a.fun(1); a.fun(2); a.fun(3);//undefined,?,?,? var b = fun(0).fun(

  • Javascript前端经典的面试题及答案

    前言 如果面试题按类型来分,主要涉及到"技术"与"非技术"两大类,技术类别下涉及到的子类别有: 移动 & PC端布局类 JavaScript 核心基础类 衍生框架类 项目应用类 这四大类别的面试题若按出现频率来划分,则面试时 100% 会问到的题型有:"移动端&PC端布局类.JavaScript 核心基础类".本次选择这两类中难度更高一些的 "JavaScript 核心基础类" 面试题,进行了分析和解答,供面试

  • BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

    而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 附上第二篇:BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 前面几题是会很基础,越下越有深度. 初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,boolean,Number,Undefined, Null 引用数据类型:Object(Array,Da

随机推荐