笔试指南

时间 2019-11-30

原文原文链接

题目：类型判断用到哪些方法？
typeof和instanceofhtml

题目：值类型和引用类型的区别？
根据 JavaScript中的变量类型传递方式，又分为值类型和引用类型，在参数传递方式上，值类型是按值传递，引用类型是按共享传递。前端

说出下面代码的执行结果，并分析其缘由？node

function foo(a){
    a = a * 10;
}
function bar(b){
    b.value = 'new';
}
var a = 1;
var b = {value: 'old'};
foo(a);
bar(b);
console.log(a); // 1
console.log(b); // value: new

如何理解 JavaScript 的原型？
全部的引用类型（数组、对象、函数），都具备对象特性，便可自由扩展属性（null除外），都有一个__proto__属性，属性值是一个普通的对象，__proto__属性值指向它的构造函数的prototype属性值。全部的函数，都有一个prototype属性，属性值也是一个普通的对象算法

如何理解 JS 的原型链？api

当试图获得一个对象的某个属性时，若是这个对象自己没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找，若没有找到，会一直往上找，发现是一个链式的结构，因此叫作“原型链”跨域

题目：如今有个 HTML 片断，要求编写代码，点击编号为几的连接就alert弹出其编号？（闭包题目）数组

<ul>
    <li>编号1，点击我请弹出1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

var list = document.getElementsByTagName('li');
for (var i = 0; i < list.length; i++) {
    list[i].addEventListener('click', function(i){
        return function(){
            alert(i + 1)
        }
    }(i), true)
}

题目：说出下面执行的结果（执行上下文，这里笔者直接注释输出了）浏览器

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

fn('zhangsan')  // 'zhangsan' 20
function fn(name) {
    age = 20
    console.log(name, age)
    var age
}

console.log(b); // 这里报错
// Uncaught ReferenceError: b is not defined
b = 100;

题目：如何理解 JS 的做用域和做用域链？安全

JS 没有块级做用域，只有全局做用域和函数做用域，ES6才有块级做用域，全局做用域就是最外层的做用域，若是咱们写了不少行 JS 代码，变量定义都没有用函数包括，那么它们就所有都在全局做用域中。这样的坏处就是很容易冲突。 jQuery、Zepto 等库的源码，全部的代码都会放在(function(){....})()中。由于放在里面的全部变量，都不会被外泄和暴露，不会污染到外面，不会对其余的库或者 JS 脚本形成影响。这是函数做用域的一个体现。
当前做用域没有定义的变量，这成为自由变量。自由变量如何获得 —— 向父级做用域寻找。若是父级也没呢？再一层一层向上寻找，直到找到全局做用域仍是没找到，就宣布放弃。这种一层一层的关系，就是做用域链。自由变量将从做用域链中去寻找，可是依据的是函数定义时的做用域链，而不是函数执行时性能优化

闭包主要有哪些应用场景？

①函数做为返回值
②函数做为参数传递

题目：讲解下面代码的执行过程和结果？

var a = true;
setTimeout(function(){
    a = false;
}, 100)
while(a){
    console.log('while执行了')
}

由于JS是单线程的，因此进入while循环以后，没有「时间」（线程）去跑定时器了，因此这个代码跑起来是个死循环！

题目：ES6 箭头函数中的this和普通函数中的有什么不一样？
第一写起来更加简洁，第二 this是父做用域的 this

function MathHandle(x, y) {
  this.x = x;
  this.y = y;
}

MathHandle.prototype.add = function () {
  return this.x + this.y;
};

var m = new MathHandle(1, 2);
console.log(m.add())


class MathHandle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  add() {
    return this.x + this.y;
  }
}
const m = new MathHandle(1, 2);
console.log(m.add())

JS 构造函数实现继承

// 动物
function Animal() {
    this.eat = function () {
        console.log('animal eat')
    }
}
// 狗
function Dog() {
    this.bark = function () {
        console.log('dog bark')
    }
}
Dog.prototype = new Animal()
// 哈士奇
var hashiqi = new Dog()

ES6 class 实现继承

class Animal {
    constructor(name) {
        this.name = name
    }
    eat() {
        console.log(`${this.name} eat`)
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name)
        this.name = name
    }
    say() {
        console.log(`${this.name} say`)
    }
}
const dog = new Dog('哈士奇')
dog.say()
dog.eat()

ES6 中新增的数据类型有哪些？

Set 和 Map

DOM 和 HTML 区别和联系？

HTML 是一个有既定标签标准的 XML 格式，标签的名字、层级关系和属性，都被标准化（不然浏览器没法解析），它也是一棵树。HTML 是一棵树，DOM 也是一棵树。能够认为 DOM 就是 JS 能识别的 HTML 结构，一个普通的 JS 对象或者数组。

property 和 attribute 的区别是什么？
两种有很大的区别，property 的获取和修改，是直接改变 JS 对象，而 attribute 是直接改变 HTML 的属性，attribute 就是对 HTML 属性的 get 和 set，和 DOM 节点的 JS 范畴的 property 没有关系。

什么是事件冒泡？
DOM 结构中，事件会沿着 DOM 树向上级节点冒泡，若是咱们在上级节点中都绑定了事件，它是会根据 DOM 的结构来冒泡，从下到上挨个执行的。可是咱们可使用e.stopPropagation()来阻止冒泡

如何使用事件代理？有何好处？

如有以下场景，一个<div>中包含了若干个<a>，并且还能继续增长。那如何快捷方便地为全部<a>绑定事件呢？

<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
</div>
<button>点击增长一个 a 标签</button>

这里就会用到事件代理。咱们要监听<a>的事件，但要把具体的事件绑定到<div>上，而后看事件的触发点是否是<a>

var div1 = document.getElementById('div1')
div1.addEventListener('click', function (e) {
    // e.target 能够监听到触发点击事件的元素是哪个
    var target = e.target
    if (e.nodeName === 'A') {
        // 点击的是 <a> 元素
        alert(target.innerHTML)
    }
})

使用代理的优势以下：使代码简洁，减小浏览器的内存占用

手写 XMLHttpRequest 不借助任何库？

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
    // 这里的函数异步执行，可参考以前 JS 基础中的异步模块
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            alert(xhr.responseText)
        }
    }
}
xhr.open("GET", "/api", false)
xhr.send(null)

HTTP 协议中，response 的状态码，常见的有哪些？

xhr.status即 HTTP 状态码，有 2xx 3xx 4xx 5xx 这几种，比较经常使用的有如下几种：

200 正常
3xx
301 永久重定向。如http://xxx.com这个 GET 请求（最后没有/），就会被301到http://xxx.com/（最后是/）
302 临时重定向。临时的，不是永久的
304 资源找到可是不符合请求条件，不会返回任何主体。如发送 GET 请求时，head 中有If-Modified-Since: xxx（要求返回更新时间是xxx时间以后的资源），若是此时服务器端资源未更新，则会返回304，即不符合要求
404 找不到资源
5xx 服务器端出错了

另：
xhr.readyState是浏览器判断请求过程当中各个阶段的，xhr.status是 HTTP 协议中规定的不一样结果的返回状态说明。

xhr.readyState的状态码说明：

0 -代理被建立，但还没有调用 open() 方法。
1 -open() 方法已经被调用。
2 -send() 方法已经被调用，而且头部和状态已经可得到。
3 -下载中， responseText 属性已经包含部分数据。
4 -下载操做已完成

什么是跨域，如何实现跨域？
浏览器中有同源策略，url 协议、域名、端口不一样算跨域

解决跨域 - 服务器端设置 http header
一、JSONP
可是 HTML 中几个标签能逃避过同源策略——<script src="xxx">、<img src="xxxx"/>、<link href="xxxx">，这三个标签的src/href能够加载其余域的资源，不受同源策略限制。

二、服务器端设置 http header

response.setHeader("Access-Control-Allow-Origin", "http://m.juejin.com/"); // 第二个参数填写容许跨域的域名称，不建议直接写 "*"
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

// 接收跨域的cookie
response.setHeader("Access-Control-Allow-Credentials", "true");

cookie 和 localStorage 有何区别？

它是设计用来在服务器和客户端进行信息传递的，所以咱们的每一个 HTTP 请求都带着 cookie。可是 cookie 也具有浏览器端存储的能力（例如记住用户名和密码），所以就被开发者用上了。
使用方法：document.cookie = '···'

缺点：
存储量过小，只有 4KB
全部 HTTP 请求都带着，会影响获取资源的效率
API 简单，须要封装才能用

locationStorage 和 sessionStorage
二者的区别就在于sessionStorage根据 session 过去时间而实现，而localStorage会永久有效。一些须要及时失效的重要信息放在sessionStorage中，一些不重要可是不常常设置的信息，放在localStorage中。

优势
存储量增大到 5MB
不会带到 HTTP 请求中
API 适用于数据存储 localStorage.setItem(key, value) localStorage.getItem(key)

什么是盒子模型？
内边距、边框和外边距。它们三者就构成了一个“盒子”

盒子模型的宽度如何计算？
固定宽度的盒子：内容宽度（固定的宽度） + border宽度 + padding宽度 + margin宽度之和
充满父容器的盒子：内容宽度 + border宽度 + padding宽度 + margin宽度之和，内容宽度=父容器的内容宽度-（本身的 border宽度 + 本身的padding宽度 + 本身的margin宽度）
包裹内容的盒子：内容的宽度按照内容计算，盒子的宽度=内容宽度的基础上+padding宽度 + border宽度 + margin宽度之和。

为什么 float 会致使父元素塌陷？
被设置了 float 的元素会脱离文档流，破坏了父标签的本来结构，使得父标签出现了坍塌现象

float 的重要的特性是什么？
包裹性和清空格

手写 clearfix？

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /* 兼容 IE 低版本 */
}

relative、absolute 和 fixed 有何区别？什么是定位上下文？

relative 会致使自身位置的相对变化，而不会影响其余元素的位置、大小，就是 relative 产生一个新的定位上下文。

absolute 元素脱离了文档结构，只要元素会脱离文档结构，它就会产生破坏性，致使父元素坍塌，absolute 元素具备“包裹性”。bsolute 元素具备“跟随性”。虽然 absolute 元素脱离了文档结构，若咱们没有设置 top、left 的值，它的位置并不发生变化，呆在它本来的位置。absolute 元素会悬浮在页面上方，会遮挡住下方的页面内容。置了 top、left 值时，元素是相对于最近的定位上下文来定位的，而不是相对于浏览器定位。
fixed 和 absolute 是同样的，惟一的区别在于：absolute 元素是根据最近的定位上下文肯定位置，而 fixed 根据 window （或者 iframe）肯定位置。

relative 元素的定位永远是相对于元素自身位置的，和其余元素不要紧，也不会影响其余元素。

absolute 设置了 top、left，浏览器会递归查找该元素的全部父元素，若是找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，若是没找到，就以浏览器边界定位。

fixed 元素的定位是相对于 window （或 iframe）边界的，和其余元素没有关系。可是它具备破坏性，会致使其余元素位置的变化。

相对于flex布局，传统布局的方式是什么？
布局的传统解决方案基于盒子模型，依赖 display 属性 + position 属性 + float 属性

如何实现水平居中？
inline 元素用text-align: center;
block 元素可以使用margin: auto;
绝对定位元素可结合left和margin实现，可是必须知道宽度

.container {  //container是item的父级
    position: relative;
    width: 500px;
}
.item {
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50%;  
    margin: -150px;   
}

如何实现垂直居中？
inline 元素可设置line-height的值等于height值
绝对定位元素，可结合left和margin实现，可是必须知道尺寸（优势：兼容性好
缺点：须要提早知道尺寸）

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}

绝对定位可结合transform实现居中（优势：不须要提早知道尺寸
缺点：兼容性很差）

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}

绝对定位结合margin: auto（不须要提早知道尺寸，兼容性好）
测试：

<html>

<head>
<style>
.container {
    position: relative;
    height: 300px;
    border:1px blue solid;
}
.item {
    width: 100px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background:red
}

</style>

<title>个人第一个 HTML 页面</title>
</head>

<body>
<div class="container"><div class="item"></div></div>

</body>

</html>

如何理解 HTML 语义化？
所谓“语义”就是为了更易读懂，分两部分：让人（写程序、读程序）更易读懂和让机器（浏览器、搜索引擎）更易读懂
为了增强 HTML 语义化，HTML5 标准中又增长了header section artical等标签。

CSS 的transition和animation有何区别？
首先transition和animation均可以作动效，从语义上来理解，transition是过渡，由一个状态过渡到另外一个状态，好比高度100px过渡到200px；而animation是动画，即更专业作动效的，animation有帧的概念，能够设置关键帧keyframe，一个动画能够由多个关键帧多个状态过渡组成，另外animation也包含多个属性。

什么是重绘和回流？

重绘：指的是当页面中的元素不脱离文档流，而简单地进行样式的变化，好比修改颜色、背景等，浏览器从新绘制样式
回流：指的是处于文档流中 DOM 的尺寸大小、位置或者某些属性发生变化时，致使浏览器从新渲染部分或所有文档的状况
回流要比重绘消耗性能开支更大。

找出下面代码的优化点，而且优化它？

var data = ['string1', 'string2', 'string3'];
for(var i = 0; i < data.length; i++){
    var dom = document.getElementById('list');
    dom.innerHTML += '<li>' + data[i] + '</li>';
}

var dom = document.getElementById('list');
var data = ['string1', 'string2', 'string3'];
var frag = document.createDocumentFragment();
var li;
for(var i = 0; i < data.length; i++){    
    li = document.createElement("li");
    li.innerHTML = data[i];
    frag.appendChild(li);  // 先放在 frag 中，最后一次性插入到 DOM 结构中。
}
listNode.appendChild(frag);

前端常见的安全问题有哪些？
XSS（跨站脚本攻击）和CSRF（跨站请求伪造）

何为构建工具，为何要使用？
构建”也可理解为“编译”，就是将开发环境的代码转换成运行环境代码的过程。开发环境的代码是为了更好地阅读，而运行环境的代码是为了更快地执行，二者目的不同，所以代码形式也不同，为了达到这个目的，就要使用构建工具。
总结一下须要构建工具处理的几种状况：

构建工具的做用？
处理模块化、编译语法、代码压缩

何为抓包？
PC 端的网页，咱们能够经过 Chrome、Firefox 等浏览器自带的开发者工具来查看网页的全部网络请求，以帮助排查 bug。这种监听、查看网络请求的操做称为抓包。

如何抓取数据？如何使用工具来配置代理？

监听请求：
Mac 系统下推荐使用 Charles，Windows 系统推荐使用 Fiddler
一、将安装好 Charles 的电脑和要抓包的手机，链接到同一个网络，保证 IP 段相同
二、手机设置网络代理，（代理IP）代理到电脑的 IP，代理的端口为8888，Charles选择“容许”代理
三、使用手机端访问的网页或者联网的请求，Charles 就能监听到

线上的地址代理到测试环境：
一、Charles 为例，点击菜单栏中 Tools 菜单，二级菜单中点击 Map Remote
二、选中 Enable Map Remote 复选框，而后点击 Add 按钮，添加一个代理项
三、将添加的代理项，map from 设置https://www.aaa.com/api/getuser?name=xxx，Map to设置http://168.1.1.100:8080/api/getuser?name=xxx
四、单击OK

本笔试指南缺少数据结构和算法，以及性能优化内容

本文由https://juejin.im/book/5a8f9ddcf265da4e9f6fb959/section/5a8f9fcb6fb9a063417b3f9e整理而得，权利归做者全部，侵删！