【Java Script基础与提升】——数据类型模块

已于 2022-05-31 17:19:02 修改
阅读量539 收藏
点赞数 1
分类专栏： HTML以及CSS和javascripts 文章标签： 开发语言 css javascript html webview
于 2022-05-31 09:19:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56006701/article/details/125056210
版权

Java script系列文章目录

前言

随着人工智能的不断发展，Java Script这门技术也越来越重要，很多人都开启了Java Script学习，本文就介绍了Java Script的基础内容。

一、Java Script是什么？

Java Script是前端开发的一种工具，该工具是为了将我们的前端页面制作的更加完美而创建的。

二、Java Script的数据类型

1.数字型数据

No.1数字分小数和整数

No.2数字之间的进制转化：

        a.八进制：以0开头

        b.十六进制：以0x开头

No.3数字当中的最大最小值

No.4数字当中的三个特殊值

No.5数字当中的isNaN方法来判断是否为数字

        是数字返回false，不是返回true。

        

以下是示例的代码部分：

【注意：这里的JS代码要写在script里面】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num1=010;//八进制
        console.log(num1);
        var num2=0xa;//十六进制
        console.log(num2);
        console.log(Number.MAX_VALUE);//数字型的最大值
        console.log(Number.MIN_VALUE);//数字型的最小值
        alert(Infinity);//无穷大
        console.log(Number.MAX_VALUE*2);
        alert(-Infinity);//无穷小
        console.log(-Number.MAX_VALUE*2);
        alert(NaN);//代表一个非数值
        console.log('文字'-100);
    </script>
</head>
<body>
    
</body>
</html>

2.字符串数据

字符串string:

1、可以是单引号，也可以是双引号。

2、引号嵌套的规范：【外双内单，外单内双】

3、字符串转义符：

都是以\开头的

代码部分：

​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str='曾经沧海难为水\n除却巫山不是云';
        console.log(str);
        var str1='岁岁平安"期盼"来年风调雨顺';
        console.log(str1);
    </script>
</head>
<body>
    
</body>
</html>

​

4、字符串拼接用+号来连接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 进阶之前的代码
        console.log('某人今年18岁了');
        //拼接进阶
        var age = 18;
        console.log('某人今年'+age+'岁了');
    </script>
</head>
<body>
    
</body>
</html>

 下面是一个小案例：

交互处理的三部曲：用户输入——程序内部处理——输出结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var age=prompt('请输入你的年龄：');
        var str='您今年已经'+age+'岁了';
        alert(str);
    </script>
</head>
<body>
    
</body>
</html>

3.布尔型数据

1、只有两个值：true和false

2、true当作1，false当作0来看

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 布尔型数据
        var flag=true;
        var flag1=false;
        console.log(flag+1);
        console.log(flag1+1);
    </script>
</head>
<body>
    
</body>
</html>

4.underfined和unll

underfined为未定义的类型，null为空

特别注意：

underfined与数字相加为NaN，而null与数字相加还是数字

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        //underfined和null
        var str=undefined;
        console.log(str+'skqj');//underfinedskqj
        console.log(str+1);//NaN

        //null空值
        var str1=null;
        console.log(str1+'14');//null14
        console.log(str1+14);//14
    </script>
</head>
<body>
    
</body>
</html>

利用typeof可以获取到变量的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //获取变量的数据类型
        var str2=undefined;
        console.log(typeof str2);
        var str3=null;
        console.log(typeof str3);
        var str4=12;
        console.log(typeof str4);
        var str5='ndqkan';
        console.log(typeof str5);
    </script>
</head>
<body>
    
</body>
</html>

5.数据之间的转化

A、数据转化的原因：

使用表单、prompt获取的数据默认是字符串类型的，不能进行简单的加法运算，需要转换变量的数据类型。

B、转换的类型分三种：

a、字符串类型

        

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //toString()转换
        var num=10;
        var num1=num.toString();
        console.log(num1);
        //String(变量)转换
        console.log(String(num));
        //+号拼接实现转换
        console.log(num+'');
    </script>
</head>
<body>
    
</body>
</html>

b、布尔型

        其他类型转换为布尔型可以用Boolean()函数来做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //其他类型转换为布尔型Boolean()函数来做
        console.log(Boolean(''));//false
        console.log(Boolean(0));//false
        console.log(Boolean(null));//false
        console.log(Boolean(undefined));//false
        console.log(Boolean(NaN));//false
        console.log(Boolean('123'));//true
        console.log(Boolean('你好'));//true
        console.log(Boolean('演员'));//true
    </script>
</head>
<body>
    
</body>
</html>

c、数字型

这些是数字型转换的方法

运行的时候要一部分一部分注释，才能看到正确的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //字符型转换为数字型
        //parseInt(变量)结果为整数[按照前面的数取整]
        var age=prompt('请输入你的年龄');
        console.log(parseInt(age));
        console.log(parseInt“('3.14'));//3
        console.log(parseInt('3.98'));//3
        console.log(parseInt('120px'));//120 [数字出现在前面] 会自动去除单位px
        console.log(parseInt('rem120px'));//NaN

        //parseFloat(变量)结果为小数 浮点数[按照前面的数取整]
        console.log(parseFloat('3.14'));//3.14
        console.log(parseFloat('120px'));//120 会自动去除单位px
        console.log(parseFloat('rem120px'));//NaN

        //Number(变量)
        var num ='123';
        console.log(Number(num));
        console.log(Number('12'));

        //- * /利用这三个符号进行隐式转换
        console.log('12'-0);//12
        console.log('123'-'120');//3
        console.log('133'*1);//133
    </script>
</head>
<body>
    
</body>
</html>

下面是两个小案例：

第一个是计算年龄，第二个是简单的加法器

【此处我写在一起了，大家在使用时可以去掉注释进行验证】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //计算年龄的案例
        /* var year =prompt('请输入你的年份');20002
        var age=2022-year;//year取过来的是字符串类型，但是此处有- 有隐式转换在里面
        alert('你的年龄是'+age+'岁'); */

        //简单的加法器
        var num1=prompt('请输入第一个值：');
        var num2=prompt('请输入第二个值：');
        var result = parseFloat(num1)+parseFloat(num2);
        alert('结果是：'+result);
    </script>
</head>
<body>
    
</body>
</html>

总结

以上就是今天要讲的内容，本文仅仅简单介绍了java Script数据类型的使用，希望对应初学的你们有所帮助。

张小鱼༒
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Java Script 经典教程（八）——JavaScript技术讲座
12-10
在“Java Script 经典教程（八）——JavaScript技术讲座”中，我们将深入探讨这一强大的编程工具的核心概念和关键特性。 1. **变量与数据类型**： JavaScript 支持动态数据类型，这意味着变量可以存储不同类型的值...
Java Script 经典教程（九）——JavaScript完全网页教程
12-10
首先，JavaScript的基础知识包括变量、数据类型和操作符。变量是存储数据的容器，可以用来保存各种类型的数据，如数字、字符串、布尔值等。JavaScript支持动态数据类型，这意味着你可以在同一变量中存储不同类型的值...
Java Script基础与提升——流程控制分支
张小鱼的博客
04-06 303
随着人工智能的不断发展，Java Script这门技术也越来越重要，很多人都开启了Java Script学习，本文就介绍了Java Script当中流程控制部分的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考流程控制是控制我们的代码按照什么结构顺序来执行的，它有三种主要结构：顺序结构、分支结构和循环结构。以上就是今天要讲的内容，本文仅仅简单介绍了javascripts当中循环结构与分支结构的使用与案例。如有问题、建议，请您在评论区留言💬哦。
JAVA运行Script脚本python脚本等
m0_74205854的博客
05-02 531
在尝试了多种在Java中运行JavaScript代码的方法后，我们选择了通过Java调用外部Node.js进程的方法。虽然这种方法可能不是最高效的，但它提供了良好的兼容性和稳定性。在本教程中，我们展示了如何执行外部Node.js脚本，并通过Java代码读取其输出。希望本教程能帮助您解决在Java应用程序中集成Node.js脚本的需求，并为您提供一个可靠的解决方案。如果您有任何问题或需要进一步的帮助，请随时提问。
Java——《面试题——网络篇》
行秋的博客
07-01 1362
在HTTP/1.0中默认使用短连接。也就是说，客户端和服务器每进行一次HTTP操作，就建立一次连 接，任务结束就中断连接。当客户端浏览器访问的某个HTML或其他类型的Web页中包含有其他的 Web资源（如JavaScript文件、图像文件、CSS文件等），每遇到这样一个Web资源，浏览器就会重 新建立一个HTTP会话。而从HTTP/1.1起，默认使用长连接，用以保持连接特性。
Java实战项目——《谷粒商城》分布式基础篇
qq_41523340的博客
06-23 2116
Java实战项目——《谷粒商城》的学习笔记1 分布式基础（全栈开发）1.1 项目简介1.1.1 项目架构1.1.2 电商模式1.1.3 项目技术&特色1.1.4 项目前置要求1.2 分布式基础概念1.2.1 微服务1.2.2 集群、分布式、节点1.2.3 远程调用1.2.4 负载均衡1.2.5 服务注册/发现、注册中心1.2.6 配置中心1.2.7 服务熔断、服务降级1.2.8 API服务网关1.3 环境搭建1.3.1 安装Linux虚拟机2 分布式高级（微服务架构）3 高可用集群（架构师提升） 视
学成在线笔记+踩坑（2）——【内容模块】课程基础查询，swagger+数据库字典+Httpclient+跨域
vincewm的博客
04-20 1899
课程基础查询，swagger+数据库字典+Httpclient+跨域
【浅学Java】Seervlet小项目——MessageWall
qq_52276036的博客
10-18 710
学Servlet，得看看这个
JavaWeb基础4——HTML,JavaScript&CSS
vincewm的博客
07-24 9425
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
Java之JS基础语法 ①(前端）
哒哒的博客
11-01 898
Java之JS基础语法 ①(前端）
Java 后端开发面试题——附校招简历（春招）
末影小黑xh的博客
03-12 1326
这份 Java 后端开发面试题是 ChatGPT 根据我的校招简历自动生成的有针对性的高频面试题，分为项目经验考察和专业技能考察两部分。
谷粒学院day7——课程管理模块
半旧518的博客
11-27 1317
课程管理模块1 课程分类模块的前端实现2 课程列表模块2.1 前端静态页面2.2 后端实现2.3 前端获取后端数据3 课程添加3.1需求分析3.2数据库设计3.3.后端实现3.4 前端实现3.5 功能完善 第七天主要实现的功能如下。 1 课程分类模块的前端实现 （1）添加路由 router/index.js. { path: '/subject', component: Layout, redirect: '/subject/list', //在页面中访问'/teacher'会
Java Script 经典教程（七）——JavaScript用户指南
12-10
- **数据类型**：包括基本类型（String、Number、Boolean、Null、Undefined）和引用类型（Object，包括Array、Function等）。 - **操作符**：如算术、比较、逻辑和赋值操作符，以及特殊的位操作符。 2. **控制流...
Java Script经典教程（一）——从入门到精通
12-10
此外，JavaScript是弱类型语言，这意味着数据类型可以动态转换。 接下来，我们学习控制流语句。条件语句如`if...else`用于根据特定条件执行不同代码块；循环结构如`for`和`while`用于重复执行代码，是程序设计的...
Java Script 经典教程（六）——JavaScript语言教程
12-10
JavaScript是基于ECMAScript规范的，其语法与C++和Java有相似之处。变量声明使用`var`关键字，如`var x = 10;`。函数定义使用`function`关键字，例如`function greet(name) { console.log("Hello, " + name); }`。...
开发语言的基本构成。
luj_1768的博客
07-24 531
许多人都对设计一套自有知识产权的开发语言感兴趣。那么，如何按照功能模块设计开发语言？
主流开发语言和开发环境介绍
weixin_44215445的博客
07-23 1335
主流开发语言和开发环境介绍
网站基本布局CSS
最新发布
m0_46608027的博客
07-24 796
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
Java语言基础学习：数据类型与控制流
1. **数据类型**：Java中有两种基本的数据类型——原始数据类型和引用数据类型。原始数据类型包括`byte`、`char`、`boolean`、`short`、`int`、`long`、`float`和`double`，它们代表不同的数值或布尔值。此外，还有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张小鱼༒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值