细数 JavaScript 实用黑科技(一)

简介: 细数 JavaScript 实用黑科技(一)

前言


只有深入学精一门语言,学其他语言才能更好地举一反三,触类旁听。


从接触前端开发到现在已经将近 2 年了,最近又看了阮一锋写的: 《JavaScript 语言入门教程》 一书,重温 JavaScript 。


小汪将工作和面试遇到过的,没多少人知道的 JavaScript 技巧,却十分实用的技巧都总结在这里面,分享给大家 。


温故而知新,我们对技术应该有的态度是: Stay hungry ! Stay young !


1. 标签(label)


JavaScript 语言允许,语句的前面有标签(label),相当于定位符,用于跳转到程序的任意位置,标签的格式如下。


label:
  语句


标签可以是任意的标识符,但不能是保留字,语句部分可以是任意语句。

标签通常与 break 语句和 continue 语句配合使用,跳出特定的循环。


top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) break top;
      console.log('i=' + i + ', j=' + j);
    }
  }
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0


上面代码为一个双重循环区块,break 命令后面加上了 top 标签(注意,top 不用加引号),满足条件时,直接跳出双层循环。如果 break 语句后面不使用标签,则只能跳出内层循环,进入下一次的外层循环。


标签也可以用于跳出代码块。


foo: {
  console.log(1);
  break foo;  // 注意要加 break 才能退出
  console.log('本行不会输出');
}
console.log(2);
// 1
// 2


上面代码执行到 break foo,就会跳出区块。


continue 语句也可以与标签配合使用。


top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) continue top;
      console.log('i=' + i + ', j=' + j);
    }
  }
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0
// i=2, j=0
// i=2, j=1
// i=2, j=2


上面代码中,continue 命令后面有一个标签名,满足条件时,会跳过当前循环,直接进入下一轮 外层循环。 如果 continue 语句后面不使用标签,则只能进入下一轮的 内层循环。


小汪经过实践得出以下用途。


用途:


  • 可以跳出循环。
  • 对于多层循环也同样适用。
  • 特别是两层或者多层循环,只是为了找到想要的某个值时,而循环的数据是大量的,用标签就非常高效。


2. 区分数组和对象


先来道面试题:


console.log(typeof window)
console.log(typeof {}) 
console.log(typeof [])
console.log(typeof null)


答案:


"object"
"object"
"object"
"object"


上面代码中,null 返回 object 。这是由于历史原因造成的,且一切原型链的终点都是 null。


空数组( [] )的类型也是 object,这表示在 JavaScript 内部,数组本质上只是一种特殊的对象。而 instanceof 运算符可以区分数组和对象。


var o = {};
var a = [];
o instanceof Array // false
a instanceof Array // true


3. null, undefined 和布尔值


经常会有面试官问:null 与 undefined 的区别 ?


区别:


  • null 是一个表示“空”的对象,转为数值时为 0 。
  • undefined 是一个表示"此处无定义"的原始值,转为数值时为 NaN。


Number(null) // 0
5 + null // 5
Number(undefined) // NaN
5 + undefined // NaN


3.1 用法和含义


对于 null 和 undefined,大致可以像下面这样理解。


null 表示空值,即该处的值现在为空。调用函数时,某个参数未设置任何值,这时就可以传入 null,表示该参数为空。比如,某个函数接受引擎抛出的错误作为参数,如果运行过程中未出错,那么这个参数就会传入 null ,表示未发生错误。


undefined 表示“未定义”,下面是返回 undefined 的典型场景。


// 变量声明了,但没有赋值
var i;
i // undefined
// 调用函数时,应该提供的参数没有提供,该参数等于 undefined
function f(x) {
  return x;
}
f() // undefined
// 对象没有赋值的属性
var  o = new Object();
o.p // undefined
// 函数没有返回值时,默认返回 undefined
function f() {}
f() // undefined
注意,布尔值转换的时候,空数组([])和空对象({})对应的布尔值,都是true。
if ([]) {
  console.log('true');
}
// true
if ({}) {
  console.log('true');
}
// true


4. 数值


JavaScript 内部,所有数字都是以 64 位浮点数形式储存,即使整数也是如此。所以,1 与 1.0 是相同的,是同一个数。


1 === 1.0 // true


JavaScript 语言的底层根本没有整数,所有数字都是小数( 64 位浮点数)。容易造成混淆的是,某些运算只有整数才能完成,此时 JavaScript 会自动把 64 位浮点数,转成 32 位整数,然后再进行运算。


由于浮点数不是精确的值,所以涉及小数的比较和运算要特别小心。


例如:


0.1 + 0.2 === 0.3
// false
0.3 / 0.1
// 2.9999999999999996
(0.3 - 0.2) === (0.2 - 0.1)
// false
2.22 + 2.21
// 4.43
3.45 + 1.11
// 4.5600000000000005
2.22 + 2.24
// 4.460000000000001


但是商品计算金额的时候,金额的结果一般都是保留两倍小数点的,那怎么办呢?

可以用 toFixed 解决:


var a = 2.22 + 2.24
// 4.460000000000001
var result = (a).toFixed(2)
// 4.46


5. Object 属性的遍历


for...in 循环用来遍历一个对象的全部属性(包括可遍历的继承的属性)。但是,一般情况下,都是只想遍历对象自身的属性,所以使用 for...in 的时候,应该结合使用 hasOwnProperty 方法,在循环内部判断一下,某个属性是否为对象自身的属性。


var person = { name: '老张' };
for (var key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key);
  }
}
// name
相关文章
|
3月前
|
存储 前端开发 JavaScript
玩转JavaScript底层黑科技,轻松编写令人惊叹的应用!
玩转JavaScript底层黑科技,轻松编写令人惊叹的应用!
玩转JavaScript底层黑科技,轻松编写令人惊叹的应用!
|
JavaScript 前端开发
细数 JavaScript 实用黑科技(二)
细数 JavaScript 实用黑科技(二)
156 0
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
70 0
|
4天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
JavaScript
Vue.js学习详细课程系列--共32节(4 / 6)
Vue.js学习详细课程系列--共32节(4 / 6)
33 0
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
64 1