8个JavaScript题目
1、sort
const arr1 = ['a', 'b', 'c'];
const arr2 = ['b', 'c', 'a'];console.log(arr1.sort() === arr1,arr2.sort() == arr2,arr1.sort() === arr2.sort()
);
Answer: true, true, false
首先,array sort
方法对原始数组进行排序,并返回对该数组的引用。这意味着在编写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);
Answer: [{a: 1}, {a: 1}]
虽然 Set 对象确实会删除重复项,但我们使用的两个值是对内存中不同对象的引用,尽管它们具有相同的键值对。这与 {a:1}=={a:1}
为 false
的原因相同。
应该注意的是,如果集合是使用对象变量(比如 obj={a:1}
)创建的,那么新集合([obj,obj]
)将只有一个元素,因为数组中的两个元素引用内存中的同一个对象。
3、Object.freeze
const user = {name: 'Joe',age: 25,pet: {type: 'dog',name: 'Buttercup'}
};Object.freeze(user);
user.pet.name = 'Daffodil';
console.log(user.pet.name);
Answer: Daffodil
Object.freeze 对象冻结将对对象执行浅冻结,但不会保护深层属性修改不受影响。在这个例子中,我们无法修改 user.age
,但我们可以修改 user.pet.name
. 如果我们觉得需要保护对象不被“修改,我们可以递归地使用对象冻结或者使用现有的“深度冻结”库。
4、Prototype
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());
Answer: woof
每次创建一个新的 Dog 实例时,我们都将该实例的 speak
属性设置为返回字符串 woof
的函数。因为每次我们创建一个新的 Dog 实例时都会设置这个属性,所以解释器永远不必在原型链上查找更远的内容来找到 speak
属性。
5、Promise.all
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));
Answer: ["first", "second"]
我们可以可靠地以数组参数中提供它们的相同顺序返回。
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));
Answer: 120
对于Array#reduce,聚合的初始值(这里称为 agg
)在第二个参数中给出。在这种情况下,是1。然后,我们可以对函数进行迭代,如下所示:
1 + 1 * 1 = 2
2 + 2 * 2 = 6
6 + 6 * 3 = 24
24 + 24 * 4 = 120
7、扩展运算符
const arr1 = [{ firstName: 'James' }];
const arr2 = [...arr1];
arr2[0].firstName = 'Jonah';console.log(arr1);
Answer: [{ firstName: "Jonah" }]
扩展运算符创建数组的浅拷贝,这意味着 arr2
中包含的对象仍指向 arr1
对象所指向的内存中的同一对象。因此,更改一个数组中对象的 firstName
属性也会被另一个数组中的对象所反映。
8、Array
const map = ['a', 'b', 'c'].map.bind([1, 2, 3]);
map(el => console.log(el));
Answer: 1 2 3
['a','b','c'].map
调用时,this 指向的是['a', 'b', 'c']
,当通过 bind 方法修改 this 之后指向时变成了[1, 2, 3]
,所以代码可以改写成这种方式:
[1, 2, 3].map(el => console.log(el))
好了,今天的文章分享到这里,欢迎大家点赞留言和收藏。
8个JavaScript题目相关推荐
- 试试看 ? 离奇古怪的javascript题目
来源地址: http://dmitrysoshnikov.com/ecmascript/the-quiz/#q1 另一篇帖子 看看国外的javascript题目,你能全部做对吗? http://www ...
- 30个你 “ 不可能全部会做 ” 的javascript题目
1,以下表达式的运行结果是: ["1","2","3"].map(parseInt) A.["1","2&qu ...
- 一些JavaScript题目
Q:如何将一个数组的内容复制到另外一个数组? A: jscript.array.copyArray = function(isSrcArray,inDestArray) { var i; for(i ...
- 一次性理清JavaScript变量等高难度面试问题
主要是解决JavaScript中比较难懂的部分,当然了,这部分经常在面试题中露面,这篇文章主要是讲解解题思路,对新手会有很大帮助(如果你仔细看的话).书籍方面,我看的是<你不知道的javascr ...
- 前端面试题目及答案(欢迎拍砖)
1.盒子模型(IE 和w3c). 2.css hack ie6 參见博客:http://blog.csdn.net/freshlover/article/details/12132801 简单 ...
- 一种JavaScript里小数的精确计算方式
<html> <script type="text/javascript"> /*题目描述 求 a 和 b 相乘的值,a 和 b 可能是小数,需要注意结果的 ...
- Javascript中正则表达式的全局匹配模式
先看一道JavaScript题目,据说是国内某知名互联网企业的JavaScript笔试题,如果对正则的全局匹配模式不了解的话可能会对下面的输出结果感到疑惑. View Code var str = & ...
- (leetcode)1723. 完成所有工作的最短时间 -2021/5/8
文章目录 1723. 完成所有工作的最短时间 javascript 1723. 完成所有工作的最短时间 javascript 题目: 给你一个整数数组 jobs ,其中 jobs[i] 是完成第 i ...
- 谷歌变坏了?Chrome 已成众矢之的:15 篇前端热文回看
(给前端大全加星标,提升前端技能) 本文精选了「前端大全」2019 年 6 月的 15 篇热门文章.其中有技术分享和技术资讯. 注:以下文章,点击标题即可阅读 <Vue+Node+高德地图+Ec ...
最新文章
- 企业OKR实施失败一定要小心这三大杀手
- 极视教育的课程怎么样_蒲公英教育加盟怎么样?
- 如何预防服务器宕机:防患于未然
- VB6 通过winsock控件数组实现客户端和服务器多对一通信
- spring源码分析之spring jmx
- Struts2-拦截器原理
- .NET Core前后端分离快速开发框架(Core.3.1+AntdVue)
- nginx 下配置使用Thinkphp5解决跨目录活动并且设置网站根目录
- es嵌套聚合dsl(求均值,求和)
- Java命令行界面(第24部分):MarkUtils-CLI
- @Autowired注解作用在方法上
- nginx location反向代理不对等时的处理
- python调用ping命令_python调用系统命令ping
- Android开发笔记(十八)书籍翻页动画PageAnimation
- 12.01 晚 心情 阴雨 既然能力支撑不起自己的野心就先沉下心来努力学习好让有一天重新出现在江湖大放光芒...
- 关于行内元素的margin padding一些说明;background-color的范围
- 使用这些 HTTP 头保护 Web 应用
- 虾皮男装类目市场如何?哪些产品好卖?
- java.sql.SQLException: Cannot create com.liqi.entry.User: com.li.entry.User Query: SELECT * from u
- Java学生签到考勤请假系统源码