js经典试题之ES6

js经典试题之ES6

1：在ECMAScript6 中,Promise的状态

答案：pending  resolved（fulfilled） rejected

解析：

Promise对象只有三种状态：

异步操作“未完成”（pending）—— 异步操作“已完成”（resolved，又称fulfilled）—— 异步操作“失败”（rejected）

这三种的状态的变化途径只有两种：

异步操作从“未完成”到“已完成”——异步操作从“未完成”到“失败”。

这种变化只能发生一次，一旦当前状态变为“已完成”或“失败”，就意味着不会再有新的状态变化了。因此，Promise对象的最终结果只有两种：

异步操作成功，Promise对象传回一个值，状态变为resolved。——异步操作失败，Promise对象抛出一个错误，状态变为rejected。

2：以下符合 ES6 写法的有：

class Foo
{
	constructor() {return Object.create(null);}
}
Foo()

　　

var m=1;
export m;

　　

export var firstName=’Michael’;

　　

在A模块中export{readFile}后，在B模块中import readFile from ‘A’可以获取到readFile

答案： C

解析：

A、Fun() 把 class 当成方法来用？ var fun = new Func() 这样用就对了

B、export 后面变量没加括号；

D、import readFile 没加括号，是导入 default 的用法，但是前面不是 export 为 default

 

参照 export 和 import 用法：

1、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

2、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

 

export {name1,name2, …,nameN};
export {variable1asname1,variable2asname2, …,nameN};
export letname1,name2, …,nameN; // also var
export letname1= …,name2= …, …,nameN; // also var, const

　　

export expression;
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export {name1as default, … };

　　

export * from …;
export {name1,name2, …,nameN} from …;
export {import1asname1,import2asname2, …,nameN} from …;

　　

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

　　

 3：以下代码的输出结果

setTimeout(function(){console.log(4)},0);
      new Promise(function(resolve){
          console.log(1)
          for( var i=0 ; i<10000 ; i++ ){
              i==9999 && resolve()
          }
          console.log(2)
      }).then(function(){
          console.log(5)
      });
      console.log(3);

答案： 1 2 3 5 4

解析：因为 setTimeout 是属于 macrotask 的，而整个 script 也是属于一个 macrotask, promise.then 回调 是 microtask ,执行过程大概如下：

• 由于整个 script 也属于一个 macrotask, 由于会先执行 macrotask 中的第一个任务，再加上promise 构造函数因为是同步的，所以会先打印出 1和2
• 然后继续同步执行末尾的 console.log(3) 打印出3
• 此时 setTimeout 被推进到 macrotask 队列中， promise.then 回调被推进到 microtask 队列中
• 由于在第一步中已经执行完了第一个 macrotask , 所以接下来会顺序执行所有的 microtask, 也就是 promise.then 的回调函数，从而打印出5
• microtask 队列中的任务已经执行完毕，继续执行剩下的 macrotask 队列中的任务，也就是 setTimeout, 所以打印出 4

macrotasks: setTimeout setInterval setImmediate I/O UI渲染

microtasks: Promise process.nextTick Object.observe MutationObserver

4、关于 javascript 模块化，AMD和CMD的含义和区别

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD也采用require()语句加载模块，但是不同于CommonJS。
主要有两个Javascript库实现了AMD规范：require.js和curl.js。

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
区别：
1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。
2. CMD 推崇依赖就近，AMD 推崇依赖前置。

CMD 默认推荐的是

define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
})

AMD 默认推荐的是

define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})

　　

5、以下代码会输出什么

class Foo {
  constructor (name) {
    this.name = name
  }
  greet () {
    console.log('hello, this is ', this.name)
  }
  someThingAsync () {
    return Promise.resolve()
  }
  asyncGreet () {
    this.someThingAsync()
    .then(this.greet)
  }
}
new Foo('dog').asyncGreet()

答案：Cannot read property 'name' of undefined

解析：greet 没有在正确的上下文中运行。，这个问题依然有很多解决方案。

asyncGreet() {
    this.someThingAsync()
        .then(this.greet.bind(this))
}

也可以在类的constructor中绑定它：

constructor(name) {
        this.name = name
        this.greet = this.greet.bind(this)
}