大挑战!JS前端知识闯关,你过得了几关?

开发 前端
位运算符将数字视为32位的有符号整数,而32位整数的取值范围是 -2147483648 ~ 2147483647。

[[430004]]

本文转载自微信公众号「云的程序世界」,作者云的世界 。转载本文请联系云的程序世界公众号。

前言

基础知识真有趣,10个基础知识的题目,请君来战!

1. a.x = a = {n:2}

  1. var a = {n:1}; 
  2. a.x = a = {n:2}; 
  3.  
  4. // 求a.x 
  5. alert(a.x);  

解析

JavaScript 总是严格按照从左至右的顺序来计算表达式。

  1. var a = {n:1}, ref = a; 
  2. a.x = a = {n:2}; 
  3. console.log("a:", a);  
  4. console.log("ref:",ref); 

2. 按位或取整数部分

求值:

  1. 100.8 | 0    
  2. -101.6 | 0    
  3. 8589934592.8 | 0 

解析

位运算符将数字视为32位的有符号整数,而32位整数的取值范围是 -2147483648 ~ 2147483647。

超过32位有符号整数范围取值的数,进行位或操作取整都是不准确的。

  1.  2147483647.1 | 0  //  2147483647 正确 
  2.  2147483648.1 | 0  // -2147483648 错误 
  3. -2147483648.1 | 0  // -2147483648 正确 
  4. -2147483649.1 | 0  //  2147483647 错误 

同样的,我们可以用~~来取整数部分, 当然依旧存在超范围就不准确的问题。

  1. ~~ 100.8 // 100  正确 
  2. ~~ 2147483649.1  // -2147483647  错误 

答案

  1. 100.8 | 0    // 100 
  2. -101.6 | 0   // -101 
  3. 8589934592.8 | 0  // 0 

3. 神奇的eval

  1. var x = "global"
  2. function log1(){ 
  3.     var x = "local"
  4.     return eval("x"
  5.  
  6. function log2(){ 
  7.     var x = "local"
  8.     return window.eval("x"
  9.  
  10. function log3(){ 
  11.     var x = "local"
  12.     var fn = eval 
  13.     return fn("x"
  14.  
  15. function log4(){ 
  16.     var x = "local"
  17.     return (0, eval)(x) 
  18.  
  19. log1(); 
  20. log2(); 
  21. log3(); 
  22. log4(); 

解析

eval函数具备访问调用它那是的整个作用域的能力。

间接调用, 例如绑定eval函数到另外一个变量名,通过变量名调用函数会使代码失去去所有局部作用域访问的能力。

(0, eval) 其也是eval的间接调用。

  1. log1();   // local 
  2. log2();   // global 
  3. log3();   // global 
  4. log4();   // global 

答案

4. delete知多少

  1. delete null
  2. delete undefined; 

解析

undefined在实现上是一个全局属性, 而null是一个关键字。

  1. Oject.getOwnPropertyDescriptor(global'undefined'
  2. 复制代码 

截图_20212014102047.png

null在全局上却查询不到描述信息:

  1. Object.getOwnPropertyDescriptor(global'null'

截图_20212114102114.png

结果

  1. delete null; // true 
  2. delete undefined; // false 

5. 类型转换

  1. function Person(name, age) { 
  2.     this.name = name
  3.     this.age = age; 
  4. Person.prototype.valueOf = function () { 
  5.     return this.age; 
  6. Person.prototype.toString = function () { 
  7.     return this.name 
  8. Date.prototype.valueOf = function () { 
  9.     return this.getTime() 
  10. Date.prototype.toString = function () { 
  11.     return this.getTime() + "" 
  12.  
  13. var person = new Person("tom", 100); 
  14. console.log(person + 10); 
  15. console.log(`${person}`) 
  16. console.log("" + person) 
  17.  
  18. var date = new Date(2001, 0, 0); 
  19. console.log(date + 0, typeof (date + 0)) 
  20. console.log(date + date.getTime()); 

分析

对象转换成基础数据类型

  • Symbol.toPrimitive 优先
  • 如果预期转为字符串,Object.prototype.toString
  • 如果无预期转为字符串, 先走 Oject.prototye.valueOf, 再走Object.prototype.toString, 特例是Date类型,是先toString,再valueOf

注意两点

  1. 预期转为字符串这种字样, 比如 `${person}`
  2. Date是特别的,是优先toString

结果

  1. var person = new Person("tom", 100);  
  2. console.log(person + 10);  // 110 
  3. console.log(`${person}`)   // tom 
  4. console.log("" + person)   // 100 
  5.  
  6. var date = new Date(2001, 0, 0); 
  7. console.log(date + 0, typeof (date + 0))  
  8. // 9781920000000 string 
  9. console.log(date + date.getTime()); 
  10. // 978192000000978192000000 

6. 函数的length

  1. function add(num1, num2, num3=1, ...args){  
  2. const boundAdd = add.bind(null, 10); 
  3. console.log(boundAdd.length) 

问题解析

  • 有默认值的参数,不计入长度
  • 剩余参数不计入长度
  • bind之后,减少对应的length长度

答案

  1. console.log(boundAdd.length) // 1 

7. this的指向

  1. var value = 1; 
  2.  
  3. var foo = { 
  4.   value: 2, 
  5.   bar: function () { 
  6.     return this.value; 
  7.   } 
  8.  
  9. console.log(foo.bar()); 
  10. console.log((foo.bar)()); 
  11. console.log((foo.bar = foo.bar)()); 
  12. console.log((false || foo.bar)()); 
  13. console.log((foo.bar, foo.bar)()); 

解析

ES规范中,引用类型(Reference类型)有一个获取对应值的方法:GetValue。简单模拟 GetValue 的使用:

  1. var foo = 1; 
  2.  
  3. var fooReference = { 
  4.     base: EnvironmentRecord, 
  5.     name'foo'
  6.     strict: false 
  7. }; 
  8.  
  9. GetValue(fooReference) // 1; 

GetValue 返回对象属性真正的值,但是要注意:调用 GetValue,返回的将是具体的值,而不再是一个 Reference

本题目如果调用了 GetValue, 那么其作用域就变成了全局。

(foo.bar) 并没有调用取值操作,而其余的均调用了取值操作。

更多详情:JavaScript深入之从ECMAScript规范解读this[1]

答案

  1. console.log(foo.bar());   // 2 
  2. console.log((foo.bar)());  // 2 
  3. console.log((foo.bar = foo.bar)());  // 1 
  4. console.log((false || foo.bar)());   // 1 
  5. console.log((foo.bar, foo.bar)());   // 1 

8.参数传递

  1. function test(param1, param2, param3) { 
  2.     param1 = "new param1"
  3.     param3  = "new param3" 
  4.  
  5.     console.log(param1 == arguments[0]); 
  6.     console.log(param3 == arguments[2]); 
  7.  
  8.  
  9. function test_strict(param1, param2, param3) { 
  10.     "use strict" 
  11.     param1 = "new param1"
  12.     param3  = "new param3" 
  13.  
  14.     console.log(param1 == arguments[0]); 
  15.     console.log(param3 == arguments[2]); 
  16.  
  17. test('param1''param2'
  18. test_strict('param1''param2'); 

解析

非严格模式下:传入的参数,实参和 arguments 的值会共享,当没有传入时,实参与 arguments 值不会共享。

严格模式下,实参和 arguments 是不会共享的。

答案

  1. test('param1''param2'
  2. test_strict('param1''param2'); 
  3. // true 
  4. // false 
  5. // false 
  6. // false 

9. 小数相加

  1. (0.1 + 0.2) + 0.3  === 0.1 + 0.2 + 0.3  

解析

简略的回答就是精确问题。

更多的回答 IEEE 754, 双精度浮点数(64位),使用1为符号位、11位指数位、52位尾数位来表示。

借助:http://www.binaryconvert.com/result_double.html

  1. 0.1 0-01111111011-1001100110011001100110011001100110011001100110011010 
  2. 0.2 0-01111111100-1001100110011001100110011001100110011001100110011010 
  3. 0.3 0-01111111101-0011001100110011001100110011001100110011001100110011 

当然,计算还好好几个步骤

  • 对阶(大阶对小阶)
  • 位数运算
  • 结果规格化
  • 舍入处理
  • 移除检查 当然,本题,后面两项都不存在。具体细节,改篇文章再见!

答案

  1. (0.1 + 0.2) + 0.3  === 0.1 + 0.2 + 0.3  // false 
  2.  
  3. 0.6000000000000001 === 0.6 // false 

10. 自动补全

如下代码输出的值

  1. var a = [[1,2],2,3] 
  2. console.log(a) 
  3. [0,2,3].map(v=> console.log(v*v)) 
  4. console.log(a) 

解析

javascript能智能的插入分号,但是有5个有问题的字符需要密切的注意:(,[, +, -, /, 其作为一行代码的开头,很可能产生意外的情况,所以,没事代码最后写个分号,保准没错。

答案

 

责任编辑:武晓燕 来源: 云的程序世界
相关推荐

2017-06-23 18:00:22

前端知识杂谈

2020-03-06 10:36:21

JavaScriptCSSHTML

2015-09-17 10:48:17

Web前端

2021-06-07 07:01:43

js关键字运行

2023-02-22 16:33:04

前端JavaScript

2018-08-28 09:42:21

缓存爱奇艺架构

2019-11-13 13:48:32

前端CSS技术

2013-07-09 15:04:17

程序员编程

2020-09-02 07:00:42

ZooKeeper分布式

2019-07-17 13:31:34

VLAN集中管理协议VCMP

2016-12-21 15:43:30

SaaSC端盈利

2015-11-20 13:17:23

世纪互联蓝云Azure

2018-10-09 14:34:58

开源KubernetesGit

2012-02-08 08:44:22

2020-07-31 13:35:34

Node.js应用分析前端

2021-08-11 08:16:02

springboot 动态注册项目

2017-12-15 21:05:13

2022-04-10 10:42:44

CSS前端前端布局

2021-01-04 09:00:00

JavaScript开发Web

2013-06-21 14:34:12

华为企业业务华为
点赞
收藏

51CTO技术栈公众号