前端面试总结ajax：异步的JavaScript和xml，用以创建动态网页的技术，和后台进行交互。同源策略限制不同源

console.log(0.1+0.2)的输出：

0.30000000000000004

主要是因为JavaScript中的二进制的浮点数0.1和0.2并不是十分精确，所以他们相加的结果并非正好等于0.3，而是一个比较接近与0.3的数字。

写出对JavaScript原型链的理解？

在访问一个实例或者他上面的方法的时候，如果在实例本身没有找到这个方法和属性的时候，就通过__proto__属性从实例的原型对象上找，如果上一级对象上还没有找到，再从原型对象的基础上，再通过__proto__属性再往上一级查找，以此类推，知道找到直到Object.protopyte，若还未找到，则没有这个方法，原路返回。
原型链实现了继承

父函数子函数

prototype<--- _proto_

JavaScript的继承？

1. 原型链实现继承：将父类的实例作为子类的继承
function Parent1() {
    this.name = "parent1";
    this.colors = ["red", "blue", "yellow"];
}
function Child1() {
    this.name = "child1";
}
Child1.prototype = new Parent1();
2. 构造函数实现继承： 使用父类的构造函数来增强子类的实例，等于是复制父类的实例属性给子类
function Parent0() {
    this.name = "parent0";
    this.colors = ["red", "blue", "yellow"];
}
function Child0() {
    Parent0.call(this); // 或apply
// 把父类构造函数的this指向为子类实例化对象引用，从而导致父类执行的时候父类里面的属性都会被
挂载到子类的实例上去
    this.type = "child0";
}
3. 实例继承：为父类实例添加新特性，作为子类实例返回

写出对JavaScript闭包的理解？

闭包：segmentfault.com/a/119000000…

MDN闭包：developer.mozilla.org/zh-CN/docs/…

闭包: 闭包可以简单理解成“在一个函数内创建另一个函数，让你从内部函数访问外部函数作用域“。
所以，在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
优点：
1. 逻辑连续，当闭包作为另一个函数调用的参数时，避免你脱离当前逻辑而单独编写额外逻辑。
2. 方便调用上下文的局部变量。
3. 加强封装性，第2点的延伸，可以达到对变量的保护作用，防止变量被污染。
缺点：
1. 闭包的缺点就是常驻内存会增大内存使用量，并且使用不当很容易造成内存泄露。
2. 如果不是因为某些特殊任务而需要闭包，在没有必要的情况下，在其它函数中创建函数是不明智的，因为闭包对脚本性能具有负面影响，包括处理速度和内存消耗

jQuery和vue或者是ng的大体区别，哪种更好？

都是曾经或者现在比较火的前端框架，不能说哪种更好，只是每种都有自己适用的场景和项目类型。以下是我的回答：

jQuery主要是节点操作函数，比较轻量级，适用于小型项目。
angular是标准的MVVM模型，整体框架开发的比较完善，也有较多的成熟的UI库使用，变量操作数据特别方便，
但是整体比较笨重，适用于大型企业项目。（最喜欢）
vue是比较轻量级的开发特别完善的前端框架，主打轻量级，也是用节点操作函数，不算是很标准的MVVM模型，
适用于中小型项目。（学习不是很精通）

如何提升一个网页的滚动性能？

给 <body> 标签添加上 pointer-events: none 样式

为什么JavaScript被设计成一门单线程语言？

js作为浏览器的脚本语言，主要是实现用户与浏览器的交互，以及操作dom；这决定了它只能是单线程，否则会带
来很复杂的同步问题。
举个例子：如果js被设计成了多线程，如果有一个线程要修改一个dom元素，另一个线程要删除这个dom元素，此
时浏览器救会一脸茫然，不知所措。所以为了避免复杂性，从一诞生，js就是单线程的，并且不会改变。

对WEB标准以及W3C的理解与认识？

    web标准简单来说可以分为结构、表现和行为。其中 结构 主要是由HTML标签组成，或通俗点讲，在页面的
body里面我们写入的标签都是为了页面结构。 表现 即css样式表，通过css可以使页面标签更具美感。 
行为 是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要由js组成。（WEB标准一般
将三部分独立分开。使其具有模块化）

W3C对web标准提出了规范化要求，也就是在实际编程中的一些代码规范：包含如下几点
1. 对于结构（HTML）要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）
    a. 标签字母要小写
    b. 标签要闭合
    c. 标签不允许随意嵌套
2. 对于表现（css）和行为（js）要求：
    a. 尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，
提高用户的体验。
    b. 样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，
标签越少，加载越快，用户体验提高，代码维护简单，便于改版。
    c. 不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

行内元素有哪些？块级元素有哪些？CSS的盒子模型？

块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input selectCss
盒模型:内容，border ,margin，padding

编写一个数组去重的方法？

方法一：
function uniques(arr) {
    if(arr instanceof Array) {
        return Array.from(new Set(arr));
    } else {
        console.error('wrong type');
    }
}
方法二：
function unique(arr) {
    if (arr instanceof Array) {
        const res = new Map();
        return arr.filter( a => !res.has(a) && res.set(a, 1))
    } else {
        console.error('wrong type');
     }
}
方法三：（js去重）
function unique(array = []) {
    var temp = [];
    for (var i = 0; i < array.length; i++) {
        if (temp.indexOf(array[i]) == -1) {
            temp.push(array[i])
        }
    }
    return temp;
}
// indexOf  返回某个指定的字符串值在字符串中首次出现的位置
      （如果要检索的字符串值没有出现，则该方法返回 -1。）

js 检测类型用 typeof 和 instanceof 的区别？

1. 基本数据类型： typeof（返回数据类型）
typeof 操作符是确定一个变量是字符串、数值、布尔值，还是 undefined 的最佳工具。如果变
量的值是一个对象或 null，则 typeof 操作符会像下面例子中所示的那样返回"object"：
var s = "Nicholas";
var u; 
var n = null; 
var o = new Object();
alert(typeof s); //string
alert(typeof u); //undefined 
alert(typeof n); //object 
alert(typeof o); //object
2. 引用数据类型： instanceof （返回 true 或 false）
if (value instanceof Array){ 
 //对数组执行某些操作
}
es5新增：
if (Array.isArray(value)){ 
 //对数组执行某些操作
}

JavaScript操作数组的方法？

转换方法：

1. toString() 返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
2. valueOf() 返回的是数组
3. toLocaleString() 把数组转换为本地字符串，并返回结果
4. join() 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔

栈方法：（后进先出）

1. push() 接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
2. pop() 从数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。

队列方法（先进先出）

shift() 移除数组中的第一个项并返回该项，同时将数组长度减 1
unshift() 在数组前端添加任意个项并返回新数组的长度

重排序方法

reverse() 反转数组项的顺序
sort() 按升序排列数组项（sort()先调用toString()转型方法，然后比较字符串）

操作方法

1. concat() 会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的
   数组。如果传递给 concat()方法的是一或多个数组，则该方法会将这些数组中的每一项都添加到结果数
   组中。
2. slice(start, end) 在只有一个参数的情况下，slice()方法返回从该
参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项—
—但不包括结束位置的项。注意，slice()方法不会影响原始数组。
3. splice() 返回一个数组
a. 删除：splice(要删除的第一项的位置，要删除的项数) 如：splice(0,2)会删除数组中的前两项
b. 插入: splice(起始位置，0（要删除的项数），要插入的项（可多个）)
c. 替换: splice(起始位置，要删除的项数，要插入的项（可多个）)

位置方法

1. indexOf(要查找的项，（可选的）表示查找起点位置的索引) 法从数组的开头（位
置 0）开始向后查找
2. lastIndexOf(要查找的项，（可选的）表示查找起点位置的索引) 从数组的末尾开始向前查找
两方法在没有找到的情况下返回 -1

迭代方法

every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回 true。
filter()：对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。
forEach()：对数组中的每一项运行给定函数。这个方法没有返回值。
map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
some()：对数组中的每一项运行给定函数，如果该函数对任一项返回 true，则返回 true。

归并方法

这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。
接收 4 个参数：前一个值、当前值、项的索引和数组对象。
reduce() 从数组的第一项开始，逐个遍历到最后。
reduceRight() 从数组的最后一项开始，向前遍历到第一项

JS的内置对象？

箭头函数和普通函数的区别？

1. 箭头函数是匿名函数，不能作为构造函数，不能使用new
2. 箭头函数不绑定arguments，取而代之用rest参数...解决
3. 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
4. 箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响。
5. 箭头函数没有原型属性
6. 箭头函数不能当做Generator函数,不能使用yield关键字

es6新特性？

1. let+const块级作用域,有了块级作用域，还可以像强类型语言一样定义常量。由于之前没有块级作用域以及
 var 关键字所带来的变量提升，经常给我们的开发带来一些莫名其妙的问题。
2. Arrows 箭头函数
3. Class, extends, super 类的支持
4. 模板字面量用倒引号( `` )
5. 在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量

js中setInterval() 和 setTimeout() 的区别？

“==”与“===”的不同？

首先，“==” equality 等同， “===” identity 恒等。
“==”，两边值类型不同的时候，要先进行类型转换，再比较。
“===”，不做类型转换，类型不同一定不相等。
一言蔽之： ==先转换类型再做比较， ===先做类型判断，如果不是同一类型则直接为false。

call、bind、apply的区别？

bind、apply、call虽然都是改变 this 指向， 但是首先bind返回的是一个函数，需要执行。
而call和apply会自动执行，之后apply接受的参数为一个数组。

typescript和JavaScript的区别？

1. TypeScript是JavaScript的超集，包含JavaScript的所有元素，能运行JavaScript代码。
2. js是一种弱类型(或称动态类型)语言,即变量的类型是不确定的。ts是强类型语言
3. ts引入了静态类型、类、模块、接口和类型注释等方面的功能，更易于大项目的开发。

ftp和udp的区别？

http协议？

MVC（model、view、controller）模式的理解：

model（模型），数据层，负责存储数据
view（展示层），负责页面展示
controller（控制层），负责协调model和view层，根据用户在view上的动作早model上做出相应的更改，
同时将更改信息返回到view上。（controller可以直接访问model，也可以直接控制view，丹斯model和view
不能互相通信，相当于controller就是介于这两个之间的协调者）

MVVM(Model-View-ViewModel)模式的理解：

model（模型）：数据结构，负责存储数据
view（数据展示）：展示层，展示UI界面
ViewModel（算法数据处理），负责view和model之间信息转换
程序=数据结构+算法

scss是什么？

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 、嵌套、混合 、导入等功能

网页从输入网址到渲染完成经历了哪些过程？

1. 输入网址；
2. 解析出ip地址；
3. 与web服务器三次握手建立TCP连接；
4. 浏览器向web服务器发送http请求；
5. web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；
6. 浏览器处理资源文件并渲染页面；

三次握手

第一次握手：客户端采用TCP协议将带有SYN标志的数据包发送给服务器，等待服务器的确认。
第二次握手：服务器端在收到SYN的数据包后，必须确认SYN，并发送的ACK标志，同时，自己也将会向客户端发送
一个SYN标志。
第三次握手：客户端在接收到服务器段的SYN+ACK包后，自己会向服务器发送ACK包，完成三次握手。那么客户端
和服务器正式建立了连接，开始传输数据。

ajax：异步的JavaScript和xml，用以创建动态网页的技术，和后台进行交互。

        // 创建 XMLHttpRequest 对象        var ajax = new XMLHttpRequest();        // 规定请求的类型、URL 以及是否异步处理请求。        ajax.open('GET', url, true);        // 发送信息至服务器时内容编码类型        // setRequestHeader(): 设置自定义的请求头部信息(头部字段的名称,头部字段的值)        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");        // 发送请求        // 如果不需要通过请求主体发送数据，则必须传入 null，因为这个参数对有些浏览器来说是必需的。        // 调用 send()之后，请求就会被分派到服务器。        ajax.send(null);        //接受服务器响应数据        ajax.onreadystatechange = function () {            if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {            }        };

readyState：表示请求/响应过程的当前活动阶段：
 0：未初始化。尚未调用 open()方法。
 1：启动。已经调用 open()方法，但尚未调用 send()方法。
 2：发送。已经调用 send()方法，但尚未接收到响应。
 3：接收。已经接收到部分响应数据。
 4：完成。已经接收到全部响应数当初踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩jmnnnnnnnnnnnnnnnnn
据，而且已经可以在客户端使用了。
只要 readyState 属性的值由一个值变成另一个值，都会触发一次 readystatechange 事件。可以利用这个事件来检测每次状态变化后 readyState 的值。

什么情况会造成跨域？

同源策略限制不同源会造成跨域。以下任意一种情况不同，都是不同源。

http://www.baidu.com/8080/index.html

http://	协议不同
www	子域名不同
baidu.com	主域名不同
8080	端口号不同
www.baidu.com	ip地址和网址不同

跨域的解决方案：

1. CORS：跨源资源共享

原理：适用自定义的HTTP头部，让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。
服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求
限制：浏览器需要支持HTML5，可以支持POST，PUT等方法兼容ie9以上

需要后台设置
Access-Control-Allow-Origin: *              //允许所有域名访问，或者
Access-Control-Allow-Origin: http://a.com   //只允许所有域名访问

2. JSONP （JSON with padding（填充式 JSON 或参数式 JSON））

JSONP 由两部分组成：回调函数和数据。

被包含在函数调用中的 JSON，就像下面这样。

callback({ "name": "Nicholas" });

下面是一个典型的JSONP请求。

http://freegeoip.net/json/?callback=handleResponse

只能解决get跨域(问的最多)

原理：动态创建一个script标签。利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。
步骤：

去创建一个script标签
script的src属性设置接口地址
接口参数,必须要带一个自定义函数名要不然后台无法返回数据。
通过定义函数名去接收后台返回数据

//去创建一个script标签
var  script = document.createElement("script");
//script的src属性设置接口地址 并带一个callback回调函数名称
script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据
function jsonpCallback(data){
    //注意  jsonp返回的数据是json对象可以直接使用
    //ajax  取得数据是json字符串需要转换成json对象才可以使用。
}

前端面试总结