每日20道面试题带解析03

web前端开发

共 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] = 123a[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 时,结果为 ["👻", "🎃", "🕸", "💀"]。


学习更多技能

请点击下方公众号


浏览 33
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报