每日20道面试题带解析03
共 8750字,需浏览 18分钟
·
2021-05-29 23:00
来源 | https://www.cnblogs.com/echoyya/p/14569829.html
以下题目,本人验证无误,查阅了相关资料,得出解析部分并做了相关总结,希望对正准备跳槽或找工作的你有帮助!
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 and false
B: false and NaN
C: false and false
答案及解析
答案 : 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"} 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 指向的是全局对象。上述操作相当于 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 时,结果为 ["👻", "🎃", "🕸", "💀"]。
学习更多技能
请点击下方公众号