后端开发教程 - Java、Spring Boot 实战 - msg200.com
10 个 JavaScript 测验问题及答案，助您提升技能
问题1：数组排序比较
问题 2：一组对象
问题 3：深层对象可变性
问题4：原型继承
问题 5：Promise.all 解析顺序
问题 6：简化数学
问题 7：短路通知
问题 8：传播和重命名
问题 9：数组方法绑定
问题 10：集合唯一性和排序
JavaScript 问题
挑战自我，成长为 JavaScript 开发者的一种方法就是练习问答题！以下题目旨在挑战性十足，也富有启发性。如果你知道如何准确回答每一个问题，那当然很好；但如果你能答错一些问题，并了解其中的原因，那就更好了！
如果您从测验中学到任何东西，请在评论中告诉我！
编辑：第二版测验题目现已发布！点击此处查看。
如果您喜欢这个测验，请给它一个💓、🦄或🔖并考虑：
问题1：数组排序比较
考虑以下数组。在不同的排序条件下会输出什么？
const arr1 = ['a', 'b', 'c'];
const arr2 = ['b', 'c', 'a'];
console.log(
arr1.sort() === arr1,
arr2.sort() == arr2,
arr1.sort() === arr2.sort()
);
答案与解释
答案：正确，正确，错误
这里有几个概念。首先，arraysort方法会对原始数组进行排序，并返回该数组的引用。这意味着当你写入 时arr2.sort()，arr2数组对象是已排序的。
然而，事实证明，在比较对象时，数组的排序顺序并不重要。由于arr1.sort()和arr1指向内存中的同一个对象，因此第一个相等性测试返回true。这同样适用于第二个比较：arr2.sort()和arr2指向内存中的同一个对象。
arr1.sort()在第三个测试中，和的排序顺序arr2.sort()相同；但是，它们仍然指向内存中的不同对象。因此，第三个测试的计算结果为false。
问题 2：一组对象
Set考虑以下将对象展开到新数组中的情况。会输出什么？
const mySet = new Set([{ a: 1 }, { a: 1 }]);
const result = [...mySet];
console.log(result);
答案与解释
回答： [{a: 1}, {a: 1}]
虽然Set对象确实会删除重复项，但我们用来创建的两个值，Set尽管具有相同的键值对，却是对内存中不同对象的引用。原因也是一样{ a: 1 } === { a: 1 }的false。
需要注意的是，如果使用对象变量创建集合，obj = { a: 1 }则new Set([ obj, obj ])只有一个元素，因为数组中的两个元素都引用内存中的同一个对象。
问题 3：深层对象可变性
考虑以下对象，它代表用户 Joe 和他的狗 Buttercup。我们使用Object.freeze来保存对象，然后尝试修改 Buttercup 的名称。会输出什么？
const user = {
name: 'Joe',
age: 25,
pet: {
type: 'dog',
name: 'Buttercup'
}
};
Object.freeze(user);
user.pet.name = 'Daffodil';
console.log(user.pet.name);
答案与解释
答案：水仙花
Object.freeze会对对象执行浅层冻结，但不会保护深层属性不被修改。在这个例子中，我们无法修改user.age，但修改 却没有问题user.pet.name。如果我们觉得需要保护对象不被“彻底修改”，我们可以递归地应用Object.freeze或使用现有的“深度冻结”库。
如果您喜欢这个测验，请给它一个💓、🦄或🔖并考虑：
问题4：原型继承
在这个问题中，我们有一个Dog构造函数。我们的狗显然知道“说话”命令。当我们要求 Pogo 说话时，下面的例子中会输出什么？
function Dog(name) {
this.name = name;
this.speak = function() {
return 'woof';
};
}
const dog = new Dog('Pogo');
Dog.prototype.speak = function() {
return 'arf';
};
console.log(dog.speak());
答案与解释
答案：汪汪
每次创建新Dog实例时，我们都会speak将该实例的属性设置为一个返回字符串 的函数woof。由于每次创建新Dog实例时都会设置该属性，因此解释器无需沿着原型链进一步查找speak属性。因此，speakon 的方法Dog.prototype.speak永远不会被使用。
问题 5：Promise.all 解析顺序
在这个问题中，我们有一个timer函数，它返回一个Promise经过随机时间解析的 。我们用它Promise.all来解析一个 数组timers。它会记录什么，还是随机的？
const timer = a => {
return new Promise(res =>
setTimeout(() => {
res(a);
}, Math.random() * 100)
);
};
const all = Promise.all([
timer('first'),
timer('second')
]).then(data => console.log(data));
答案与解释
回答： ["first", "second"]
Promises 解析的顺序对 来说并不重要Promise.all。我们可以放心地相信它们会按照数组参数中提供的顺序返回。
问题 6：简化数学
数学时间到了！记录了什么？
const arr = [
x => x * 1,
x => x * 2,
x => x * 3,
x => x * 4
];
console.log(arr.reduce((agg, el) => agg + el(agg), 1));
答案与解释
答案： 120
对于Array#reduce，聚合器的初始值（此处名为agg）在第二个参数中给出。在本例中，即1。然后我们可以按如下方式迭代我们的函数：
1 + 1 * 1 = 2（下次迭代中聚合器的值）
2 + 2 * 2 = 6（下次迭代中聚合器的值）
6 + 6 * 3 = 24（下次迭代中聚合器的值）
24 + 24 * 4 = 120（最终值）
所以，是 120！
问题 7：短路通知
让我们向用户显示一些通知！以下代码片段记录了什么？
const notifications = 1;
console.log(
`You have ${notifications} notification${notifications !==
1 && 's'}`
);
答案与解释
答案： “您有 1 个通知错误”
不幸的是，我们的短路求值在这里无法按预期工作：notifications !== 1 && 's'求值为false，这意味着我们实际上会记录You have 1 notificationfalse。如果我们希望代码片段正常工作，我们可以考虑使用条件运算符：${notifications === 1 ? '' : 's'}。
问题 8：传播和重命名
考虑下面这个包含单个对象的数组。当我们展开该数组并更改索引firstName为 0 的对象上的属性时会发生什么？
const arr1 = [{ firstName: 'James' }];
const arr2 = [...arr1];
arr2[0].firstName = 'Jonah';
console.log(arr1);
答案与解释
回答： [{ firstName: "Jonah" }]
Spread 创建数组的浅拷贝，这意味着数组中包含的对象arr2仍然指向内存中与其arr1指向的对象相同的对象。因此，更改firstName一个数组中对象的属性将反映在另一个数组中对象的更改上。
问题 9：数组方法绑定
在以下场景中会记录什么？
const map = ['a', 'b', 'c'].map.bind([1, 2, 3]);
map(el => console.log(el));
答案与解释
答案： 1 2 3
['a', 'b', 'c'].map，当被调用时，将使用的值Array.prototype.map进行调用。但是，当用作引用时，，而不是被调用，而仅仅是对 的引用。this['a', 'b', 'c']['a', 'b', 'c'].mapArray.prototype.map
Function.prototype.bind将函数的 绑定this到第一个参数（在本例中为[1, 2, 3]），并且使用Array.prototype.map这样的this调用会导致这些项目被迭代和记录。
问题 10：集合唯一性和排序
在以下问题中，我们使用Set对象和扩展语法来创建一个新数组。需要记录哪些内容（需要考虑：数组元素是否强制唯一？它们是否已排序？）
const arr = [...new Set([3, 1, 2, 3, 4])];
console.log(arr.length, arr[2]);
答案与解释
答案： 4 2
该Set对象将强制元素唯一（集合中已存在的重复元素将被忽略），但不会改变顺序。结果arr数组将为[3, 1, 2, 4]，arr.length即 ，4且arr[2]（数组的第三个元素）为2。
如果您喜欢这个测验，请给它一个💓、🦄或🔖并考虑：
想要更多测验题目？前往https://quiz.typeofnan.dev查看另外62道 JavaScript 测验题目！
文章来源：https://dev.to/nas5w/10-javascript-quiz-questions-and-answers-to-sharpen-your-skills-255m