HTML 学习笔记 JavaScript（数据类型）

2022-12-03 11:01:15

1.数据类型的简介

1.1 为什么需要数据类型

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

数据类型就是数据的类别。

1.2 变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型，变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。

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

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script>

        var num; //暂未确定类型

        // 在js中 数据的类型 是根据等号右边的值在运行中确定的

        num = 10; // 确定类型是数字类型

        //js 的数据类型是可变的

        var x = 10; //数据类型

        x = '哈哈哈'; //变成了string类型

    </script>

</head>

<body>

1.3 数据类型的分类

js八数据类型分为两类：

简单的数据类型(Number String,Boolean,Underfined,Null)

复杂的数据类型(object)

1.3.1 数字型 Number

数字的进制:

常见的有二进制八进制十进制十六进制

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>数据类型</title>

    <script>

        //八进制 0-7 我们程序里 数字前面加0表示八进制

        var num1 = 010 //八进制 转换成10进制 是8 1*8的1次方 + 0  * 8的0次方 = 8

        console.log(num1)

        var num2 = 012; //十进制为10 1*8的1次方 + 2 * 8的0次方 = 10

        console.log(num2)

        //16进制 0 - 9 a-f 前面加0x表示16进制

        var num2 = 0x9 //就是9

        var num4 = 0x1100 //就是  16的3次方 + 16的二次方 + 0 + 0 = 4352

        console.log(num4)

        //二进制 前面加0b 表示二进制

        var num5 = 0b1110; //2的三次方 + 2的二次方 + 2的一次方 + 0 = 14

        console.log(num5)

        // js中的数字的最大值

        console.log(Number.MAX_VALUE); //1.7976931348623157e+308

        //最小值

        console.log(Number.MIN_VALUE); //5e-324

        //无穷大

        console.log(Number.MAX_VALUE * 2)

        //无穷小

        console.log(-Number.MAX_VALUE * 2)

        //三个特殊的值

        alert(Infinity); //无穷大  就是Number.MAX_VALUE * 2

        alert(-Infinity);//无穷小 就是-Number.MAX_VALUE * 2

        alert(NaN); //not a  number 非数字

    </script>

</head>

方法 isNaN() 用来判断是否是非数字如果是数字返回的是false 非数字返回的是 true

1.3.2 字符串型

字符串型可以是引号中的任意文本其语法为双引号""和单引号''

字符串引号的嵌套

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>字符串引号的嵌套</title>

    <script>

        // 会报错

        // var msg = '我是'光荣的'程序员'

        // 正确的

        var msg = "我是'光荣的'程序员"

        var msg1 = '我是"光荣的"程序员'

        // 错误的 不能单双引号搭配

        // var msg2 = '我是程序员"

        // 总结 JS 可以使用单引号嵌套双引号 或者使用双引号嵌套单引号

    </script>

</head>

字符串的转义符

类似html里面的特殊字符字符串中也有特殊字符我们称之为转义符

转义符都是\开头的常用的转义符及其说明如下：

\n 换行符 n是newline的意思

\\ 斜杠\

\' 单引号

\" 双引号

\t tab缩进

\b 空格 b是blank的意思

字符串长度属性length

字符串的拼接:多个字符串之间可以使用+进行拼接,其拼接方式为:

字符串 + 字符串 = 拼接之后的新字符串

拼接前会把与字符串相加的任何类型转换成字符串再拼接成一个新的字符串.

1.3.3 boolean型

布尔值有两个值: true 和 false 其中true表示真 false表示假

布尔值如果参与运算 true被当作1来看 false被当作0来看

1.3.4 undefined 和 Null

如果一个变量声明未赋值就是undefined 未定义数据类型

undefined和数字相加最后结果是 NaN 非数字

Null 空值

Null 和数字相加等于数字本身。

2 获取变量的数据类型

2.1 获取检测变量的数据类型

typeof 可用来获取检测变量的数据类型

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script>

        var num = 10;

        console.log(typeof num); //Number

        var str = '哈哈哈'

        console.log(typeof str); // String

    </script>

</head>

也可以通过chrome控制台看类型

Number 蓝色字符串黑色 boolean 淡蓝色 undefined null 是灰色

3 数据类型的转换

使用表单 prompt 获取过来的数据默认是字符串类型的此时就不能直接的进行加减乘除运算而需要转换变量的数据类型

通俗来说就是把一种数据类型的变量转换为另一种数据类型。

3.1转换为字符串类型

案例:

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script>

        var num = 1;

        var numStr = num.toString();

        console.log(numStr);

        console.log(typeof numStr);

        //第二个方法

        var num1 = 2;

        let num1Str = String(num1);

        console.log(typeof num1Str);

        //第三个方法 利用 + 拼接字符串的方法进行转换 隐式转换

        var num2 = 10;

        var num2Str = num2 + '';

        console.log(typeof num2Str);

    </script>

</head>

3.2转换为数字类型

案例:

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>数字类型</title>

    <script>

        var age = prompt('请输入您的年龄');

        let numAge = parseInt(age);

        console.log(typeof numAge);

        //变成Int类型 为3

        console.log(parseInt('3.14'));

        //还是3

        console.log(parseInt('3.94'));

        //得到120  去掉单位

        console.log(parseInt('120px'));

        // NaN 不能进行转换

        console.log(parseInt('px120'));

        //转换为Float类型

        var floatAge = parseFloat('3.14');

        console.log(typeof floatAge);

        //也可以这样操作

        console.log(parseFloat('120px'));

        //3 Number() 进行强制转换

        var str1 = Number(123);

        console.log(typeof str1);

        //4 利用算数运算 - * / 隐式转换

        var num12 = '12' - 0;

        console.log(typeof num12);

        var num13 = '13' * 1;

        console.log(typeof num13);

        var num14 = '14' / 1;

        console.log(typeof num14);

        //3

        var num22 = '123' - '120';

        console.log(num22);

    </script>

</head>

3.3转换为Boolean类型

只有一个方法 Boolean()

代表空否定的值会被转换为false 如 0 NaN null undefined

其余的值会被转换为true

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script>

        // 全部为false 其他的都为true

        console.log(Boolean(''))

        console.log(Boolean(0));

        console.log(Boolean(NaN));

        console.log(Boolean(null))

        console.log(Boolean(undefined));

    </script>

</head>

扩展:

解释性语言和编译性语言:

计算机不能理解任何除机器语言以外的语言，所以需要把程序员所写的程序语言编译成为机器语言才能执行程序。

程序语言编译成机器语言的工具被称为编译器。

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

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

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

js是解释性语言

编译性语言先把所有的菜做好才能上桌吃饭

解释性语言就像吃火锅边吃边涮同时进行

标识符

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

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

关键字

关键字是指语言本身已经使用了的字不能再使用他们充当变量名方法名

保留字

实际上就是预留的关键字意思是虽然现在不是关键字但是未来可能会成为关键字也不能使用他们充当变量名和方法名

码农公寓