es6
class、module、generator/ promise/ async/ await、let/ const、解构赋值、块级作用域、函数默认参数、箭头函数、set数据结构、es6基础
1、class语法相对原型、构造函数、继承更接近传统语法，它的写法能够让对象原型的写法更加清晰、面向对象编程的语法更加通俗
| class和普通构造函数有何区别？ |
1、js构造函数
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); // new一个实例
console.log(m.add())
2、class基本语法
class MathHandler{ // MathHandler是一个构造函数，构造函数都有显式原型:prototype
constructor(x, y) { // 构造器，java,c#的语法，面向对象高级语言的语法
this.x = x;
this.y = y;
}
add() {
return this.x + this.y;
}
}
const m = new MathHandle(1, 2); // 实例，所有实例都会有一个隐式原型:__proto__
console.log(m.add());
typeof MathHandle // 'function'
MathHandle.prototype.constructor === MathHandle; // true
m.__proto__ === MathHandle.prototype; // true
3、语法糖
class本身就是一个语法糖
4、继承
（1）低级构造函数的原型，赋值成高级构造函数的实例
（2)
function Animal(){this.eat = function() {console.log('animal eat')}}
function Dog(){this.bark = function() {console.log('dog dark')}}
Dog.prototype = new Animal(); // 绑定原型，实现继承
var hashiqi = new Dog();
class的继承
class Animal() {
constructor(name) {
this.name = name;
}
eat() {
alert(this.name + 'eat);
}
}
class Dog extends Animal{
constructor(name) {
super(name); // 如果有class,extends，则要用super(),super是被继承的class的constructor
this.name = name;
}
eat() {
alert(this.name + 'eat);
}
}
| Generator原理？ |
待完善
- promise
1、promise 有 3 种状态：pending（进行中）、fulfilled（已完成，又称为Resolved） 或 rejected（已失败）。状态改变只能是 pending->fulfilled 或者 pending->rejected，状态一旦改变则不能再变。
2、new promise实例，要return
3、new promise时要传入函数，函数有resolve、reject两个参数
4、成功时执行resolve()，失败时执行reject()
5、then监听结果
| 手写一个promise？ |
var promise = new Promise((resolve, reject) => {
if (操作成功) {
resolve(value);
} else {
retject(error);
}
});
promise.then(function(value) {
// success
}, function(value) {
// failure
})
| jQuery的ajax返回的是promise对象吗？ |
jquery的ajax返回的是deferred对象，通过promise的resolve()方法将其转换为promise对象。
var jsPromise = Promise.resolve($.ajax('/whatever.json'));
| 分析下列程序代码，得出运行结果，解释其原因？ |
const promise = new Promise((resolve, reject) => {
resolve('success1')
reject('error')
resolve('success2')
})
promise
.then((res) => {
console.log('then: ', res)
})
.catch((err) => {
console.log('catch: ', err)
})
then：success1
构造函数中的 resolve 或 reject 只有第一次执行有效，多次调用没有任何作用。因为promise 状态一旦改变则不能再变。
| 分析下列程序代码，得出运行结果，解释其原因？ |
Promise.resolve(1)
.then(2)
.then(Promise.resolve(3))
.then(console.log)
1
.then 或者.catch 的参数期望是函数，传入非函数则会发生值穿透。
| 分析下列程序代码，得出运行结果，解释其原因？ |
Promise.resolve()
.then(() => {
return new Error('error!!!')
})
.then((res) => {
console.log('then: ', res)
})
.catch((err) => {
console.log('catch: ', err)
})
then: Error: error!!!
1、.then或者.catch中return一个error对象并不会抛出错误，所以不会被后续的.catch捕获，需要改成其中的一种：
return Promise.reject(new Error('error!!!'))
throw new Error('error!!!')
2、因为返回任意一个非promise的值都会被包裹成promise对象，即return new Error('error!!!') 等价于return Promise.resolve(new Error(‘error!!!’))
| 分析下列程序代码，得出运行结果，解释其原因？ |
Promise.resolve()
.then(function success (res) {
throw new Error('error')
}, function fail1 (e) {
console.error('fail1: ', e)
})
.catch(function fail2 (e) {
console.error('fail2: ', e)
})
fail2: Error: error
1、.then可以接收两个参数，第一个是处理成功的函数，第二个是处理错误的函数。.catch是.then第二个参数的简便写法。它们在用法上有一点需要注意：.then的第二个处理错误的函数捕获不了第一个处理成功的函数抛出的错误，而后续的.catch可以捕获之前的错误。
| 分析下列程序代码，得出运行结果，解释其原因？ |
process.nextTick(() => {
console.log('nextTick')
})
Promise.resolve()
.then(() => {
console.log('then')
})
setImmediate(() => {
console.log('setImmediate')
})
console.log('end')
end
nextTick
then
setImmediate
1、process.nextTick 和 promise.then 都属于 microtask，而 setImmediate 属于 macrotask，在事件循环的 check 阶段执行。事件循环的每个阶段（macrotask）之间都会执行 microtask，事件循环的开始会先执行一次 microtask。
- async、await
1、then只是将callback拆分了。
2、async/await是最直接的同步写法
import 'babel-polyfill';
function load
const load = async function() {
const result1 = await loadImg(src1);
console.log(result1);
const result2 = swait loadImg(src2);
console.log(result2);
}
load();
①使用await，函数必须用async标识
②await后面跟的是一个promise实例
③需要babel-polyfill
| generator, asynce/await的关系？ |
待完善
1、es5有两种声明变量的方法：var, function
es6有6种声明变量的方法：var, function, let, const, import, class
| let、var的区别？ |
1、块级作用域：let定义的变量有块级作用域，var声明的变量只有全局和函数作用域。
2、变量提升：let不存在变量提升，var存在变量提升。
3、重复声明：let不允许重复声明，var可以重复声明。
4、暂时性死区：在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”。
var tmp = 123;
if (true) {
tmp = 'abc'; // 执行报错：Uncaught ReferenceError: tmp is not defined
let tmp;
}
隐蔽的死区
function bar(x = y, y = 2) {
return [x, y];
}
bar(); // 报错
| 请选择正确的一项？ |
// A
let {foo} = {bar: 'bar'};
// B
let {foo: {bar}} = {bar: 'bar'};
// C
let {foo, bar} = {foo: 'aaa', bar: 'bbb'};
// D
let {foo: baz} = {foo: 'aaa', bar: 'bbb'};
B
1、B选项报错：Uncaught TypeError: Cannot destructure property 'bar' of 'undefined' or 'null'.
应改成：let {foo: {bar}} = {foo:{bar: 'bar'}};;
1、在使用=>定义函数的时候，this的指向是定义时所在的对象，而不是使用时所在的对象；
2、不能够用作构造函数，这就是说，不能够使用new命令，否则会抛出一个错误。
3、不能够使用arguments对象。
4、不能使用yield命令。
5、当要求动态上下文的时候，就不能够使用箭头函数，也就是this的固定化。
| 写出下列的值？ |
class Animal {
constructor() {
this.type = 'Animal';
}
say(val) {
setTimeout(function() {
console.log(this);
console.log(`${this.type} say ${val}`);
}, 200);
}
}
var animal = new Animal();
animal.say('hi');
window
undefined says hi
1、《javaScript高级程序设计》第二版中，写到“超时调用的代码都是在全局作用域中执行的，因此函数中this的值在非严格模式下指向window对象，在严格模式下是undefined。也就是说在非严格模式下，setTimeout中所执行函数中的this，永远指向window”。
2、箭头函数
class Animal {
constructor() {
this.type = 'Animal';
}
say(val){
setTimeout(() => {
console.log(this);
console.log(`${this.type} say ${val}`);
}, 200);
}
}
var animal = new Animal();
animal.say('hi');
（1）特点：
①不需要function 关键字来创建函数。
②省略return 关键字
箭头函数有两种格式
a.只包含一个表达式，可以省略{…} 和 return
const add = (a, b) => a + b;
b.包含多条语句，这时候就不能省略{…}和return
const anotherAdd = (a, b) => {return a + b}
③继承当前上下文的this关键字
1set本身是一个构造函数，它类似于数组，但是成员值都是唯一的。
| for…of, for…in的区别？ |
1、在循环对象属性的时候，使用for…in，在遍历数组的时候的时候使用for…of。
2、for…in循环出的是key，for…of循环出的是value
3、for…of是ES6新引入的特性。修复了ES5引入的for…in的不足
4、for…of不能循环普通的对象，需要通过和Object.keys()搭配使用
var student = {
name: 'Jack',
age: 27,
sex: 'female'
};
var arr = [1, 4, 'small'];
arr.school = 'zheda';
// 1、for...in 遍历对象，得到key
for (let key in student) {
console.log(key); // name,age,sex
}
//for (let i of student) { // 报错：student is not iterable(可迭代的)
// console.log(i);
//}
// 2、直接使用for...of报错，可以用Object.keys(obj);
for (let key of Object.keys(student)) {
// 用Object.keys()获取对象key的数组
console.log(key); // name,age,sex
}
// 3、for...in遍历数组，得到index + key
for (let i in arr) {
console.log(i); // 0,1,2,school
}
// 4、for...of遍历数组，得到value
for (let key of arr) {
console.log(key); // 1,4,small
}
| 总结一下es6其他常用功能？ |
1、let、const /'kɑnst/
const定义常量，常量不能被重新赋值
2、多行字符串/模板变量
js拼接变量字符串模板
console.log(`输出：${name}`)
3、解构赋值
整体数组或对象中拿到其中一个元素或属性值
// obj
const obj = {a: 10, b: 20, c:30};
const {a, c} = obj;
console.log(a); // 10
console.log(c); // 30
// arr
const arr = ['xxx', 'yyy', 'zzz'];
const [x, y, z] = arr;
console.log(x); // xxx
console.log(z); // zzz
4、块级作用域
for循环
// js
var obj = {a: 100, b: 200};
for (var item in obj) {console.log(item)};
console.log(item); // 'b'
// es6
const obj = {a: 100, b: 200};
for (let item in obj) {console.log(item)};
console.log(item); // undefined
5、函数默认参数
// js
function(a, b) {
if(b == null) {b = 0;}
}
// es6
function (a, b=0) {
}
6、箭头函数
彻底解决了之前函数this指向全局window对象的问题
function fn() {
console.log('real', this); // {a: 100}
var arr = [1, 2, 3];
// 普通js
arr.map(function(item) {
console.log('js',this); // window
return item + 1;
});
// 箭头函数
arr.map(item => {
console.log('es6', this); // {a: 100}
return item + 1;
});
}
fn.call({a: 100})
| babel原理？ |
待完善
答：ast转换