每日20道面试题带解析 — (41 - 60)
答案在问题下方的折叠部分,点击即可展开问题。祝你好运 ??
1. 事件传播的三个阶段是什么?
事件传播的三个阶段是什么?
-
A: Target > Capturing > Bubbling
-
B: Bubbling > Target > Capturing
-
C: Target > Bubbling > Capturing
-
D: Capturing > Target > Bubbling
点此查看答案及解析
答案 : D 解析 : 在捕获(capturing)阶段中,事件从祖先元素向下传播到目标元素。当事件达到目标(target)元素后,冒泡(bubbling)才开始。
2. 写出执行结果,并解释原因
+true;
!"Lydia";
-
A:
1
andfalse
-
B:
false
andNaN
-
C:
false
andfalse
点此查看答案及解析
答案 : A 解析 : 一元操作符加号尝试将 boolean 转为 number。true 转换为 number 为 1,false 为 0。 字符串 'Lydia' 是一个真值,真值取反那么就返回 false。
3. 写出执行结果,并解释原因
const bird = {
size: 'small'
}
const mouse = {
name: 'Mickey',
small: true
}
-
A:
mouse.bird.size
是无效的 -
B:
mouse[bird.size]
是无效的 -
C:
mouse[bird["size"]]
是无效的 -
D: 以上三个选项都是有效的
点此查看答案及解析
答案 : A 解析 : 1. 所有对象的 keys 都是字符串(在底层总会被转换为字符串) 2. 使用括号语法时[],首先看到第一个开始括号 [ 并继续前进直到找到结束括号 ]。 3. mouse[bird.size]:首先计算 bird.size,得到 small, mouse["small"] 返回 true。 //使用点语法 4. mouse 没有 bird 属性,返回 undefined,也就变成了 undefined.size。是无效的,并且会抛出一个错误类似 Cannot read property "size" of undefined。
4. 当我们这么做时,会发生什么?
function bark() {
console.log('Woof!')
}
bark.animal = 'dog'
-
A: 正常运行!
-
B:
SyntaxError
. 你不能通过这种方式给函数增加属性。 -
C:
undefined
-
D:
ReferenceError
点此查看答案及解析
答案 : A 解析 : 在JS中是可以的,因为函数是一个特殊的对象(除了基本类型之外其他都是对象) 函数是一个拥有属性的对象,并且属性也可被调用。 bark.animal = function(){ console.log(1)} bark.animal () // 1
5. 写出执行结果,并解释原因
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 错误。
6. 写出执行结果,并解释原因
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() 才起作用。将公共属性和方法添加到原型中,它只存在于内存中的一个位置,所有实例都可以访问它,节省内存空间
7. 写出执行结果,并解释原因
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"}
andundefined
-
B:
Person {firstName: "Lydia", lastName: "Hallie"}
andPerson {firstName: "Sarah", lastName: "Smith"}
-
C:
Person {firstName: "Lydia", lastName: "Hallie"}
and{}
-
D:
Person {firstName: "Lydia", lastName: "Hallie"}
andReferenceError
点此查看答案及解析
答案 : A 解析 : sarah没有使用 new 关键字。当使用 new 时,this 指向我们创建的空对象。未使用 new 时,this 指向的是全局对象。 上述操作相当于 window.firstName = 'Sarah' 和 window.lastName = 'Smith'。而 sarah 本身是 undefined。
8. 写出执行结果,并解释原因
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 解析 : 如果一个对象有两个同名的键,则键会被替换掉。但仍位于该键第一次出现的位置,但是值是最后出现那个值。
9. 写出执行结果,并解释原因
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 解析 : 对象的键被自动转换为字符串。 1. 将对象 b 设置为对象 a 的键,会变成 "[object Object]",相当于a["[object Object]"] = 123。 2. 再次将对象 c 设置为对象 a 的键,相当于 a["[object Object]"] = 456。 3. 此时打印 a[b],也就是 a["[object Object]"]。刚设置为 456,因此返回 456。
10. 写出执行结果,并解释原因
function sayHi() {
return (() => 0)()
}
typeof sayHi()
-
A:
"object"
-
B:
"number"
-
C:
"function"
-
D:
"undefined"
点此查看答案及解析
答案 : B 解析 : sayHi 方法返回的是立即执行函数(IIFE)的返回值.此立即执行函数的返回值是 0, 类型是 number
11. 写出执行结果,并解释原因
[1, 2, 3].map(num => {
if (typeof num === "number") return;
return num * 2;
});
-
A:
[]
-
B:
[null, null, null]
-
C:
[undefined, undefined, undefined]
-
D:
[ 3 x empty ]
点此查看答案及解析
答案 : C 解析 : num表示当前元素. 都是number类型,因此typeof num === "number"结果都是true.map函数创建了新数组,并且将函数的返回值插入数组。 但并没有任何值返回。当函数没有返回任何值时,即默认返回undefined.对数组中的每一个元素来说,函数块都得到了这个返回值,所以结果中每一个元素都是undefined. 扩展: 1. [1, 2, 3].map(num => typeof num === "number" ); // [true, true, true] 2. [1, 2, 3].map(num => typeof (num === "number")); // ["boolean", "boolean", "boolean"]
12. 输出什么?
function getFine(speed, amount) {
const formattedSpeed = new Intl.NumberFormat({
'en-US',
{ style: 'unit', unit: 'mile-per-hour' }
}).format(speed)
const formattedAmount = new Intl.NumberFormat({
'en-US',
{ style: 'currency', currency: 'USD' }
}).format(amount)
return `The driver drove ${formattedSpeed} and has to pay ${formattedAmount}`
}
console.log(getFine(130, 300))
-
A: The driver drove 130 and has to pay 300
-
B: The driver drove 130 mph and has to pay $300.00
-
C: The driver drove undefined and has to pay undefined
-
D: The driver drove 130.00 and has to pay 300.00
点此查看答案及解析
答案 : B 解析 : Intl.NumberFormat 方法,可以格式化任意区域的数字值。 mile-per-hour 通过格式化结果为 mph; USD通过格式化结果为 $.
13. 写出执行结果,并解释原因
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关键字删除对象的属性,对原型也适用。删除原型的属性后,该属性在原型链上就不可用。 执行 delete Dog.prototype.bark 后不可用,尝试调用一个不存在的函数时会抛出异常。 TypeError: pet.bark is not a function,因为pet.bark是undefined.
14. 写出执行结果,并解释原因
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, 2, 3, 4}. 易错 : B, 常见的set用法可用于数组去重,因此大家可能会误以为返回的是唯一值的数组,其实不然, var set1 = [...new Set([1, 1, 2, 3, 4])]; console.log(set1); // 此时返回的才是数组 [1, 2, 3, 4]
15. 写出执行结果,并解释原因
const name = "Lydia Hallie"
console.log(name.padStart(13))
console.log(name.padStart(2))
-
A:
"Lydia Hallie"
,"Lydia Hallie"
-
B:
" Lydia Hallie"
," Lydia Hallie"
("[13x whitespace]Lydia Hallie"
,"[2x whitespace]Lydia Hallie"
) -
C:
" Lydia Hallie"
,"Lydia Hallie"
("[1x whitespace]Lydia Hallie"
,"Lydia Hallie"
) -
D:
"Lydia Hallie"
,"Lyd"
点此查看答案及解析
答案 : C 解析 : padStart方法可以在字符串的起始位置填充。参数是字符串的总长度(包含填充)。 字符串Lydia Hallie的长度为12, 因此name.padStart(13)在字符串的开头只会插入1个空格。 如果传递给 padStart 方法的参数小于字符串的长度,则不会添加填充。
16. 写出执行结果,并解释原因
const { name: myName } = { name: "Lydia" };
console.log(name);
-
A:
"Lydia"
-
B:
"myName"
-
C:
undefined
-
D:
ReferenceError
点此查看答案及解析
答案 : D 解析 : 对象解构:{name:myName}该语法为获取右侧对象中name属性值,并重命名为myName。 而name是一个未定义的变量,直接打印会引发ReferenceError: name is not defined。
17. 写出执行结果,并解释原因
function checkAge(age) {
if (age < 18) {
const message = "Sorry, you're too young."
} else {
const message = "Yay! You're old enough!"
}
return message
}
console.log(checkAge(21))
-
A:
"Sorry, you're too young."
-
B:
"Yay! You're old enough!"
-
C:
ReferenceError
-
D:
undefined
点此查看答案及解析
答案 : C 解析 : 本题考查const和let声明的变量具有块级作用域,无法在声明的块之外引用变量,抛出 ReferenceError。
18. 写出执行结果,并解释原因
let name = 'Lydia'
function getName() {
console.log(name)
let name = 'Sarah'
}
getName()
-
A: Lydia
-
B: Sarah
-
C:
undefined
-
D:
ReferenceError
点此查看答案及解析
答案 : D 解析 : let和const声明的变量,与var不同,它不会被初始化。 在初始化之前无法访问。称为“暂时性死区”。 JavaScript会抛出ReferenceError: Cannot access 'name' before initialization。
19. 写出执行结果,并解释原因
console.log(`${(x => x)('I love')} to program`)
-
A:
I love to program
-
B:
undefined to program
-
C:
${(x => x)('I love') to program
-
D:
TypeError
点此查看答案及解析
答案 : A 解析 : 带有模板字面量的表达式首先被执行。相当于字符串包含表达式,(x => x)('I love')是一个立即执行函数 向箭头函数 x => x 传递 'I love' 作为参数。x 等价于返回的 'I love'。结果就是 I love to program。
20. 写出执行结果,并解释原因
const spookyItems = ["??", "??", "??"];
({ item: spookyItems[3] } = { item: "??" });
console.log(spookyItems);
-
A:
["??", "??", "??"]
-
B:
["??", "??", "??", "??"]
-
C:
["??", "??", "??", { item: "??" }]
-
D:
["??", "??", "??", "[object Object]"]
点此查看答案及解析
答案 : B 解析 : 解构对象,可以从右边对象中拆出值,并将拆出的值分配给左边对象同名的属性。此时将值 "??" 分配给 spookyItems[3]。 相当于正在篡改数组 spookyItems,给它添加了值 "??"。当输出 spookyItems 时,结果为 ["??", "??", "??", "??"]。