JavaScript(一)(数据类型+运算符)

文章目录

  • JavaScript(一)(数据类型+运算符)
  • 一、数据类型
    • 1. 什么是 JavaScript 语言?
      • 1.1 定义
      • 1.2 实验环境
    • 2. JavaScript的基本语法
      • 2.1 `===`、`==`、`!==`
        • 2.1.1 ===的各种情况
        • 2.1.2 ==的各种情况
      • 2.2 变量提升
      • 2.3 标签(label)
    • 3. 数据类型
      • 3.1 值类型运算符(`typeof`、==`instanceof(27.2)`==、`Object.prototype.toString`)
      • 3.2 null和undefinded
        • 3.2.1 相似点
        • 3.2.2 为何设置null和undedinded?
        • 3.2.3 用法
      • 3.3 布尔值
    • 4. 数值
      • 4.1 整数和浮点数
      • 4.2 数值精度
      • 4.3 数值范围
      • 4.4 科学记数法
      • 4.5 进制
      • 4.6 特殊数值
        • 4.6.1 正零和负零
        • 4.6.2 NaN
        • 4.6.3 Infinity
        • 4.6.4 parseInt()
        • 4.6.5 parseFloat()
        • 4.6.6 isNaN()
        • 4.6.7 isFinite()
    • 5. 字符串
      • 5.1 定义
      • 5.2 转义字符
      • 5.3 字符串与数组
      • 5.4 length 属性
      • 5.5 字符集
      • 5.6 Base64 转码
    • 6. 对象
      • 6.1 概述
        • 6.1.1 生成方法
        • 6.1.2 键名
        • 6.1.3 对象的引用
        • 6.1.4 表达式还是语句?
      • 6.2 属性的操作
        • 6.2.1 属性的读取
        • 6.2.2 属性的查看
        • 6.2.3 属性的删除:delete 命令
        • 6.2.4 属性是否存在:in 运算符
        • 6.2.4 属性的遍历:for...in 循环
      • 6.3 with 语句
    • 7.函数
      • 7.1 概述
        • 7.1.1 函数的声明
        • 7.1.2 函数的重复声明
        • 7.1.3 圆括号运算符,return 语句和递归
        • 7.1.4 第一等公民
        • 7.1.5 函数名的提升
      • 7.2 函数的属性和方法
        • 7.2.1 name 属性
        • 7.2.2 length 属性
        • 7.2.3 toString()
      • 7.3 函数作用域
        • 7.3.1 定义
        • 7.3.2 函数内部的变量提升
        • 7.3.3 函数本身的作用域
      • 7.4 参数
        • 7.4.1 概述
        • 7.4.2 参数的省略
        • 7.4.3 传递方式
        • 7.4.4 同名参数
        • 7.4.5 arguments 对象
      • 7.5 函数的其他知识点
        • 7.5.1 ==✔闭包==
        • 7.5.2 立即调用的函数表达式(IIFE)
        • 7.5.3 eval 命令
    • 8. 数组
      • 8.1 定义
      • 8.2 数组的本质
      • 8.3 length 属性
      • 8.4 in 运算符
      • 8.5 for...in 循环和数组的遍历
      • 8.6 数组的空位
      • 8.7 类似数组的对象
      • 8.8 类似数组的对象
  • 二、运算符
    • 9. 运算符
      • 9.1 算数运算符(加法运算符)
        • 9.1.1 基本规则
        • 9.1.2 对象的相加
        • 9.1.3 余数运算符
        • 9.1.4 自增和自减运算符
        • 9.1.5 指数运算符
      • 9.2 比较运算符
        • 9.2.1 非相等运算符:字符串的比较
        • 9.2.2 非相等运算符:非字符串的比较
      • 9.3 布尔运算符
        • 9.3.1 概述
        • 9.3.2 取反运算符(!)(参考10.2.3 Boolean())
        • 9.3.3 且运算符(&&)==(短路)==
        • 9.3.4 ✔或运算符(||) ==(短路)==
        • 9.3.5 三元条件运算符(?:)
      • 9.4 二进制位运算符
        • 9.4.1 概述
        • 9.4.2 二进制或运算符(取整)
        • 9.4.3 二进制否运算符(取整最快)
        • 9.4.4 异或运算符(交换两变量)
        • 9.4.5 左移运算符(取整)
        • 9.4.6 右移运算符 (除以2的次方)
        • 9.4.7 头部补零的右移运算符
        • 9.4.8 开关作用
      • 9.5 其他运算符,及运算顺序
        • 9.5.1 void 运算符
        • 9.5.2 逗号运算符
        • 9.5.2 运算顺序
          • 9.5.2.1 优先级
          • 9.5.2.2 圆括号的作用
          • 9.5.2.3 左结合与右结合

导论 - JavaScript 教程 - 网道 (wangdoc.com)

一、数据类型

1. 什么是 JavaScript 语言?

1.1 定义

JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”(script language),指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序(比如浏览器)的“脚本”。

JavaScript 也是一种嵌入式(embedded)语言。它本身提供的核心语法不算很多,只能用来做一些数学和逻辑运算。JavaScript 本身不提供任何与 I/O(输入/输出)相关的 API,都要靠宿主环境(host)提供,所以 JavaScript 只合适嵌入更大型的应用程序环境,去调用宿主环境提供的底层 API。

1.2 实验环境

浏览器的控制台直接进入:

Ctrl + Shift + J(Windows / Linux)

开发者工具进入:

开发者工具的快捷键是 F12,Ctrl + Shift + I(Windows / Linux),然后选择 Console 面板

进入控制台以后,就可以在提示符后输入代码,然后按Enter键,代码就会执行。如果按Shift + Enter键,就是代码换行,不会触发执行。建议阅读本教程时,将代码复制到控制台进行实验。

2. JavaScript的基本语法

2.1 =====!==

为什么优先采用“严格相等运算符”(===),而不是“相等运算符”(==):

它们的区别是相等运算符(==)比较两个值是否相等,严格相等运算符(===)比较它们是否为“同一个值”。

如果两个值不是同一类型,严格相等运算符(===)直接返回false,而相等运算符(==)会将它们转化成同一个类型,再用严格相等运算符进行比较。

严格相等运算符有一个对应的“严格不相等运算符”(!==),它的算法就是先求严格相等运算符的结果,然后返回相反值。

2.1.1 ===的各种情况

(1)不同类型的值

如果两个值的类型不同,直接返回false

1 === "1" // false
true === "true" // false

上面代码比较数值的1与字符串的“1”、布尔值的true与字符串"true",因为类型不同,结果都是false

(2)同一类的原始类型值

同一类型的原始类型的值(数值、字符串、布尔值)比较时,值相同就返回true,值不同就返回false

1 === 0x1 // true

上面代码比较十进制的1与十六进制的1,因为类型和值都相同,返回true

需要注意的是,NaN与任何值都不相等(包括自身)。另外,正0等于负0

NaN === NaN  // false
+0 === -0 // true

(3)复合类型值

两个复合类型(对象、数组、函数)的数据比较时,不是比较它们的值是否相等,而是比较它们是否指向同一个地址。

{} === {} // false
[] === [] // false
(function () {} === function () {}) // false

上面代码分别比较两个空对象、两个空数组、两个空函数,结果都是不相等。原因是对于复合类型的值,严格相等运算比较的是,它们是否引用同一个内存地址,而运算符两边的空对象、空数组、空函数的值,都存放在不同的内存地址,结果当然是false

如果两个变量引用同一个对象,则它们相等。

var v1 = {};
var v2 = v1;
v1 === v2 // true

注意,对于两个对象的比较,严格相等运算符比较的是地址,而大于或小于运算符比较的是值。

var obj1 = {};
var obj2 = {};obj1 > obj2 // false
obj1 < obj2 // false
obj1 === obj2 // false

上面的三个比较,前两个比较的是值,最后一个比较的是地址,所以都返回false

(4)undefined 和 null

undefinednull与自身严格相等。

undefined === undefined // true
null === null // true

由于变量声明后默认值是undefined,因此两个只声明未赋值的变量是相等的

var v1;
var v2;
v1 === v2 // true

2.1.2 ==的各种情况

相等运算符用来比较相同类型的数据时,与严格相等运算符完全一样。

1 == 1.0
// 等同于
1 === 1.0

比较不同类型的数据时,相等运算符会先将数据进行类型转换,然后再用严格相等运算符比较。下面分成几种情况,讨论不同类型的值互相比较的规则。

(1)原始类型值

==原始类型的值会转换成数值再进行比较。==Number(‘true’)变为NaN

1 == true // true
// 等同于 1 === Number(true)0 == false // true
// 等同于 0 === Number(false)2 == true // false
// 等同于 2 === Number(true)2 == false // false
// 等同于 2 === Number(false)'true' == true // false
// 等同于 Number('true') === Number(true)
// 等同于 NaN === 1'' == 0 // true
// 等同于 Number('') === 0
// 等同于 0 === 0'' == false  // true
// 等同于 Number('') === Number(false)
// 等同于 0 === 0'1' == true  // true
// 等同于 Number('1') === Number(true)
// 等同于 1 === 1'\n  123  \t' == 123 // true
// 因为字符串转为数字时,省略前置和后置的空格

上面代码将字符串和布尔值都转为数值,然后再进行比较。具体的字符串与布尔值的类型转换规则,参见《数据类型转换》一章。

(2)对象与原始类型值比较

对象(这里指广义的对象,包括数组和函数)与原始类型的值比较时,对象转换成原始类型的值,再进行比较。

具体来说,先调用对象的valueOf()方法,如果得到原始类型的值,就按照上一小节的规则,互相比较;如果得到的还是对象,则再调用toString()方法,得到字符串形式,再进行比较。

下面是数组与原始类型值比较的例子。

// 数组与数值的比较
[1] == 1 // true// 数组与字符串的比较
[1] == '1' // true
[1, 2] == '1,2' // true// 对象与布尔值的比较
[1] == true // true
[2] == true // false

上面例子中,JavaScript 引擎会先对数组[1]调用数组的valueOf()方法,由于返回的还是一个数组,所以会接着调用数组的toString()方法,得到字符串形式,再按照上一小节的规则进行比较。

下面是一个更直接的例子。

const obj = {valueOf: function () {console.log('执行 valueOf()');return obj;},toString: function () {console.log('执行 toString()');return 'foo';}
};obj == 'foo'
// 执行 valueOf()
// 执行 toString()
// true

上面例子中,obj是一个自定义了valueOf()toString()方法的对象。这个对象与字符串'foo'进行比较时,会依次调用valueOf()toString()方法,最后返回'foo',所以比较结果是true

(3)undefined 和 null

undefinednull只有与自身比较,或者互相比较时,才会返回true;与其他类型的值比较时,结果都为false

undefined == undefined // true
null == null // true
undefined == null // truefalse == null // false
false == undefined // false0 == null // false
0 == undefined // false

(4)相等运算符的缺点

相等运算符隐藏的类型转换,会带来一些违反直觉的结果。

0 == ''             // true
0 == '0'            // true2 == true           // false
2 == false          // falsefalse == 'false'    // false
false == '0'        // truefalse == undefined  // false
false == null       // false
null == undefined   // true' \t\r\n ' == 0     // true

上面这些表达式都不同于直觉,很容易出错。因此建议不要使用相等运算符(==),最好只使用严格相等运算符(===)。

2.2 变量提升

JavaScript 引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(hoisting)。

var a;
console.log(a);
a = 1;

最后的结果是显示undefined,表示变量a已声明,但还未赋值。

2.3 标签(label)

JavaScript 语言允许,语句的前面有标签(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);}}

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

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

foo: {console.log(1);break foo;console.log('本行不会输出');
}
console.log(2);

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

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

3. 数据类型

JavaScript 语言的每一个值,都属于某一种数据类型。JavaScript 的数据类型,共有六种。(ES6 又新增了第七种 Symbol 类型的值,本教程不涉及。)

  • 数值(number):整数和小数(比如13.14)。
  • 字符串(string):文本(比如Hello World)。
  • 布尔值(boolean):表示真伪的两个特殊值,即true(真)和false(假)。
  • undefined:表示“未定义”或不存在,即由于目前没有定义,所以此处暂时没有任何值。
  • null:表示空值,即此处的值为空。
  • 对象(object):各种值组成的集合。

通常,数值、字符串、布尔值这三种类型,合称为原始类型(primitive type)的值,即它们是最基本的数据类型,不能再细分了。对象则称为合成类型(complex type)的值,因为一个对象往往是多个原始类型的值的合成,可以看作是一个存放各种值的容器。至于undefinednull,一般将它们看成两个特殊值。

对象是最复杂的数据类型,又可以分成三个子类型。

  • 狭义的对象(object)
  • 数组(array)
  • 函数(function)

狭义的对象和数组是两种不同的数据组合方式,除非特别声明,本教程的“对象”都特指狭义的对象。函数其实是处理数据的方法,JavaScript 把它当成一种数据类型,可以赋值给变量,这为编程带来了很大的灵活性,也为 JavaScript 的“函数式编程”奠定了基础。

3.1 值类型运算符(typeofinstanceof(27.2)Object.prototype.toString

JavaScript 有三种方法,可以确定一个值到底是什么类型。

  • typeof运算符

    • 函数返回function

      function f() {}
      typeof f
      // "function"
      
    • undefined返回undefined

      typeof undefined
      // "undefined"
      

      利用这一点,typeof可以用来检查一个没有声明的变量,而不报错。

      v
      // ReferenceError: v is not definedtypeof v
      // "undefined"
      

      上面代码中,变量v没有用var命令声明,直接使用就会报错。但是,放在typeof后面,就不报错了,而是返回undefined

    • 对象返回object

      typeof window // "object"
      typeof {} // "object"
      typeof [] // "object"
      

      上面代码中,空数组([])的类型也是object,这表示在 JavaScript 内部,数组本质上只是一种特殊的对象。这里顺便提一下,**==instanceof运算符可以区分数组和对象。instanceof运算符的详细解释,请见《面向对象编程》一章**。==

      var o = {};
      var a = [];o instanceof Array // false
      a instanceof Array // true
      
    • null返回object

      typeof null // "object"
      

      null的类型是object,这是由于历史原因造成的。1995年的 JavaScript 语言第一版,只设计了五种数据类型(对象、整数、浮点数、字符串和布尔值),没考虑null,只把它当作object的一种特殊值。后来null独立出来,作为一种单独的数据类型,为了兼容以前的代码,typeof null返回object就没法改变了。

  • instanceof运算符(27)

  • Object.prototype.toString方法(14.5.3)

3.2 null和undefinded

3.2.1 相似点

nullundefined都可以表示“没有”,含义非常相似。将一个变量赋值为undefinednull,老实说,语法效果几乎没区别。

var a = undefined;
// 或者
var a = null;

上面代码中,变量a分别被赋值为undefinednull,这两种写法的效果几乎等价。

if语句中,它们都会被自动转为false,相等运算符(==)甚至直接报告两者相等。

if (!undefined) {console.log('undefined is false');
}
// undefined is falseif (!null) {console.log('null is false');
}
// null is falseundefined == null
// true

从上面代码可见,两者的行为是何等相似!

3.2.2 为何设置null和undedinded?

既然含义与用法都差不多,为什么要同时设置两个这样的值,这不是无端增加复杂度,令初学者困扰吗?这与历史原因有关。

1995年 JavaScript 诞生时,最初像 Java 一样,只设置了null表示"无"。根据 C 语言的传统,null可以自动转为0

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

上面代码中,null转为数字时,自动变成0。

但是,JavaScript 的设计者 Brendan Eich,觉得这样做还不够。首先,第一版的 JavaScript 里面,null就像在 Java 里一样,被当成一个对象,Brendan Eich 觉得表示“无”的值最好不是对象。其次,那时的 JavaScript 不包括错误处理机制,Brendan Eich 觉得,如果null自动转为0,很不容易发现错误。

因此,他又设计了一个undefined。区别是这样的:null是一个表示“空”的对象,转为数值时为0undefined是一个表示"此处无定义"的原始值,转为数值时为NaN

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

3.2.3 用法

对于nullundefined,大致可以像下面这样理解。

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

3.3 布尔值

转换规则是除了下面六个值被转为false,其他值都视为true

  • undefined
  • null
  • false
  • 0
  • NaN
  • ""''(空字符串)

注意,空数组([])和空对象({})对应的布尔值,都是true

if ([]) {console.log('true');
}
// trueif ({}) {console.log('true');
}
// true

4. 数值

4.1 整数和浮点数

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

1 === 1.0 // true

这就是说,JavaScript 语言的底层根本没有整数,所有数字都是小数(64位浮点数)。容易造成混淆的是,某些运算只有整数才能完成,此时 JavaScript 会自动把64位浮点数,转成32位整数,然后再进行运算,参见《运算符》一章的“位运算”部分。

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

0.1 + 0.2 === 0.3
// false0.3 / 0.1
// 2.9999999999999996(0.3 - 0.2) === (0.2 - 0.1)
// false

4.2 数值精度

根据国际标准 IEEE 754,JavaScript 浮点数的64个二进制位,从最左边开始,是这样组成的。

  • 第1位:符号位,0表示正数,1表示负数
  • 第2位到第12位(共11位):指数部分
  • 第13位到第64位(共52位):小数部分(即有效数字)

符号位决定了一个数的正负,指数部分决定了数值的大小,小数部分决定了数值的精度。

指数部分一共有11个二进制位,因此大小范围就是0到2047。IEEE 754 规定,如果指数部分的值在0到2047之间(不含两个端点),那么有效数字的第一位默认总是1,不保存在64位浮点数之中。也就是说,有效数字这时总是1.xx...xx的形式,其中xx..xx的部分保存在64位浮点数之中,最长可能为52位。因此,JavaScript 提供的有效数字最长为53个二进制位。

(-1)^符号位 * 1.xx...xx * 2^指数部分

上面公式是正常情况下(指数部分在0到2047之间),一个数在 JavaScript 内部实际的表示形式。

精度最多只能到53个二进制位,这意味着,绝对值小于2的53次方的整数,即-253到253,都可以精确表示。

大于2的53次方以后,整数运算的结果开始出现错误。所以,大于2的53次方的数值,都无法保持精度。由于2的53次方是一个16位的十进制数值,所以简单的法则就是,JavaScript 对15位的十进制数都可以精确处理。(这里需要明确,15位的十进制数一定是包含小数的,这里是精度范围可以包含15位十进制数,与数值范围无关)

4.3 数值范围

根据标准,64位浮点数的指数部分的长度是11个二进制位,意味着指数部分的最大值是2047(2的11次方减1)。也就是说,64位浮点数的指数部分的值最大为2047,分出一半表示负数,则 JavaScript 能够表示的数值范围为21024到2-1023(开区间),超出这个范围的数无法表示。

如果一个数大于等于2的1024次方,那么就会发生“正向溢出”,即 JavaScript 无法表示这么大的数,这时就会返回Infinity

Math.pow(2, 1024) // Infinity

如果一个数小于等于2的-1075次方(指数部分最小值-1023,再加上小数部分的52位),那么就会发生为“负向溢出”,即 JavaScript 无法表示这么小的数,这时会直接返回0。

Math.pow(2, -1075) // 0

下面是一个实际的例子。

var x = 0.5;for(var i = 0; i < 25; i++) {x = x * x;
}x // 0

上面代码中,对0.5连续做25次平方,由于最后结果太接近0,超出了可表示的范围,JavaScript 就直接将其转为0。

JavaScript 提供Number对象的MAX_VALUEMIN_VALUE属性,返回可以表示的具体的最大值和最小值。

Number.MAX_VALUE // 1.7976931348623157e+308
Number.MIN_VALUE // 5e-324

4.4 科学记数法

数值也可以采用科学计数法表示,下面是几个科学计数法的例子。

123e3 // 123000
123e-3 // 0.123
-3.1E+12
.1e-23

科学计数法允许字母eE的后面,跟着一个整数,表示这个数值的指数部分。

以下两种情况,JavaScript 会自动将数值转为科学计数法表示,其他情况都采用字面形式直接表示。

(1)小数点前的数字多于21位。

1234567890123456789012
// 1.2345678901234568e+21123456789012345678901
// 123456789012345680000

(2)小数点后的零多于5个。

// 小数点后紧跟5个以上的零,
// 就自动转为科学计数法
0.0000003 // 3e-7// 否则,就保持原来的字面形式
0.000003 // 0.000003

4.5 进制

  • 八进制:有前缀0o0O的数值,或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
  • 十六进制:有前缀0x0X的数值。
  • 二进制:有前缀0b0B的数值。
  • 0x``0b``0o的0都是数字0,而不是字母o

默认情况下,JavaScript 内部会自动将八进制、十六进制、二进制转为十进制。下面是一些例子。

0xff // 255
0o377 // 255
0b11 // 3

通常来说,有前导0的数值会被视为八进制,但是如果前导0后面有数字89,则该数值被视为十进制。

0888 // 888
0777 // 511

前导0表示八进制,处理时很容易造成混乱。ES5 的严格模式和 ES6,已经废除了这种表示法,但是浏览器为了兼容以前的代码,目前还继续支持这种表示法。

4.6 特殊数值

4.6.1 正零和负零

前面说过,JavaScript 的64位浮点数之中,有一个二进制位是符号位。这意味着,任何一个数都有一个对应的负值,就连0也不例外。

JavaScript 内部实际上存在2个0:一个是+0,一个是-0,区别就是64位浮点数表示法的符号位不同。它们是等价的。

-0 === +0 // true
0 === -0 // true
0 === +0 // true

几乎所有场合,正零和负零都会被当作正常的0

唯一有区别的场合是,+0-0当作分母,返回的值是不相等的。

(1 / +0) === (1 / -0) // false

上面的代码之所以出现这样结果,是因为除以正零得到+Infinity,除以负零得到-Infinity,这两者是不相等的(关于Infinity详见下文)。

4.6.2 NaN

(1)含义

NaN是 JavaScript 的特殊值,表示“非数字”(Not a Number),主要出现在将字符串解析成数字出错的场合。

5 - 'x' // NaN

上面代码运行时,会自动将字符串x转为数值,但是由于x不是数值,所以最后得到结果为NaN,表示它是“非数字”(NaN)。

另外,一些数学函数的运算结果会出现NaN

Math.acos(2) // NaN
Math.log(-1) // NaN
Math.sqrt(-1) // NaN

0除以0也会得到NaN。非0数值除以0,得到Infinity

0 / 0 // NaN
1 / 0 // Infinity

需要注意的是,NaN不是独立的数据类型,而是一个特殊数值,它的数据类型依然属于Number,使用typeof运算符可以看得很清楚

typeof NaN // 'number'

(2)运算规则

NaN不等于任何值,包括它本身。

NaN === NaN // false

数组的indexOf方法内部使用的是严格相等运算符,所以该方法对NaN不成立。

[NaN].indexOf(NaN) // -1

NaN在布尔运算时被当作false

Boolean(NaN) // false

NaN与任何数(包括它自己)的运算,得到的都是NaN

NaN + 32 // NaN
NaN - 32 // NaN
NaN * 32 // NaN
NaN / 32 // NaN

4.6.3 Infinity

(1)含义

Infinity表示“无穷”,用来表示两种场景。一种是一个正的数值太大,或一个负的数值太小,无法表示;另一种是非0数值除以0,得到Infinity

// 场景一
Math.pow(2, 1024)
// Infinity// 场景二
0 / 0 // NaN
1 / 0 // Infinity

上面代码中,第一个场景是一个表达式的计算结果太大,超出了能够表示的范围,因此返回Infinity。第二个场景是**0除以0会得到NaN,而非0数值除以0,会返回Infinity。**

Infinity有正负之分,Infinity表示正的无穷,-Infinity表示负的无穷。

Infinity === -Infinity // false1 / -0 // -Infinity
-1 / -0 // Infinity

上面代码中,非零正数除以-0,会得到-Infinity,负数除以-0,会得到Infinity

由于数值正向溢出(overflow)、负向溢出(underflow)和被0除,JavaScript 都不报错,所以单纯的数学运算几乎没有可能抛出错误。

Infinity大于一切数值(除了NaN),-Infinity小于一切数值(除了NaN)。

Infinity > 1000 // true
-Infinity < -1000 // true

InfinityNaN比较,总是返回false

Infinity > NaN // false
-Infinity > NaN // falseInfinity < NaN // false
-Infinity < NaN // false

(2)运算规则

Infinity的四则运算,符合无穷的数学计算规则。

5 * Infinity // Infinity
5 - Infinity // -Infinity
Infinity / 5 // Infinity
5 / Infinity // 0

0乘以Infinity,返回NaN;0除以Infinity,返回0Infinity除以0,返回Infinity

0 * Infinity // NaN
0 / Infinity // 0
Infinity / 0 // Infinity

Infinity加上或乘以Infinity,返回的还是Infinity

Infinity + Infinity // Infinity
Infinity * Infinity // Infinity

Infinity减去或除以Infinity,得到NaN

Infinity - Infinity // NaN
Infinity / Infinity // NaN

Infinitynull计算时,null会转成0,等同于与0的计算。

null * Infinity // NaN
null / Infinity // 0
Infinity / null // Infinity

Infinityundefined计算,返回的都是NaN

undefined + Infinity // NaN
undefined - Infinity // NaN
undefined * Infinity // NaN
undefined / Infinity // NaN
Infinity / undefined // NaN

4.6.4 parseInt()

(1)基本用法

parseInt方法用于将字符串转为整数。

parseInt('123') // 123

如果字符串头部有空格,空格会被自动去除。

parseInt('   81') // 81

如果parseInt的参数不是字符串,则会先转为字符串再转换。

parseInt(1.23) // 1
// 等同于
parseInt('1.23') // 1

字符串转为整数的时候,是一个个字符依次转换,如果遇到不能转为数字的字符,就不再进行下去,返回已经转好的部分。

parseInt('8a') // 8
parseInt('12**') // 12
parseInt('12.34') // 12
parseInt('15e2') // 15
parseInt('15px') // 15

上面代码中,parseInt的参数都是字符串,结果只返回字符串头部可以转为数字的部分。

如果字符串的第一个字符不能转化为数字(后面跟着数字的正负号除外),返回NaN

parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1

所以,parseInt的返回值只有两种可能,要么是一个十进制整数,要么是NaN

如果字符串以0x0X开头,parseInt会将其按照十六进制数解析。

parseInt('0x10') // 16

如果字符串以0开头,将其按照10进制解析。

parseInt('011') // 11

对于那些会自动转为科学计数法的数字,parseInt会将科学计数法的表示方法视为字符串,因此导致一些奇怪的结果。

parseInt(1000000000000000000000.5) // 1
// 等同于
parseInt('1e+21') // 1parseInt(0.0000008) // 8
// 等同于
parseInt('8e-7') // 8

(2)进制转换

parseInt方法还可以接受第二个参数(2到36之间),表示被解析的值的进制,返回该值对应的十进制数。默认情况下,parseInt的第二个参数为10,即默认是十进制转十进制。

parseInt('1000') // 1000
// 等同于
parseInt('1000', 10) // 1000

下面是转换指定进制的数的例子。

parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512

上面代码中,二进制、六进制、八进制的1000,分别等于十进制的8、216和512。这意味着,可以用parseInt方法进行进制的转换。

如果第二个参数不是数值,会被自动转为一个整数。这个整数只有在2到36之间,才能得到有意义的结果,超出这个范围,则返回NaN。如果第二个参数是0undefinednull,则直接忽略。

parseInt('10', 37) // NaN
parseInt('10', 1) // NaN
parseInt('10', 0) // 10
parseInt('10', null) // 10
parseInt('10', undefined) // 10

如果字符串包含对于指定进制无意义的字符,则从最高位开始,只返回可以转换的数值。如果最高位无法转换,则直接返回NaN

parseInt('1546', 2) // 1
parseInt('546', 2) // NaN

上面代码中,对于二进制来说,1是有意义的字符,546都是无意义的字符,所以第一行返回1,第二行返回NaN

前面说过,如果parseInt的第一个参数不是字符串,会被先转为字符串。这会导致一些令人意外的结果。

parseInt(0x11, 36) // 43
parseInt(0x11, 2) // 1// 等同于
parseInt(String(0x11), 36)
parseInt(String(0x11), 2)// 等同于
parseInt('17', 36)
parseInt('17', 2)

上面代码中,十六进制的0x11会被先转为十进制的17,再转为字符串。然后,再用36进制或二进制解读字符串17,最后返回结果431

这种处理方式,对于八进制的前缀0,尤其需要注意。

parseInt(011, 2) // NaN// 等同于
parseInt(String(011), 2)// 等同于
parseInt(String(9), 2)

上面代码中,第一行的011会被先转为字符串9,因为9不是二进制的有效字符,所以返回NaN。如果直接计算parseInt('011', 2)011则是会被当作二进制处理,返回3。

JavaScript 不再允许将带有前缀0的数字视为八进制数,而是要求忽略这个0。但是,为了保证兼容性,大部分浏览器并没有部署这一条规定。

4.6.5 parseFloat()

parseFloat方法用于将一个字符串转为浮点数。

parseFloat('3.14') // 3.14

如果字符串符合科学计数法,则会进行相应的转换。

parseFloat('314e-2') // 3.14
parseFloat('0.0314E+2') // 3.14

如果字符串包含不能转为浮点数的字符,则不再进行往后转换,返回已经转好的部分。

parseFloat('3.14more non-digit characters') // 3.14

parseFloat方法会自动过滤字符串前导的空格。

parseFloat('\t\v\r12.34\n ') // 12.34

如果参数不是字符串,或者字符串的第一个字符不能转化为浮点数,则返回NaN

parseFloat([]) // NaN
parseFloat('FF2') // NaN
parseFloat('') // NaN

上面代码中,尤其值得注意,parseFloat会将空字符串转为NaN

这些特点使得parseFloat的转换结果不同于Number函数。

parseFloat(true)  // NaN
Number(true) // 1parseFloat(null) // NaN
Number(null) // 0parseFloat('') // NaN
Number('') // 0parseFloat('123.45#') // 123.45
Number('123.45#') // NaN

4.6.6 isNaN()

isNaN方法可以用来判断一个值是否为NaN

isNaN(NaN) // true
isNaN(123) // false

但是,isNaN只对数值有效,如果传入其他值,会被先转成数值。比如,传入字符串的时候,字符串会被先转成NaN,所以最后返回true,这一点要特别引起注意。也就是说,isNaNtrue的值,有可能不是NaN,而是一个字符串。

isNaN('Hello') // true
// 相当于
isNaN(Number('Hello')) // true

出于同样的原因,对于对象和数组,isNaN也返回true

isNaN({}) // true
// 等同于
isNaN(Number({})) // trueisNaN(['xzy']) // true
// 等同于
isNaN(Number(['xzy'])) // true

但是,对于空数组和只有一个数值成员的数组,isNaN返回false

isNaN([]) // false
isNaN([123]) // false
isNaN(['123']) // false

上面代码之所以返回false,原因是这些数组能被Number函数转成数值,请参见《数据类型转换》一章。

因此,使用isNaN之前,最好判断一下数据类型。

function myIsNaN(value) {return typeof value === 'number' && isNaN(value);
}

判断NaN更可靠的方法是,利用NaN为唯一不等于自身的值的这个特点,进行判断。

function myIsNaN(value) {return value !== value;
}

4.6.7 isFinite()

isFinite方法返回一个布尔值,表示某个值是否为正常的数值。

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true
isFinite(-1) // true

除了Infinity-InfinityNaNundefined这几个值会返回falseisFinite对于其他的数值都会返回true

5. 字符串

5.1 定义

字符串就是零个或多个排在一起的字符,放在单引号或双引号之中。

'abc'
"abc"

单引号字符串的内部,可以使用双引号。双引号字符串的内部,可以使用单引号。

'key = "value"'
"It's a long journey"

上面两个都是合法的字符串。

如果要在单引号字符串的内部,使用单引号,就必须在内部的单引号前面加上反斜杠,用来转义。双引号字符串内部使用双引号,也是如此。

'Did she say \'Hello\'?'
// "Did she say 'Hello'?""Did she say \"Hello\"?"
// "Did she say "Hello"?"

由于 HTML 语言的属性值使用双引号,所以很多项目约定 JavaScript 语言的字符串只使用单引号,本教程遵守这个约定。当然,只使用双引号也完全可以。重要的是坚持使用一种风格,不要一会使用单引号表示字符串,一会又使用双引号表示。

字符串默认只能写在一行内,分成多行将会报错。

'a
b
c'
// SyntaxError: Unexpected token ILLEGAL

上面代码将一个字符串分成三行,JavaScript 就会报错。

如果长字符串必须分成多行,可以在每一行的尾部使用反斜杠。

var longString = 'Long \
long \
long \
string';longString
// "Long long long string"

上面代码表示,加了反斜杠以后,原来写在一行的字符串,可以分成多行书写。但是,输出的时候还是单行,效果与写在同一行完全一样。注意,反斜杠的后面必须是换行符,而不能有其他字符(比如空格),否则会报错。

连接运算符(+)可以连接多个单行字符串,将长字符串拆成多行书写,输出的时候也是单行。

var longString = 'Long '+ 'long '+ 'long '+ 'string';

如果想输出多行字符串,有一种利用多行注释的变通方法。

(function () { /*
line 1
line 2
line 3
*/}).toString().split('\n').slice(1, -1).join('\n')
// "line 1
// line 2
// line 3"

上面的例子中,输出的字符串就是多行。

5.2 转义字符

反斜杠(\)在字符串内有特殊含义,用来表示一些特殊字符,所以又称为转义符。

需要用反斜杠转义的特殊字符,主要有下面这些。

  • \0 :null(\u0000
  • \b :后退键(\u0008
  • \f :换页符(\u000C
  • \n :换行符(\u000A
  • \r :回车键(\u000D
  • \t :制表符(\u0009
  • \v :垂直制表符(\u000B
  • \' :单引号(\u0027
  • \" :双引号(\u0022
  • \\ :反斜杠(\u005C

上面这些字符前面加上反斜杠,都表示特殊含义。

console.log('1\n2')
// 1
// 2

上面代码中,\n表示换行,输出的时候就分成了两行。

如果在非特殊字符前面使用反斜杠,则反斜杠会被省略。

'\a'
// "a"

上面代码中,a是一个正常字符,前面加反斜杠没有特殊含义,反斜杠会被自动省略。

如果字符串的正常内容之中,需要包含反斜杠,则反斜杠前面需要再加一个反斜杠,用来对自身转义。

"Prev \\ Next"
// "Prev \ Next"

5.3 字符串与数组

字符串可以被视为字符数组,因此可以使用数组的方括号运算符,用来返回某个位置的字符(位置编号从0开始)。

var s = 'hello';
s[0] // "h"
s[1] // "e"
s[4] // "o"// 直接对字符串使用方括号运算符
'hello'[1] // "e"

如果方括号中的数字超过字符串的长度,或者方括号中根本不是数字,则返回undefined

'abc'[3] // undefined
'abc'[-1] // undefined
'abc'['x'] // undefined

但是,字符串与数组的相似性仅此而已。实际上,无法改变字符串之中的单个字符。

var s = 'hello';delete s[0];
s // "hello"s[1] = 'a';
s // "hello"s[5] = '!';
s // "hello"

上面代码表示,字符串内部的单个字符无法改变和增删,这些操作会默默地失败。

5.4 length 属性

length属性返回字符串的长度,该属性也是无法改变的。

var s = 'hello';
s.length // 5s.length = 3;
s.length // 5s.length = 7;
s.length // 5

上面代码表示字符串的length属性无法改变,但是不会报错。

5.5 字符集

JavaScript 使用 Unicode 字符集。JavaScript 引擎内部,所有字符都用 Unicode 表示。

JavaScript 不仅以 Unicode 储存字符,还允许直接在程序中使用 Unicode 码点表示字符,即将字符写成\uxxxx的形式,其中xxxx代表该字符的 Unicode 码点。比如,\u00A9代表版权符号。

var s = '\u00A9';
s // "©"

解析代码的时候,JavaScript 会自动识别一个字符是字面形式表示,还是 Unicode 形式表示。输出给用户的时候,所有字符都会转成字面形式。

var f\u006F\u006F = 'abc';
foo // "abc"

上面代码中,第一行的变量名foo是 Unicode 形式表示,第二行是字面形式表示。JavaScript 会自动识别。

我们还需要知道,每个字符在 JavaScript 内部都是以16位(即2个字节)的 UTF-16 格式储存。也就是说,JavaScript 的单位字符长度固定为16位长度,即2个字节。

但是,UTF-16 有两种长度:对于码点在U+0000U+FFFF之间的字符,长度为16位(即2个字节);对于码点在U+10000U+10FFFF之间的字符,长度为32位(即4个字节),而且前两个字节在0xD8000xDBFF之间,后两个字节在0xDC000xDFFF之间。举例来说,码点U+1D306对应的字符为

JavaScript(一)(数据类型+运算符)相关推荐

  1. 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏...

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  2. python 全栈开发,Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)...

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  3. 前端之 JavaScript 常用数据类型和操作

    JavaScript 常用数据类型有:数字.字符串.布尔.Null.Undefined.对象 JavaScript 拥有动态类型 JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型 ...

  4. JavaScript引用数据类型

    JavaScript引用数据类型 引用类型 在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起(它也常被称为类). Object类型 创建Object实例的方式有两种.第一种 ...

  5. 如何判断 JavaScript 的数据类型?

    如何判断 JavaScript 的数据类型? JavaScript 数据类型一共有 8 种: undefined.Null.Boolean.String.Symbol.Number.bigint.Ob ...

  6. JavaScript判断数据类型的方式

    JavaScript判断数据类型的方式 js中的数据类型有哪些? 基本数据类型:number.string.boolean.null.undefined.symbol以及未来ES10新增的BigInt ...

  7. JavaScript 判断数据类型

    JavaScript 判断数据类型 首先JavaScript基本数据类型有:number null undefined string boolean es6以后还新增了bigint和symbol (上 ...

  8. JavaScript的数据类型有哪些?

    JavaScript的数据类型有哪些? 基本数据类型:字符串 String.数字 Number.布尔Boolean 复合数据类型:数组 Array.对象 Object 特殊数据类型:Null 空对象. ...

  9. javascript 六种数据类型

    javascript 六种数据类型 js的数据类型和常见隐式转化逻辑. 一.六种数据类型 原始类型(基本类型):按值访问,可以操作保存在变量中实际的值.原始类型汇总中null和undefined比较特 ...

最新文章

  1. 百度首席科学家吴恩达谈百度人工智能项目进展情况
  2. quartus II Warning 好的时序是设计出来的,不是约束出来的
  3. python 用户输入_Python中如何让用户输入内容
  4. Apollo 10 — adminService 全量发布
  5. C/C++头文件与变量的声明和定义
  6. 小程序: 在同一个文件夹中配置多个页面
  7. LeetCode 496. 下一个更大元素 I
  8. web集成axis2_AXIS2 Web服务教程
  9. 图书馆的uml概念类图怎么画_UML科普文,一篇文章掌握14种UML图
  10. Transact-SQL 存储过程(c#调用执行)
  11. PHP微信多级三级分佣系统,微信三级分销系统微信三级分销系统
  12. Spyder中文版补丁下载及安装
  13. 决策树———用基尼系数建立决策树
  14. 自己动手制造超强硬件防火墙
  15. 计算图像中任意四个点连成的四边形面积与Ground truth的IOU(Python)
  16. CHUA 返回的矢量的长度为 3,但初始条件矢量的长度为 4。CHUA 返回的矢量和初始条件矢量的元素数目必须相同。
  17. flutter中好用的Widget-CupertinoPicker
  18. java拼音分词_使用Pinyin4j进行拼音分词的方法
  19. 四则运算《安卓版》04
  20. 11. 前端基础--CSS盒子定位

热门文章

  1. 对象不支持此属性或方法
  2. 「2024」预备研究生mem-出题套路四:同时给出逻辑真事实真
  3. iOS Swift 应用内跳转第三方地图导航路线 及地图坐标系转换
  4. 安装虚拟机VMware出现黄色中断感叹号强制回滚【最全解决方案】6招解决(挥泪分享,本宝宝研究了一下午)
  5. RelativeLayout和LinearLayout的比较
  6. html5 星空,用canvas实现简单的星空效果
  7. C# 执行PING命令 查看IP是否在位
  8. CCF小白刷题之路---201812-1 小明上学(C/C++ 100分)
  9. js时间戳转换为日期格式
  10. windows7/10 预览窗口的用途及如何关闭