02 js语言基础——变量（下）

发布于：2022-12-20 ⋅ 阅读:(427) ⋅ 点赞:(0)
微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

目录

五、变量语法扩展

六、变量的命名规范

七、交换两个变量案例

五、变量语法扩展

 1.更新变量

        指的是一个变量被赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为主。

实现给变量myname更新赋值的操作。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var myname ='小明';
        console.log(myname);
    </script>
</head>
<body>
    
</body>
</html>

打印结果如下：

给myname重新赋值为“小红”。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var myname ='小明';
        console.log(myname);
        var myname ='小红';
        console.log(myname);
    </script>
</head>
<body>
    
</body>
</html>

打印结果如下：

 

2.同时声明多个变量

      同时声明多个变量时，只需要写一个var，多个变量之间使用英文逗号隔开。

var age = 10, name = '李成', sex = '男';

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1.更新变量
        var myname = '小明';
        console.log(myname);
        var myname ='小红';
        console.log(myname);
        //2.同时声明多个变量
        var age = 10,
            name = '李成',
            sex = '男';
        console.log(age);
        console.log(name);
        console.log(sex);
    </script>
</head>
<body>
    
</body>
</html>

打印结果如下：

 3.声明变量的特殊情况

3.1 只声明不赋值——结果为undefined，未定义

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1.更新变量
        var myname = '小明';
        console.log(myname);
        var myname ='小红';
        console.log(myname);
        //2.同时声明多个变量
        var age = 10,
            name = '李成',
            sex = '男';
        console.log(age);
        console.log(name);
        console.log(sex);
        //3.声明变量的特殊情况
        //3.1 只声明不赋值，结果为undefined，未定义的
        var address;
        console.log(address);
    </script>
</head>
<body>
    
</body>
</html>

打印结果如下：

 3.2 不声明不赋值——直接使用某个变量会报错

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1.更新变量
        var myname = '小明';
        console.log(myname);
        var myname ='小红';
        console.log(myname);
        //2.同时声明多个变量
        var age = 10,
            name = '李成',
            sex = '男';
        console.log(age);
        console.log(name);
        console.log(sex);
        //3.声明变量的特殊情况
        //3.1 只声明不赋值，结果为undefined，未定义的
        var address;
        console.log(address);
        //3.2不声明不赋值，结果为会报错
        console.log(gz);
    </script>
</head>
<body>
    
</body>
</html>

打印结果如下：

 3.3 不声明直接赋值使用——可以正常使用

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1.更新变量
        var myname = '小明';
        console.log(myname);
        var myname ='小红';
        console.log(myname);
        //2.同时声明多个变量
        var age = 10,
            name = '李成',
            sex = '男';
        console.log(age);
        console.log(name);
        console.log(sex);
        //3.声明变量的特殊情况
        //3.1 只声明不赋值，结果为undefined，未定义的
        var address;
        console.log(address);
        //3.2不声明不赋值，结果为会报错
        console.log(gz);
        //3.3不声明直接使用，结果为可以使用
        qq = 110;
        console.log(qq);
    </script>
</head>
<body>
    
</body>
</html>

打印结果如下：

*为什么打印结果没有更新呢？

  • 因为js语言是“写一句代码，执行一句代码”，因此如果前面有代码存在错误，那么该错误段后面的代码也不会被执行了。
  • 所以，解决办法是：将错误的代码注释掉。

修正代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1.更新变量
        var myname = '小明';
        console.log(myname);
        var myname ='小红';
        console.log(myname);
        //2.同时声明多个变量
        var age = 10,
            name = '李成',
            sex = '男';
        console.log(age);
        console.log(name);
        console.log(sex);
        //3.声明变量的特殊情况
        //3.1 只声明不赋值，结果为undefined，未定义的
        var address;
        console.log(address);
        //3.2不声明不赋值，结果为会报错
        //console.log(gz);
        //3.3不声明直接使用，结果为可以使用
        qq = 110;
        console.log(qq);
    </script>
</head>
<body>
    
</body>
</html>

打印结果如下：

综上所述，总结如下：

声明变量特殊情况
说明 结果
只声明，不赋值 undefined
不声明，不赋值，直接使用 报错
不声明，只赋值 可以正常使用

六、变量的命名规范

变量的命名规范有：

  • 由字母（A-Aa-z）、数字（0-9）、下划线（_）、美元符号（$）组成
  • 严格区分大小写。var app;和var App;是不一样的
  • 不能以数字开头。18age是错误的
  • 不能是关键字、保留字。for，var，while都是错误的
  • 变量名必须有意义。比如age
  • 遵守驼峰命名法：首字母小写，后面单词的首字母需要大写。比如：myFirstName

七、交换两个变量案例

       交换两个变量的值（实现思路：通过使用临时变量，用来做中间存储）

       实现：起初，变量apple1里存的是“青苹果”，变量apple2里存的是“红苹果”，要求实现，交换两个变量里的值，达到变量apple1里存的是“红苹果”，变量apple2里存的是“青苹果”的效果。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var temp;//1.首先声明一个临时变量temp
        var apple1 = '青苹果';
        var apple2 = '红苹果';
        temp = apple1;//2.将apple1里的值给temp
        apple1 = apple2;//3.将apple2里的值给apple1
        apple2 = temp;//4.将temp里的值给apple2
        console.log(apple1);
        console.log(apple2);

    </script>
</head>
<body>
    
</body>
</html>

注意：在进行值的交换时，比如temp = apple1;需要注意，是等号右边的变量里的值赋给等号左边变量里的值。

打印结果如下：

此时已实现，两个变量的值的交换。 

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布