Web前端开发笔记——第四章 JavaScript程序设计 第三节 数据类型

简介: Web前端开发笔记——第四章 JavaScript程序设计 第三节 数据类型

一、基本数据类型


JavaScript中包括两种不同数据类型,分为基本数据类型和引用数据类型,前者指简单的数据段,后者指多个值构成的对象。


(一)String类型


String类型即字符串类型,字符串可以包括在单引号或双引号内,若字符串本身含有单引号则字符串应该包括在双引号内,反正则在单引号内。


(二)Number类


1、字面量

Number类型即数字类型,可分为整数、浮点数和NaN,其中浮点数是带有小数点且至少有一位的数,它占用的内存空间是整数的两倍。

固定的值称为字面量,JavaScript中有不同的数值字面量格式,最基本的字面量是十进制,八进制和十六进制的字面量可以这样表示,例如下列HTML代码,如下:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>text1</title>
  </head>
  <body>
  <script>
    var a = 100;//十进制字面量
    var b = 017;//八进制字面量,八进制的第一位必须为0
    var c = 0xBF;//十六进制字面量,十六进制的前两位必须为0x,字母A-F不区分大小写
    console.log(a, b, c);
  </script>
  </body>
</html>

运行结果如下,可见八进制和十六进制字面量都被转换为十进制数值:

1667111235116.jpg


2、无穷大

Infinity即无穷大,表示结果超出了计算机可以表示的浮点数的最大范围,可分为正无穷(Infinity)和负无穷(-Infinity),在涉及 > 和 < 比较时,所有的数值都比负无穷大,另外所有的数值都比正无穷小。

例如下列HTML代码:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>text1</title>
  </head>
  <body>
  <script>
    var a = 1 / 0;
    console.log(a);
    var b = -1 / 0;
    console.log(b);
  </script>
  </body>
</html>

控制台中:

1667111269486.jpg


3、非数值

NaN是非数值,表示一个本来要返回数值的操作数但未返回数值的情况,比如在JavaScript中0除以0,它返回的是NaN,这样就不会抛出异常,从而不影响其它代码的执行。

NaN与任何操作都会返回NaN,且它与任何值都不相等,包括其自身。

例如下列HTML代码:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>text1</title>
  </head>
  <body>
  <script>
    var a = 0 / 0;
    console.log(a);
    var b = NaN * 2;
    console.log(b);
    var c = "abcdef" - "122";
    console.log(c)
  </script>
  </body>
</html>


控制台中:

1667111293106.jpg


(三)Boollean类型


Boollean类型即布尔类型,它有两个字面值:true和false,要注意true不一定等于1,false不一定等于0,且布尔类型区分大小写,即True和False不是布尔值。


(四)Undefined类型和Null类型


Undefined类型只有Undefined,表示变量不含有值,即在使用var声明变量时但未初始化的值。

Null类型也只有Null,它表示一个空对象指针,用于保存对象的变量之前先初始化变量。


二、引用数据类型


引用数据类型可分为Object类型、数组类型、data类型、regexp类型和function类型。


(一)Object类型


Object对象是一组数据和功能的集合,可以通过new操作符或对象字面量。

1、通过new操作符后跟Object()构造函数来创建Object实例,这里使用关键词 “new” 来声明其类型。

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>text1</title>
  </head>
  <body>
  <script>
    var office = new Object();
    office.name = "xiaoming";
    office.sex = "男";
    office.age = 30;
  </script>
  </body>
</html>


2、通过对象字面量创建Object实例,使用花括号“{}”创建。

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>text1</title>
  </head>
  <body>
  <script>
    var office {
    name = "xiaoming";
    sex = "男";
    age = 30;
    }
  </script>
  </body>
</html>


(二)数组类型


JavaScript中的数组每一项可以是任何一种数据类型的数据,且数组的大小是可以动态调整的,即根据数据的增加而自动增长以容纳更多数据。

1、可以通过Array()构造函数创建数组。

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>text1</title>
  </head>
  <body>
  <script>
    var number1 = new Array();
    console.log(number1);
    var number2 = new Array(10, "ada", 1.233);
    console.log(number2);
  </script>
  </body>
</html>

控制台中显示了number1[]和number2[]数组的长度大小以及数组中的每项:

1667111362766.jpg

展开后可看到length:0和length:3,如下:

1667111372385.jpg

2、通过数组字面量创建数组。

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>text1</title>
  </head>
  <body>
  <script>
    var thing1 = [];
    console.log(thing1);
    var thing2 = [0];
    console.log(thing2);
    var thing3 = ["xiaom", 123, 0];
    console.log(thing3);
    console.log(thing3[0]); //在控制台中显示数组thing3的第1项
    thing3[2] = 100; //修改数组thing3中的第三项为100
    console.log(thing3);
    thing3[3] = "llk"; //增加数组thing3中的第四项为llk
    console.log(thing3);
  </script>
  </body>
</html>

控制台中:

1667111401794.jpg

可以通过数组名.length返回数组的长度:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>text1</title>
  </head>
  <body>
    <script>
      var thing3 = ["xiaom", 123, 0];
      console.log(thing3.length);
    </script>
  </body>
</html>

控制台中:

1667111599331.jpg

(三)RegExp类型


RegExp类型即正则表达式,正则表达式作为一个模板将某个字符模式与所搜索的字符串进行匹配,它也有两种方式来创建正则表达式。

1、使用RegExp()构造函数来创建正则表达式,该函数接收两个参数,分别是要匹配的字符串模式和可选的标志字符串。

2、使用字面量来创建正则表达式,由模式部分和标志组成,即变量=/pattern/flags。

这里简单介绍了正则表达式,后续还会详细介绍。


(四)Function类型


Function类型即函数类型,函数实际上是对象,每个函数都是Function类型的实例,函数的声明有三种方式。

1、使用Function()构造函数。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>text1</title>
  </head>
  <body>
    <script>
      var f_sum = new Function("a", "b", "console.log(a+b)");
      f_sum(3, 5);
    </script>
  </body>
</html>

控制台中:

1667111673842.jpg

2、使用函数声明语法定义函数。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>text1</title>
  </head>
  <body>
    <script>
      function f_sum(a, b) {
        console.log(a + b);
      }
      f_sum(3, 5);
    </script>
  </body>
</html>

控制台中:

1667111712684.jpg


3、使用函数表达式定义函数。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>text1</title>
  </head>
  <body>
    <script>
      var f_sum = function(a, b) {
        console.log(a + b);
      };
      f_sum(3, 5);
    </script>
  </body>
</html>


控制台中:

1667111742582.jpg


三、查看变量数据类型


可以通过typeof操作符来查看JavaScript中变量的数据类型。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>text1</title>
  </head>
  <body>
    <script>
      console.log(typeof 0);
      console.log(typeof 100);
      console.log(typeof 3.1415);
      console.log(typeof NaN);
      console.log(typeof true);
      console.log(typeof [1, "xioaming", 3.45255]);
      console.log(typeof null);
      console.log(function(){});
    </script>
  </body>
</html>

控制台中:

1667111771571.jpg

相关文章
|
23天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
37 3
|
9天前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
20天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
24天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
24 3
|
24天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
36 2
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
138 2
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
43 0
|
1月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
1月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
1月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
下一篇
无影云桌面