学累了吧，来做十道JS输出题放松放松吧

Miroku_huang
135 阅读6分钟

废话不多说，答案在最后

第一题

// demo1
const spookyItems = ["👻", "🎃", "🕸"]; 
({ item: spookyItems[3] } = { item: "💀" }); 
console.log(spookyItems);

第二题

// demo2
async function* range(start, end) {
	for (let i = start; i <= end; i++) {
		yield Promise.resolve(i);
	}
}

(async () => {
	const gen = range(1, 3);
	for await (const item of gen) {
		console.log(item);
	}
})();

第三题

// demo3
const one = (false || {} || null)
const two = (null || false || "")
const three = ([] || 0 || true)

console.log(one, two, three)

第四题

// demo4
const getList = ([x, ...y]) => [x, y]
const getUser = user => { name: user.name, age: user.age }

const list = [1, 2, 3, 4]
const user = { name: "Lydia", age: 21 }

console.log(getList(list))
console.log(getUser(user))

第五题

// demo5
class Person {
    constructor() {
      this.name = "Lydia"
    }
  }
  
  Person = class AnotherPerson {
    constructor() {
      this.name = "Sarah"
    }
  }
  
  const member = new Person()
  console.log(member.name)

第六题

// demo6
async function getData() {
    return await Promise.resolve("I made it!");
  }
  
  const data = getData();
  console.log(data);

第七题

// demo7
// index.js
console.log('running index.js');
import { sum } from './sum.js';
console.log(sum(1, 2));

// sum.js
console.log('running sum.js');
export const sum = (a, b) => a + b;

第八题

// demo8
[1, 2, 3, 4].reduce((x, y) => console.log(x, y));

第九题

// demo9
const settings = {
    username: "lydiahallie",
    level: 19,
    health: 90
  };
  
  const data = JSON.stringify(settings, ["level", "health"]);
  console.log(data);

第十题

// demo10
const person = { name: "Lydia" };

Object.defineProperty(person, "age", { value: 21 });

console.log(person);
console.log(Object.keys(person));

第一题答案

["👻", "🎃", "🕸", "💀"]

解析：通过解构对象们，我们可以从右手边的对象中拆出值，并且将拆出的值分配给左手边对象同名的属性。在这种情况下，我们将值 "💀" 分配给 spookyItems[3]。相当于我们正在篡改数组 spookyItems，我们给它添加了值 "💀"。当输出 spookyItems 时，结果为 ["👻", "🎃", "🕸", "💀"]。

第二题答案

1 2 3

解析：我们给 函数range 传递： Promise{1}, Promise{2}, Promise{3}，Generator 函数 range 返回一个全是 async object promise 数组。我们将 async object 赋值给变量 gen，之后我们使用for await ... of 进行循环遍历。我们将返回的 Promise 实例赋值给 item： 第一个返回 Promise{1}， 第二个返回 Promise{2}，之后是 Promise{3}。因为我们正 awaiting item 的值，resolved 状态的 promsie，promise数组的resolved 值 以此为： 1，2，3.

第三题答案

{} "" []

解析：使用||运算符，我们可以返回第一个真值。 如果所有值都是假值，则返回最后一个值。 （false || {} || null）：空对象{}是一个真值。 这是第一个（也是唯一的）真值，它将被返回。one等于{}。 （null || false ||“”）：所有值都是假值。 这意味着返回传递的值""。 two等于""。 （[] || 0 ||“”）：空数组[]是一个真值。 这是第一个返回的真值。 three等于[]。

第四题答案

[1, [2, 3, 4]] and 报错

解析：getList函数接收一个数组作为其参数。 在getList函数的括号之间，我们立即解构这个数组。 您可以将其视为： [x, ...y] = [1, 2, 3, 4] 使用剩余的参数... y，我们将所有剩余参数放在一个数组中。 在这种情况下，其余的参数是2，3和4。 y的值是一个数组，包含所有其余参数。 在这种情况下，x的值等于1，所以当我们打印[x，y]时，会打印[1，[2,3,4]]。 getUser函数接收一个对象。对于箭头函数，如果只返回一个值，我们不必编写花括号。但是，如果您想从一个箭头函数返回一个对象，您必须在圆括号之间编写它，否则不会返回任何值!下面的函数将返回一个对象: const getUser = user => ({ name: user.name, age: user.age }) 。由于在这种情况下不返回任何值，因此该函数报错。

第五题答案

"Sarah"

解析：我们可以将类设置为等于其他类/函数构造函数。 在这种情况下，我们将Person设置为AnotherPerson。 这个构造函数的名字是Sarah，所以新的Person实例member上的name属性是Sarah。

第六题答案

Promise {}

解析：异步函数始终返回一个promise。await仍然需要等待promise的解决：当我们调用getData()并将其赋值给data，此时data为getData方法返回的一个挂起的promise，该promise并没有解决。 如果我们想要访问已解决的值"I made it!"，可以在data上使用.then()方法： data.then(res => console.log(res)) 这样将打印 "I made it!"

第七题答案

running sum.js, running index.js, 3

解析：import命令是编译阶段执行的，在代码运行之前。因此这意味着被导入的模块会先运行，而导入模块的文件会后执行。 这是CommonJS中require（）和import之间的区别。使用require()，您可以在运行代码时根据需要加载依赖项。 如果我们使用require而不是import，running index.js，running sum.js，3会被依次打印。

第八题答案

1 2 and undefined 3 and undefined 4

解析：reducer 函数接收4个参数:

  1. Accumulator (acc) (累计器)
  2. Current Value (cur) (当前值)
  3. Current Index (idx) (当前索引)
  4. Source Array (src) (源数组) reducer 函数的返回值将会分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。 reducer 函数还有一个可选参数initialValue, 该参数将作为第一次调用回调函数时的第一个参数的值。如果没有提供initialValue，则将使用数组中的第一个元素。 在上述例子，reduce方法接收的第一个参数(Accumulator)是x, 第二个参数(Current Value)是y。 在第一次调用时，累加器x为1，当前值“y”为2，打印出累加器和当前值：1和2。 例子中我们的回调函数没有返回任何值，只是打印累加器的值和当前值。如果函数没有返回值，则默认返回undefined。 在下一次调用时，累加器为undefined，当前值为“3”, 因此undefined和3被打印出。 在第四次调用时，回调函数依然没有返回值。 累加器再次为 undefined ，当前值为“4”。 undefined和4被打印出。

第九题答案

"{"level":19, "health":90}"

解析：JSON.stringify的第二个参数是 替代者(replacer) . 替代者(replacer)可以是个函数或数组，用以控制哪些值如何被转换为字符串。 如果替代者(replacer)是个 数组 ，那么就只有包含在数组中的属性将会被转化为字符串。在本例中，只有名为"level" 和 "health" 的属性被包括进来， "username"则被排除在外。 data 就等于 "{"level":19, "health":90}". 而如果替代者(replacer)是个 函数，这个函数将被对象的每个属性都调用一遍。 函数返回的值会成为这个属性的值，最终体现在转化后的JSON字符串中（译者注：Chrome下，经过实验，如果所有属性均返回同一个值的时候有异常，会直接将返回值作为结果输出而不会输出JSON字符串），而如果返回值为undefined，则该属性会被排除在外。

第十题答案

{ name: "Lydia", age: 21 }, ["name"]

解析：通过defineProperty方法，我们可以给对象添加一个新属性，或者修改已经存在的属性。而我们使用defineProperty方法给对象添加了一个属性之后，属性默认为 不可枚举(not enumerable) . Object.keys方法仅返回对象中 可枚举(enumerable)  的属性，因此只剩下了"name". 用defineProperty方法添加的属性默认不可变。你可以通过writable, configurable 和 enumerable属性来改变这一行为。这样的话， 相比于自己添加的属性，defineProperty方法添加的属性有了更多的控制权。

avatar
文章
阅读
粉丝