Do you know JavaScript? Try these 12 interview questions!

Work together to create and grow together! This is the 21st day of my participation in the "Nuggets Daily New Plan·August Update Challenge", click to view the details of the event

JavaScript is a basic technology that every front-end developer should master, but in many cases, you may not fully understand JavaScript.
There are two very simple ways to test a person's skill level, look at the code he wrote, or let him look at the code written by others.
I've put together some code questions to test your understanding of JavaScript, you can try them out and see if you can get them all right. If you get all the answers right, you know some JavaScript.

first question

Try to speculate its output:

const person = { name: '代码与野兽' }
Object.defineProperty(person, 'age', { value: 18 })

console.log(person.age)
console.log(Object.keys(person))
复制代码

output:

18
['name']
复制代码

Analysis:
Many people are prone to mistake the second output, because properties defined with defineProperty are not enumerable by default.

Question 2

Try to speculate its output:

const name = '代码与野兽'
age = 18

console.log(delete name)
console.log(delete age)
console.log(typeof age)
复制代码

output:

false
true
"undefined"
复制代码

Analysis:
The first false is because delete can only delete attributes on the object, name is not an attribute, so the deletion fails.
The second true is because we do not use any declaration to create a variable, it will be regarded as a global variable and mounted on the window object, which is equivalent to delete window.age, so the deletion is successful.
The third undefined is because age was removed.

Question 3

Try to speculate its output:

let person = { name: '代码与野兽' }
const members = [person]
person = null
console.log(members)
复制代码

output:

[{
  name: "代码与野兽"
}]
复制代码

Analysis:
Many people think that the output should be [ null ], but we just set a new reference to the variable person, and the previous reference is still in members.
In short, { name: 'Code and Beast' } This object exists in some memory space, let's say its address is X201. Its logic is roughly as follows:

let person = X201
const members = [X201]
persion = null
复制代码

Question 4

Try to speculate its output:

function SuperHero() {
  this.make = '代码与野兽'
  return { make: '野兽与代码'}
}

const mySuperhero = new SuperHero()
console.log(mySuperhero)
复制代码

output:

{
  make: "野兽与代码"
}
复制代码

Resolution:
If the constructor finally returns an object, the properties previously set will be invalid.

Question 5

Try to speculate its output:

const name = '代码与野兽'
console.log(name.padStart(14))
console.log(name.padStart(2))
复制代码

output:

"         代码与野兽"
"代码与野兽"
复制代码

Analysis:
The padStart method can pad spaces at the beginning of the string.
The parameter is the total length of the new string, if this length is shorter than the original string length, no padding will be done.

Question 6

Try to speculate its output:

console.log(parseInt("7"))
console.log(parseInt("7*6"))
console.log(parseInt("7Din"))
复制代码

output:

7
7
7
复制代码

Parsing:
If the argument to parseInt is a combination of a string and a number, then it checks from the beginning until it hits the wrong data type position, and if there is a valid number before the wrong data type position, it returns the number.

Question 7

Try to speculate its output:

[1, 2, 3, 4].reduce((x, y) => console.log(x, y))
复制代码

output:

1
2
undefined
3
undefined
4
复制代码

Explanation:
If we do not pass an initial value to reduce, then x will be the first value of the array and y will be the second value of the array.

Question 8

Try to speculate its output:

function getUserInfo(one, two, three) {
  console.log(one)
  console.log(two)
  console.log(three)
}

const superHero = '代码与野兽'
const age = 1000

getUserInfo`${superHero} 是 ${age} 岁`
getUserInfo`hello`
复制代码

output:

["", " 是 ", " 岁"]
"代码与野兽"
1000
["hello"]
undefined
undefined
复制代码

Parsing:
When we use template string syntax to call a function, the first parameter is always a split string array. The remaining arguments are the values ​​of the template expression.

Question 9

Try to speculate its output:

(() => {
  let x, y;
  try {
    throw new Error()
  } catch (x) {
    (x = 1), (y = 2);
    console.log(x)
  }
  console.log(x)
  console.log(y)
})()
复制代码

output:

1
undefined
2
复制代码

Analysis:
Access x in the catch, access is the parameter, not the variable x outside.

Question 10

Try to speculate its output:

class Clazz {}

console.log(typeof Clazz)
复制代码

output:

"function"
复制代码

Analysis:
In JavaScript, Class is also a function.

Question 11

Try to speculate its output:

const arr = [7, 1, 4, 3, 2];
for (const elem of arr) {
  setTimeout(() => console.log(elem), elem);
}
复制代码

output:

1
2
3
4
7
复制代码

Parsing:
nothing to explain...

Question 12

Try to speculate its output:

const foo = { bar: 1 };
with(foo) {
  var bar = 2
};
console.log(foo.bar);
复制代码

output:

2
复制代码

Analysis:
The object of with will be used as a global object. Using var in with is equivalent to window.[xxx]. And then foo is the window.