每日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 = [1, 2, 3].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 = 0
console.log(number++) // ?
console.log(++number) // ?
console.log(number) // ?
答案及解析
答案 : 0 2 2
解析 :
1. 一元后自增运算符 ++:返回值(返回 0),值自增(number 现在是 1)
2. 一元前自增运算符 ++:值自增(number 现在是 2),返回值(返回 2)
8、写出执行结果,并解释原因
function getAge() {
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') 返回 false。set.has(1) 返回 true。
10、写出执行结果,并解释原因
Boolean(0); // ?
Boolean(new Number(0)); // ?
Boolean(('')); // ?
Boolean((' ')); // ?
Boolean(new Boolean(false)); // ?
Boolean(undefined); // ?
答案及解析
答案 : false true false true true false
解析 : 只有 6 种 false 值: undefined、null、NaN、0、'' (空串)、false,Function 构造函数,
new Number 和 new 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); // ?
答案及解析
答案 : false, true
解析 : delete操作符返回一个布尔值: true指删除成功,否则返回false. 但是通过 var, const 或 let 关键字声明的变量无法用 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) // ?
答案及解析
答案 : { x: 10, y: 20 }
解析 : 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。如果参数类型不是NaN,Number.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 。
学习更多技能
请点击下方公众号
评论