JavaScript 八大数据类型

曾经终败给现在 2023-01-04 10:29 125阅读 0赞

# JavaScript 数据类型 #

八大数据类型

**值类型(基本类型)**：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）。

**引用数据类型**：对象(Object)、数组(Array)、函数(Function)。

JavaScript 基本的类型。

1.  `number` 用于任何类型的数字：整数或者浮点数。
2.  `string` 用于字符串。一个字符串可以包含一个或多个字符，所以没有单独的单字符类型。
3.  `boolean` 用于 `true` 和 `false`。
4.  `null` 用于未知的值 —— 只有一个 `null` 值的独立类型。
5.  `undefined` 用于未定义的值 —— 只有一个 `undefined` 值的独立类型。
6.  `object` 用于更复杂的数据结构。
7.  `symbol` 用于唯一的标识符。

--------------------

## JavaScript 字符串类型（`string` ） ##

字符串是存储字符（比如 "Bill Gates"）的变量。

字符串可以是引号中的任意文本。可以使用单引号或双引号：

例如:

**var carname="Hellow "；**

1.  可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
2.  如果想要在双引号中使用双引号，可以再嵌套的双引号前面加反斜杠 \\

特殊字符

1.  在 JavaScript 中，字符串写在单引号或双引号中。
2.  因为这样，以下实例 JavaScript 无法解析：
3.   "We are the so-called "Vikings" from the north."
4.  字符串 "We are the so-called " 被截断。
5.  如何解决以上的问题呢？可以使用反斜杠 (\\) 来转义 "Vikings" 字符串中的双引号，如下:
6.   "We are the so-called \\"Vikings\\" from the north."
7.   反斜杠是一个**转义字符**。 转义字符将特殊字符转换为字符串字符：
8.  转义字符 (\\) 可以用于转义撇号，换行，引号，等其他特殊字符。

下表中列举了在字符串中可以使用转义字符转义的特殊字符：

###  操作字符串： ###

1、字符串的索引从 0 开始，这意味着第一个字符索引值为 \[0\],第二个为 \[1\], 以此类推。

可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同:

var str = carname\[6\];

### 字符串长度 ###

可以使用内置属性 **length** 来计算字符串的长度：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

var sln = txt.length;

### indexOf:("参数") ###

返回字符串中检索指定字符第一次出现的位置（下标）。

### lastIndexOf() ###

返回字符串中检索指定字符最后一次出现的位置（下标）。

### substring() ###

提取字符串中两个指定的索引号之间的字符，如果填写一个值，则从这个数提取刀结尾。

###  split() ###

把字符串分割为子字符串数组

###  toUpperCase() ###

将英文字符专为大写

###  toLowerCase() ###

将英文字符专为小写

### 字符串方法 ###

<table> 
 <tbody> 
 <tr> 
 <th> 方法 </th> 
 <th> 描述 </th> 
 </tr> 
 <tr> 
 <td> charAt() </td> 
 <td> 返回指定索引位置的字符 </td> 
 </tr> 
 <tr> 
 <td> charCodeAt() </td> 
 <td> 返回指定索引位置字符的 Unicode 值 </td> 
 </tr> 
 <tr> 
 <td> concat() </td> 
 <td> 连接两个或多个字符串，返回连接后的字符串 </td> 
 </tr> 
 <tr> 
 <td> fromCharCode() </td> 
 <td> 将 Unicode 转换为字符串 </td> 
 </tr> 
 <tr> 
 <td> indexOf() </td> 
 <td> 返回字符串中检索指定字符第一次出现的位置 </td> 
 </tr> 
 <tr> 
 <td> lastIndexOf() </td> 
 <td> 返回字符串中检索指定字符最后一次出现的位置 </td> 
 </tr> 
 <tr> 
 <td> localeCompare() </td> 
 <td> 用本地特定的顺序来比较两个字符串 </td> 
 </tr> 
 <tr> 
 <td> match() </td> 
 <td> 找到一个或多个正则表达式的匹配 </td> 
 </tr> 
 <tr> 
 <td> replace() </td> 
 <td> 替换与正则表达式匹配的子串 </td> 
 </tr> 
 <tr> 
 <td> search() </td> 
 <td> 检索与正则表达式相匹配的值 </td> 
 </tr> 
 <tr> 
 <td> slice() </td> 
 <td> 提取字符串的片断，并在新的字符串中返回被提取的部分 </td> 
 </tr> 
 <tr> 
 <td> split() </td> 
 <td> 把字符串分割为子字符串数组 </td> 
 </tr> 
 <tr> 
 <td> substr() </td> 
 <td> 从起始索引号提取字符串中指定数目的字符 </td> 
 </tr> 
 <tr> 
 <td> substring() </td> 
 <td> 提取字符串中两个指定的索引号之间的字符 </td> 
 </tr> 
 <tr> 
 <td> toLocaleLowerCase() </td> 
 <td> 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 </td> 
 </tr> 
 <tr> 
 <td> toLocaleUpperCase() </td> 
 <td> 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 </td> 
 </tr> 
 <tr> 
 <td> toLowerCase() </td> 
 <td> 把字符串转换为小写 </td> 
 </tr> 
 <tr> 
 <td> toString() </td> 
 <td> 返回字符串对象值 </td> 
 </tr> 
 <tr> 
 <td> toUpperCase() </td> 
 <td> 把字符串转换为大写 </td> 
 </tr> 
 <tr> 
 <td> trim() </td> 
 <td> 移除字符串首尾空白 </td> 
 </tr> 
 <tr> 
 <td> valueOf() </td> 
 <td> 返回某个字符串对象的原始值 </td> 
 </tr> 
 </tbody> 
</table>

--------------------

# 数字(Number) #

*number* 类型用于整数和浮点数。

数字有很多操作，比如，乘法 `*`、除法 `/`、加法 `+`、减法 `-` 等等。

除了常规的数字，还包括所谓的“特殊数值”也属于这种类型：`Infinity`、`-Infinity` 和 `NaN`。

*  `Infinity` 代表数学概念中的无穷大 ∞。是一个比任何数字都大的特殊值。
    
    我们可以通过除以 0 来得到它。
    
        alert
        
        (1/0）;
         // Infinity
    
    或者在代码中直接提及它。
    
        alert
        (Infinity）;// Infinity
    
     
 *  `NaN` 代表一个计算错误。它是一个不对的或者一个未定义的数学操作所得到的结果，比如：

alert("not a number"/2)
    ;
    // NaN, 这样的除法是错误的

`NaN` 是粘性的。任何对 `NaN` 的进一步操作都会给出 `NaN`：

所以，如果在数学表达式中有一个 `NaN`，会被传播到最终结果。

数学运算是安全的

1.  在 JavaScript 中做数学运算是安全的。我们可以做任何事：除以 0，将非数字字符串视为数字，等等。
2.  脚本永远不会有致命的错误(“死亡”)。最坏的情况下，会得到 `NaN` 作为结果。
3.  特殊的数值属于 **number** 类型。当然，对这个词的一般认识是，它们并不是数字。

--------------------

5、typeof 运算符

`typeof` 运算符返回参数的类型。当我们想要分别处理不同类型值的时候，或者简单地进行检验，就很有用。

它支持两种语法形式：

1.  作为运算符：`typeof x`。
2.  函数形式：`typeof(x)`。

换言之，有括号和没有括号，结果是一样的。

对 `typeof x` 的调用返回数据类型的字符串。

typeof undefined // "undefined"
    
    typeof 0 // "number"
    
    typeof true // "boolean"
    
    typeof "foo" // "string"
    
    typeof Symbol("id") // "symbol"
    
    typeof Math // "object"  (1)
    
    typeof null // "object"  (2)
    
    typeof alert // "function"  (3)

最后三行可能需要额外的说明：

1.  `Math` 是一个提供数学运算的内建对象。我们会在章节 数字类型 学习它。此处作为一个对象的例子。
2.  `typeof null` 的结果是 `"object"`。这是不对的。这是官方在 `typeof` 方面承认的错误，只是为了兼容性而保留。当然，`null` 不是一个对象。它有自己的类型，是一个特殊值。再次强调，这是语言中的一个错误。
3.  `typeof alert` 的结果是 `"function"`，因为 `alert` 在语言中是一个函数。

### `typeof` 运算符可以查看变量的类型。 ###

*  两种形式：`typeof x` 或者 `typeof(x)`。
 *  返回的类型的字符串，比如 `"string"`。
 *  **`null` 返回 `"object"` —— 这是语言中的一个错误，实际上它并不是一个对象。**

--------------------

6、类型转换

强制转换

1、 Number（） 将任意类型的值专为数字

数值：转换后仍然是原来的值

字符串：

可以解析，转换成相应的数值

不可以解析，返回的是NaN

"" 返回 0

布尔值：

true 1

false 0

null 0

undefined NaN

parseInt()

字符串：将字符串转整数

数值：将数值取整数

parseFloat() 将字符串转浮点数

2、 String（） 将任意类型的值专为字符串

3、  Boolean（）将任意类型的值专为布尔值

*                  数值：非0即真。
 *                  字符串：''为false，其他都为true

下面这五个值会转为false，其余都为true。

1.                  0
2.                  null
3.                  undefined
4.                  ""
5.                  NaN

--------------------

6.1自动转换类型

当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。

以下输出结果不是你所期望的：

5 + null    // 返回 5         null 转换为 0  
"5" + null  // 返回"5null"   null 转换为 "null"  
"5" + 1     // 返回 "51"      1 转换为 "1"   
"5" - 1     // 返回 4         "5" 转换为 5

--------------------

6.2自动转换为字符串

当尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法：

document.getElementById("demo").innerHTML = myVar;

1.  myVar = \{name:"Fjohn"\}  // toString 转换为 "\[object Object\]"
2.  myVar = \[1,2,3,4\]       // toString 转换为 "1,2,3,4"
3.  myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

数字和布尔值也经常相互转换：

1.  myVar = 123             // toString 转换为 "123"
2.  myVar = true            // toString 转换为 "true"
3.  myVar = false           // toString 转换为 "false"

1、其他数据类型转字符串

任何类型的数据和字符串类型的数据做相加操作 （+）

+ 并不是算数运算，而是字符串拼接。

此时其他的数据类型会自动转为字符串。

2、其他类型转数字

除了字符串与数字做相加运算外，其他会自动转数字进行运算。

NaN undefined 运算结果为NaN

NaN与任何类型做运算都为NaN ，包括它自身。

3、 其他数据转布尔

下面这五个值会转为false，其余都为true。

null

undefined

NaN

--------------------

下表展示了使用不同的数值转换为数字(Number), 字符串(String), 布尔值(Boolean):

<table> 
 <tbody> 
 <tr> 
 <th> 原始值 </th> 
 <th> 转换为数字 </th> 
 <th> 转换为字符串 </th> 
 <th> 转换为布尔值 </th> 
 </tr> 
 <tr> 
 <td> false </td> 
 <td> 0 </td> 
 <td> "false" </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> true </td> 
 <td> 1 </td> 
 <td> "true" </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> 0 </td> 
 <td> 0 </td> 
 <td> "0" </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> 1 </td> 
 <td> 1 </td> 
 <td> "1" </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> "0" </td> 
 <td> 0 </td> 
 <td> "0" </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> "000" </td> 
 <td> 0 </td> 
 <td> "000" </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> "1" </td> 
 <td> 1 </td> 
 <td> "1" </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> NaN </td> 
 <td> NaN </td> 
 <td> "NaN" </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> Infinity </td> 
 <td> Infinity </td> 
 <td> "Infinity" </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> -Infinity </td> 
 <td> -Infinity </td> 
 <td> "-Infinity" </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> "" </td> 
 <td> 0 </td> 
 <td> "" </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> "20" </td> 
 <td> 20 </td> 
 <td> "20" </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> "Runoob" </td> 
 <td> NaN </td> 
 <td> "Runoob" </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> [ ] </td> 
 <td> 0 </td> 
 <td> "" </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> [20] </td> 
 <td> 20 </td> 
 <td> "20" </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> [10,20] </td> 
 <td> NaN </td> 
 <td> "10,20" </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> ["Runoob"] </td> 
 <td> NaN </td> 
 <td> "Runoob" </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> ["Runoob","Google"] </td> 
 <td> NaN </td> 
 <td> "Runoob,Google" </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> function(){} </td> 
 <td> NaN </td> 
 <td> "function(){}" </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> { } </td> 
 <td> NaN </td> 
 <td> "[object Object]" </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> null </td> 
 <td> 0 </td> 
 <td> "null" </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> undefined </td> 
 <td> NaN </td> 
 <td> "undefined" </td> 
 <td> false </td> 
 </tr> 
 </tbody> 
</table>

--------------------

7、交互：alert、prompt、confirm

本部分旨在覆盖 JavaScript “原生”，而无需针对特定环境进行调整。

但我们仍然使用浏览器作为演示环境。所以我们至少应该知道一些用户界面函数。在本章节我们将会熟悉函数 `alert`、`prompt` 和 `confirm` 的用法。

浏览器会弹出一段信息并暂停脚本，直到用户点击了“确定”。

举个例子：

alert("Hello");

这个小窗口被称为 **模态窗**。“modal” 意味着用户不能与页面的其他部分进行交互，点击其他按钮等，直到他们处理完窗口。在这种情况下 – 直到他们按下“确定”。

prompt

`prompt` 函数接收两个参数：

result = prompt(title[,default]);

浏览器会显示一个带有文本消息的模态窗口，还有 input 框和确定/取消按钮。