您当前的位置：首页 > 计算机 > 编程开发 > JavaScript

JavaScript 运算符与数据类型转换详解

时间：02-05来源：作者：点击数：17

前言

本文将通过一系列代码示例详细解析 JavaScript 中的运算符、数据类型转换以及三元运算符的应用，帮助读者深入理解这些核心概念，并掌握它们在实际编程中的应用。

本文的内容主要分为以下几个部分：

运算符：介绍常见的运算符及其用法。
数据类型转换：探讨不同类型之间的转换规则。
三元运算符：详细介绍三元运算符的使用方法及其应用场景。
练习题：通过具体的练习题巩固所学知识。

一、运算符

基本运算符

JavaScript 提供了多种运算符，用于执行不同的操作。以下是一些常见的运算符：

算术运算符：+, -, *, /, %
赋值运算符：=, +=, -=, *=, /=, %=
关系运算符：>, <, >=, <=
相等运算符：==, ===, !=, !==
逻辑运算符：&&, ||, !
位运算符：&, |, ^, ~, <<, >>, >>>

示例代码

<!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>
</head>
<body>
    <script>
        // 算术运算符
        console.log(5 + 3); // 8
        console.log(5 - 3); // 2
        console.log(5 * 3); // 15
        console.log(5 / 3); // 1.6666666666666667
        console.log(5 % 3); // 2

        // 赋值运算符
        var a = 5;
        a += 3; // a = a + 3
        console.log(a); // 8

        // 关系运算符
        console.log(5 > 3); // true
        console.log(5 < 3); // false
        console.log(5 >= 3); // true
        console.log(5 <= 3); // false

        // 相等运算符
        console.log(5 == '5'); // true
        console.log(5 === '5'); // false
        console.log(5 != '5'); // false
        console.log(5 !== '5'); // true

        // 逻辑运算符
        console.log(true && false); // false
        console.log(true || false); // true
        console.log(!true); // false
    </script>
</body>
</html>

解析

算术运算符：用于基本的数学运算。
赋值运算符：简化赋值操作。
关系运算符：比较两个值的大小或相等性。
相等运算符：判断两个值是否相等，== 会进行类型转换，而 === 不会。
逻辑运算符：组合多个条件表达式。

二、数据类型转换

在 JavaScript 中，数据类型转换是非常常见的操作。以下是几种常用的数据类型转换方法：

隐式转换：自动进行的类型转换。
显式转换：通过特定的函数或语法进行的类型转换。

隐式转换

<!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>
</head>
<body>
    <script>
        console.log(typeof 3);  // 'number'
        console.log(typeof '3'); // 'string'
        console.log(typeof false); // 'boolean'
        console.log(typeof null); // 'object'  null是一个不是对象的对象
        console.log(typeof undefined); // 'undefined'
        console.log(typeof NaN); // 'number'  NaN是一个不是数字的数字
        console.log(typeof typeof 3); // 'string'
    </script>
</body>
</html>

显式转换

使用 `parseInt` 和 `parseFloat`

<!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>
</head>
<body>
    <script>
        console.log(parseInt('12.3.4')); // 12
        console.log(parseInt('3 a')); // 3
        console.log(parseInt('a345')); // NaN
        console.log(parseInt(3.4)); // 3
        console.log(parseInt('3' + 4)); // 34

        console.log(parseFloat('1.2.3.4')); // 1.2
        console.log(parseFloat('2 34')); // 2
        console.log(parseFloat('a1.2')); // NaN
        console.log(parseFloat('    32.4')); // 32.4
        console.log(parseFloat('')); // NaN
    </script>
</body>
</html>

使用 `Number`

<!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>
</head>
<body>
    <script>
        console.log(Number('3.4.5')); // NaN
        console.log(Number('3 4')); // NaN
        console.log(Number('2.3')); // 2.3
        console.log(Number('3a')); // NaN
        console.log(Number('')); // 0
        console.log(parseInt('')); // NaN
        console.log(parseFloat('')); // NaN
        console.log(Boolean(3)); // true
    </script>
</body>
</html>

解析

隐式转换：null 被认为是对象类型，NaN 是一个特殊的数字类型。
显式转换：parseInt 和 parseFloat 用于将字符串转换为整数和浮点数，Number 用于更广泛的数值转换。

三、三元运算符

三元运算符是一种简洁的条件表达式，格式为 条件 ? 表达式1 : 表达式2。如果条件为真，则返回表达式1的结果；否则返回表达式2的结果。

示例代码

<!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>
</head>
<body>
    <script>
        // 判断一个数是正数还是负数
        var i = parseInt(prompt('请输入一个整数：'));
        alert(i === 0 ? '既不是正数，也不是负数' : i > 0 ? '正数' : '负数');

        // 判断一个年份是闰年还是平年
        var i_year = parseInt(prompt('请输入一个年份：'));
        alert(i_year % 4 === 0 && i_year % 100 !== 0 || i_year % 400 === 0 ? '闰年' : '平年');

        // 判断一个数是偶数还是奇数
        var i = parseInt(prompt('请输入一个整数：'));
        alert(i % 2 ? '奇数' : '偶数');
    </script>
</body>
</html>

解析

判断正负数：根据用户输入的整数，使用三元运算符判断该数是正数、负数还是零。
判断闰年：根据用户输入的年份，使用三元运算符判断该年份是闰年还是平年。
判断奇偶数：根据用户输入的整数，使用三元运算符判断该数是奇数还是偶数。

解析

求三位数的和：分解用户输入的三位数，分别计算百位、十位和个位的和。
创建对象：使用 new 关键字创建不同类型的对象，并检查它们的类型。

四、练习题

为了巩固对运算符、数据类型转换和三元运算符的理解，下面提供一些练习题，并给出相应的答案。

练习题

判断一个数是正数还是负数

var i = parseInt(prompt('请输入一个整数：'));
alert(i === 0 ? '既不是正数，也不是负数' : i > 0 ? '正数' : '负数');

判断一个年份是闰年还是平年

var i_year = parseInt(prompt('请输入一个年份：'));
alert(i_year % 4 === 0 && i_year % 100 !== 0 || i_year % 400 === 0 ? '闰年' : '平年');

判断一个数是偶数还是奇数

var i = parseInt(prompt('请输入一个整数：'));
alert(i % 2 ? '奇数' : '偶数');

求一个三位数的和

var i = parseInt(prompt('请输入一个三位的正整数：'));
var h = parseInt(i / 100);
var t = parseInt(i % 100 / 10);
var a = i % 10;
var sum = h + t + a;
alert('和为：' + sum);