每日20道面试题带解析04

web前端开发

共 7700字,需浏览 16分钟

 ·

2021-05-29 23:00

来源 | https://www.cnblogs.com/echoyya/p/14570690.html


以下题目,本人验证无误,查阅了相关资料,得出解析部分并做了相关总结,希望对正准备跳槽或找工作的你有帮助!

1、写出执行结果,并解释原因

const emojis = ["🥑", ["✨""✨", ["🍕""🍕"]]];console.log(emojis.flat(1));    // ?
答案及解析
答案 : ['🥑''✨''✨', ['🍕''🍕']]解析 : flat方法可以创建一个新的, 已被扁平化的数组。被扁平化的深度取决于传递的参数值。   flat(1)相当于只有第一层的数组才会被连接。['🥑'] 连接 ['✨', '✨', ['🍕', '🍕']]。   得到结果 ['🥑', '✨', '✨', ['🍕', '🍕']].

2、写出执行结果,并解释原因

const name = "Lydia Hallie";console.log(!typeof name === "object");    // ?console.log(!typeof name === "string");    // ?

答案及解析

答案 : false  false解析 : 考查运算符的优先级,    typeof name 返回 "string"。字符串 "string"true;因此 !typeof name 返回一个布尔值 false    false === "object"false === "string" 都返回 false

3、写出执行结果,并解释原因

 const config = {  red: true,  blue: false,  green: true,  black: true,  yellow: false,}
const colors = ["pink", "red", "blue"]
console.log(config.colors[1]) // ?

答案及解析

答案 : TypeError解析 : 有两种访问对象属性的方法:括号表示法或点表示法。config ["colors"] 和 config.colors。  1. 使用点表示法:在对象上查找属性。config对象上没有名为colors的属性。因此返回"undefined"  2. 使用[1]访问数组第二个元素的值。无法对未定义的值执行此操作,Cannot read property '1' of undefined  3. 使用了config[colors[1]],会返回config对象上 red 属性的值。

4、写出执行结果,并解释原因

console.log('❤️' === '❤️')    // ?

答案及解析

答案 : true解析 : 在内部,表情符号是unicode。heat表情符号的unicode是“ U + 2764 U + FE0F”。   对于相同的表情符号,它们总是相同的,因此比较两个相等的字符串,将返回true

5、写出执行结果,并解释原因

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

答案及解析

答案 : "Sarah"解析 : 可以将类设置为等于其他类/函数构造函数。将Person设置为AnotherPerson。    这个构造函数的名字是Sarah,所以新的Person实例member上的name属性是Sarah。

6、写出执行结果,并解释原因

let newList = [123].push(4)console.log(newList.push(5))   // ?

答案及解析

答案 : TypeError: newList.push is not a function解析 : push方法返回数组的长度,而不是数组本身! [1,2,3].push(4),实际上newList等于数组的新长度:4。   尝试在newList上使用.push方法。 由于newList是数值4,抛出TypeError

7、写出执行结果,并解释原因

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

答案及解析

答案 : 0 2 2解析 :   1. 一元后自增运算符 ++:返回值(返回 0),值自增(number 现在是 1  2. 一元前自增运算符 ++:值自增(number 现在是 2),返回值(返回 2

8、写出执行结果,并解释原因

function getAge() {  'use strict'  age = 21  console.log(age)}
getAge() // ?

答案及解析

答案 : ReferenceError解析 : 使用 "use strict"严格模式,可以确保不会意外地声明全局变量。    age是函数内部未声明变量,将会抛出一个引用错误。非严格模式下属性 age 会被挂载到全局对象中。

9、写出执行结果,并解释原因

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) // ?

答案及解析

答案 : true true false true解析 : 所有对象的键(不包括 Symbol)在底层都是字符串,即使没有将其作为字符串输入。因此 obj.hasOwnProperty('1') 返回 true     对于集合,它不是这样工作的。set.has('1') 返回 falseset.has(1) 返回 true

10、写出执行结果,并解释原因

Boolean(0);                  // ?Boolean(new Number(0));      // ?Boolean((''));               // ?Boolean((' '));              // ?Boolean(new Boolean(false)); // ?Boolean(undefined);          // ?

答案及解析

答案 : false true false true  true  false 解析 : 只有 6false 值: undefinednullNaN0'' (空串)、falseFunction 构造函数,   new Numbernew Boolean,是 true

11、写出执行结果,并解释原因

const firstPromise = new Promise((res, rej) => {  setTimeout(res, 500, "one");});
const secondPromise = new Promise((res, rej) => { setTimeout(res, 100, "two");});
Promise.race([firstPromise, secondPromise]).then(res => console.log(res)); // ?

答案及解析

答案 : "two" 解析 :   1. Promise.race()方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。  const p = Promise.race([p1, p2, p3]);   2. 只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。  3. 那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。  4. firstPromise和secondPromise分别设定了500ms和100ms。意味着secondPromise会首先解析出字符串two。因此输出  two

12、写出执行结果,并解释原因

let person = { name: "Lydia" };const members = [person];person = null;
console.log(members); // ?

答案及解析

答案 : [{ name"Lydia" }]解析 : 声明了一个拥有name属性的对象 person。又声明了一个变量members. 将首个元素赋值为变量person。     当设置两个对象彼此相等时,它们会通过 引用 进行交互。但是将引用从一个变量分配至另一个变量时,    其实只是执行了一个 复制 操作。(注意一点,他们的引用 并不相同!)

13、写出执行结果,并解释原因

const person = {  name: "Lydia",  age: 21};
for (const item in person) { console.log(item); // ?}

答案及解析

答案 : "name""age"解析 :  for-in循环中,可以通过对象的key来进行迭代,在底层,对象的key都是字符串(如果不是Symbol的话)。   在每次循环中,将item设定为当前遍历到的key.

14、写出执行结果,并解释原因

const name = "Lydia";age = 21;
console.log(delete name); // ? console.log(delete age); // ?

答案及解析

答案 : falsetrue解析 : delete操作符返回一个布尔值: true指删除成功,否则返回false. 但是通过 var, constlet 关键字声明的变量无法用 delete 操作符来删除。  name变量由const关键字声明,所以删除不成功:返回 false.   age实际上是添加了一个名属性给全局对象。对象中的属性是可以删除的,全局对象也是如此,所以delete age返回true. 

15、写出执行结果,并解释原因

console.log(String.raw`Hello\nworld`);  // ?

答案及解析

答案 : Hello\nworld解析 : String.raw函数是用来获取一个模板字符串的原始字符串的,它返回一个字符串,其中忽略了转义符(\n,\v,\t等)。      const path = `C:\Documents\Projects\table.html`      String.raw`${path}`   //  "C:DocumentsProjects able.html"    直接使用String.raw:      String.raw`C:\Documents\Projects\table.html`   // C:\Documents\Projects\table.html      上述情况,字符串Hello\nworld直接被打印出。 

16、写出执行结果,并解释原因

const box = { x: 10, y: 20 };
Object.freeze(box);
const shape = box;shape.x = 100;console.log(shape) // ?

答案及解析

答案 : { x10y20 }解析 : Object.freeze方法使得无法添加、删除或修改对象的属性(除非属性的值是另一个对象)。  创建变量 shape 并将其设置为等于冻结对象box时,shape指向的也是冻结对象。  可以使用 Object.isFrozen 检查一个对象是否被冻结,上述情况,Object.isFrozen(shape)返回true  由于shape被冻结,并且x的值不是对象,所以不能修改属性x。 x仍然等于10,打印{x:10,y:20}。 

17、 这个函数干了什么?

JSON.parse()

答案及解析

答案 : 使用JSON.parse()方法,可以将JSON字符串解析为JavaScript值。解析 :      // 将数字字符串化为有效的JSON,然后将JSON字符串解析为JavaScript值:    const jsonNumber = JSON.stringify(4)   // '4'    JSON.parse(jsonNumber)  // 4    // 将数组值字符串化为有效的JSON,然后将JSON字符串解析为JavaScript值:    const jsonArray = JSON.stringify([1, 2, 3])   // '[1, 2, 3]'    JSON.parse(jsonArray)   // [1, 2, 3]    // 将对象字符串化为有效的JSON,然后将JSON字符串解析为JavaScript值:    const jsonArray = JSON.stringify({ name: "Lydia" })   // '{"name":"Lydia"}'    JSON.parse(jsonArray)   // { name: 'Lydia' }

18、 写出执行结果,并解释原因

const name = "Lydia Hallie";const age = 21;
console.log(Number.isNaN(name)); // ?console.log(Number.isNaN(age)); // ?
console.log(isNaN(name)); // ?console.log(isNaN(age)); // ?

答案及解析

答案 : false false true false解析 :   Number.isNaN方法可以检测参数值是否等价于 NaN。如果参数类型不是NaNNumber.isNaN一律返回false  isNaN方法本意是通过Number方法把参数转换成数字类型,如若转换成功,则返回false,反之返回true   它只是判断参数是否能转成数字,不能用来判断是否严格等于NaN。name不能转换成数字类型,因此返回 true. age为数字类型因此返回 false.

19、写出执行结果,并解释原因

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

答案及解析

答案 : "{"level":19, "health":90}"解析 : JSON.stringify 第二个参数是(replacer),可以是个函数或数组,用以控制哪些值被转换为字符串。   如果(replacer)是个数组,那么就只有包含在数组中的属性将会被转化为字符串。   在本例中,只有"level""health" 的属性被包括进来, data就等于 "{"level":19, "health":90}".

20、使用哪个构造函数可以成功继承Dog类?

 class Dog {  constructor(name) {    this.name = name;  }};
class Labrador extends Dog { // 1 constructor(name, size) { this.size = size; } // 2 constructor(name, size) { super(name); this.size = size; } // 3 constructor(size) { super(name); this.size = size; } // 4 constructor(name, size) { this.name = name; this.size = size; }
};
答案及解析
答案 : 2解析 :    1. 子类中调用super之前不能访问到this。 将抛出一个ReferenceError   2. 使用super关键字,需要用给定的参数来调用父类的构造函数。因此需要将name传递给super   3. Labrador类接收两个参数,name参数是继承了Dog,size作为Labrador类的额外属性,都需要传递给Labrador的构造函数   4. 因此使用构造函数 2


学习更多技能

请点击下方公众号

浏览 6
点赞
评论
收藏
分享

手机扫一扫分享

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

手机扫一扫分享

分享
举报