变量（变量的定义、变量在内存中的存储、变量的使用（声明变量，赋值，变量的初始化，案例一：定义卡卡西，案例二：使用输入的信息）、变量语法扩展（更新变量，定义多个变量，声明变量特殊情况），变量命名规范）

最新推荐文章于 2024-10-27 15:48:27 发布

程序员shy

最新推荐文章于 2024-10-27 15:48:27 发布

阅读量744

点赞数 1

分类专栏：《JavaScript》第三站文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/junyi727/article/details/127824343

版权

《JavaScript》第三站专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中变量的概念，包括变量作为数据容器的性质、声明变量与赋值的过程、变量初始化的步骤。通过实例展示了如何声明、赋值和更新变量，以及定义多个变量的方法。同时，强调了未声明或赋值变量的潜在问题，并提出了变量命名的规范。此外，还通过案例演示了如何交换变量值的操作。

摘要由CSDN通过智能技术生成

变量

变量的定义

变量就是存放数据的容器，我们通过变量名获取数据，数据可以修改

变量在内存中的存储

变量的使用

变量使用时分为两步：声明变量、赋值

声明变量

<!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>
        //声明一个变量名称为a var是JavaScript中的一个关键字，意义是声明一个变量
        var a;
    </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>
        //声明一个变量名称为a var是JavaScript中的一个关键字，意义是声明一个变量
        var a;
        //变量赋值
        a = 10;
        //在控制台输出变量a
        console.log(a);
    </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>
        //声明一个变量名称为a var是JavaScript中的一个关键字，意义是声明一个变量
        var a;
        //变量赋值
        a = 10;
        //在控制台输出变量a
        console.log(a);
        //变量初始化
        var tom = 666;
        console.log(tom);
    </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 name = '卡卡西';
        var address = '火影村';
        var age = 30;
        var email = 'kakaxi@itcast.cn';
        var money = 2000;
        console.log(name);
        console.log(address);
        console.log(age);
        console.log(email);
        console.log(money);
    </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 myname = prompt('请输入你的名字');
        //输出变量
        console.log(myname);
    </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 = 18;
        console.log(age);
        //更新变量
        age = 20;
        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 a = 1, b = 2, c = 3;
        var c,
            d,
            e = 10;
    </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>
        //会出现undefined
        var age;
        console.log(age);
    /*    //使用没有声明没有赋值的变量会报错 如果报错的话，程序就不会向后执行了
        console.log(tel);*/
        //不声明直接赋值虽然没出错，但是不提倡
        tem = 10;
        console.log(tem);
        tem = 20;
        console.log(tem);
    </script>
</head>
<body>
    
</body>
</html>

变量命名规范

这里注意：name不属于关键字，但是name在浏览器中通常有特殊含义，所以不要用这个变量名

案例一：交换

<!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 a = 1, b = 2, temp;
        //利用temp做临时变量交换a b的值
        console.log(a);
        console.log(b);
        temp = a;
        a = b;
        b = temp;
        console.log(a);
        console.log(b);
    </script>
</head>
<body>
    
</body>
</html>