JavaScript 进阶问题列表(各种js代码段1-65)_Javascript

我在我的 instagram 上每天都会发布 javascript 的多选问题，并且同时也会在这个仓库中发布。

从基础到进阶，测试你有多了解 javascript，刷新你的知识，或者帮助你的 coding 面试！ :muscle: :rocket: 我每周都会在这个仓库下更新新的问题。

答案在问题下方的折叠部分，点击即可展开问题。祝你好运

因为篇幅有限这里提供的是1-65条，剩下的在文章结尾

1. 输出是什么？

function sayhi() {
  console.log(name)
  console.log(age)
  var name = 'lydia'
  let age = 21
}

sayhi()

a: lydia 和 undefined
b: lydia 和 referenceerror
c: referenceerror 和 21
d: undefined 和 referenceerror

答案

答案：d

在函数内部，我们首先通过 var 关键字声明了 name 变量。这意味着变量被提升了（内存空间在创建阶段就被设置好了），直到程序运行到定义变量位置之前默认值都是 undefined。因为当我们打印 name 变量时还没有执行到定义变量的位置，因此变量的值保持为 undefined。

通过 let 和 const 关键字声明的变量也会提升，但是和 var 不同，它们不会被初始化。在我们声明（初始化）之前是不能访问它们的。这个行为被称之为暂时性死区。当我们试图在声明之前访问它们时，javascript 将会抛出一个 referenceerror 错误。

2. 输出是什么？

for (var i = 0; i &lt; 3; i++) {
  settimeout(() =&gt; console.log(i), 1)
}

for (let i = 0; i &lt; 3; i++) {
  settimeout(() =&gt; console.log(i), 1)
}

a: 0 1 2 和 0 1 2
b: 0 1 2 和 3 3 3
c: 3 3 3 和 0 1 2

答案

答案：c

由于 javascript 的事件循环，settimeout 回调会在遍历结束后才执行。因为在第一个遍历中遍历 i 是通过 var 关键字声明的，所以这个值是全局作用域下的。在遍历过程中，我们通过一元操作符 ++ 来每次递增 i 的值。当 settimeout 回调执行的时候，i 的值等于 3。

在第二个遍历中，遍历 i 是通过 let 关键字声明的：通过 let 和 const 关键字声明的变量是拥有块级作用域（指的是任何在 {} 中的内容）。在每次的遍历过程中，i 都有一个新值，并且每个值都在循环内的作用域中。

3. 输出是什么？

const shape = {
  radius: 10,
  diameter() {
    return this.radius * 2
  },
  perimeter: () =&gt; 2 * math.pi * this.radius
}

shape.diameter()
shape.perimeter()

a: 20 and 62.83185307179586
b: 20 and nan
c: 20 and 63
d: nan and 63

答案

答案：b

注意 diameter 的值是一个常规函数，但是 perimeter 的值是一个箭头函数。

对于箭头函数，this 关键字指向的是它当前周围作用域（简单来说是包含箭头函数的常规函数，如果没有常规函数的话就是全局对象），这个行为和常规函数不同。这意味着当我们调用 perimeter 时，this 不是指向 shape 对象，而是它的周围作用域（在例子中是 window）。

在 window 中没有 radius 这个属性，因此返回 undefined。

4. 输出是什么？

+true;
!"lydia";

a: 1 and false
b: false and nan
c: false and false

答案

答案：a

一元操作符加号尝试将 bool 转为 number。true 转换为 number 的话为 1，false 为 0。

字符串 'lydia' 是一个真值，真值取反那么就返回 false。

5. 哪一个是正确的？

const bird = {
  size: 'small'
}

const mouse = {
  name: 'mickey',
  small: true
}

a: mouse.bird.size是无效的
b: mouse[bird.size]是无效的
c: mouse[bird["size"]]是无效的
d: 以上三个选项都是有效的

答案

答案：a

在 javascript 中，所有对象的 keys 都是字符串（除非对象是 symbol）。尽管我们可能不会定义它们为字符串，但它们在底层总会被转换为字符串。

当我们使用括号语法时（[]），javascript 会解释（或者 unboxes）语句。它首先看到第一个开始括号 [ 并继续前进直到找到结束括号 ]。只有这样，它才会计算语句的值。

mouse[bird.size]：首先计算 bird.size，这会得到 small。mouse["small"] 返回 true。

然后使用点语法的话，上面这一切都不会发生。mouse 没有 bird 这个 key，这也就意味着 mouse.bird 是 undefined。然后当我们使用点语法 mouse.bird.size 时，因为 mouse.bird 是 undefined，这也就变成了 undefined.size。这个行为是无效的，并且会抛出一个错误类似 cannot read property "size" of undefined。

6. 输出是什么？

let c = { greeting: 'hey!' }
let d

d = c
c.greeting = 'hello'
console.log(d.greeting)

a: hello
b: undefined
c: referenceerror
d: typeerror

答案

答案：a

在 javascript 中，当设置两个对象彼此相等时，它们会通过引用进行交互。

首先，变量 c 的值是一个对象。接下来，我们给 d 分配了一个和 c 对象相同的引用。

因此当我们改变其中一个对象时，其实是改变了所有的对象。

7. 输出是什么？

let a = 3
let b = new number(3)
let c = 3

console.log(a == b)
console.log(a === b)
console.log(b === c)

a: true false true
b: false false true
c: true false false
d: false true true

答案

答案：c

new number() 是一个内建的函数构造器。虽然它看着像是一个 number，但它实际上并不是一个真实的 number：它有一堆额外的功能并且它是一个对象。

当我们使用 == 操作符时，它只会检查两者是否拥有相同的值。因为它们的值都是 3，因此返回 true。

然后，当我们使用 === 操作符时，两者的值以及类型都应该是相同的。new number() 是一个对象而不是 number，因此返回 false。

8. 输出是什么？

class chameleon {
  static colorchange(newcolor) {
    this.newcolor = newcolor
    return this.newcolor
  }

  constructor({ newcolor = 'green' } = {}) {
    this.newcolor = newcolor
  }
}

const freddie = new chameleon({ newcolor: 'purple' })
freddie.colorchange('orange')

a: orange
b: purple
c: green
d: typeerror

答案

答案：d

colorchange 是一个静态方法。静态方法被设计为只能被创建它们的构造器使用（也就是 chameleon），并且不能传递给实例。因为 freddie 是一个实例，静态方法不能被实例使用，因此抛出了 typeerror 错误。

9. 输出是什么？

let greeting
greetign = {} // typo!
console.log(greetign)

a: {}
b: referenceerror: greetign is not defined
c: undefined

答案

答案：a

代码打印出了一个对象，这是因为我们在全局对象上创建了一个空对象！当我们将 greeting 写错成 greetign 时，js 解释器实际在上浏览器中将它视为 global.greetign = {}（或者 window.greetign = {}）。

为了避免这个为题，我们可以使用 `"use strict"。这能确保当你声明变量时必须赋值。

10. 当我们这么做时，会发生什么？

function bark() {
  console.log('woof!')
}

bark.animal = 'dog'

a: 正常运行！
b: syntaxerror. 你不能通过这种方式给函数增加属性。
c: undefined
d: referenceerror

答案

答案：a

这在 javascript 中是可以的，因为函数是对象！（除了基本类型之外其他都是对象）

函数是一个特殊的对象。你写的这个代码其实不是一个实际的函数。函数是一个拥有属性的对象，并且属性也可被调用。

11. 输出是什么？

function person(firstname, lastname) {
  this.firstname = firstname;
  this.lastname = lastname;
}

const member = new person("lydia", "hallie");
person.getfullname = function () {
  return `${this.firstname} ${this.lastname}`;
}

console.log(member.getfullname());

a: typeerror
b: syntaxerror
c: lydia hallie
d: undefined undefined

答案

答案：a

你不能像常规对象那样，给构造函数添加属性。如果你想一次性给所有实例添加特性，你应该使用原型。因此本例中，使用如下方式：

person.prototype.getfullname = function () {
  return ${this.firstname} ${this.lastname};
}

这才会使 member.getfullname() 起作用。为什么这么做有益的？假设我们将这个方法添加到构造函数本身里。也许不是每个 person 实例都需要这个方法。这将浪费大量内存空间，因为它们仍然具有该属性，这将占用每个实例的内存空间。相反，如果我们只将它添加到原型中，那么它只存在于内存中的一个位置，但是所有实例都可以访问它！

12. 输出是什么？

function person(firstname, lastname) {
  this.firstname = firstname
  this.lastname = lastname
}

const lydia = new person('lydia', 'hallie')
const sarah = person('sarah', 'smith')

console.log(lydia)
console.log(sarah)

a: person {firstname: "lydia", lastname: "hallie"} and undefined
b: person {firstname: "lydia", lastname: "hallie"} and person {firstname: "sarah", lastname: "smith"}
c: person {firstname: "lydia", lastname: "hallie"} and {}
d:person {firstname: "lydia", lastname: "hallie"} and referenceerror

答案

答案：a

对于 sarah，我们没有使用 new 关键字。当使用 new 时，this 引用我们创建的空对象。当未使用 new 时，this 引用的是全局对象（global object）。

我们说 this.firstname 等于 "sarah"，并且 this.lastname 等于 "smith"。实际上我们做的是，定义了 global.firstname = 'sarah' 和 global.lastname = 'smith'。而 sarah 本身是 undefined。

13. 事件传播的三个阶段是什么？

a: target > capturing > bubbling
b: bubbling > target > capturing
c: target > bubbling > capturing
d: capturing > target > bubbling

答案

答案：d

在捕获（capturing）阶段中，事件从祖先元素向下传播到目标元素。当事件达到目标（target）元素后，冒泡（bubbling）才开始。

14. 所有对象都有原型。

a: 对
b: 错

答案

答案：b

除了基本对象（base object），所有对象都有原型。基本对象可以访问一些方法和属性，比如 .tostring。这就是为什么你可以使用内置的 javascript 方法！所有这些方法在原型上都是可用的。虽然 javascript 不能直接在对象上找到这些方法，但 javascript 会沿着原型链找到它们，以便于你使用。

15. 输出是什么？

function sum(a, b) {
  return a + b
}

sum(1, '2')

a: nan
b: typeerror
c: "12"
d: 3

答案

答案：c

javascript 是一种动态类型语言：我们不指定某些变量的类型。值可以在你不知道的情况下自动转换成另一种类型，这种类型称为隐式类型转换（implicit type coercion）。coercion 是指将一种类型转换为另一种类型。

在本例中，javascript 将数字 1 转换为字符串，以便函数有意义并返回一个值。在数字类型（1）和字符串类型（'2'）相加时，该数字被视为字符串。我们可以连接字符串，比如 "hello" + "world"，这里发生的是 "1" + "2"，它返回 "12"。

16. 输出是什么？

let number = 0
console.log(number++)
console.log(++number)
console.log(number)

a: 1 1 2
b: 1 2 2
c: 0 2 2
d: 0 1 2

答案

答案：c

一元后自增运算符 ++：

返回值（返回 0）
值自增（number 现在是 1）

一元前自增运算符 ++：

值自增（number 现在是 2）
返回值（返回 2）

结果是 0 2 2.

17. 输出是什么？

function getpersoninfo(one, two, three) {
  console.log(one)
  console.log(two)
  console.log(three)
}

const person = 'lydia'
const age = 21

getpersoninfo`${person} is ${age} years old`

a: "lydia" 21 ["", " is ", " years old"]
b: ["", " is ", " years old"] "lydia" 21
c: "lydia" ["", " is ", " years old"] 21

答案

答案：b

如果使用标记模板字面量，第一个参数的值总是包含字符串的数组。其余的参数获取的是传递的表达式的值！

18. 输出是什么？

function checkage(data) {
  if (data === { age: 18 }) {
    console.log('you are an adult!')
  } else if (data == { age: 18 }) {
    console.log('you are still an adult.')
  } else {
    console.log(`hmm.. you don't have an age i guess`)
  }
}

checkage({ age: 18 })

a: you are an adult!
b: you are still an adult.
c: hmm.. you don't have an age i guess

答案

答案：c

在测试相等性时，基本类型通过它们的值（value）进行比较，而对象通过它们的引用（reference）进行比较。javascript 检查对象是否具有对内存中相同位置的引用。

题目中我们正在比较的两个对象不是同一个引用：作为参数传递的对象引用的内存位置，与用于判断相等的对象所引用的内存位置并不同。

这也是 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 都返回 false 的原因。

19. 输出是什么？

function getage(...args) {
  console.log(typeof args)
}

getage(21)

a: "number"
b: "array"
c: "object"
d: "nan"

答案

答案：c

扩展运算符（...args）会返回实参组成的数组。而数组是对象，因此 typeof args 返回 "object"。

20. 输出是什么？

function getage() {
  'use strict'
  age = 21
  console.log(age)
}

getage()

a: 21
b: undefined
c: referenceerror
d: typeerror

答案

答案：c

使用 "use strict"，你可以确保不会意外地声明全局变量。我们从来没有声明变量 age，因为我们使用 "use strict"，它将抛出一个引用错误。如果我们不使用 "use strict"，它就会工作，因为属性 age 会被添加到全局对象中了。

21. 输出是什么？

const sum = eval('10*10+5')

a: 105
b: "105"
c: typeerror
d: "10*10+5"

答案

答案：a

代码以字符串形式传递进来，eval 对其求值。如果它是一个表达式，就像本例中那样，它对表达式求值。表达式是 10 * 10 + 5。这将返回数字 105。

22. cool_secret 可访问多长时间？

sessionstorage.setitem('cool_secret', 123)

a: 永远，数据不会丢失。
b: 当用户关掉标签页时。
c: 当用户关掉整个浏览器，而不只是关掉标签页。
d: 当用户关闭电脑时。

答案

答案：b

关闭 tab 标签页 后，sessionstorage 存储的数据才会删除。

如果使用 localstorage，那么数据将永远在那里，除非调用了 localstorage.clear()。

23. 输出是什么？

var num = 8
var num = 10

console.log(num)

a: 8
b: 10
c: syntaxerror
d: referenceerror

答案

答案：b

使用 var 关键字，你可以用相同的名称声明多个变量。然后变量将保存最新的值。

你不能使用 let 或 const 来实现这一点，因为它们是块作用域的。

24. 输出是什么？

const obj = { 1: 'a', 2: 'b', 3: 'c' }
const set = new set([1, 2, 3, 4, 5])

obj.hasownproperty('1')
obj.hasownproperty(1)
set.has('1')
set.has(1)

a: false true false true
b: false true true true
c: true true false true
d: true true true true

答案

答案：c

所有对象的键（不包括 symbol）在底层都是字符串，即使你自己没有将其作为字符串输入。这就是为什么 obj.hasownproperty('1') 也返回 true。

对于集合，它不是这样工作的。在我们的集合中没有 '1'：set.has('1') 返回 false。它有数字类型为 1，set.has(1) 返回 true。

25. 输出是什么？

const obj = { a: 'one', b: 'two', a: 'three' }
console.log(obj)

a: { a: "one", b: "two" }
b: { b: "two", a: "three" }
c: { a: "three", b: "two" }
d: syntaxerror

答案

答案：c

如果你有两个名称相同的键，则键会被替换掉。它仍然位于第一个键出现的位置，但是值是最后出现那个键的值。

26. javascript 全局执行上下文为你做了两件事：全局对象和 this 关键字。

a: 对
b: 错
c: 看情况

答案

答案：a

基本执行上下文是全局执行上下文：它是代码中随处可访问的内容。

27. 输出是什么？

for (let i = 1; i &lt; 5; i++) {
  if (i === 3) continue
  console.log(i)
}

a: 1 2
b: 1 2 3
c: 1 2 4
d: 1 3 4

答案

答案：c

如果某个条件返回 true，则 continue 语句跳过本次迭代。

28. 输出是什么？

string.prototype.givelydiapizza = () =&gt; {
  return 'just give lydia pizza already!'
}

const name = 'lydia'

name.givelydiapizza()

a: "just give lydia pizza already!"
b: typeerror: not a function
c: syntaxerror
d: undefined

答案

答案：a

string 是内置的构造函数，我们可以向它添加属性。我只是在它的原型中添加了一个方法。基本类型字符串被自动转换为字符串对象，由字符串原型函数生成。因此，所有 string(string 对象) 都可以访问该方法！

29. 输出是什么？

const a = {}
const b = { key: 'b' }
const c = { key: 'c' }

a[b] = 123
a[c] = 456

console.log(a[b])

a: 123
b: 456
c: undefined
d: referenceerror

答案

答案：b

对象的键被自动转换为字符串。我们试图将一个对象 b 设置为对象 a 的键，且相应的值为 123。

然而，当字符串化一个对象时，它会变成 "[object object]"。因此这里说的是，a["[object object]"] = 123。然后，我们再一次做了同样的事情，c 是另外一个对象，这里也有隐式字符串化，于是，a["[object object]"] = 456。

然后，我们打印 a[b]，也就是 a["[object object]"]。之前刚设置为 456，因此返回的是 456。

30. 输出是什么？

const foo = () =&gt; console.log('first')
const bar = () =&gt; settimeout(() =&gt; console.log('second'))
const baz = () =&gt; console.log('third')

bar()
foo()
baz()

a: first second third
b: first third second
c: second first third
d: second third first

答案

答案：b

我们有一个 settimeout 函数，并首先调用它。然而，它是最后打印日志的。

这是因为在浏览器中，我们不仅有运行时引擎，还有一个叫做 webapi 的东西。webapi 提供了 settimeout 函数，也包含其他的，例如 dom。

将 callback 推送到 webapi 后，settimeout 函数本身 (但不是回调！) 将从栈中弹出。

现在，foo 被调用，打印 "first"。

foo 从栈中弹出，baz 被调用。打印 "third"。

webapi 不能随时向栈内添加内容。相反，它将回调函数推到名为 queue 的地方。

这就是事件循环开始工作的地方。一个事件循环查看栈和任务队列。如果栈是空的，它接受队列上的第一个元素并将其推入栈。

bar 被调用，打印 "second"，然后它被栈弹出。

31. 当点击按钮时，event.target 是什么？

&lt;div onclick="console.log('first div')"&gt;
  &lt;div onclick="console.log('second div')"&gt;
    &lt;button onclick="console.log('button')"&gt;
      click!
    &lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;

a: outer div
b: inner div
c: button
d: 一个包含所有嵌套元素的数组。

答案

答案：c

导致事件的最深嵌套的元素是事件的 target。你可以通过 event.stoppropagation 来停止冒泡。

32. 当您单击该段落时，日志输出是什么？

&lt;div onclick="console.log('div')"&gt;
  &lt;p onclick="console.log('p')"&gt;
    click here!
  &lt;/p&gt;
&lt;/div&gt;

a: p div
b: div p
c: p
d: div

答案

答案：a

如果我们点击 p，我们会看到两个日志：p 和 div。在事件传播期间，有三个阶段：捕获、目标和冒泡。默认情况下，事件处理程序在冒泡阶段执行（除非将 usecapture 设置为 true）。它从嵌套最深的元素向外传播。

33. 输出是什么？

const person = { name: 'lydia' }

function sayhi(age) {
  console.log(`${this.name} is ${age}`)
}

sayhi.call(person, 21)
sayhi.bind(person, 21)

a: undefined is 21 lydia is 21
b: function function
c: lydia is 21 lydia is 21
d: lydia is 21 function

答案

答案：d

使用这两种方法，我们都可以传递我们希望 this 关键字引用的对象。但是，.call 是立即执行的。

.bind 返回函数的副本，但带有绑定上下文！它不是立即执行的。

34. 输出是什么？

function sayhi() {
  return (() =&gt; 0)()
}

typeof sayhi()

a: "object"
b: "number"
c: "function"
d: "undefined"

答案

答案：b

sayhi 方法返回的是立即执行函数 (iife) 的返回值。此立即执行函数的返回值是 0，类型是 number

参考：只有 7 种内置类型：null，undefined，boolean，number，string，object, symbol 和 bigint。function 不是一种类型，函数是对象，它的类型是object。

35. 下面哪些值是 falsy?

0
new number(0)
('')
(' ')
new boolean(false)
undefined

a: 0, '', undefined
b: 0, new number(0), '', new boolean(false), undefined
c: 0, '', new boolean(false), undefined
d: all of them are falsy

答案

答案：a

只有 8 种 falsy 值：

undefined
null
nan
false
'' (empty string)
0
-0
0n (bigint(0))

function 构造函数，比如 new number 和 new boolean，是 truthy。

36. 输出是什么？

console.log(typeof typeof 1)

a: "number"
b: "string"
c: "object"
d: "undefined"

答案

答案：b

typeof 1 返回 "number"。 typeof "number" 返回 "string"。

37. 输出是什么？

const numbers = [1, 2, 3]
numbers[10] = 11
console.log(numbers)

a: [1, 2, 3, 7 x null, 11]
b: [1, 2, 3, 11]
c: [1, 2, 3, 7 x empty, 11]
d: syntaxerror

答案

答案：c

当你为数组设置超过数组长度的值的时候，javascript 会创建名为 "empty slots" 的东西。它们的值实际上是 undefined。你会看到以下场景：

[1, 2, 3, 7 x empty, 11]

这取决于你的运行环境（每个浏览器，以及 node 环境，都有可能不同）

38. 输出是什么？

(() =&gt; {
  let x, y
  try {
    throw new error()
  } catch (x) {
    (x = 1), (y = 2)
    console.log(x)
  }
  console.log(x)
  console.log(y)
})()

a: 1 undefined 2
b: undefined undefined undefined
c: 1 1 2
d: 1 undefined undefined

答案

答案：a

catch 代码块接收参数 x。当我们传递参数时，这与之前定义的变量 x 不同。这个 x 是属于 catch 块级作用域的。

然后，我们将块级作用域中的变量赋值为 1，同时也设置了变量 y 的值。现在，我们打印块级作用域中的变量 x，值为 1。

catch 块之外的变量 x 的值仍为 undefined，y 的值为 2。当我们在 catch 块之外执行 console.log(x) 时，返回 undefined，y 返回 2。

39. javascript 中的一切都是？

a: 基本类型与对象
b: 函数与对象
c: 只有对象
d: 数字与对象

答案

答案：a

javascript 只有基本类型和对象。

基本类型包括 boolean, null, undefined, bigint, number, string, symbol。

40. 输出是什么？

[[0, 1], [2, 3]].reduce(
  (acc, cur) =&gt; {
    return acc.concat(cur)
  },
  [1, 2]
)

a: [0, 1, 2, 3, 1, 2]
b: [6, 1, 2]
c: [1, 2, 0, 1, 2, 3]
d: [1, 2, 6]

答案

答案：c

[1, 2]是初始值。初始值将会作为首次调用时第一个参数 acc 的值。在第一次执行时，acc 的值是 [1, 2]，cur 的值是 [0, 1]。合并它们，结果为 [1, 2, 0, 1]。第二次执行，acc 的值是 [1, 2, 0, 1]，cur 的值是 [2, 3]。合并它们，最终结果为 [1, 2, 0, 1, 2, 3]

41. 输出是什么？

!!null
!!''
!!1

a: false true false
b: false false true
c: false true true
d: true true false

答案

答案：b

null 是 falsy。!null 的值是 true。!true 的值是 false。

"" 是 falsy。!"" 的值是 true。!true 的值是 false。

1 是 truthy。!1 的值是 false。!false 的值是 true。

42. `setinterval` 方法的返回值是什么？

setinterval(() =&gt; console.log('hi'), 1000)

a: 一个唯一的 id
b: 该方法指定的毫秒数
c: 传递的函数
d: undefined

答案

答案：a

setinterval 返回一个唯一的 id。此 id 可被用于 clearinterval 函数来取消定时。

43. 输出是什么？

[...'lydia']

a: ["l", "y", "d", "i", "a"]
b: ["lydia"]
c: [[], "lydia"]
d: [["l", "y", "d", "i", "a"]]

答案

答案：a

string 类型是可迭代的。扩展运算符将迭代的每个字符映射成一个元素。

44. 输出是什么？

function* generator(i) {
  yield i;
  yield i * 2;
}

const gen = generator(10);

console.log(gen.next().value);
console.log(gen.next().value);

a: [0, 10], [10, 20]
b: 20, 20
c: 10, 20
d: 0, 10 and 10, 20

答案

答案：c

一般的函数在执行之后是不能中途停下的。但是，生成器函数却可以中途“停下”，之后可以再从停下的地方继续。当生成器遇到yield关键字的时候，会生成yield后面的值。注意，生成器在这种情况下不返回 (return ) 值，而是生成 (yield) 值。

首先，我们用10作为参数i来初始化生成器函数。然后使用next()方法一步步执行生成器。第一次执行生成器的时候，i的值为10，遇到第一个yield关键字，它要生成i的值。此时，生成器“暂停”，生成了10。

然后，我们再执行next()方法。生成器会从刚才暂停的地方继续，这个时候i还是10。于是我们走到了第二个yield关键字处，这时候需要生成的值是i*2，i为10，那么此时生成的值便是20。所以这道题的最终结果是10,20。

45. 返回值是什么？

const firstpromise = new promise((res, rej) =&gt; {
  settimeout(res, 500, "one");
});

const secondpromise = new promise((res, rej) =&gt; {
  settimeout(res, 100, "two");
});

promise.race([firstpromise, secondpromise]).then(res =&gt; console.log(res));

a: "one"
b: "two"
c: "two" "one"
d: "one" "two"

答案

答案：b

当我们向promise.race方法中传入多个promise时，会进行优先解析。在这个例子中，我们用settimeout给firstpromise和secondpromise分别设定了 500ms 和 100ms 的定时器。这意味着secondpromise会首先解析出字符串two。那么此时res参数即为two，是为输出结果。

46. 输出是什么？

let person = { name: "lydia" };
const members = [person];
person = null;

console.log(members);

a: null
b: [null]
c: [{}]
d: [{ name: "lydia" }]

答案

答案：d

首先我们声明了一个拥有name属性的对象 person。

然后我们又声明了一个变量members. 将首个元素赋值为变量person。当设置两个对象彼此相等时，它们会通过引用进行交互。但是当你将引用从一个变量分配至另一个变量时，其实只是执行了一个复制操作。（注意一点，他们的引用并不相同!）

接下来我们让person等于null。

我们没有修改数组第一个元素的值，而只是修改了变量person的值，因为元素（复制而来）的引用与person不同。members的第一个元素仍然保持着对原始对象的引用。当我们输出members数组时，第一个元素会将引用的对象打印出来。

47. 输出是什么？

const person = {
  name: "lydia",
  age: 21
};

for (const item in person) {
  console.log(item);
}

a: { name: "lydia" }, { age: 21 }
b: "name", "age"
c: "lydia", 21
d: ["name", "lydia"], ["age", 21]

答案

答案：b

在for-in循环中，我们可以通过对象的 key 来进行迭代，也就是这里的name和age。在底层，对象的 key 都是字符串（如果他们不是 symbol 的话）。在每次循环中，我们将item设定为当前遍历到的 key.所以一开始，item是name，之后 item输出的则是age。

48. 输出是什么？

console.log(3 + 4 + "5");

a: "345"
b: "75"
c: 12
d: "12"

答案

答案：b

当所有运算符的优先级相同时，计算表达式需要确定运算符的结合顺序，即从右到左还是从左往右。在这个例子中，我们只有一类运算符+，对于加法来说，结合顺序就是从左到右。

3 + 4首先计算，得到数字7.

由于类型的强制转换，7 + '5'的结果是"75". javascript 将7转换成了字符串，可以参考问题 15.我们可以用+号把两个字符串连接起来。"7" + "5" 就得到了"75".

49. `num`的值是什么？

const num = parseint("7*6", 10);

a: 42
b: "42"
c: 7
d: nan

答案

答案：c

只返回了字符串中第一个字母。设定了进制后 (也就是第二个参数，指定需要解析的数字是什么进制：十进制、十六机制、八进制、二进制等等……),parseint 检查字符串中的字符是否合法。一旦遇到一个在指定进制中不合法的字符后，立即停止解析并且忽略后面所有的字符。

*就是不合法的数字字符。所以只解析到"7"，并将其解析为十进制的7. num的值即为7.

50. 输出是什么？

[1, 2, 3].map(num =&gt; {
  if (typeof num === "number") return;
  return num * 2;
});

a: []
b: [null, null, null]
c: [undefined, undefined, undefined]
d: [ 3 x empty ]

答案

答案：c

对数组进行映射的时候，num就是当前循环到的元素。在这个例子中，所有的映射都是 number 类型，所以 if 中的判断typeof num === "number"结果都是true.map 函数创建了新数组并且将函数的返回值插入数组。

但是，没有任何值返回。当函数没有返回任何值时，即默认返回undefined.对数组中的每一个元素来说，函数块都得到了这个返回值，所以结果中每一个元素都是undefined.

51. 输出的是什么？

function getinfo(member, year) {
  member.name = "lydia";
  year = "1998";
}

const person = { name: "sarah" };
const birthyear = "1997";

getinfo(person, birthyear);

console.log(person, birthyear);

a: { name: "lydia" }, "1997"
b: { name: "sarah" }, "1998"
c: { name: "lydia" }, "1998"
d: { name: "sarah" }, "1997"

答案

答案：a

普通参数都是值传递的，而对象则不同，是引用传递。所以说，birthyear是值传递，因为他是个字符串而不是对象。当我们对参数进行值传递时，会创建一份该值的复制。（可以参考问题 46）

变量birthyear有一个对"1997"的引用，而传入的参数也有一个对"1997"的引用，但二者的引用并不相同。当我们通过给 year赋值"1998"来更新year的值的时候我们只是更新了year（的引用）。此时birthyear仍然是"1997".

而person是个对象。参数member引用与之相同的对象。当我们修改member所引用对象的属性时，person的相应属性也被修改了，因为他们引用了相同的对象。person的 name属性也变成了 "lydia".

52. 输出是什么？

function greeting() {
  throw "hello world!";
}

function sayhi() {
  try {
    const data = greeting();
    console.log("it worked!", data);
  } catch (e) {
    console.log("oh no an error:", e);
  }
}

sayhi();

a: "it worked! hello world!"
b: "oh no an error: undefined
c: syntaxerror: can only throw error objects
d: "oh no an error: hello world!

答案

答案：d

通过throw语句，我么可以创建自定义错误。而通过它，我们可以抛出异常。异常可以是一个字符串，一个数字，一个 布尔类型 或者是一个对象。在本例中，我们的异常是字符串'hello world'.

通过 catch语句，我们可以设定当try语句块中抛出异常后应该做什么处理。在本例中抛出的异常是字符串'hello world'. e就是这个字符串，因此被输出。最终结果就是'oh an error: hello world'.

53. 输出是什么？

function car() {
  this.make = "lamborghini";
  return { make: "maserati" };
}

const mycar = new car();
console.log(mycar.make);

a: "lamborghini"
b: "maserati"
c: referenceerror
d: typeerror

答案

答案：b

返回属性的时候，属性的值等于返回的值，而不是构造函数中设定的值。我们返回了字符串 "maserati"，所以 mycar.make等于"maserati".

54. 输出是什么？

(() =&gt; {
  let x = (y = 10);
})();

console.log(typeof x);
console.log(typeof y);

a: "undefined", "number"
b: "number", "number"
c: "object", "number"
d: "number", "undefined"

答案

答案：a

let x = y = 10; 是下面这个表达式的缩写：

y = 10;
let x = y;

我们设定y等于10时，我们实际上增加了一个属性y给全局对象 (浏览器里的window, nodejs 里的global)。在浏览器中，window.y等于10.

然后我们声明了变量x等于y，也是10.但变量是使用 let声明的，它只作用于块级作用域，仅在声明它的块中有效；就是案例中的立即调用表达式 (iife)。使用typeof操作符时，操作值 x没有被定义：因为我们在x声明块的外部，无法调用它。这就意味着x未定义。未分配或是未声明的变量类型为"undefined". console.log(typeof x)返回"undefined".

而我们创建了全局变量y，并且设定y等于10.这个值在我们的代码各处都访问的到。y已经被定义了，而且有一个"number"类型的值。console.log(typeof y)返回"number".

55. 输出是什么？

class dog {
  constructor(name) {
    this.name = name;
  }
}

dog.prototype.bark = function() {
  console.log(`woof i am ${this.name}`);
};

const pet = new dog("mara");

pet.bark();

delete dog.prototype.bark;

pet.bark();

a: "woof i am mara", typeerror
b: "woof i am mara","woof i am mara"
c: "woof i am mara", undefined
d: typeerror, typeerror

答案

答案：a

我们可以用delete关键字删除对象的属性，对原型也是适用的。删除了原型的属性后，该属性在原型链上就不可用了。在本例中，函数bark在执行了delete dog.prototype.bark后不可用，然而后面的代码还在调用它。

当我们尝试调用一个不存在的函数时typeerror异常会被抛出。在本例中就是 typeerror: pet.bark is not a function，因为pet.bark是undefined.

56. 输出是什么？

const set = new set([1, 1, 2, 3, 4]);

console.log(set);

a: [1, 1, 2, 3, 4]
b: [1, 2, 3, 4]
c: {1, 1, 2, 3, 4}
d: {1, 2, 3, 4}

答案

答案：d

set对象是独一无二的值的集合：也就是说同一个值在其中仅出现一次。

我们传入了数组[1, 1, 2, 3, 4]，他有一个重复值1.以为一个集合里不能有两个重复的值，其中一个就被移除了。所以结果是 {1, 2, 3, 4}.

57. 输出是什么？

// counter.js
let counter = 10;
export default counter;

// index.js
import mycounter from "./counter";

mycounter += 1;

console.log(mycounter);

a: 10
b: 11
c: error
d: nan

答案

答案：c

引入的模块是只读的：你不能修改引入的模块。只有导出他们的模块才能修改其值。

当我们给mycounter增加一个值的时候会抛出一个异常：mycounter是只读的，不能被修改。

58. 输出是什么？

const name = "lydia";
age = 21;

console.log(delete name);
console.log(delete age);

a: false, true
b: "lydia", 21
c: true, true
d: undefined, undefined

答案

答案：a

delete操作符返回一个布尔值：true指删除成功，否则返回false. 但是通过 var, const 或 let 关键字声明的变量无法用 delete 操作符来删除。

name变量由const关键字声明，所以删除不成功：返回 false. 而我们设定age等于21时，我们实际上添加了一个名为age的属性给全局对象。对象中的属性是可以删除的，全局对象也是如此，所以delete age返回true.

59. 输出是什么？

const numbers = [1, 2, 3, 4, 5];
const [y] = numbers;

console.log(y);

a: [[1, 2, 3, 4, 5]]
b: [1, 2, 3, 4, 5]
c: 1
d: [1]

答案

答案：c

我们可以通过解构赋值来解析来自对象的数组或属性的值，比如说：

[a, b] = [1, 2];

a的值现在是1，b的值现在是2.而在题目中，我们是这么做的：

[y] = [1, 2, 3, 4, 5];

也就是说，y等于数组的第一个值就是数字1.我们输出y，返回1.

60. 输出是什么？

const user = { name: "lydia", age: 21 };
const admin = { admin: true, ...user };

console.log(admin);

a: { admin: true, user: { name: "lydia", age: 21 } }
b: { admin: true, name: "lydia", age: 21 }
c: { admin: true, user: ["lydia", 21] }
d: { admin: true }

答案

答案：b

扩展运算符...为对象的组合提供了可能。你可以复制对象中的键值对，然后把它们加到另一个对象里去。在本例中，我们复制了user对象键值对，然后把它们加入到admin对象中。admin对象就拥有了这些键值对，所以结果为{ admin: true, name: "lydia", age: 21 }.

61. 输出是什么？

const person = { name: "lydia" };

object.defineproperty(person, "age", { value: 21 });

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

a: { name: "lydia", age: 21 }, ["name", "age"]
b: { name: "lydia", age: 21 }, ["name"]
c: { name: "lydia"}, ["name", "age"]
d: { name: "lydia"}, ["age"]

答案

答案：b

通过defineproperty方法，我们可以给对象添加一个新属性，或者修改已经存在的属性。而我们使用defineproperty方法给对象添加了一个属性之后，属性默认为不可枚举 (not enumerable). object.keys方法仅返回对象中可枚举 (enumerable) 的属性，因此只剩下了"name".

用defineproperty方法添加的属性默认不可变。你可以通过writable, configurable 和 enumerable属性来改变这一行为。这样，defineproperty方法可以让您更好地控制要添加到对象的属性。

62. 输出是什么？

const settings = {
  username: "lydiahallie",
  level: 19,
  health: 90
};

const data = json.stringify(settings, ["level", "health"]);
console.log(data);

a: "{"level":19, "health":90}"
b: "{"username": "lydiahallie"}"
c: "["level", "health"]"
d: "{"username": "lydiahallie", "level":19, "health":90}"

答案

答案：a

json.stringify的第二个参数是替代者 (replacer). 替代者 (replacer) 可以是个函数或数组，用以控制哪些值如何被转换为字符串。

如果替代者 (replacer) 是个数组，那么就只有包含在数组中的属性将会被转化为字符串。在本例中，只有名为"level" 和 "health" 的属性被包括进来，"username"则被排除在外。data 就等于 "{"level":19, "health":90}".

而如果替代者 (replacer) 是个函数，这个函数将被对象的每个属性都调用一遍。函数返回的值会成为这个属性的值，最终体现在转化后的 json 字符串中（译者注：chrome 下，经过实验，如果所有属性均返回同一个值的时候有异常，会直接将返回值作为结果输出而不会输出 json 字符串），而如果返回值为undefined，则该属性会被排除在外。

63. 输出是什么？

let num = 10;

const increasenumber = () =&gt; num++;
const increasepassednumber = number =&gt; number++;

const num1 = increasenumber();
const num2 = increasepassednumber(num1);

console.log(num1);
console.log(num2);

a: 10, 10
b: 10, 11
c: 11, 11
d: 11, 12

答案

答案：a

一元操作符 ++ 先返回操作值，再累加操作值。num1的值是10，因为increasenumber函数首先返回num的值，也就是10，随后再进行 num的累加。

num2是10因为我们将 num1传入increasepassednumber. number等于10（num1的值。同样道理，++ 先返回操作值，再累加操作值。）number是10，所以num2也是10.

64. 输出什么？

const value = { number: 10 };

const multiply = (x = { ...value }) =&gt; {
  console.log(x.number *= 2);
};

multiply();
multiply();
multiply(value);
multiply(value);

a: 20, 40, 80, 160
b: 20, 40, 20, 40
c: 20, 20, 20, 40
d: nan, nan, 20, 40

答案

答案：c

在 es6 中，我们可以使用默认值初始化参数。如果没有给函数传参，或者传的参值为 "undefined"，那么参数的值将是默认值。上述例子中，我们将 value 对象进行了解构并传到一个新对象中，因此 x 的默认值为 {number：10}。

默认参数在调用时才会进行计算，每次调用函数时，都会创建一个新的对象。我们前两次调用 multiply 函数且不传递值，那么每一次 x 的默认值都为 {number：10}，因此打印出该数字的乘积值为20。

第三次调用 multiply 时，我们传递了一个参数，即对象value。*=运算符实际上是x.number = x.number * 2的简写，我们修改了x.number的值，并打印出值20。

第四次，我们再次传递value对象。x.number之前被修改为20，所以x.number * = 2打印为40。


验证码：

JavaScript 进阶问题列表(各种js代码段1-65)

2024年11月25日 • Javascript •我要评论

1. 输出是什么？

答案：d

2. 输出是什么？

答案：c

3. 输出是什么？

答案：b

4. 输出是什么？

答案：a

5. 哪一个是正确的？

答案：a

6. 输出是什么？

答案：a

7. 输出是什么？

答案：c

8. 输出是什么？

答案：d

9. 输出是什么？

答案：a

10. 当我们这么做时，会发生什么？

答案：a

11. 输出是什么？

答案：a

12. 输出是什么？

答案：a

13. 事件传播的三个阶段是什么？

答案：d

14. 所有对象都有原型。

答案：b

15. 输出是什么？

答案：c

16. 输出是什么？

答案：c

17. 输出是什么？

答案：b

18. 输出是什么？

答案：c

19. 输出是什么？

答案：c

20. 输出是什么？

答案：c

21. 输出是什么？

答案：a

22. cool_secret 可访问多长时间？

答案：b

23. 输出是什么？

答案：b

24. 输出是什么？

答案：c

25. 输出是什么？

答案：c

26. javascript 全局执行上下文为你做了两件事：全局对象和 this 关键字。

答案：a

27. 输出是什么？

答案：c

28. 输出是什么？

答案：a

29. 输出是什么？

答案：b

30. 输出是什么？

答案：b

31. 当点击按钮时，event.target 是什么？

答案：c

32. 当您单击该段落时，日志输出是什么？

答案：a

33. 输出是什么？

答案：d

34. 输出是什么？

答案：b

35. 下面哪些值是 falsy?

答案：a

36. 输出是什么？

答案：b

37. 输出是什么？

答案：c

38. 输出是什么？

答案：a

39. javascript 中的一切都是？

答案：a

42. `setinterval` 方法的返回值是什么？

49. `num`的值是什么？