分享 10 个提高 JavaScript 技能的测验问答

码农天地 - 2020-06-21 15:00:24

刷题是我们提高自己技术的一种好方法。下面的问题很有挑战性和“指导性”。如果你知道该怎样回答，那意味着自己的水平很好，但是如果你发现自己答错了，并能够搞清楚为什么错，我认为那会更好！

推荐学习：JavaScript视频教程、 js教程（图文）

1. 数组排序比较

看以下数组，在各种排序操作后都下输出什么？

const arr1 = ['a', 'b', 'c'];const arr2 = ['b', 'c', 'a'];console.log( arr1.sort() === arr1, arr2.sort() == arr2, arr1.sort() === arr2.sort());

答案和解析

答案： true, true, false

这里有几个概念在起作用。首先，array 的 sort 方法对原始数组进行排序，并返回对该数组的引用。这意味着当你调用 arr2.sort() 时，arr2 数组内的对象将会被排序。

当你比较对象时，数组的排序顺序并不重要。由于 arr1.sort() 和 arr1 指向内存中的同一对象，因此第一个相等测试返回 true。第二个比较也是如此：arr2.sort() 和 arr2 指向内存中的同一对象。

在第三个测试中，arr1.sort() 和 arr2.sort() 的排序顺序相同；但是，它们指向内存中的不同对象。因此，第三个测试的评估结果为 false。

2. set 的对象

把下面的 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 的 name。最后会输出什么？

const user = { name: 'Joe', age: 25, pet: { type: 'dog', name: 'Buttercup', },};Object.freeze(user);user.pet.name = 'Daffodil';console.log(user.pet.name);

答案和解析

答案：Daffodil

Object.freeze 将会使对象浅冻结，但不会保护深层属性不被修改。在这个例子中，不能对 user.age 进行修改，但是对 user.pet.name 进行修改却没有问题。如果我们觉得需要保护一个对象，避免其“从头到尾”发生改变，则可以递归地应用 Object.freeze 或使用现有的“深度冻结”库。

4. 原型继承

在下面的代码中，有一个 Dog 构造函数。我们的 dog 显然有 speak 这个操作。当我们调用 Pogo 的 speak 时，会输出什么？

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

答案和解析

答案：woof

每次创建一个新的 Dog 实例时，我们都会将该实例的 speak 属性设置为返回字符串 woof 的函数。由于每次我们创建一个新的Dog实例时都要设置该值，因此解释器不会沿着原型链去找 speak 属性。结果就不会使用 Dog.prototype.speak 上的 speak 方法。

5. Promise.all 的解决顺序

在这个问题中，我们有一个 timer 函数，它返回一个 Promise ，该 Promise 在随机时间后解析。我们用 Promise.all 解析一系列的 timer。最后的输出是什么，是随机的吗？

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"]

Promise 解决的顺序与 Promise.all 无关。我们能够可靠地依靠它们按照数组参数中提供的相同顺序返回。

6. Reduce 数学

数学时间！输出什么？

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. 短路通知（Short-Circuit Notification(s)）

让我们向用户显示一些通知。以下代码段输出了什么？

const notifications = 1;console.log( `You have ${notifications} notification${notifications !== 1 && 's'}`);

答案和解析

答案：“You have 1 notificationfalse”

不幸的是，我们的短路评估将无法按预期工作： notifications !== 1 && 's' 评估为 false，这意味着我们实际上将会输出 You have 1 notificationfalse。如果希望代码段正常工作，则可以考虑条件运算符： ${notifications === 1 ? '' : 's'}。

8. 展开操作和重命名

查看以下代码中有单个对象的数组。当我们扩展该数组并更改 0 索引对象上的 firstname 属性时会发生什么？

const arr1 = [{ firstName: 'James' }];const arr2 = [...arr1];arr2[0].firstName = 'Jonah';console.log(arr1);

答案和解析

答案： [{ firstName: "Jonah" }]

展开操作符会创建数组的浅表副本，这意味着 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 被调用时，将会调用 this' 值为 '['a'，'b'，'c'] 的 Array.prototype.map。但是当用作引用时， Array.prototype.map 的引用。

Function.prototype.bind 会将函数的 this 绑定到第一个参数（在本例中为 [1, 2, 3]），用 this 调用Array.prototype.map 将会导致这些项目被迭代并输出。

10. set 的唯一性和顺序

在下面的代码中，我们用 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://typeofnan.dev/10-javascript-quiz-questions-and-answers/

作者：Nick Scialli

想要获取炫酷的页面特效，可访问：js代码特效栏目！！

以上就是分享 10 个提高 JavaScript 技能的测验问答的详细内容，更多请关注php中文网其它相关文章！

微信分享相关标签：JavaScript本文转载于：segmentfault，如有侵犯，请联系a@php.cn删除上一篇：用JavaScript将Canvas内容转化成图片的方法详解下一篇：原生JS使用transform实现banner的无限滚动效果

相关视频

聊聊javascript里的sleep()方法如何检测一个函数是否是JavaScript原生函数JavaScript document.write...用JavaScript检测出当前浏览器是否是无头浏...分享 10 个提高 JavaScript 技能的测...JavaScript算数运算符JavaScript比较运算符JavaScript函数的调用（1）JavaScript变量的作用域

网友评论

文明上网理性发言，请遵守新闻评论服务协议

我要评论立即提交专题推荐独孤九贱-php全栈开发教程

全栈 100W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

玉女心经-web前端开发教程

入门 50W+

主讲：灭绝师太由浅入深、明快简洁，非常适合前端学习入门

天龙八部-实战开发教程

实战 80W+

主讲：西门大官人思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

青灯夜游

今天学习一小步，明天提升一大步

最近文章分享 10 个提高 JavaScript 技能的测验问答21815个你可能还不了解的 Git 命令984分享一些值得前端开发者收藏的 GitHub 库435发布技术文章最新文章热门排行

JS 如何获取扫码枪输入数据一起看看JavaScript如何获取页面上被选中的文字现代JavaScript使用技巧之ES6中的简写语法用JavaScript获取伪元素(Pseudo-Element)属性的方法详解如何用JavaScript避免代码的重复执行如何用js统计字符串中每个字符出现的次数？JavaScript判断"字典"为空的方法8个问题测试你的JavaScript基础

RN布局的实例详解jQ选择器汇总JS是什么意思json格式是什么？json格式文件怎么打开？vue.js中created方法的使用详解echarts柱状图颜色设置：echarts柱状图如何设置不同颜色？（代码）js数组如何删除指定位置的元素？删除指定位置元素的2种方法怎样实现Vue项目中使用Vux推荐视频教程JavaScript设计模式完整视频教程JavaScript基本语法及基本语句视频教程JavaScript核心编程视频教程JavaScript深入视频教程JavaScript标准参考手册视频教程分类php视频教程html视频教程css视频教程JS视频教程jQuery视频教程mysql视频教程Linux视频教程Python视频教程article_status = 287557;网站首页 PHP视频PHP实战PHP代码PHP手册词条手记编程词典

php中文网：公益在线php培训，帮助PHP学习者快速成长！合肥彼岸互联信息技术有限公司

座机号码：0551-64933227 安徽省合肥市政务新区置地广场D座2101

特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。

上一篇： position的几个属性的作用分别是什么

下一篇： CSS Modules 详解

Tags 标签

加个好友，技术交流

码农天地

首页 HTML/CSS WEB服务器 PHP Linux 数据库异常报错插件工具美文欣赏站长直荐