跳到主要内容

18 篇博文 含有标签「155个JavaScript基础问题」

查看所有标签

136. 以下哪一项会对对象person有副作用?

const person = { name: "Lydia Hallie" };

Object.seal(person);

image.png

答:A,首先我们要明白Object.seal的作用,是防止添加新属性或者对原有属性进行删除,B属于添加新属性,C属于删除原有属性,D属于将所有可枚举对象的属性的值从源对象分配到目标对象,并返回目标对象,所以属于添加,所以只有A项对person对象产生了副作用。

137. 以下哪一项会对对象person产生副作用?

const person = {
name: "Lydia Hallie",
address: {
street: "100 Main St"
}
};

Object.freeze(person);

image.png

答:C,本题考查我们对Object.freeze这个API的用法的了解程度,这个冻结属于浅冻结,所以对内部对象的属性是可以修改的,比如这个street属性。

138. 输出什么?

const add = x => x + x;

function myFunc(num = 2, value = add(num)) {
console.log(num, value);
}

myFunc();
myFunc(3);

image.png

答:A,本题没什么坑,就是考查我们对默认传参的了解。

139. 输出什么?

class Counter {
#number = 10

increment() {
this.#number++
}

getNum() {
return this.#number
}
}

const counter = new Counter()
counter.increment()

console.log(counter.#number)

image.png

答:D,本题考查的是ES2020的新特性,访问类的私有属性,不能通过实例直接调用,可以通过实例的方法获取到,所以选D。

140. 选择哪一个?

const teams = [
{ name: "Team 1", members: ["Paul", "Lisa"] },
{ name: "Team 2", members: ["Laura", "Tim"] }
];

function* getMembers(members) {
for (let i = 0; i < members.length; i++) {
yield members[i];
}
}

function* getTeams(teams) {
for (let i = 0; i < teams.length; i++) {
// ✨ SOMETHING IS MISSING HERE ✨
}
}

const obj = getTeams(teams);
obj.next(); // { value: "Paul", done: false }
obj.next(); // { value: "Lisa", done: false }

image.png

答:B,本题主要是考查我们队yield和yield 的认知,yield返回的是一个值,yield则是将函数委托到另一个生成器函数或可迭代对象,显然本题适用于后者,所以选B。

141. 输出什么?

const person = {
name: "Lydia Hallie",
hobbies: ["coding"]
};

function addHobby(hobby, hobbies = person.hobbies) {
hobbies.push(hobby);
return hobbies;
}

addHobby("running", []);
addHobby("dancing");
addHobby("baking", person.hobbies);

console.log(person.hobbies);

image.png

答:C,本题还是考查默认传参和实际传参的区别,running加不到数组hobbies中是因为,传递了实参空数组,其余的都是传递了person对象的引用,则能够添加进去,所以选C。

142. 输出什么?

class Bird {
constructor() {
console.log("I'm a bird. 🦢");
}
}

class Flamingo extends Bird {
constructor() {
console.log("I'm pink. 🌸");
super();
}
}

const pet = new Flamingo();

image.png

答:B,本题考查我们对继承的理解,首先会调用子类的构造函数,其次调用父类的构造函数,所以打印的是B。

143. 哪一个选项会导致报错?

const emojis = ["🎄", "🎅🏼", "🎁", "⭐"];

/* 1 */ emojis.push("🦌");
/* 2 */ emojis.splice(0, 2);
/* 3 */ emojis = [...emojis, "🥂"];
/* 4 */ emojis.length = 0;

image.png

答:D,长度属性是可以修改的,所以第4个并没有错,第三个错在对emojis的地址进行修改,这是不允许的,因为这是const关键字修饰的。

144. 我们需要向person对象添加什么,以致执行 [...person] 时获得形如 ["Lydia Hallie", 21] 的输出?

const person = {
name: "Lydia Hallie",
age: 21
}

[...person] // ["Lydia Hallie", 21]

image.png

答:C,本题需要添加迭代器来定义迭代规则,对象默认并不是可迭代的,在添加规则的时候,生成器对象一定要yield* Object.values.

145. 输出什么?

let count = 0;
const nums = [0, 1, 2, 3];

nums.forEach(num => {
if (num) count += 1
})

console.log(count)

image.png

答:C,当num为0的时候,count并不加,所以总共加了三次,选C。

题目来源

https://github.com/lydiahallie/javascript-questions


155个JavaScript基础问题阅读需 4 分钟

146. 输出是什么?

function getFruit(fruits) {
console.log(fruits?.[1]?.[1])
}

getFruit([['🍊', '🍌'], ['🍍']])
getFruit()
getFruit([['🍍'], ['🍊', '🍌']])

image.png

答:D,本题主要考察的是可选链操作符,只要不存在返回的是undefined,所以选D。

147. 输出什么?

class Calc {
constructor() {
this.count = 0
}

increase() {
this.count ++
}
}

const calc = new Calc()
new Calc().increase()

console.log(calc.count)

image.png

答:A,本题调用increase的对象和calc不是同一个对象,所以答案还是0.

148. 输出什么?

const user = {
email: "e@mail.com",
password: "12345"
}

const updateUser = ({ email, password }) => {
if (email) {
Object.assign(user, { email })
}

if (password) {
user.password = password
}

return user
}

const updatedUser = updateUser({ email: "new@email.com" })

console.log(updatedUser === user)

image.png

答:B,本题中并未对user这个对象的地址进行修改,只是对内部进行了修改,所以updatedUser和user地址相同。

149. 输出什么?

const fruit = ['🍌', '🍊', '🍎']

fruit.slice(0, 1)
fruit.splice(0, 1)
fruit.unshift('🍇')

console.log(fruit)

image.png

答:C,本题就是考查我们对常用API的熟系程度,splice会对原数组产生副作用,unshift则是在数组最前面添加元素,所以答案是C。

150. 输出什么?

const animals = {};
let dog = { emoji: '🐶' }
let cat = { emoji: '🐈' }

animals[dog] = { ...dog, name: "Mara" }
animals[cat] = { ...cat, name: "Sara" }

console.log(animals[dog])

image.png

答:B,用一个对象作为键,底层存储的是"object Object",所以这样看来,dog和cat在animals的键是相同的,所以cat对应的值能够覆盖dog,所以选B。

151. 输出什么?

const user = {
email: "my@email.com",
updateEmail: email => {
this.email = email
}
}

user.updateEmail("new@email.com")
console.log(user.email)

image.png

答:A,本题考查的是箭头函数this指向的问题,此时this指向的是全局对象,由于全局没有email这个属性,所以会报错:image.png

152. 输出什么?

const promise1 = Promise.resolve('First')
const promise2 = Promise.resolve('Second')
const promise3 = Promise.reject('Third')
const promise4 = Promise.resolve('Fourth')

const runPromises = async () => {
const res1 = await Promise.all([promise1, promise2])
const res2 = await Promise.all([promise3, promise4])
return [res1, res2]
}

runPromises()
.then(res => console.log(res))
.catch(err => console.log(err))

image.png

答:D,本题主要考察我们对Promise.all的了解,只要接收到了一个reject,直接将异步结果返回给捕捉错误的回调函数,所以直接打印Third.

153. 哪个作为method的值可以打印{ name: "Lydia", age: 22 }?

const keys = ["name", "age"]
const values = ["Lydia", 22]

const method = /* ?? */
Object[method](keys.map((_, i) => {
return [keys[i], values[i]]
})) // { name: "Lydia", age: 22 }

image.png

答:C,本题主要是考查我们是否知道如何将二维数组转换为对象,可以通过C这个API,image.png

154. 输出什么?

const createMember = ({ email, address = {}}) => {
const validEmail = /.+\@.+\..+/.test(email)
if (!validEmail) throw new Error("Valid email pls")

return {
email,
address: address ? address : null
}
}

const member = createMember({ email: "my@email.com" })
console.log(member)

image.png

答:C,本题需要知道一点,那就是空对象属于真值,所以在返回对象的时候,address并不是返回null,而是返回的{}.

155. 输出什么?

let randomValue = { name: "Lydia" }
randomValue = 23

if (!typeof randomValue === "string") {
console.log("It's not a string!")
} else {
console.log("Yay it's a string!")
}

image.png

答:B,首先我们要知道本题的运算优先级,首先会计算typeof randomValue,这回返回一个"number",这是一个字符串,对字符串取反,返回false,false并不等于"string",所以最后输出的是else对应的语句,"Yay it's a string!"。

题目来源

https://github.com/lydiahallie/javascript-questions


155个JavaScript基础问题阅读需 3 分钟

116. 输出什么?

const person = {
name: "Lydia",
age: 21
}

const changeAge = (x = { ...person }) => x.age += 1
const changeAgeAndName = (x = { ...person }) => {
x.age += 1
x.name = "Sarah"
}

changeAge(person)
changeAgeAndName()

console.log(person)

image.png

答:C,本题主要考查函数传参和默认参数的区别,传参如果传的是引用地址,则会对这个引用产生影响,但是如果是默认参数,则是创建了一个新对象,对原引用没有影响。

117. 下面哪个选项会返回6?

function sumValues(x, y, z) {
return x + y + z;
}

image.png

答:C,本题考查我们对拓展运算符的熟悉程度,只有C选项是将数组变为了三个元素,其余选项均为一个数组,所以选C。

118. 输出什么?

let num = 1;
const list = ["🥳", "🤠", "🥰", "🤪"];

console.log(list[(num += 1)]);

image.png

答:B,本题我们需要看清的是,这不是num++,而是num+=1,所以其实打印的是list[2].

119. 输出什么?

const person = {
firstName: "Lydia",
lastName: "Hallie",
pet: {
name: "Mara",
breed: "Dutch Tulip Hound"
},
getFullName() {
return `${this.firstName} ${this.lastName}`;
}
};

console.log(person.pet?.name);
console.log(person.pet?.family?.name);
console.log(person.getFullName?.());
console.log(member.getLastName?.());

image.png

答:B,本题主要考查可选连操作符(?.),这是一个新特性,作用是如果该操作符前面的属性对象存在,则打印该属性对应的内容,如果不存在则返回undefined,至于第四个打印member的这个选项,答案应是报错的。

120. 输出什么?

const groceries = ["banana", "apple", "peanuts"];

if (groceries.indexOf("banana")) {
console.log("We have to buy bananas!");
} else {
console.log(`We don't have to buy bananas!`);
}

image.png

答:B,这是因为indexOf返回的下标是0,这是一个假值,所以触发了else.

121. 输出什么?

const config = {
languages: [],
set language(lang) {
return this.languages.push(lang);
}
};

console.log(config.language);

image.png

答:D,本题考查我们对setter的认识,这个方法存在的意义是修改对象的属性,如果调用的话返回的是undefined。

122. 输出什么?

const name = "Lydia Hallie";

console.log(!typeof name === "object");
console.log(!typeof name === "string");

image.png

答:C,本题非运算的优先级高于三个等号的优先级,所以先计算typeof name结果为字符串类型的string,取非之后,返回的是false,这个和后两个均不等,所以选C。

123. 输出什么?

const add = x => y => z => {
console.log(x, y, z);
return x + y + z;
};

add(4)(5)(6);

image.png

答:A,这题主要考查箭头函数的作用域链,所以打印的是 4 5 6,选A。

124. 输出什么?

async function* range(start, end) {
for (let i = start; i <= end; i++) {
yield Promise.resolve(i);
}
}

(async () => {
const gen = range(1, 3);
for await (const item of gen) {
console.log(item);
}
})();

image.png

答:C,本题主要是考查生成器函数和for await of这种循环的用法,首先range这个生成器函数返回了3个Promise对象,通过for await of 这种循环可以将每个promise的值打印出来,所以选C。

125. 输出什么?

const myFunc = ({ x, y, z }) => {
console.log(x, y, z);
};

myFunc(1, 2, 3);

image.png

答:D,本题主要考察对象的解构赋值,传入的应该是一个拥有x y z三个属性的对象,但是题目并未传入一个对象,所以打印的是3个undefined.

题目来源

https://github.com/lydiahallie/javascript-questions


155个JavaScript基础问题阅读需 3 分钟

126. 输出什么?

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

答:B,本题主要考察Intl.NumberFormat的用法,意在输出指定类型的字符串,所以选B。

127. 输出什么?

const spookyItems = ["👻", "🎃", "🕸"];
({ item: spookyItems[3] } = { item: "💀" });

console.log(spookyItems);

image.png

答:B,本题在解构对象的时候,对数组进行了赋值,所以选B。

128. 输出什么?

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));

image.png

答:C,本题主要是考查我们对Number.isNaN和isNaN这两种API的用法区别的认识,前者不仅要检查是否是非数字,还要检查是否等于NaN,后者则只用检查是否是非数字,所以最终的结果选C。

129. 输出什么?

const randomValue = 21;

function getInfo() {
console.log(typeof randomValue);
const randomValue = "Lydia Hallie";
}

getInfo();

image.png

答:D,这种问题属于考查临时性死区的问题,在const形成的块级作用域中,变量声明提升了,但是并未初始化,此时调用会产生一个临时性死区,一旦调用就会报错。

130. 输出什么?

const myPromise = Promise.resolve("Woah some cool data");

(async () => {
try {
console.log(await myPromise);
} catch {
throw new Error(`Oops didn't work`);
} finally {
console.log("Oh finally!");
}
})();

image.png

答:C,本题并没有太多的坑,只要知道正常的async和await的用法,即可知道选C。

131. 输出什么?

const emojis = ["🥑", ["✨", "✨", ["🍕", "🍕"]]];

console.log(emojis.flat(1));

image.png

答:B,这里的flat(1),我们可以理解为将数组降维处理,去掉数组里面的一维数组,测试案例看这个图:image.png,所以选B。

132. 输出什么?

class Counter {
constructor() {
this.count = 0;
}

increment() {
this.count++;
}
}

const counterOne = new Counter();
counterOne.increment();
counterOne.increment();

const counterTwo = counterOne;
counterTwo.increment();

console.log(counterOne.count);

image.png

答:D,本题中counterTwo和counterOne指向的是同一片对象,所以对counterTwo的加就是对counterOne的加,所以最终的结果是3.

133.输出什么?

const myPromise = Promise.resolve(Promise.resolve("Promise!"));

function funcOne() {
myPromise.then(res => res).then(res => console.log(res));
setTimeout(() => console.log("Timeout!"), 0);
console.log("Last line!");
}

async function funcTwo() {
const res = await myPromise;
console.log(await res);
setTimeout(() => console.log("Timeout!"), 0);
console.log("Last line!");
}

funcOne();
funcTwo();

image.png

答:D,本题主要是考查事件循环机制,详情请看我的专栏,首先调用栈执行第一个函数中的同步代码,然后微任务Promise,然后开始执行第二个函数,因为await关键字的存在,函数会一直等到Promise的状态变为resolved才会继续执行同步代码,所以打印了Promise,然后执行同步代码Last line,当调用栈为空的时候,最后执行两个宏任务setTimeout,先1后2.

134. 如何在index.js中调用sum.js中的sum方法?

// sum.js
export default function sum(x) {
return x + x;
}

// index.js
import * as sum from "./sum";

image.png

答:C,本题主要是考查我们对通过import * 导入一个默认暴露函数的理解,只有通过C是可以的。

135. 输出什么?

const handler = {
set: () => console.log("Added a new property!"),
get: () => console.log("Accessed a property!")
};

const person = new Proxy({}, handler);

person.name = "Lydia";
person.name;

image.png

答:C,本题主要考查我们对Proxy对象的用法熟悉程度,通过该API,我们可以给对象添加自定义行为,当给对象设置值的时候,set方法会被调用,当调用对象的时候,get方法将会被调用。

题目来源

https://github.com/lydiahallie/javascript-questions


155个JavaScript基础问题阅读需 3 分钟

106. 输出什么?

const colorConfig = {
red: true,
blue: false,
green: true,
black: true,
yellow: false,
}

const colors = ["pink", "red", "blue"]

console.log(colorConfig.colors[1])

image.png

答:D,JS通过点访问对象属性的时候,会把colors当做一个属性,发现找不到为undefined,然后调用[1]会报错。

107. 输出什么?

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

image.png

答:A,显然这两个字面量是相等的。

108. 那些方法修改了原数组?

const emojis = ['✨', '🥑', '😍']

emojis.map(x => x + '✨')
emojis.filter(x => x !== '🥑')
emojis.find(x => x !== '🥑')
emojis.reduce((acc, cur) => acc + '✨')
emojis.slice(1, 2, '✨')
emojis.splice(1, 2, '✨')

image.png

答:map,filter,slice返回的是新数组,find返回的是数组中的某个元素,reduce返回的是一个值,只有splice是对原数组产生了更改。

109. 输出什么?

const food = ['🍕', '🍫', '🥑', '🍔']
const info = { favoriteFood: food[0] }

info.favoriteFood = '🍝'

console.log(food)

image.png

答:A,上述代码只是修改了info中的值,并未对food对象产生任何影响。

110. 下面的函数干了什么?

JSON.parse()

image.png

答:A,这个题就看我们对JS中常用API的了解程度了,就是将JSON字符串转换为对应的JavaScript值。

111. 输出什么?

let name = 'Lydia'

function getName() {
console.log(name)
let name = 'Sarah'
}

getName()

image.png

答:D,本题中let存在变量声明的提升,但是并未进行初始化,此时存在暂时性死区,在暂时性死区中调用let定义的变量会报错,所以选D。

112. 输出什么?

function* generatorOne() {
yield ['a', 'b', 'c'];
}

function* generatorTwo() {
yield* ['a', 'b', 'c'];
}

const one = generatorOne()
const two = generatorTwo()

console.log(one.next().value)
console.log(two.next().value)

image.png

答:C,本题中的两个函数猛一看没区别,实际上第二个函数多了一个*号,所以调用第二个函数的next().value返回的其实是一个元素,所以本题选C。

113. 输出什么?

console.log(`${(x => x)('I love')} to program`)

答:A,本题的模板字符串大括号中是一个立即执行函数,所以打印的结果是A。

114. 下面的函数将会发生什么?

let config = {
alert: setInterval(() => {
console.log('Alert!')
}, 1000)
}

config = null

image.png

答:C,这是因为循环定时器中的参数是一个箭头函数,箭头函数中的上下文绑定到config了,通过赋值为null,回调函数仍然保留着对config的引用,所以循环定时器不会停止,仍然是每隔1秒继续打印,可以通过clear的方式取消掉这个循环定时器。

115. 下面哪一个方法会返回'Hello World!'?

const myMap = new Map()
const myFunc = () => 'greeting'

myMap.set(myFunc, 'Hello world!')

//1
myMap.get('greeting')
//2
myMap.get(myFunc)
//3
myMap.get(() => 'greeting')

image.png

答:B,首先我们要明确一点,Map中值为Hello world!的键是myFunc的地址引用,1,2,3中只有第二个键是myFunc的地址引用,3是一个新地址,所以选B。

题目来源

https://github.com/lydiahallie/javascript-questions


155个JavaScript基础问题阅读需 3 分钟

96. 输出什么?

class Person {
constructor() {
this.name = "Lydia"
}
}

Person = class AnotherPerson {
constructor() {
this.name = "Sarah"
}
}

const member = new Person()
console.log(member.name)

image.png

答:B,这题可以理解为Person中存放了新的地址,Person也指向了新的类,所以其实例也是新的类的实例对象,所以打印出的是B。

97. 输出什么?

const info = {
[Symbol('a')]: 'b'
}

console.log(info)
console.log(Object.keys(info))

image.png

答:D,本题意在考查我们对Symbol的理解,Symbol是不可枚举的,但是通过访问整个对象可以看到,所以答案选D。

98. 输出什么?

const getList = ([x, ...y]) => [x, y]
const getUser = user => { name: user.name, age: user.age }

const list = [1, 2, 3, 4]
const user = { name: "Lydia", age: 21 }

console.log(getList(list))
console.log(getUser(user))

image.png

答:A,本题意在考查数组的解构赋值和箭头函数如何返回一个对象,我们要切记箭头函数在简写的情形下,要想返回一个对象,需要用小括号包着,否则会报错,但是题目中选的是undefined,其次数组的解构赋值中拓展运算符后面存放的是一个剩余数组,所以选A。

99. 输出什么?

const name = "Lydia"

console.log(name())

image.png

答:C,本题中JS会将name当作函数运行,所以会出现类型错误。

100. 输出什么?

// 🎉✨ This is my 100th question! ✨🎉

const output = `${[] && 'Im'}possible!
You should${'' && `n't`} see a therapist after so much JavaScript lol`

image.png

答:B,本题主要是需要我们直到空字符串属于假的值,但是空对象和空数组都属于真值,所以本题选B。

101. 输出什么?

const one = (false || {} || null)
const two = (null || false || "")
const three = ([] || 0 || true)

console.log(one, two, three)

image.png

答:C,空对象属于真值,null属于假值,[]属于真值,所以本题选C。

102. 依次输出什么?

const myPromise = () => Promise.resolve('I have resolved!')

function firstFunction() {
myPromise().then(res => console.log(res))
console.log('second')
}

async function secondFunction() {
console.log(await myPromise())
console.log('second')
}

firstFunction()
secondFunction()

答:D,本题主要考查事件循环机制和.then和await的区别,在第一个函数中,同步代码是要优先于微任务的执行的,在第二个函数中,await会由暂停机制,等接收到成功的Promise对象后,才继续执行后续代码,所以有一种看起来是同步代码的感觉,所以本题选D。

103. 输出什么?

const set = new Set()

set.add(1)
set.add("Lydia")
set.add({ name: "Lydia" })

for (let item of set) {
console.log(item + 2)
}

image.png

答:C,本题意在考查不同类型的值通过+号后的变化,数值型的则是直接相加,字符串的则是拼接,对象形式的,则是C项的第三个那样进行拼接。

104. 结果是什么?

Promise.resolve(5)

image.png

答:C,通过resolve后,返回的是fulfilled的Promise.

105. 输出什么?

function compareMembers(person1, person2 = person) {
if (person1 !== person2) {
console.log("Not the same!")
} else {
console.log("They are the same!")
}
}

const person = { name: "Lydia" }

compareMembers(person)

image.png

答:B,本题函数中的两个参数实际上都是Person的引用,所以答案选B。

题目来源

https://github.com/lydiahallie/javascript-questions


155个JavaScript基础问题阅读需 3 分钟

76. 输出是什么?

const { name: myName } = { name: "Lydia" };

console.log(name);

答:D,题目中的解构方式相当于将字符串的值赋给了myName,而不是name,所以下文调用name,相当于调用一个没有声明的变量。

77. 下面的函数是纯函数吗?

function sum(a, b) {
return a + b;
}

答:A,因为同样的输入是同样的输出,且不受输入值以外的其他信息影响。

78. 输出是什么?

const add = () => {
const cache = {};
return num => {
if (num in cache) {
return `From cache! ${cache[num]}`;
} else {
const result = num + 10;
cache[num] = result;
return `Calculated! ${result}`;
}
};
};

const addFunction = add();
console.log(addFunction(10));
console.log(addFunction(10));
console.log(addFunction(5 * 2));

答:C,本题主要考查的是闭包的理解,函数首先检查cache中是否有传入的参数,有则返回无则+10然后存进去,然后返回。

79. 输出什么?

const myLifeSummedUp = ["☕", "💻", "🍷", "🍫"]

for (let item in myLifeSummedUp) {
console.log(item)
}

for (let item of myLifeSummedUp) {
console.log(item)
}

答:A,本题意在考查我们对for-in和for-of的理解,我们只需要记住一点,for-in遍历的是键,但是for-of遍历的是值。

80. 输出是什么?

const list = [1 + 2, 1 * 2, 1 / 2]
console.log(list)

答:C,本题考查JS的默认机制。

81. 输出什么?

function sayHi(name) {
return `Hi there, ${name}`
}

console.log(sayHi())

答:B,本题由于模板字符串中没有接收到name,所以返回的是undefined,所以最终答案是B。

82. 输出是什么?

var status = "😎"

setTimeout(() => {
const status = "😍"

const data = {
status: "🥑",
getStatus() {
return this.status
}
}

console.log(data.getStatus())
console.log(data.getStatus.call(this))
}, 0)

答:B,本题意在考查setTimeout函数在特定情况下的this指向问题,在上面这种情况下,this指向的是全局,全局下正好有个😎,所以本题选B。

83. 输出什么?

const person = {
name: "Lydia",
age: 21
}

let city = person.city
city = "Amsterdam"

console.log(person)

答:A,仔细想想本题并未对person对象添加任何属性,所以选A。

84. 输出什么?

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

答:C,这题真的挺坑的,意在考查const、let引起的块级作用域,由于块级作用域的存在,我们无法在块级作用域之外访问到声明的变量,请记住这个题。

85. 下面的代码将打印出什么?

fetch('https://www.website.com/api/user/1')
.then(res => res.json())
.then(res => console.log(res))

答:C,这就是考查我们对Promise的理解程度了,必然是前一个then中回调方法返回的结果了。

题目来源

https://github.com/lydiahallie/javascript-questions


155个JavaScript基础问题阅读需 3 分钟

86. 那个选项是将hasName置为true的方法,前提是不能将true作为参数进行传递?

function getName(name) {
const hasName = //
}

答:A,对name取!返回的是布尔值,C项返回的是一个对象包装器,B返回的是name本身,D返回的是name的长度。

87. 输出是什么?

console.log("I want pizza"[0])

答:B,本题意在告诉我们字符串也是可以通过类似数组下标的方式进行取值的。

88. 输出什么?

function sum(num1, num2 = num1) {
console.log(num1 + num2)
}

sum(10)

image.png

答:B,本题考查的是函数的默认传参,在本题的情况下,如果只传一个参数,第二个参数默认是第一个参数的值。

89. 输出什么?

// module.js 
export default () => "Hello world"
export const name = "Lydia"

// index.js
import * as data from "./module"

console.log(data)

答:A,本题意在考查import * as的用法,通过这种用法,会将module.js文件中的所有暴露导入到index.js中的data对象中,所以选A,下面是测试截图。image.png

90. 输出什么?

class Person {
constructor(name) {
this.name = name
}
}

const member = new Person("John")
console.log(typeof member)

image.png

答:C,Person类的实例对象属于object。

91. 输出什么?

let newList = [1, 2, 3].push(4)

console.log(newList.push(5))

image.png

答:D,本题意在考查push方法的返回值,我们要知道返回的并不是一个新数组而是新数组的长度,所以给一个数字添加元素,是要报错的,所以选D。

92. 输出什么?

function giveLydiaPizza() {
return "Here is pizza!"
}

const giveLydiaChocolate = () => "Here's chocolate... now go hit the gym already."

console.log(giveLydiaPizza.prototype)
console.log(giveLydiaChocolate.prototype)

image.png

答:D,常规函数有prototype属性,但是箭头函数没有这个属性,所以选D,下面是codepen的测试截图:

93. 输出什么?

const person = {
name: "Lydia",
age: 21
}

for (const [x, y] of Object.entries(person)) {
console.log(x, y)
}

image.png

答:A,本题意在考查Object.entries这个API的用法,这个API将对象键值对存入一个二维数组,具体解释请看下图:image.png

94. 输出什么?

function getItems(fruitList, ...args, favoriteFruit) {
return [...fruitList, ...args, favoriteFruit]
}

getItems(["banana", "apple"], "pear", "orange")

答:D,本题意在考查我们对拓展运算符的理解,这里的拓展运算符必须放在最后一个参数,不然会报错。

95. 输出什么?

function nums(a, b) {
if
(a > b)
console.log('a is bigger')
else
console.log('b is bigger')
return
a + b
}

console.log(nums(4, 2))
console.log(nums(1, 2))

image.png

答:B,这道题有点坑,主要是JS在编译的时候会自动给return后面加个分号,所以永远访问不到a+b,所以选B。

题目来源

https://github.com/lydiahallie/javascript-questions


155个JavaScript基础问题阅读需 3 分钟

66. 使用哪个构造函数可以成功继承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;
}

};

答:B,在子类调用super之前不能访问this,所以1,4会报错,在调用super的时候需要使用到子类的参数,所以2正确。

67. 输出是什么?

// index.js
console.log('running index.js');
import { sum } from './sum.js';
console.log(sum(1, 2));

// sum.js
console.log('running sum.js');
export const sum = (a, b) => a + b;

答:B,此题考查的是CommonJS中require和import的区别,import是在代码编译阶段执行的,所以会先于代码执行,但是require则不同,require是需要的时候才调用。

68. 输出是什么?

console.log(Number(2) === Number(2))
console.log(Boolean(false) === Boolean(false))
console.log(Symbol('foo') === Symbol('foo'))

答:B,本题意在考查我们对Symbol的认知,每个Symbol都是唯一的,给Symbol传参数,只是对Symbol的描述。

69. 输出是什么?

const name = "Lydia Hallie"
console.log(name.padStart(13))
console.log(name.padStart(2))

答:C,本题意在考查padStart的用法,这个API的作用是当参数大于字符串的长度时,多几个就在字符串的左侧添加几个空格,但是如果参数小于字符串的长度,则不添加。

70. 输出是什么?

console.log("🥑" + "💻");

答:A,本题就是考查字符串拼接,不要被图画吓到。

71. 如何能打印出console.log后面的注释值。

function* startGame() {
const 答案 = yield "Do you love JavaScript?";
if (答案 !== "Yes") {
return "Oh wow... Guess we're gone here";
}
return "JavaScript loves you back ❤️";
}

const game = startGame();
console.log(/* 1 */); // Do you love JavaScript?
console.log(/* 2 */); // JavaScript loves you back ❤️

答:C,本题主要考察的是生成器函数的用法和yield关键字,所以本题选C,不理解的可以查查生成器函数的用法。

72. 输出是什么?

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

答:C,本题意在考查模板标记函数和String.raw这个API的用法,我们其实只需要知道String.raw会将\n,\t等打印出来,所以选C。

73. 输出是什么?

async function getData() {
return await Promise.resolve("I made it!");
}

const data = getData();
console.log(data);

答:C,通过上述方法返回的是一个等待态的Promise。

74. 输出是什么?

function addToList(item, list) {
return list.push(item);
}

const result = addToList("apple", ["banana"]);
console.log(result);

image.png

答:B,此题意在考查push方法返回值是什么,我一直以为push方法返回的是undefined,其实是添加元素后数组的长度,所以本题选B。

75. 输出是什么?

const box = { x: 10, y: 20 };

Object.freeze(box);

const shape = box;
shape.x = 100;
console.log(shape)

image.png

答:B,本题意在考查Object.freeze的用法,此方法见名思意,是将对象进行冻结,使得无法对冻结的对象添加、修改、删除属性操作,在非严格模式下选B,但是在严格模式下会出现TypeError。

题目来源

https://github.com/lydiahallie/javascript-questions


155个JavaScript基础问题阅读需 3 分钟

56. 输出是什么?

const set = new Set([1, 1, 2, 3, 4]);

console.log(set);

答:D、本题考查集合的用法,集合有去重的功能,所以答案是打印出集合形式的1 2 3 4.

57. 输出是什么?

// counter.js
let counter = 10;
export default counter;
// index.js
import myCounter from "./counter";

myCounter += 1;

console.log(myCounter);

答:C,引入的模块是只读的,不能修改引入的模块。

58. 输出是什么?

const name = "Lydia";
age = 21;

console.log(delete name);
console.log(delete age);

答:A,只需记住一点,属性是还可以删除的,定义的变量无法使用delete的,age相当于给全局对象添加属性,name则是定义变量。

59. 输出是什么?

const numbers = [1, 2, 3, 4, 5];
const [y] = numbers;

console.log(y);

答:C,本题主要考察数组的解构赋值,所以y是1,因为需要个数上对应。

60. 输出是什么?

const user = { name: "Lydia", age: 21 };
const admin = { admin: true, ...user };

console.log(admin);

答:B,本题主要考察的是通过拓展运算符对对象进行解构,所以答案选B。

61. 输出是什么?

const person = { name: "Lydia" };

Object.defineProperty(person, "age", { value: 21 });

console.log(person);
console.log(Object.keys(person));

答:B,本题主要考察的是defineProperty的用法,通过该方法给对象添加的属性,需要声明其属性是否可迭代,如果没有声明默认是不可迭代,所以本题选B。

62. 输出是什么?

const settings = {
username: "lydiahallie",
level: 19,
health: 90
};

const data = JSON.stringify(settings, ["level", "health"]);
console.log(data);

答:A,本题主要考察JSON.stringify的用法,第二个参数意味着将哪些属性转换为字符串,所以本题选A。

63. 输出是什么?

let num = 10;

const increaseNumber = () => num++;
const increasePassedNumber = number => number++;

const num1 = increaseNumber();
const num2 = increasePassedNumber(num1);

console.log(num1);
console.log(num2);

答:A,本题主要考察的是x++的调用顺序问题,两次调用都是将10返回之后再加的。

64. 输出是什么?

const value = { number: 10 };

const multiply = (x = { ...value }) => {
console.log(x.number *= 2);
};

multiply();
multiply();
multiply(value);
multiply(value);

答:C,本题考查的是默认参数和传参的区别,通过默认参数每次都会创建一个新对象,对源对象没有影响,但是直接传参的话,如果传的是引用,则会产生影响。

65. 输出是什么?

[1, 2, 3, 4].reduce((x, y) => console.log(x, y));

答:D,本题主要考察的是reduce函数的用法,reduce的第一个参数是累积器的值,第二个参数的值是当前元素的值,如果不指定累积器的值,那么累积器的值是第一个元素的值即1,y是2。后面由于没有加减操作,所以累积器为undefined.

题目来源

https://github.com/lydiahallie/javascript-questions

欢迎大家关注专栏,每日更新。


155个JavaScript基础问题阅读需 3 分钟