2017前端第一次面试小记

电玩女神 2022-09-29 06:13 218阅读 0赞

转载自：https://juejin.im/post/58c75619da2f605dc5b0f4ff

不是博主本人面试哦~网上朋友的一次面试经历，给大家分享一下。

太久没有面试过了，第一次难免有点紧张，今天遇到的面试问题，大多数都遇到过，却因为没有充分准备，而没有答好，以后一定好好准备才行。

下面记录一下今天的面试问题，加深印象：

1.  介绍一下JS的数据类型？
    
    > 简单类型：`String`、`Number`、`Boolean`、`Null`、`Undefined`  
    > 复杂类型：`Object`  
    > &  
    > 扩展：
    > 
    > 1.  null与undefined有什么区别  
    >     答：`null` 表示一个对象被定义了，值为“空值”，而`undefined` 表示不存在这个值。  
    >     正因为这个原因，所以使用`typeof`判断是，`null`返回的是`object`，而`undefined`返回的是`undefined`。(判断两者时需要使用`===`严格判断)
    > 2.  Boolean类型在进行判断的时候设置为 0、-0、null、""、false、undefined 或 NaN，则该对象设置为 false。否则设置为 true（即使 value 参数是字符串 "false"）
2.  如何通过JS判断一个数组？
    
    > 1.  instanceof方法  
    >     `instanceof` 运算符是用来测试一个对象是否在其原型链原型构造函数的属性。
    >     
    >         var arr = []; 
    >         arr instanceof Array; // true
    > 2.  constructor方法  
    >     `constructor` 属性返回对创建此对象的数组函数的引用，就是返回对象相对应的构造函数。
    >     
    >         var arr = []; 
    >         arr.constructor == Array; //true
    > 3.  特性判断法  
    >     利用判断数组独有的`length`和`splice`方法，但是这是不靠谱的，因为对象也能添加方法和属性。那怎么办了，有一个办法，可以利用数组的`length属性`没法枚举来判断。
    >     
    >         function isArray(object){
    >               return  object && typeof object==='object' &&    
    >               typeof object.length==='number' &&  
    >               typeof object.splice==='function' &&    
    >                //判断length属性是否是可枚举的 对于数组 将得到false 
    >               !(object.propertyIsEnumerable('length'));
    >         }
    > 4.  最简单的方法  
    >     这种写法，是 jQuery 正在使用的，淘宝的 kissy 也是使用这种方式。
    >     
    >         Object.prototype.toString.call(value) == '[object Array]'
    >         // 利用这个方法，可以写一个返回数据类型的方法
    >         var isType = function (obj) {
    >              return Object.prototype.toString.call(obj).slice(8,-1); 
    >         }
    > 5.  ES5新增方法isArray()
    >     
    >         var a = new Array(123);
    >         var b = new Date();
    >         console.log(Array.isArray(a)); //true
    >         console.log(Array.isArray(b)); //false
    >     
    >     &  
    >     扩展：
    >     
    >     1.  使用`instaceof`和`construcor`，被判断的`array`必须是在当前页面声明的。比如，一个页面（父页面）有一个框架，框架中引用了一个页面（子页面），在子页面中声明了一个`array`，并将其赋值给父页面的一个变量，这时判断该变量，`Array == object.constructor;`会返回`false`。
    >     2.  最简单的方法，在IE6下判断`null`和`undefined`，有一些bug，判断`undefined`和`null`均为`Object`，(并不是`bug`，是在ES3的标准下返回的就为`Object`)
3.  谈一谈`let`与`var`的区别？
    
    > let为ES6新添加申明变量的命令，它类似于`var`，但是有以下不同：
    > 
    > 1.  `let`命令不存在变量提升，如果在`let`前使用，会导致报错
    > 2.  暂时性死区，如果块区中存在`let`和`const`命令，就会形成封闭作用域
    > 3.  不允许重复声明，因此，不能在函数内部重新声明参数
4.  `map`与`forEach`的区别？
    
    > 因为平时基本只用`forEach`，所以这个很尴尬，索性就把新增的数组方法都刷一遍吧。
    > 
    > 1.  `forEach`方法，是最基本的方法，就是遍历与循环，默认有3个传参：分别是遍历的数组内容`item`、数组索引`index`、和当前遍历数组`Array`。另外，除去第一个必须的回调函数参数，还可以接受一个上下文参数(改变回调函数的this指向)；并且`forEach`不会遍历空元素。
    > 2.  `map`方法，基本用法与forEach一致，但是不同的，它会返回一个新的数组，所以在callback需要有return值，如果没有，会返回undefined。(从字面理解，map就是映射的意思)
    > 3.  `filter`方法，用法和map很相似，从字面理解，就是过滤、筛选的意思。但是函数的callback需要返回布尔值`true`或`false`，并且返回值只需要为弱等`==`即可。
    > 4.  `some` 方法，对数组中每一项运行指定函数，如果该函数对任一项返回`true`，则返回`true`。(一旦遇到`true`，就会中断循环，返回`true`，类似于`||判断`)
    > 5.  `every`方法，对数组中的每一项运行给定函数，如果该函数对每一项返回`true`，则返回`true`。(一旦遇到false，就会中断循环，返回`false`，类似于`&&判断`)
    > 6.  `indexOf`方法，与字符串中的`indexOf`类似，返回数组索引值，如果没有匹配，则会返回`-1`，第二个参数为可选，表示从当前位置开始搜索。
    > 7.  `lastIndexOf`方法，与`indexOf`相似，只是是从数组的末尾开始查找，而第二个参数的默认值是`array.length - 1`。
    > 8.  `reduce`方法，字面意思应该是‘减少’，但是实际是‘递归’的意思。实际就是应用一个函数针对数组的两个值(从左到右)，以减至一个值。它的`callback`接收4个参数：之前值(上一次循环返回的值)、当前值、索引值以及数组本身。`initialValue`参数可选，表示初始值。
    > 9.  `reduceRight`方法，与`reduce`方法类似，只是从数组的末尾开始实现。
5.  谈一谈你理解的函数式编程？
    
    > what？函数编程就是函数编程啊，还有什么理解？？  
    > 现在查了一下，才知道，原来没有那么简单！！！  
    > 简单说，"函数式编程"是一种"编程范式"（programming paradigm），也就是如何编写程序的方法论。  
    > 它具有以下特性：闭包和高阶函数、惰性计算、递归、函数是"第一等公民"、只用"表达式"，不用"语句"(都会有返回值)、没有"副作用"、不修改状态、引用透明性。  
    > 具体的特性代表了什么，我还要好好研究一下！！
6.  谈一谈箭头函数与普通函数的区别？
    
    > 平时用的很爽，但是还真没有考虑过这个问题！！
    > 
    > 1.  箭头函数使得表达更加简洁。(这个是废话)
    > 2.  函数体内的`this`对象，就是定义时所在的对象，而不是使用时所在的对象。
    > 3.  不可以当作构造函数，也就是说，不可以使用`new`命令，否则会抛出一个错误。
    > 4.  不可以使用`arguments`对象，该对象在函数体内不存在。如果要用，可以用`Rest参数`代替。
    > 5.  不可以使用`yield`命令，因此箭头函数不能用作`Generator`函数。
7.  谈一谈函数中this的指向吧？
    
    > this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。
    > 
    > 《javascript语言精髓》中大概概括了4种调用方式：
    > 
    > 1.  方法调用模式
    > 2.  函数调用模式
    > 3.  构造器调用模式
    > 4.  apply/call调用模式
    > 
    > 特别补充：
    > 
    > 1.  在构造器调用时，如果加入了`return`并且`return`了一个对象，`this`会指向这个`return`的对象。
    > 2.  为什么构造器时`this`会指向`new`的对象？
    >     
    >         var p = new Emp();
    >         // 过程模拟，new关键字会创建一个空的对象，然后会自动调用一个函数apply方法，将this指向这个空对象，这样的话函数内部的this就会被这个空的对象替代。
    >         var p = {};
    >         Emp.apply(p);
    >         p.__proto__=Emp.prototype;
8.  谈一谈闭包吧？
    
    > 「闭包」，是指那些能够访问独立(自由)变量的函数 (变量在本地使用，但定义在一个封闭的作用域中)。换句话说，这些函数可以“记忆”它被创建时候的环境。特性：
    > 
    > 1.  函数嵌套函数
    > 2.  函数内部可以引用外部的参数和变量
    > 3.  参数和变量不会被垃圾回收机制回收
9.  异步编程的实现方式？
    
    > 1.  回调函数：
    >     
    >      *  优点：简单、容易理解
    >      *  缺点：不利于维护，代码耦合高
    > 2.  事件监听(采用时间驱动模式，取决于某个事件是否发生)：
    >     
    >      *  优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数
    >      *  缺点：事件驱动型，流程不够清晰
    > 3.  发布/订阅(观察者模式)：
    >     
    >      *  类似于事件监听，但是可以通过‘消息中心’，了解现在有多少发布者，多少订阅者。
    > 4.  Promise对象
    >     
    >      *  优点：可以利用then方法，进行链式写法；可以书写错误时的回调函数；
    >      *  缺点：编写和理解，相对比较难
    > 5.  Generator函数
    >     
    >      *  优点：函数体内外的数据交换、错误处理机制
    >      *  缺点：流程管理不方便
    > 6.  async函数
    >     
    >      *  优点：内置执行器、更好的语义、更广的适用性、返回的是Promise、结构清晰。
    >      *  缺点：错误处理机制

个人建了前端学习群，旨在一起学习前端。纯净、纯粹技术讨论，非前端人员勿扰！入群加我[微信][Link 1]：iamaixiaoxiao。

![1460000008545203_w_276_h_261][]

[Link 1]: http://lib.csdn.net/base/wechat
[1460000008545203_w_276_h_261]: /images/20220708/043c8e1034b24e73a3feef96a05d01f4.png