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

相关文章
|
13天前
|
缓存 前端开发 JavaScript
使用Web前端性能优化提高网站加载效率
前端性能优化关键在于提高用户体验和降低资源消耗,Webpack是重要工具。基础优化策略包括减少HTTP请求、资源压缩与缓存、异步加载。Webpack优化配置涉及Tree Shaking、代码分割。高级策略涵盖Long-term Caching、缓存提升和插件优化。打包部署时,自动化流程和环境管理也至关重要。通过这些方法,可提升Web应用速度和体验。
93 0
|
2天前
|
JavaScript 前端开发 Java
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
|
3天前
|
前端开发 JavaScript Java
Java语言在Web前端开发中的技术应用
Java语言在Web前端开发中的技术应用
|
12天前
|
移动开发 JavaScript 前端开发
【热门话题】Vue.js:现代前端开发的轻量级框架之旅
Vue.js,由尤雨溪于2014年创建,是一个轻量级的前端框架,因其简洁API、高效渲染和组件系统深受全球开发者喜爱。本文探讨Vue的核心理念、技术架构、开发实践及在现代Web开发中的应用。Vue遵循渐进式框架思想,提供声明式编程、组件化和响应式数据绑定。技术上,它采用双向数据绑定、虚拟DOM和生命周期钩子。开发实践中,Vue CLI和Vuex、Vue Router分别加速开发和管理状态、路由。Vue不仅适用于单页应用,还支持多页应用、移动开发和跨平台项目,拥有丰富的社区生态和插件。随着Vue 3的推出,Vue将持续创新并影响前端开发领域。
34 0
|
13天前
|
前端开发 JavaScript Java
web 技术中前端和后端交互过程
客户端:上网过程中,负责浏览资源的电脑,叫客户端
25 0
|
19天前
|
Web App开发 缓存 前端开发
前端性能优化的整理笔记(一)
前端性能优化的整理笔记(一)
110 0
|
17天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
19天前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
46 1
|
19天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
12 0
|
19天前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
38 0