zoukankan      html  css  js  c++  java
  • 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 用法:
     
    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.jscurl.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)
    }
    

      

  • 相关阅读:
    大话数据结构笔记
    zsh安装教程
    Matlab安装教程
    7-16 插入排序还是归并排序 (25 分)
    7-14 插入排序还是堆排序 (25 分)
    7-14 二叉搜索树的最近公共祖先 (30 分)
    7-11 笛卡尔树 (25 分)
    中缀转换为后缀和前缀
    7-15 水果忍者 (30 分)
    兔子的区间密码(思维)
  • 原文地址:https://www.cnblogs.com/momozjm/p/7797456.html
Copyright © 2011-2022 走看看