JavaScript 基础教程

JavaScript 首页 JavaScript 路线图 JavaScript 概述 JavaScript 功能特性 JavaScript 启用 JavaScript 位置 JavaScript 语法 JavaScript Hello World JavaScript Console.log() JavaScript 注释 JavaScript 变量 JavaScript let 语句 JavaScript 常量 JavaScript 数据类型 JavaScript 类型转换 JavaScript 严格模式 JavaScript 保留关键字

JavaScript 运算符

JavaScript 运算符 JavaScript 算术运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 位运算符 JavaScript 赋值运算符 JavaScript 条件运算符 JavaScript typeof 运算符 JavaScript 空值合并运算符 JavaScript 安全赋值运算符 JavaScript 删除运算符 JavaScript 逗号运算符 JavaScript 分组运算符 JavaScript Yield 运算符 JavaScript 展开运算符 JavaScript 幂运算符 JavaScript 运算符优先级

JavaScript 控制流

JavaScript If...Else JavaScript While 循环 JavaScript For 循环 JavaScript For...in JavaScript For...of JavaScript 循环控制 JavaScript Break 语句 JavaScript Continue 语句 JavaScript Switch Case JavaScript 用户定义迭代器

JavaScript 函数

JavaScript 函数 JavaScript 函数表达式 JavaScript 函数参数 JavaScript 默认参数 JavaScript Function() 构造函数 JavaScript 函数提升 JavaScript 自调用函数 JavaScript 箭头函数 JavaScript 函数调用 JavaScript 函数 call() 方法 JavaScript 函数 apply() 方法 JavaScript 函数 bind() 方法 JavaScript 闭包 JavaScript 变量作用域 JavaScript 全局变量 JavaScript 智能函数参数

JavaScript 对象

JavaScript Number JavaScript Boolean JavaScript Strings JavaScript Arrays JavaScript Date JavaScript DataView JavaScript Handler JavaScript Math JavaScript RegExp JavaScript Symbol JavaScript Sets JavaScript WeakSet JavaScript Maps JavaScript WeakMap JavaScript 可迭代对象 JavaScript Reflect JavaScript TypedArray JavaScript 模板字面量 JavaScript 带标签的模板

面向对象的 JavaScript

JavaScript 对象 JavaScript 类 JavaScript 对象属性 JavaScript 对象方法 JavaScript 静态方法 JavaScript 显示对象 JavaScript 对象访问器 JavaScript 对象构造函数 JavaScript 原生原型 JavaScript ES5 对象方法 JavaScript 封装 JavaScript 继承 JavaScript 抽象 JavaScript 多态 JavaScript 解构 JavaScript 解构赋值 JavaScript 对象解构 JavaScript 数组解构 JavaScript 嵌套解构 JavaScript 可选链式调用 JavaScript 全局对象 JavaScript Mixins (混合) JavaScript 代理

JavaScript 版本

JavaScript 历史 JavaScript 版本 JavaScript ES5 JavaScript ES6 ECMAScript 2016 ECMAScript 2017 ECMAScript 2018 ECMAScript 2019 ECMAScript 2020 ECMAScript 2021 ECMAScript 2022

JavaScript 异步

JavaScript 异步 JavaScript 回调函数 JavaScript Promises JavaScript Async/Await JavaScript Microtasks (微任务) JavaScript Promises JavaScript Promises 链 JavaScript 定时事件 JavaScript setTimeout() JavaScript setInterval()

JavaScript Cookies

JavaScript Cookies JavaScript Cookie 属性 JavaScript 删除 Cookies

JavaScript 浏览器 BOM

JavaScript 浏览器对象模型 JavaScript Window 对象 JavaScript Document 文档对象 JavaScript Screen 对象 JavaScript History 对象 JavaScript Navigator 对象 JavaScript Location 对象 JavaScript Console 对象

JavaScript Web APIs

JavaScript Web API JavaScript History API JavaScript Storage API JavaScript Forms API JavaScript Worker API JavaScript Fetch API JavaScript Geolocation API

JavaScript 事件

JavaScript 事件 JavaScript DOM 事件 JavaScript addEventListener() JavaScript 鼠标事件 JavaScript 键盘事件 JavaScript 表单事件 JavaScript 窗口/文档事件 JavaScript 事件委托 JavaScript 事件冒泡 JavaScript 事件捕获 JavaScript 自定义事件

JavaScript 错误处理

JavaScript 错误处理 JavaScript try...catch JavaScript 调试 JavaScript 自定义错误 JavaScript 扩展错误

JavaScript 重要关键字

JavaScript this 关键字 JavaScript void 关键字 JavaScript new 关键字 JavaScript var 关键字

JavaScript HTML DOM

JavaScript HTML DOM JavaScript DOM 方法 &属性 JavaScript DOM 文档 JavaScript DOM 元素 JavaScript DOM 属性 (Attr) JavaScript DOM 表单 JavaScript 修改 HTML JavaScript 修改 CSS JavaScript DOM 动画 JavaScript DOM 导航 JavaScript DOM 集合 JavaScript DOM NodeList JavaScript DOM DOMTokenList

JavaScript 高级章节

JavaScript 冒泡排序算法 JavaScript 循环引用错误 JavaScript 使用 Jest 进行代码测试 JavaScript CORS 处理 JavaScript 数据分析 JavaScript 死区 JavaScript 设计模式 JavaScript Engine 和 Runtime JavaScript 执行上下文 JavaScript 函数组合 JavaScript 不可变性 JavaScript Kaboom.js JavaScript 词法作用域 JavaScript 本地存储 JavaScript 记忆化 JavaScript 压缩 JS JavaScript 可变性 vs 不可变性 JavaScript 包管理器 JavaScript 解析 S 表达式 JavaScript 原型继承 JavaScript 响应式 JavaScript Require 函数 JavaScript Selection API JavaScript SessionStorage JavaScript SQL CRUD 操作 JavaScript 增强排序 JavaScript 临时死区 JavaScript 节流 JavaScript TRPC 库 JavaScript 真值和假值 JavaScript 上传文件 JavaScript 日期比较 JavaScript 递归 JavaScript 数据结构 JavaScript Base64 编码 JavaScript 回调函数 JavaScript 当前日期/时间 JavaScript 日期验证 JavaScript 过滤方法 JavaScript 生成颜色 JavaScript HTTP 请求 JavaScript 插入排序 JavaScript 延迟加载 JavaScript 链表 JavaScript 嵌套循环 JavaScript 空值检查 JavaScript 获取当前 URL JavaScript 图算法 JavaScript 高阶函数 JavaScript 空字符串检查 JavaScript 表单处理 JavaScript 函数式编程 JavaScript 形参 vs 实参 JavaScript 原型 JavaScript 响应式编程 JavaScript Reduce 方法 JavaScript Rest 运算符 JavaScript 短路 JavaScript 未定义检查 JavaScript 单元测试 JavaScript 验证 URL

JavaScript 杂项

JavaScript Ajax JavaScript 异步迭代 JavaScript Atomics 原子对象 JavaScript Rest 参数 JavaScript 页面重定向 JavaScript 对话框 JavaScript 页面打印 JavaScript 表单验证 JavaScript 动画 JavaScript 多媒体 JavaScript 图像映射 JavaScript 浏览器 JavaScript JSON JavaScript 多行字符串 JavaScript 日期格式 JavaScript 获取日期方法 JavaScript 设置日期方法 JavaScript 模块 JavaScript 动态导入 JavaScript BigInt JavaScript Blob JavaScript Unicode JavaScript 浅拷贝 JavaScript 调用堆栈 JavaScript 引用类型 JavaScript IndexedDB JavaScript 点击劫持攻击 JavaScript 柯里化 JavaScript 图形 JavaScript Canvas 画布 JavaScript 防抖 JavaScript 性能 JavaScript 代码风格指南

JavaScript 实用资源

JavaScript 面试题 JavaScript 速查表 JavaScript 函数


JavaScript - 数据类型

JavaScript 数据类型

JavaScript 中的数据类型是指我们存储或使用的值的类型。编程语言最基本的特征之一是它支持的数据类型集合。这些是可以在编程语言中表示和操作的值的类型。

JavaScript 数据类型可以分为原始数据类型和非原始数据类型(对象)。JavaScript(ES6 及更高版本)允许您使用七种原始数据类型 -

  • 字符串文本,例如"此文本字符串"等。
  • 数字,例如 123、120.50 等。
  • 布尔值,例如true 或 false。
  • null
  • undefined
  • BigInt
  • Symbol

BigInt 和 Symbol 是在 ES6 中引入的。在 ES5 中,只有五种原始数据类型。

除了这些原始数据类型之外,JavaScript 还支持一种称为对象的复合数据类型。我们将在单独的章节中详细介绍对象。

对象数据类型包含 3 个子数据类型 -

  • 对象
  • 数组
  • 日期

为什么数据类型很重要?

在任何编程语言中,数据类型对于操作都很重要。

例如,以下代码生成 1010 的输出。

let sum = "10" + 10;

这里,JavaScript 引擎将第二个操作数转换为字符串,并使用"+"运算符进行合并,而不是将它们相加。

因此,您需要确保操作数的类型正确。

现在,让我们通过示例了解每种数据类型。

JavaScript 字符串

在 JavaScript 中,字符串是字符序列,可以使用以下三种不同的方式创建 -

  • 使用单引号
  • 使用双引号
  • 使用反引号

示例

在下面的示例中,我们使用单引号、双引号和反引号创建了字符串。在输出中,这三个字符串的结果相同。

<html>
<head>
   <title> JavaScript string </title>
</head>
<body>
   <script>
      let str1 = "Hello World!"; // 使用双引号
      let str2 = 'Hello World!'; // 使用单引号
      let str3 = `Hello World!`; // 使用反引号
      document.write(str1 + "<br>");
      document.write(str2 + "<br>");
      document.write(str3 + "<br>");
   </script>
</body>
</html>

JavaScript 数字

JavaScript 数字始终存储为浮点值(十进制数)。

JavaScript 不区分整数值和浮点值。

JavaScript 使用 IEEE 754 标准定义的64 位浮点格式表示数字。

示例

在下面的示例中,我们演示了带小数点和不带小数点的 JavaScript 数字。

<html>
<head>
   <title> JavaScript number </title>
</head>
<body>
   <script>
      let num1 = 10; // 整数
      let num2 = 10.22; // 浮点数
      document.write("The value of num1 is " + num1 + "<br/>");
      document.write("The value of num2 is " + num2);
   </script>
</body>
</html>

示例(指数表示法)

JavaScript 也支持指数表示法。我们已在下面的示例代码中进行了解释 -

<html>
<head>
   <title> JavaScript number Exponential notation </title>
</head>
<body>
   <script>
      let num1 = 98e4;    // 980000
      let num2 = 98e-4;   // 0.0098
      document.write("The value of num1 is: " + num1 + "<br/>");
      document.write("The value of num2 is: " + num2);
   </script>
</body>
</html>

JavaScript 布尔值

在 JavaScript 中,布尔值数据类型只有两个值:true 或 false。

<html>
<head>
   <title> JavaScript Boolean </title>
</head>
<body>
   <script>
      let bool1 = true;
      let bool2 = false;
      document.write("The value of the bool1 is " + bool1 + "<br/>");
      document.write("The value of the bool2 is " + bool2 + "<br/>");
   </script>
</body>
</html>

JavaScript Undefined(未定义)

当你声明一个变量但未初始化它时,它会包含一个 Undefined (未定义)的值。但是,你也可以手动为该变量赋值。

<html>
<head>
   <title> JavaScript Undefined </title>
</head>
<body>
   <script>
      let houseNo; // Contains undefined value
      let apartment = "Ajay";
      apartment = undefined; // Assigning the undefined value
      document.write("The value of the house No is: " + houseNo + "<br/>");
      document.write("The value of the apartment is: " + apartment + "<br/>");
   </script>
</body>
</html>

JavaScript Null

当任何变量的值未知时,可以使用 null。对于空值或未知值,最好使用 null,而不是未定义的值。

<html>
<head>
   <title> JavaScript null </title>
</head>
<body>
   <script>
      let houseNo = null; // Unknown house number
      let apartment = "B-2";
      appartment = null; // Updating the value to null
      document.write("The value of the houseNo is: " + houseNo + "<br/>");
      document.write("The value of the apartment is: " + apartment + "<br/>");
   </script>
</body>
</html>

JavaScript Bigint

JavaScript 仅存储 64 位长的浮点数。如果需要存储非常大的数字,则应使用 Bigint。您可以通过在数字末尾附加 n 来创建 Bigint。

<html>
<head>
   <title> JavaScript Bigint </title>
</head>
<body>
   <script>
      let largeNum = 1245646564515635412348923448234842842343546576876789n;
      document.write("The value of the largeNum is " + largeNum + "<br/>");
   </script>
</body>
</html>

JavaScript 符号

JavaScript ES6 版本引入了 Symbol 数据类型。它用于创建唯一的原始值和不可变值。

可以使用 Symbol() 构造函数来创建唯一的符号,您可以将字符串作为 Symbol() 构造函数的参数传递。

示例

在下面的示例中,我们为同一个字符串创建了 sym1 和 sym2 符号。之后,我们比较了 sym1 和 sym2 的值,结果为 false。这意味着两个符号都是唯一的。

<html>
<head>
   <title> JavaScript Symbol </title>
</head>
<body>
   <script>
      let sym1 = Symbol("123");
      let sym2 = Symbol("123");
      let res = sym1 === sym2;
      document.write("Is sym1 and Sym2 are same? " + res + "<br/>");
   </script>
</body>
</html>

JavaScript 对象

在 JavaScript 中,object 数据类型允许我们以 键值对 格式存储数据集合。定义对象有多种方法,我们将在"对象"章节中介绍。

在这里,我们将使用对象字面量创建一个对象。

示例

在下面的示例中,我们使用"{}"(对象字面量)创建了一个 obj 对象。该对象包含值为字符串的"animal"属性、值为数字的"legs"属性,并将"color"变量的值赋值给"hourseColor"属性。

JSON.stringify() 方法将对象转换为字符串并将其显示在输出中。

<html>
<head>
   <title> JavaScript Object </title>
</head>
<body>
   <script>
      let color = "Brown";
      const obj = {
         animal: "Hourse",
         legs: 4,
         hourseColor: color
      }
      document.write("The given object is: " + JSON.stringify(obj) + "<br/>");
   </script>
</body>
</html>

JavaScript 数组

在 JavaScript 中,数组 是不同数据类型元素的列表。您可以使用两个方括号"[]"创建一个数组,并在数组中插入多个以逗号分隔的值。

<html>
<head>
   <title> JavaScript Array </title>
</head>
<body>
   <script>
      const colors = ["Brown", "red", "pink", "Yellow", "Blue"];
      document.write("The given array is: " + colors + "<br/>");
   </script>
</body>
</html>

JavaScript 日期

您可以使用 JavaScript Date 对象 来操作日期。

示例

在下面的示例中,我们使用 Date() 构造函数创建了一个日期。在输出中,您可以根据您所在的时区查看当前日期和时间。

<html>
<head>
   <title> JavaScript Date </title>
</head>
<body>
   <script>
      let date = new Date();
      document.write("The today's date and time is: " + date + "<br/>");
   </script>
</body>
</html>

动态类型

JavaScript 是一种动态类型语言,类似于 Python 和 Ruby。因此,它在运行时(而不是编译时)确定变量的数据类型。我们可以将任何数据类型的值初始化或重新赋值给 JavaScript 变量。

示例

在下面的示例中,我们用字符串值初始化了第一个变量。之后,我们将其值更新为数字和布尔值。

<html>
<head>
   <title> JavaScript dynamic data type </title>
</head>
<body>
   <script>
      let first = "One"; // it is string
      first = 1; // now it's Number
      document.write("The value of the first variable is " + first + "<br/>");
      first = true; // now it's Boolean
      document.write("The value of the first variable is " + first + "<br/>");
   </script>
</body>
</html>

使用 typeof 运算符检查数据类型

typeof 运算符允许您检查变量的类型。

示例

在下面的示例中,我们使用 typeof 运算符检查了各种变量的数据类型。

<html>
<head>
   <title> typeof operator </title>
</head>
<body>
   <script>
      let num = 30;
      let str = "Hello";
      let bool = true;
      document.write("The data type of num is: " + typeof num + "<br/>");
      document.write("The data type of str is: " + typeof str + "<br/>");
      document.write("The data type of bool is: " + typeof bool + "<br/>");
   </script>
</body>
</html>