前端面试之ES6篇（高产似母猪）

这也是前端面试常常询问的问题，常常问你es6出现了哪些新的特性，平时又使用过那些。在编写此教程的时候，第一句话每每就是面试经常问到的地方，而后后面就是他的详细解释，面试要求的内容我会用*标记出来。写技术文档是真的累啊，虽然是看别人的文档，可是你得看不少，并且还得本身总结啊。因此说要是以为对你有用仍是帮我点个star吧https://github.com/skychenbo

一、箭头函数须要注意的地方
二、ES6 let、const
三、set数据结构
四、promise对象的用法,手写一个promise
五、class的理解
六、模版语法的理解
七、rest参数
八、	module体系
复制代码

箭头函数须要注意的地方

*当要求动态上下文的时候，就不可以使用箭头函数。也就是this的固定化 一、在使用=>定义函数的时候，this的指向是定义时所在的对象，而不是使用时所在的对象 二、不可以用做构造函数，这就是说，不可以使用new命令，不然就会抛出一个错误 三、不可以使用arguments对象 四、不能使用yield命令 这是一道当年很困惑个人一道题不知道你在第一眼能不能看出其结果,this的指向老是让人困扰，可是有了=>之后妈妈不再用担忧你使用this了

class Animal {
	constructor(){
		this.type = 'animal'
	}
	says(say) {
		setTimeout(function () {
			console.log(this.type + 'says' + say)
		},1000)
	}
}
var animal = new Animal()
animal.says('hi') // undefined says hi
复制代码

咱们再来看看=>的状况

class Animal() {
	constructor() {
		this.type = 'animal'
	}
	says(say) {
		setTimeout(() => {
			console.log(this.type + ' says ' + say)
		}, 1000)
	}
}
var animal = new Animal()
animal.says('hi') // animal says hi
复制代码

ES6 let、const *let是更完美的var，不是全局变量，具备块级函数做用域,大多数状况不会发生变量提高。const定义常量值，不可以从新赋值，若是值是一个对象，能够改变对象里边的属性值 let 一、let声明的变量具备块级做用域 二、let声明的变量不能经过window.变量名进行访问 三、形如for(let x..)的循环是每次迭代都为x建立新的绑定 下面是var带来的不合理场景

var a = []
for (var i = 0; i < i; i++) {
	a[i] = function () {
		console.log(i)
	}
}
a[5]() // 10
复制代码

在上述代码中，变量i是var声明的，在全局范围类都有效。因此每一次循环，新的i值都会覆盖旧值，致使最后输出都是10 而若是对循环使用let语句的状况，那么每次迭代都是为x建立新的绑定代码以下

var a = []
for (let i = 0; i < 10; i++) {
	a[i] = function () {
		console.log(i)
	}
}
a[5]() // 5
复制代码

固然除了这种方式让数组中的各个元素分别是不一样的函数，咱们还能够采用闭包和当即函数两种方法 这是闭包的方法

function showNum(i) {
	return function () {
		console.log(i)
	}
}
var a = []
for (var i = 0; i < 5; i++) {
	a[i] = showNum(i)
}
复制代码

这是当即函数的方法

var a = []
for (var i = 0; i < 5; i++) {
	a[i] = (function (i) {
		return function () {
			console.log(i)
		}
	})(i)
}
a[2]()
复制代码

Set数据结构

*es6方法,Set自己是一个构造函数，它相似于数组，可是成员值都是惟一的

const set = new Set([1,2,3,4,4])
[...set] // [1,2,3,4]
Array.from(new Set())是将set进行去重
复制代码

promise对象的用法,手写一个promise

promise是一个构造函数，下面是一个简单实例

var promise = new Promise((resolve,reject) => {
	if (操做成功) {
		resolve(value)
	} else {
		reject(error)
	}
})
promise.then(function (value) {
	// success
},function (value) {
	// failure
})
复制代码

Class的讲解

*class语法相对原型、构造函数、继承更接近传统语法，它的写法可以让对象原型的写法更加清晰、面向对象编程的语法更加通俗 这是class的具体用法

class Animal {
	constructor () {
		this.type = 'animal'
	}
	says(say) {
		console.log(this.type + 'says' + say)
	}
}
 let animal = new Animal()
 animal.says('hello') // animal says hello

 class Cat extends Animal {
 	constructor() {
 		super()
 		this.type = 'cat'
 	}
 }
 let cat = new Cat()
 cat.says('hello') // cat says hello
复制代码

能够看出在使用extend的时候结构输出是cat says hello 而不是animal says hello。说明contructor内部定义的方法和属性是实例对象本身的，不能经过extends 进行继承。在class cat中出现了super(),这是什么呢 在ES6中，子类的构造函数必须含有super函数，super表示的是调用父类的构造函数，虽然是父类的构造函数，可是this指向的倒是cat Object.assign 方法 var n = Object.assign(a,b,c)向n中添加a,b,c的属性

模版语法

*就是这种形式${varible},在以往的时候咱们在链接字符串和变量的时候须要使用这种方式'string' + varible + 'string'可是有了模版语言后咱们可使用string${varible}string这种进行链接

rest参数

*es6引入rest参数，用于获取函数的多余参数，这样就不须要使用arguments对象了 ex:

function add(...values) {
	let sum = 0
	for(var val of values) {
		sum += val
	}
	return sum
}
复制代码

module体系

*历史上js是没有module体系，没法将一个大程序拆分红一些小的程序。在es6以前，有commonJs,AMD两种 CommonJS是如何书写的呢

const animal = require('./content.js')
	// content.js
	module.exports = 'a cat'
复制代码

require.js是这样作的 // content.js

define('content.js', function () {
	return 'A cat'
})

require(['./content.js'], function (animal) {
	console.log(animal) // a cat
})
复制代码

ES6的语法（在我用的vue中，就使用的是这个）

import animal from './content'
// content.js
export default 'a cat'
复制代码

es6 import的其余用法 在vue中能够 import animal from './content' animal这个值能够根据你的喜欢而改变，可是有一个问题就是若是一旦引入的是函数或者变量时，你就必须和content中的名字保持一致，能够参照 import { say, type } from './content' 经常使用的还有一种写法 import * as content from './content' 这种写法就是表示全部的输出值都在这个对象上