3、前端笔记-JS-变量

MY Daisy

已于 2022-12-24 18:04:03 修改

阅读量870

点赞数

分类专栏： js 文章标签：前端 javascript 开发语言

于 2022-12-24 00:15:01 首次发布

本文链接：https://blog.csdn.net/Ambition_ZM/article/details/128425505

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、什么是变量

变量是用于存放数据的容器，可以通过变量名获取数据
本质：变量是程序在内存中申请的一块用来存放数据的空间

2、变量的使用

2.1 声明变量和赋值

1、声明变量
2、给变量赋值

var:JS关键字，用来声明变量。使用这个关键字后，计算机会自动为变量分配内存空间（仅在栈上分配，赋值后真实分配）

//声明变量
var age;//声明一个名称是age的变量
//给变量赋值
age=10;

<!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;
        //给变量赋值
        age=10;
        console.log(age);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2.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>
    <script>
        //声明变量
        var age;
        //给变量赋值
        age=10;
        console.log(age);
        //变量初始化
        var sex='女';
        console.log(sex);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

3、变量的使用

浏览器上让用户输入姓名，提交后展示用户姓名

<!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 user_name=prompt("请输入您的姓名：");
        //展示用户输入的姓名
        alert("您的名字是："+user_name)
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

4、变量语法扩展

更新变量

var user_name="zhangsan";
user_name="lisi";

声明多个变量

多个变量名之间逗号隔开

var age=18,
	user_name="lisi",
	salary=2000;

<!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,
            user_name="lisi";
        console.log(age,user_name)
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

只声明不赋值

结果是undefined–未定义的

<!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,
            user_name="lisi";
        console.log(age,user_name);
        var salary;
        console.log(salary);
    </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,
            user_name="lisi";
        console.log(age,user_name);
        var salary;
        console.log(salary);
        console.log(idcard);
    </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,
            user_name="lisi";
        console.log(age,user_name);
        var salary;
        console.log(salary);
        // console.log(idcard);
        my_weight=100;
        console.log(my_weight);
    </script>

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

在这里插入图片描述

5、变量命名规范

在这里插入图片描述
尽量不要使用name做变量名，有的浏览器对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 age=18,
            user_name="lisi";
        console.log(age,user_name);
        var salary;
        console.log(salary);
        // console.log(idcard);
        my_weight=100;
        console.log(my_weight);
        console.log(name);
    </script>

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

在这里插入图片描述

6、练习

交换两个变量的值
设置一个临时变量

<!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 tmp;
        var apple1='青苹果';
        var apple2='红苹果';
        tmp=apple1;
        apple1=apple2;
        apple2=tmp;
        console.log(apple1);
        console.log(apple2);
    </script>
</head>
<body>
    
</body>
</html>