js练习题第20天 答案及解析

本篇文章是js基础练习题第二十天的答案及解析部分，纯题目部分请移步js基础练习题第20天

正文

1.当使用new命令时，实际上执行了哪些操作？

答案：使用`new`命令时，执行了以下操作：

创建一个空对象
将这个对象的原型指向构造函数的prototype属性
将这个对象赋值给函数内部的this关键字
开始执行构造函数内部的代码

2.如果指定setTimeout(f, 0)，那么f会立即执行吗？

答案：不会

必须要等到当前脚本的同步任务全部处理完以后才会执行setTimeout的回调函数f，也就是说f会在下一轮事件循环开始才执行。

关于setTimeout的更多知识，参考MDN|setTimeout。

function f1() {
  return new Promise(function(resolve,reject) {
    resolve(1);
  });
}
function f2() {
  return 2;
}

f1().then(function(){ return f2(); }).then(console.log)输出___________，
f1().then(function(){ f2(); }).then(console.log)输出___________，
f1().then(f2()).then(console.log)输出___________，
f1().then(f2).then(console.log)输出___________。

答案：`2`、`undefined`、`1`、`2`

关于Promise这部分的分析，其实是比较繁琐的。记住Promise.prototype.then方法返回一个新的promise, 将以回调的返回值来resolve。关于Promise的更多信息，参考MDN|Promise。

4.使用Promise完成图片的加载。编写一个preLoadImg(url)函数，其中url参数为图片的路径，当图片加载完成时，提示加载成功，否则提示加载失败。

参考代码如下所示：

const preLoadImg = (url) => {
  // 返回一个Promise，在其中创建图片并指定相关信息
  return new Promise((resolve, reject) => {
    let image = new Image();
    image.onload = resolve;
    image.onerror = reject;
    image.src = url;
  });
};
preLoadImg('img/example.jpg')
  // 创建成功，则插入body尾部
  .then((e) => document.body.append(e.target))
  // 根据状态，执行resolve或者rejected回调
  .then(() => console.log('加载成功'), () => console.log('加载失败'))

5.当下列代码执行后，会在控制台依次输出______________________。

setTimeout(() => {
  console.log(1);
}, 0);
new Promise((resolve, reject) => {
  console.log(2);
  resolve(3);
}).then(console.log);
const f = async () => {
  await console.log(4);
};
f().then(console.log);
console.log(5);

答案：`2`、`4`、`5`、`3`、`undefined`、`1`

这道题牵扯到了JS的事件循环机制。简而言之呢，就是同步任务先执行，然后执行Promise的then回调，最后进入下一轮事件循环，执行setTimeout或者setInterval的回调。关于事件机制，可参考深入核心，详解事件循环机制。

6.['1', '1', '1'].map(parseInt)的返回值为___________。

答案：`[1, NaN, 1]`

Array.prototype.map(item, index, arr)函数接收三个参数，即数组项、索引和整个数组。parseInt(str, base)函数接收两个参数，即要转换的字符串和转换基数。所以上面的代码拆开来就是：

1
2
3

parseInt('1', 0); // 返回1，基数为0，默认将基数重置为10
parseInt('1', 1); // 返回NaN，基数为1，基数应大于等于2
parseInt('1', 2); // 返回1，基数为2

7.[typeof null, null instanceof Object]的结果为___________。

答案：`["object", false]`

typeof null的结果为null，是一个特例；对任何基本类型值调用instanceof操作符，都会返回false。

8.[3, 2, 1].reduce(Math.pow)的结果为___________。

答案：`9`

相当于(3 ** 2) ** 1。

说明

题目中出现的JS指的是采用ECMAScript 2015及之后标准的JavaScript

答案中，若有错误和需完善的地方，可在下方留言反馈哈~~
查看纯习题版，请点击js基础练习题第20天

我的前端后花园