小白学JavaScript的第二天-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_57271751/article/details/142364258

谢谢大家浏览，希望大家能给我多提提意见，有不对的地方大家畅所欲言，一定及时改正

二、变量

1-什么是变量

变量的概念：可以变化的量，用来保存数据（用一些符号来表示一些数据，这个符号就被成为变量名）
js作为一个弱语言类型，在定义变量是并不知带是什么数据类型，由赋值来决定
1. 强类型语言要求在使用变量之前必须明确声明其类型，且类型在运行时固定，不允许隐式类型转换。
2. 弱类型语言允许变量的类型根据上下文自动推断或隐式转换，变量类型可以随意改变。
3. 强类型语言通常提供更多类型安全性和错误检查，而弱类型语言会猜测程序员意图并进行类型转换以继续执行
4. 直接量和字面量：可以直接使用（如1，3.14，100）

2-变量的使用

声明变量（单变量，多变量）

方法一：先声明，在赋值

var a;
a=10;
var b,c,d;b=10,c=20,d=30;

单变量

var a;//声明一个变量 ，变量名为a
a=10;// 把10赋值给变量a
alert(a);//输出10
console.log("a="+a);//+ 起的拼接字符串的作用，变量不能加引号 a=10

多变量

var b,c; // 相当于 var b; var c;
b=20,c=30;

方法二:声明变量的同时，即赋值(变量初始化)

var a=10;
var b=20,c=30;

//变量初始化
var a1=100;
var b1=200,c1=300;
console.log("a1="+a1,"b1="+b1,"c1="+c1);//输出结果a1=100,b1=200,c1=300

3-变量的重新赋值

对变量进行赋值以后，可以再次重新对变量进行赋值（变量的结果，以最后一次赋值为准）

var a=10;
console.log("a="+a);//输出结果为a=10
a=100;//对a重新赋值 输出结果为a=100
a="hello";
console.log("a="+a);//再次对a重新赋值输出结果为a=100

4-变量使用的特殊情况

情况一：声明变量未赋值

var a;
console.log(a);// undefined 未定义

情况二：先输出，在定义变量
```
console.log(b);//undefined  未定义
var b=10;
```
```
var b;
console.log(b);//undefined  未定义
b=10;
```
变量提升，所以不会出现报错

变量提升但赋值不会提升
情况三：因为没有声明变量，赋值不会提升
```
console.log(c);//出现报错
c=100;
```
情况四：直接输出一个变量
```
console.log(c);
```
情况五：直接对一个变量赋值不声明
```
e=200;
console.log(e)//输出结果为200
```
但不推荐这种形式

5-变量标识符的命名规范

可以使用字母、数字、_下划线、$
不能以数字开头
严格区分大小写 age Age;
推荐使用小驼峰命名法和下划线命名法userName
见名知意 score gender
不使用关键字和保留字 if else case

关键字和保留字

关键字：是指 JS本身已经使用了的字，不能再用它们充当变量名、方法名。

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。

6-let、const、var声明变量的区别

let 声明变量只能声明一次（不能重复声明） var可以重复声明，但不建议
```
var a=10;
var a=20;
let a=10;
let a=20; //会出现报错
```
let 没有变量声明提升 var 可以变量声明提升
let 有块级作用域 { } var 没有块级作用域
const 是声明常量，不能修改，其同let

例题

例题1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Task03</title>
    <script>
      var name = prompt("请输入你的名字");
      var age = prompt("请输入你的年龄");
      var sex = prompt("请输入你的性别");
      console.log("用户的名字:" + name);
      console.log("用户的年龄:" + age);
      console.log("用户的性别:" + sex);
    </script>
  </head>
  <body></body>
</html>

例题2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Task04</title>
    <script>
      var age = prompt("你现在多少岁了？");
      age = Number(age);
      console.log("据我估计，五年后，你可能会是" + (age + 5) + "岁了");
    </script>
  </head>
  <body></body>
</html>

例题3

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Task05</title>
    <script>
      var boy = "杨过";
      var girl = "小龙女";
      var name;
      name = boy;
      boy = girl;
      girl = name;
      document.write("小龙女:" + girl + "<br>");
      document.write("杨过:" + boy);
    </script>
  </head>
  <body></body>
</html>

例题4

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Task01</title>
    <script>
      var name = "卡卡西",
        age = 30,
        mailbox = "kakaxi@beiyou.com",
        home = "火影村",
        salary = 20000;

      document.write(
        "我叫" +
          name +
          "，我住在" +
          home +
          "，我今年" +
          age +
          "岁了，我的邮箱是" +
          mailbox +
          "，我的工资是" +
          salary
      );
    </script>
  </head>
  <body></body>
</html>

例题5

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Task02</title>
    <script>
      var name = prompt("请输入你的名字");
      alert("名字:" + name);
    </script>
  </head>
  <body></body>
</html>