常见前端面试题目整理（JavaScript）

2018-09-02  本文已影响6人  黄金原野

所有题目答案整理自网络，如有错误，接受指正，拒绝批评！

js常见的数据类型，判断方法

数据类型:

基本数据类型:

number, string, bool, array, object, null, undefined


引用类型:

Object, Array, Date, Function, RegExp, Function等


判断方法:

console.log(typeof("123"))  //string
console.log(typeof(null))    //object

var arr = [1, 2, 3]
console.log(arr instanceof Array)   //true

var arr = [1, 2, 3]
console.log(arr.constructor === Array)   //true

var arr = [1, 2, 3]
console.log(Object.prototype.toString.call(a) === `[Object Array]`)   //true

var a = 1
console.log(jQuery.type(a))   //number
var reg = /abc/
console.log(jQuery.type(reg))
//regexp

判断NaN

function myIsNaN(value) { 
    return typeof value === 'number' && isNaN(value); 
} 

function myIsNaN(value) { 
    return value !== value; 
}

IIFE

立即执行函数表达式，匿名函数

变量的作用域与作用域链

全局执行环境是最外围的一个执行环境，所有全局变量和函数都是作为window对象的属性和方法创建的。局部变量只在函数体内有定义。在局部变量和全局变量重名时，局部变量优先于全局变量。


当代码在环境中执行时，会创建变量对象的一个作用域链，用于保证对执行环境有访问权的所有变量和函数的有序访问。作用域链的前端始终是当前执行代码所在的环境的变量对象。


如果一个环境是函数，则将其活动对象作为变量对象，活动对象在最开始只包含一个变量(arguments)，作用域链的下一个变量对象来自外部环境，再下一个变量来自下一个外部环境，直到全局执行环境。


可参考
深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域

同步/异步 并行/并发

同步方法调用一旦开始，调用者必须等到方法调用返回后，才能继续后续的行为。
(例如: 在商场买东西，等待仓库配货完成后付款离开，一次购物完成)

异步方法调用更像一个消息传递，一旦开始，方法调用就会立即返回，调用者就可以继续后续的操作。而，异步方法通常会在另外一个线程中，“真实”地执行着。整个过程，不会阻碍调用者的工作。
(在某宝购买一件商品，下单付款后就算完成一次购物)

并行 任务在同一时间运行，例如，在多核处理器上。有同时处理多个任务的能力。


并发 两个任务可以在重叠的时间段内启动，运行和完成。有处理多个任务的能力，不一定要同时。

ES6

可参考ES6这些就够了
let, const

此前通常用var声明变量，会造成变量提升。

用let来声明变量，使用范围局限于当前块级作用域
const表示常量，值不能改变

console.log(a)  //undefined
var a = 10

console.log(b)  //Uncaught ReferenceError: b is not defined
let b = 1
console.log(b)  //1

const a = 10
a = 20
console.log(a)  //Uncaught SyntaxError: Identifier 'a' has already been declared

字符串


基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定

const name = 'xiaoming'
console.log(`hello ${name}`) //hello xiaoming

在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定

const template = `<div>
        <span>hello world</span>
    </div>`

函数
为参数提供默认值

function action(num = 200) {
        console.log(num)
    }
action(0) // 0
action() //200
action(300) //300

箭头函数
省略function，return关键字

var fun = a => a + 1
//等价于
var fun = function(a){
    return a + 1
}

Object
对象初始化简写

function people(name, age) {
    return {
        name,
        age
    };
}

import与export

import导入模块、export导出模块

loadsh

一套工具库，内部封装了很多字符串、数组、对象等常见数据类型的处理函数

参考学习lodash——这一篇就够用

BOM与DOM

BOM

window, location, navigator

DOM

document

面向对象的写法

概述ES5和ES6中面向对象的实现方法
总之，ES6类似Java

arguments

arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。

arguments对象不是一个 Array 。它类似于Array，但除了length属性和索引元素之外没有任何Array属性。例如，它没有 pop 方法。但是它可以被转换为一个真正的Array
type of返回object

var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);

// ES2015
const args = Array.from(arguments);

属性

this

在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分，每次调用函数，都会产生一个新的执行上下文环境。

静态作用域

要到创建这个函数的那个作用域中取值——是“创建”，而不是“调用”，切记切记

bind, call, apply

call、apply和bind是Function对象自带的三个方法，都是为了改变函数体内部 this 的指向。bind 是返回对应 函数，便于稍后调用；apply 、call 则是立即调用。call 是把参数按顺序传递进去，而 apply 则是把参数放在数组里。

作用域链

静态作用域

要到创建这个函数的那个作用域中取值——是“创建”，而不是“调用”，切记切记

作用域链(取某个自由变量)

闭包

函数调用完成之后，其执行上下文环境不会接着被销毁。这就是需要理解闭包的核心内容。因此使用闭包的开销会比较大。

继承

prototype原型

默认的给函数一个属性——prototype。对，每个函数都有一个属性叫做prototype。

这个prototype的属性值是一个对象（属性的集合，再次强调！），默认的只有一个叫做constructor的属性，指向这个函数本身

每个对象都有一个隐藏的属性——“__proto__”，指向创建该对象的函数的prototype。(例如：obj.__proto__=== Object.prototype)。Object.prototype确实一个特例——它的__proto__指向的是null

原型链

访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着proto这条链向上找，这就是原型链。

那么我们在实际应用中如何区分一个属性到底是基本的还是从原型中找到的呢？大家可能都知道答案了——hasOwnProperty，特别是在for…in…循环中，一定要注意。

headers

字段有

promise

Promise 的基础用法

Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件。在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了

三种状态:

状态改变，Promise对象的状态改变，只有两种可能：

//Promise对象是一个构造函数，用来生成Promise实例
const promist = new Promise(function(resolve,reject){
    if(/*异步操作成功*/){
        resolve(value);
    }else{
        reject(error);
    }
})

//Promise 实例生成以后，可以用then 方法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value){
//success
},function(error){
//failure
});

跨域

参考[前端常见跨域解决方案（全）]

浏览器对于javascript的同源策略的限制，同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。非同源的情况下，Cookie、LocalStorage 和 IndexDB 无法读取，DOM 和 Js对象无法获得，AJAX 请求不能发送。

常用方法

Ajax

Ajax指异步的JavaScript和XML。Ajax的核心是XMLHTTPRequest对象(XHR)。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

工作原理

var xmlhttp;
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);
xmlhttp.send();

垃圾回收

性能优化

  1. 减少 HTTP 请求 (Make Fewer HTTP Requests)
  2. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)
  3. 使得 Ajax 可缓存 (Make Ajax Cacheable)
  1. 把 CSS 放到代码页上端 (Put Stylesheets at the Top)
  2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
  3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
  4. 避免 CSS 表达式 (Avoid CSS Expressions)
  1. 脚本放到 HTML 代码页底部
  2. 从页面中剥离 JavaScript与CSS
  3. 精简 JavaScript 与 CSS
  4. 移除重复脚本

接口安全性

前后端渲染对比

前端渲染
  1. 业务分离，后端只需要提供数据接口，前端开发时不需要部署对应的后端环境，通过代理服务器工具获取后端数据开发
  2. 计算量转移，原本需要后端渲染的任务转移给了前端
后端渲染

（JSP等）

  1. 对搜索引擎友好
  2. 首页加载时间短，后端渲染完后直接显示HTML，前端渲染在加载完成后还需要js渲染时间
上一篇下一篇

猜你喜欢

热点阅读