【前端专栏--JS】第一章（二）：变量与常量
CSDN 2024-07-30 14:33:01 阅读 58
本专栏内容为：前端专栏 记录学习前端，分为若干个子专栏，html js css vue等
💓博主csdn个人主页：小小unicorn
⏩专栏分类：js专栏
🚚代码仓库：小小unicorn的代码仓库🚚
🌹🌹🌹关注我带你学习编程知识
二
变量变量是什么变量的基本使用：变量的声明：
变量赋值练习：
更新变量声明多个变量练习1练习2
变量的本质变量命名规则与规范练习1
拓展1---let与var的区别拓展2---数组
常量
变量
变量是什么
变量就是计算机中用来存储数据的一个“容器”，他可以让计算机变得有记忆，通俗一点就是，变量就是一个状东西的盒子
变量的基本使用：
变量的声明：
要想使用变量，首先就需要创建变量
声明变量有两部分构成：声明关键字，变量名（标识）let即关键字，所谓关键字是系统提供的专门用来声明变量的词语
距离：
let age
我们声明了一个age变量
-age即变量的名称，也叫标识符
变量赋值
定义一个变量后，你就能够初始化他（赋值）。
当然，也可以在声明的同时进行赋值，这叫做初始化：
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<script>
//变量的使用
//声明一个年龄变量
let age
//赋值
age = 18
//打印一下
document.write(age)
//声明的同时进行赋值 -> 变量的初始化
let age1 = 20
//打印一下
document.write(age1)
</script>
</body>
</html>
练习：
代码展示：
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<script>
//小案例
let num = 20
let uname = "张三"
//控制台输出
console.log(num)
console.log(uname)
</script>
</body>
</html>
更新变量
变量赋值后，还可以通过简单的给他一个不同的值来更新他
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<script>
//变量的使用
//声明一个年龄变量
let age
//赋值
age = 18
//打印一下
document.write(age)
//变量的更新
age = 19
document.write(age)
//不允许这样更新
//let age = 20
</script>
</body>
</html>
声明多个变量
变量赋值后，还可以通过简单的给他一个不同的值来更新他
语法：多个变量中间用逗号隔开
代码展示
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<script>
//变量的使用
//声明一个年龄变量
let age
//赋值
age = 18
//打印一下
document.write(age)
//变量的更新
age = 19
document.write(age)
//不允许这样更新
//let age = 20
//声明的同时进行赋值 -> 变量的初始化
let age1 = 20
//打印一下
document.write(age1)
//声明多个变量
let a = 10,name = "李四"
document.write(a,name)
//不建议这样写，可读性不好
</script>
</body>
</html>
练习1
代码展示
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<script>
//案例分析1
//输出用户名案例
//用户输入 //内部处理
let uname = prompt("请输入用户姓名：")
//单击clt c clt v
//用户输出
document.write(uname)
</script>
</body>
</html>
练习2
代码展示
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<script>
//案例分析2
//交换两个变量
let num1=10
let num2=20
document.write("交换前结果：")
document.write(num1, num2)
let temp
temp = num1
num1 = num2
num2 = temp
document.write("交换后结果：")
document.write(num1, num2)
</script>
</body>
</html>
变量的本质
内存：计算机中存储数据的地方，相当于一个空间变量本质：是程序在内存中申请的一块用来存放数据的小空间
变量命名规则与规范
练习1
代码展示：
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<script>
//案例分析
let uname = prompt('请输入姓名：')
let age = prompt('请输入年龄：')
let gender = prompt('请输入性别：')
document.write(uname, age , gender)
</script>
</body>
</html>
拓展1—let与var的区别
拓展2—数组
数组：一种将一组数据存储在单个单个变量名下的优雅方式
语法：
<code>let 数组名 = [数据1，数据2，.....,数据n]
代码展示：
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<script>
//1.声明数组 ->数组是有序的
let arr=['张三','李四','王五','程序猿']
//2.使用数组
//完整打印
document.write(arr)
//打印程序猿
document.write(arr[3])
//数组长度=索引长度+1
document.write(arr.length)
</script>
</body>
</html>
常量
概念：使用const声明的变量称为“常量”使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let命名规范：和变量一致
变量使用：
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<script>
//常量
//常量声明的时候必须赋值->也就是初始化
const PI = 3.14
//输出这个常量
document.write(PI)
</script>
</body>
</html>
注意：常量不允许重新赋值，声明的时候必须赋值（初始化）小技巧：不需要重新赋值的数据使用const
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。