20231024 40/472

最新推荐文章于 2024-09-08 21:17:37 发布

有点小懒懒

最新推荐文章于 2024-09-08 21:17:37 发布

阅读量59

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_51148337/article/details/134044481

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

数据类型

数据类型简介

为什么需要数据类型：在计算机中，不同数据所占的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

变量的数据类型：js是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中会被自动确定。

 var num; // 这里面num，不确定属于哪种数据类型
        var num = 10;
        //js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
        var str = 'pink'; //str 字符串类型

JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var x = 6; //x为数字
var x = "Bill"; //x为字符串

是动态语言，变量的数据类型是可以变化的。

 //js是动态语言 变量的数据类型是可以变化的
        var x = 10; //x是数字型
        x = 'pink'; //x 字符串型

简单数据类型

js把数据类型分成两类：

简单数据类型（number，string,boolean,undefined,null)

undefined 声明了变量没有给值 null声明了变量为空

复杂数据类型（object）

数字型

常见进制有二进制、八进制、十进制、十六进制。

在js中八进制前面加上0，十六进制前面加上0x

 var num = 10; //num数字型
        var PI = 3.14; //PI数字型
        //1.八进制 0~7 我们程序里面数字前面加0 表示八进制
        var num1 = 010;
        console.log(num1);
        //2.十六进制 0~9 a~f
        var num2 = 0x9;
        console.log(num2);
        var num3 = 0xa;
        console.log(num3);

js中有最大值和最小值

        console.log(Number.MAX_VALUE);
        console.log(Number.MIN_VALUE);

isNaN（）

     //isNaN() 这个方法用来判断非数字，并且返回一个值，如果是数字返回的是false 如果不是返回的是true
        console.log(isNaN(12));
        console.log(isNaN('pink'));

字符串string

字符串里面可以是引号中任意文本，可以是单引号也可以是双引号。

因为html标签里面的属性使用的是双引号，JS中推荐使用单引号。

字符串嵌套效果：

JS中可以用单引号嵌套双引号，或者用双引号嵌套单引号（外单内双，外双内单）

  //'pink' '小黑' '12'
        var str = '他是一个"小太阳"';
        console.log(str);

字符串转义符

类似HTML里面转义符，字符串里面也有转义符。

转义符都是\开头的，常用的转义符：

转义符	解释说明
\n	换行符
\\	斜杠\
\’	‘单引号
\‘’	’‘双引号
\t	tab缩进
\b	空格 b是blank

案例：弹出网页警示框

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<!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>
        alert('酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景。\n我审视四周，这里，是我的舞台，我就是天地间的王者。\n这一刻，我豪气冲天，终于大喊一声：“收破烂啦~”')
    </script>
</head>
<body>
    
</body>
</html>

练习转义字符

字符串长度

字符串是若干字符组成的，这些字符的数量就是字符串长度。通过字符串length属性可以获取整个字符串长度。

  //1.检测获取字符串的长度 length
        var str = 'my name is bb'; //13
        console.log(str.length);

字符串的拼接

   //2.字符串的拼接
        console.log('沙漠'+'骆驼');
        console.log('小黑'+true); //小黑true
        console.log('12'+12); //1212

+：数值相加，字符相连

        //字符串加强
        console.log('小黑' + 1 + '岁');
        //变量不要写道字符串里面，是通过和字符串相连的方式实现 引引加加
        var age = 1;
        console.log('小黑' + age + '岁');

案例：显示年龄

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

利用JS编写一个非常简单的交互程序。

用户输入——程序处理——输出结果

prompt——用字符串进行拼接——输出结果

    <script>
        var age = prompt('请输入您的年龄');
        var str = '您今年已经' + age + '岁了';
        alert(str);
    </script>

布尔型

        var flag = true; //flag 布尔型
        var flag1 = false;
        console.log(flag + 1); //2 true参与加法运算当1来看

Undefined和null

  //如果一个变量声明未给值，就是undefined
        var str;
        console.log(str);
        var variable = undefined;
        console.log(variable + 'pink'); //undefinedpink
        console.log(variable + 1); //NaN 不是一个数字
    //null 空值
        var space = null;
        console.log(space + 'pink'); //nullpink
        console.log(space + 1); //1

获取变量数据类型typeof

    var num = 10;
        console.log(typeof num); //number
        var str = '小黑';
        console.log(typeof str); //string
        var flag = true;
        console.log(typeof flag);//boolean
        var vari = undefined;
        console.log(typeof vari);//undefined
        var timer = null;
        console.log(typeof timer);//object

//利用颜色来判断
        console.log(18);
        console.log('18');
        console.log(true);
        console.log(undefined);
        console.log(null);

字面量

数字字面量：8、9、10

字符串字面量：‘小黑’，‘前端’

布尔字面量：true、false

数据类型转换

定义

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接进行加加法运算，需要转变数据类型。通常来说，就是将一种数据型的变量转换成另外一种数据类型。

转换成字符串类型

方式	说明	案例
tostring（）	转换成字符串	var num = 1;alert(num.toString())；
string（）强制转换	转换成字符串	var num = 1;alert(String(num))；
加号拼接字符串	和字符串拼接的结果都是字符串	var num = 1;alert(num+“我是字符串”)；

    <script>
        //1.数字型转换成字符串型
      var num = 10;
      var str = num.toString();
      console.log(str);
      console.log(typeof str);
      //2.利用String
      console.log(String(num));
      //3.利用+拼接字符串的方法实现转换效果
      console.log(num + '');
    </script>

**注意：**toString()和String()使用方式不一样第三种也称为隐式转换。

转换成数字型

方式	说明	案例
parselnt（string函数）	将string类型转换成整数数值型	parselnt（‘78’）
parseFloat（string）函数	将string类型转换成浮点数值型	parseFloat（‘78.21’）
Number（）强制转换函数	将string类型转换成数值型	Number（‘12’）
js隐式转换（- * /）	利用算术运算式转换成数值型	‘12’ - 0

 //1.parseInt(变量) 可以把字符型转换成数字型 得到的是整数
        // var age = prompt('请输入您的年龄');
    //     console.log(parseInt(age));
         console.log(parseInt('3.14')); //取整
         console.log(parseInt('120px')); //去掉px单位
         //2.parseFloat(变量) 可以把字符型转换成数字型 得到是小数 浮点数
         console.log(parseFloat('3.14')); //取整
         console.log(parseFloat('120px')); //去掉px单位
         //3.利用Number(变量)
         var str = '123';
         console.log(Number(str));
         console.log(Number('12'));
         //4.利用算术运算 - * /
         console.log('12' - 0); //数字型12
         console.log('123' - 120);

案例：计算年龄

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

输入出生日期之后，能够直接出来年龄

弹出输入框prompt，让用户输入出生年份
把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在年龄
弹出警示框alert，把计算的结果输出

    <script>
//         1. 弹出输入框prompt，让用户输入出生年份 
// 2. 把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在年龄
// 3.  弹出警示框alert，把计算的结果输出
        var year = prompt('请输入您的出生年份')
        var age = 2023 - year; //year 取过来是字符串型 这里用的是减法 有隐式转换
        alert('您今年已经'+ age + '岁了');
    </script>

案例2：简单加法器

计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示两次相加的结果。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

先弹出第一个输入框
再弹出第二个输入框
将这个两个值相加
弹出警示框alert，输出结果

<script>
      // 1. 先弹出第一个输入框
      // 2. 再弹出第二个输入框
      // 3. 将这个两个值相加
     // 4. 弹出警示框alert，输出结果
     var num1 = prompt('请您输入第一个值：');
     var num2 = prompt('请您输入第二个值：');
     var result = parseFloat(num1) + parseFloat(num2);
     alert('您的结果是：' + result)
 </script>

转换成布尔型

方式	说明	案例
Boolean（）函数	其他类型转换成布尔值	Boolean（‘true’);

代表空、否定的值会被转换成false，如"、0、NaN、null、undefined

其余值都会被转换成true

        console.log(Boolean(''));
        console.log(Boolean(0));
        console.log(Boolean(NaN));
        console.log(Boolean(null));
        console.log(Boolean(undefined)); //false
        console.log('------------');
        console.log(Boolean('123')); 
        console.log(Boolean('你好吗')); 
        console.log(Boolean('我很好'));

拓展阅读之编译和解释语言的区别

解释型语言和编译型语言

计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。

编程语言——>翻译器——>机器语言

翻译器翻译的方式：一种编译，另一个是解释。两种方式之间的区别在于翻译的时间点不同。

编译器是代码执行之前进行编译，生成中间代码文件。

解释器是在运行时进行及时解释，并立即执行（当编译器以解释方式运行的时候，也称为解释器）

编译型语言Java——中间代码文件class——机器语言——执行

解释型语言JavaScript（html）——机器语言——执行

标识符、关键字、保留字

标识符

就是指开发人员为变量、属性、函数、参数取的名字。

标识符不能是关键字或保留字。

关键字

就是指JS本身已经使用的字，不能再用他们充当变量名、方法名。

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with等。

保留字

实际就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用他们当变量名或方法名。

包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile等。

练习

依次询问并获取用户的姓名、年龄、性别，并打印用户信息如图。

<script>
        var name = prompt('请输入您的姓名：');
        var age = prompt('请输入您的年龄：');
        var sex = prompt('请输入您的性别：');
        alert('您的姓名是:' + name + '\n' + '您的年龄是:' + age + '\n' + '您的性别是:' + sex + '\n')
</script>

、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile等。

练习

依次询问并获取用户的姓名、年龄、性别，并打印用户信息如图。

<script>
        var name = prompt('请输入您的姓名：');
        var age = prompt('请输入您的年龄：');
        var sex = prompt('请输入您的性别：');
        alert('您的姓名是:' + name + '\n' + '您的年龄是:' + age + '\n' + '您的性别是:' + sex + '\n')
</script>