一些关于 JavaScript 的有趣知识

20 年 9 月 7 日 星期一
1264 字
7 分钟

变量提升

先看荔枝:

js
console.log(a)
var a = 'hello'

上面的运行结果会输出undefined,这是因为,js会先解析代码,并将所有变量的声明语句提升到代码头部执行,这就是变量提升
下面的代码与上面相同:

js
var a
console.log(a)
a = 'hello'

函数提升

js 中函数也被视为一种值,函数的声明语句同样也会被提升到代码头部执行。

js
foo()
var foo = function () {
  console.log('foo 1')
}
foo()
var foo = function () {
  console.log('foo 2')
}
foo()
function foo() {
  console.log('foo 3')
}
foo()
function foo() {
  console.log('foo 4')
}
foo()
运行结果

变量的声明会先提升到顶部然后是提升的函数声明,重复的声明会被覆盖掉。所以它看起来像这样:

js
var foo
function foo() {
  console.log('foo 4')
}
foo()
foo = function () {
  console.log('foo 1')
}
foo()
foo = function () {
  console.log('foo 2')
}
foo()
foo()
foo()

全局变量

任何变量,如果未经声明就赋值,此变量是属于 window 的属性,而且不会做变量提升。(注意,无论在哪个作用域内赋值)

一切声明的全局变量,全是window的属性。(注意,我说的是在全局作用域内声明的全局变量,不是说局部变量)

!!

!! 可以快速判断值是否为 0、null、''和 undefined

function 前的运算符

()可以让函数声明变成表达式从而达到立即执行的目的,一元运算符同样可以。
下面的方法都可以达到同样的目的,返回值略有差异

js
(function () {
  console.log('IIFE')
})();
// return undefined
+(function () {
  console.log('IIFE')
});
// return NaN
-(function () {
  console.log('IIFE')
});
// return NaN
~(function () {
  console.log('IIFE')
});
// return -1
!(function () {
  console.log('IIFE')
});
// return true

标签

js 允许语句或代码块前有标签,用于定位,跳转到程序的指定位置,与 break 和 continue 配合使用。
用法:

js
<label name>:
    语句/代码块

荔枝:

js
top: for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    if (i === 2 && j === 2) break top
    console.log(i, j)
  }
}

当满足 if 条件时,break 就会跳出双循环。

null 与 undefined

null 与 undefined 在进行布尔运算时都表示为 false,所以null == undefined会返回 true,其实而在说不一样的。
null 表示无、空,它是一个对象,在转换为 Number 时为 0。而 undefined 表示未定义,它转换为 Number 时为 NaN。
例如一个函数有一个参数,你可以传 null,此时该参数有值,只不过这个值是空的;如果你什么值都不传,此时这个参数就是未定义的。

boolean 的自动转换

在需要布尔值时,以下 6 种值会转换为 false,其他值会视为 true:

  1. undefined
  2. null
  3. false
  4. 0
  5. NaN
  6. ""或''(空串)
    需要注意的是,[]和{}对于的布尔值是 true 并不是 false。

没有整数

js 中其实所有数字都是以 64 位浮点数形式存储,因此你会发现 1 和 1.0 是相同的:

js
1 === 1.0 // true

需要注意的是,由于浮点数并不是精确值,涉及小数比较时需要特别小心。
有些运算只有整数,此时 js 会将 64 位浮点数转换为 32 位整数。

数值范围

js 中一个数大于等于 2 的 1024 次方,会发生正向溢出,即返回 Infinity。
如果一个数小于等于 2 的-1075 次方,会发生负向溢出,即返回 0。
同时 Number 对象提供 MAX_VALUE 和 MIN_VALUE 属性表示具体的最大值和最小值。
js 中数值可使用科学计数法,例如:

js
123e3 // 123000
123e3 // 123000

如果一个数,小数点前数字位数大于 21 或者小数点后零多于 5 个,会自动使用科学计算法。

进制

js 支持 4 种进制:

  1. 十进制 没有前导 0
  2. 二进制 有前缀 0b 或 0B
  3. 八进制 有前缀 0o 或 0O(或者 0,该方法浏览器兼容,但是已在 ES6 中废除)
  4. 十六进制 有前缀 0x 或 0X

+0 和-0

+0 和-0 在几乎所有的场合都相同,除了它们作为分母时,荔枝:

js
;+0 === -0 //true
1 / +0 === 1 / -0 // false

NaN 和 Infinity

NaN 表示非数字,即 not a number,它依旧是 Number 类型。NaN 是不等于任何值,举个荔枝:

js
NaN === NaN // false

比较特殊的是0 / 0会得到 NaN。
Infinity 表示无穷,正值太大或负值太小,一些奇怪的计算结果:

js
0 * Infinity // NaN
0 / Infinity // 0
Infinity / 0 // Infinity
Infinity - Infinity // NaN
Infinity / Infinity // NaN

null 在与 Infinity 进行计算时,会转换为 0;undefined 在与 Infinity 计算时,都返回 NaN。

with 语句

with 的作用是在操作一个对象的多个属性时,可以书写方便:

js
var obj = {
  p1: 1,
  p2: 2,
}
with (obj) {
  p1 = 4
  p2 = 5
}

delete 语句

delete 可以删除对象自身的属性,删除成功会返回 true。
delete 也可以删除数组成员,形成空位,但是不影响 length 属性。

一句话

  • switch 语句后的表达式与 case 后的内容进行比较时采用===

文章标题:一些关于 JavaScript 的有趣知识

文章作者:柃夏chapu

文章链接:https://www.lxchapu.com/posts/interesting-features-of-javascript[复制]

最后修改时间:


商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。
本文采用CC BY-NC-SA 4.0进行许可。