JavaScript学习文档（2）：数据类型、数据类型转换、运算符

码农_小文

已于 2024-08-09 00:00:08 修改

阅读量644

点赞数 24

文章标签：学习

于 2024-08-08 23:59:35 首次发布

本文链接：https://blog.csdn.net/m0_58433849/article/details/141038290

版权

一、数据类型

1、为什么需要数据类型

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

2、变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10； //数字型

var areyouOK = ‘是的’；字符串

示例代码如下：

    <script>
        // int num = 10;  java 
        // var num; // 这里的num 我们是不确定属于哪种数据类型的
        var num = 10; // num 属于数字型 
        // js 的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
        var str = 'pink'; // str 字符串型
        // js是动态语言 变量的数据类型是可以变化的
        var x = 10; // x 是数字型 
        x = 'pink'; // x 字符串型
    </script>

3、数据类型的分类

JS把数据类型分为两类︰

简单数据类型（ Number, string,Boolean , Undefined,Null )
复杂数据类型（ object)

（1）简单数据类型

数字型：

示例代码如下：

    <script>
        var num = 10; // num 数字型 
        var PI = 3.14 // PI 数字型
        // 1. 八进制  0 ~ 7  我们程序里面数字前面加0 表示八进制
        var num1 = 0o10;
        console.log(num1); //  010  八进制 转换为 10进制 就是  8 
        var num2 = 0o15;
        console.log(num2);
        // 2. 十六进制  0 ~ 9  a ~ f    #ffffff  数字的前面加 0x 表示十六进制
        var num3 = 0x9;
        console.log(num3);
        var num4 = 0xa;
        console.log(num4);
        // 3. 数字型的最大值
        console.log(Number.MAX_VALUE);
        // 4. 数字型的最小值
        console.log(Number.MIN_VALUE);
        // 5. 无穷大
        console.log(Number.MAX_VALUE * 3); // Infinity 无穷大  
        // 6. 无穷小
        console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷大
        // 7. 非数字
        console.log('pink老师' - 100); // NaN
    </script>

字符串型：（String）

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

因为HTML标签里面的属性使用的是双引号，JS这里我们更推荐使用单引号。（区分）

字符串引号嵌套

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双)

字符串转义符

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

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

示例代码如下：

    <script>
        // 'pink'    '12'   'true'
        var str = '我是一个"高富帅"的程序员';
        console.log(str);
        // 字符串转义字符  都是用 \ 开头 但是这些转义字符写道引号里面
        var str1 = "我是一个'高富帅'的\n程序员";
        console.log(str1);
    </script>

弹出网页警示框案例：

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

字符串拼接代码如下：

    <script>
        // 1. 检测获取字符串的长度 length 
        var str = 'my name is andy';
        console.log(str.length); // 15
        // 2. 字符串的拼接 +  只要有字符串和其他类型相拼接 最终的结果是字符串类型
        console.log('沙漠' + '骆驼'); // 字符串的 沙漠骆驼
        console.log('pink老师' + 18); // 'pink老师18'
        console.log('pink' + true); // pinktrue
        console.log(12 + 12); // 24 非字符串拼接
        console.log('12' + 12); // '1212'
    </script>

字符串显示年龄案例代码如下：

    <script>
        // 弹出一个输入框（prompt)，让用户输入年龄（用户输入）
        // 把用户输入的值用变量保存起来,把刚才输入的年龄与所要输出的字符串拼接 （程序内部处理）
        // 使用alert语句弹出警示框（输出结果）
        var age = prompt('请输入您的年龄');
        var str = '您今年已经' + age + '岁了';
        alert(str);
    </script>

布尔型（Boolean）

布尔类型有两个值: true和false ，其中true表示真(对)，而false表示假(错)。

示例代码如下：

    <script>
        var flag = true; // flag 布尔型 
        var flag1 = false; // flag1 布尔型
        console.log(flag + 1); // true 参与加法运算当1来看
        console.log(flag1 + 1); // false 参与加法运算当 0来看
        // 如果一个变量声明未赋值 就是 undefined 未定义数据类型
        var str;
        console.log(str);
        var variable = undefined;
        console.log(variable + 'pink'); // undefinedpink
        console.log(variable + 1); // NaN  undefined 和数字相加 最后的结果是 NaN
        // null 空值
        var space = null;
        console.log(space + 'pink'); // nullpink
        console.log(space + 1); // 1
    </script>

4、检测变量数据类型

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

示例代码如下：

    <script>
        var num = 10;
        console.log(typeof num); // number
        var str = 'pink';
        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
        // prompt 取过来的值是 字符型的
        var age = + prompt('请输入您的年龄');
        console.log(age);
        console.log(typeof age);
    </script>

二、数据类型转换

1、什么是数据类型转换

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

我们通常会实现3种方式的转换∶

转换为字符串类型
转换为数字型
转换为布尔型

（1）转换为字符串型

示例代码如下：

    <script>
        // 1. 把数字型转换为字符串型 变量.toString()
        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>

（2）转换为数字型

注意parselnt和parseFloat单词的大小写

隐式转换是我们在进行算数运算的时候，JS自动转换了数据类型

计算年龄案例代码如下：

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

简单加法器案例代码如下：

    <script>
        // 先弹出第一个输入框，提示用户输入第一个值  保存起来
        // 再弹出第二个框，提示用户输入第二个值  保存起来
        // 把这两个值相加，并将结果赋给新的变量（注意数据类型转换）  
        // 弹出警示框（alert) ， 把计算的结果输出 （输出结果）
        var num1 = prompt('请您输入第一个值：');
        var num2 = prompt('请您输入第二个值：');
        var result = parseFloat(num1) + parseFloat(num2);
        alert('您的结果是:' + result);
    </script>

（3）转换为布尔型

代表空、否定的值会被转换为false ，如"、0、NaN、null、undefined
其余值都会被转换为true

示例代码如下：

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

三、运算符

1、运算符

运算符( operator )也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有∶

算数运算符
递增和递减运算符
赋值运算符
逻辑运算符
比较运算符

2、算数运算符

概念︰算术运算使用的符号，用于执行两个变呈或值的算术运算。

示例代码如下：

    <script>
        console.log(1 + 1); // 2
        console.log(1 - 1); // 0
        console.log(1 * 1); // 1
        console.log(1 / 1); // 1
        // 1. % 取余 （取模）  
        console.log(4 % 2); // 0
        console.log(5 % 3); // 2
        console.log(3 % 5); // 3
        // 2. 浮点数 算数运算里面会有问题
        console.log(0.1 + 0.2); // 0.30000000000000004
        console.log(0.07 * 100); // 7.000000000000001
        // 3. 我们不能直接拿着浮点数来进行相比较 是否相等
        var num = 0.1 + 0.2;
        console.log(num == 0.3); // false
    </script>

3、递增递减运算符

如果需要反复给数字变量添加或减去1，可以使用递增（++)和递减(-- )运算符来完成。

在JavaScript中，递增（++)和递减(--)既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变呈后面时，我们可以称为后置递增（递减）运算符。

注意:递增和递减运算符必须和变量配合使用。

前置递增示例代码如下：

    <script>
        // 1. 想要一个变量自己加1   num = num + 1 比较麻烦
        var num = 1;
        num = num + 1; // ++num
        num = num + 1;
        console.log(num); // 3
        // 2. 前置递增运算符  ++ 写在变量的前面
        var age = 10;
        ++age; // 类似于 age = age + 1
        console.log(age);
        // 3. 先加1  后返回值
        var p = 10;
        console.log(++p + 10);
    </script>

后置递增示例代码如下：

    <script>
        var num = 10;
        num++; // num = num + 1    ++num;
        console.log(num);
        // 1. 前置自增和后置自增如果单独使用 效果是一样的
        // 2. 后置自增 口诀：先返回原值 后自加1 
        var age = 10;
        console.log(age++ + 10);
        console.log(age);
    </script>

4、比较运算符

概念︰比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值( true / falsc )作为比较运算的结果。

示例代码如下：

    <script>
        console.log(3 >= 5); // false
        console.log(2 <= 4); // true
        //1. 我们程序里面的等于符号 是 ==  默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等就可以
        console.log(3 == 5); // false
        console.log('pink老师' == '刘德华'); // flase
        console.log(18 == 18); // true
        console.log(18 == '18'); // true
        console.log(18 != 18); // false
        // 2. 我们程序里面有全等 一模一样  要求 两侧的值 还有 数据类型完全一致才可以 true
        console.log(18 === 18);
        console.log(18 === '18'); // false
    </script>

5、逻辑运算符

概念∶逻望运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

示例代码如下：

    <script>
        // 1. 逻辑与 &&  and 两侧都为true  结果才是 true  只要有一侧为false  结果就为false 
        console.log(3 > 5 && 3 > 2); // false
        console.log(3 < 5 && 3 > 2); // true
        // 2. 逻辑或 || or  两侧都为false  结果才是假 false  只要有一侧为true  结果就是true
        console.log(3 > 5 || 3 > 2); // true 
        console.log(3 > 5 || 3 < 2); // false
        // 3. 逻辑非  not  ！ 
        console.log(!true); // false
    </script>

6、赋值运算符

概念:用来把数据赋值给变晕的运算符。

示例代码如下：

    <script>
        var num = 10;
        // num = num + 1;   num++
        // num = num + 2; // num += 2;
        // num += 2;
        num += 5;
        console.log(num);
        var age = 2;
        age *= 3;
        console.log(age);
    </script>

7、运算符优先级

示例代码如下：

    <script>
        //  ++num   !num     2 + 3
        console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true)
        var num = 10;
        console.log(5 == num / 2 && (2 + 2 * num).toString() === '22');
        console.log('-------------------');
        var a = 3 > 5 && 2 < 7 && 3 == 4;
        console.log(a);

        var b = 3 <= 4 || 3 > 1 || 3 != 2;
        console.log(b);

        var c = 2 === "2";
        console.log(c);

        var d = !c || b && a;
        console.log(d);
    </script>

码农_小文

关注

24
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习文档（2）：数据类型、数据类型转换、运算符

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。我们通常会实现3种方式的转换∶转换为字符串类型转换为数字型转换为布尔型。
复制链接

扫一扫