变量系列

161 阅读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>
</head>

<body>
    <script>
        // 我的姓名
        let nome; // 创建变量
        nome = '某某'; // 变量赋值
        console.log(nome) // 变量使用

        // 我的爱好
        let hobby; // 创建变量
        hobby = '吃';  // 变量赋值
        console.log(hobby)    // 变量使用

        // 我的身高
        let width;  // 创建变量
        width = 18; // 变量赋值
        console.log(width) // 变量使用
         // 同时声明多个变量
        let figure = '18',
            nome = '张三'
        // 输出变量连写
        console.log(figure, nome)
    </script>
</body>

</html>

1.变量的交换

简单来说就是创建一个空盒子,让他保护其他一个盒子的东西不受污染,然后再交换到需要的盒子上面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>03-变量的交换.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      /* 
      1 有两个变量  实现交换他们的值 
        num1 =  10      num2 = 20

        经过程序的运作 

        num1 = 20  num2 = 10 
      
       */

      // //  1 声明两个变量
      // let num1 = 10,
      //   num2 = 20;

      // // 2 错误的演示
      // num1 = num2;  //  num1 和 num2 = 20
      // num2 = num1;  //  num2 = num1

      // console.log(num1);
      // console.log(num2);

      // 1 要创建三个变量
      let num1 = 101,
        num2 = 202,
        temp;

      // 2 设置 空的变量 存放num1的值
      temp = num1;

      // 3 设置num1 等于 num2
      num1 = num2;

      // 4 设置num2 等于之前num1的值(temp)
      num2 = temp;

      console.log(num1);
      console.log(num2);
      // 5 小结
      // 思路在于 要多创建一个变量 来存放临时的数据 即可 
    </script>
  </body>
</html>

2.变量的规则和规范

理解:规则就是要遵守的,不然报错;

​ 规范就是行业默认的行为准则,不这样做不利于自己以后的工作开展,要养成这样的习惯才行。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>04-变量的规则和规范.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <!-- 
      规则 
      不遵守就是出错   “不合法”
      
     -->

    <script>
      // 创建一个变量 名字就叫做 let 、var 、 if 、 for 。。。内置的关键字 都不能使用
      //  let for = 123;

      // 符号也是ok
      let _hello = '123'; // 下划线开头
      let $hello = '123'; // $
      let hello = '123'; // 字母开头
      // let 123bac="123"  // 不能以数字开头

      // 区分大小写

      let USER = '用户1'; // 大写 单独
      let user = '用户2'; // 小写 单独

      // 最后 初学者还不太会创建变量和起那些名字
      // 多学习老师的命名即可
      // 多敲上课的代码的时候 命名规则 自然就熟悉了

      // 命名有意义
      // let a,b,c,d; // 不推荐 !!

      let height = '100';
      // 如果变量单词比较多
      let userName = '姓名'; // 推荐的
      let userHeight = '100'; // 推荐的

      let shoppingSupermarketShop = '111'; // 小驼峰  首字母小写
      let ShoppingSupermarketShop = '111'; // 大驼峰  首字母大写
    </script>
  </body>
</html>

早上总结:

早上学了变量,变量转换,变量的规则和规范;数据类型:(数字类型,有数字没有字符串包着的都是数字类型;字符串类型,不管是什么被字符串包着的都是字符串类型;布尔类型,一个单词的缩写转换,有两个值,是或者否,true(处斯):是的意思, fales(fo斯):否的意思)

3.字符串类型和数据类型的加法

字符串类型和数据类型的加法结果是不一样的,字符串的加法是跟字一样,加了之后一排列,不会产生数学上的加法,如下

  // 字符串加法效果
        let money3 = '帅哥';
        let money4 = '你好呀';
        sun1 = money3 + money4;
        console.log(sun1)
得出的结果是:帅哥你好呀

而数据类型的加法才会产生数学上的加减乘除,如下

 // 数据类型加法效果
        let money = 100;
        let money2 = 200;
        sun = money + money2;
        console.log(sun)
结果是:300

4. typeof: 获取变量的类型,通过这个代码来知道是什么数据类型,写法如下

  // let num = 1;
        // let userName = prompt('靓仔');
        // let isRain = true;
        // let foods;
        // let money = null;

        // console.log(typeof num);  number类型,也就是数字类型
        // console.log(typeof userName); string  字符串类型
        // console.log(typeof isRain);boolean  布尔类型
        // console.log(typeof foods);undefined  未定义类型
        // console.log(typeof null);  对象类型也就是空类型  object
结论:就是在输出的括号里面加上 typeof 然后控制台会显示具体的数据类型 

5.隐式和显式转换数据类型

就是将原本不是数据类型的类型转换为数据类型,当然前提得是数字,如果是文字和字母会转化失败,显示NaN,隐式写法如下

    <script>
        // let num1 = 1;
        // let num2 = '2';

        // // console.log(num1+num2); // 3
        // // 隐式转换
        // // console.log(num1+num2); // 12// 答案

        // let num3 = num2 - 0;

        // console.log(typeof num3 ); // number
        // console.log(typeof num3 ); // string

        // 工作中 比较常用的隐式转换写法,将字符串类型转换为数字类型
        let num2 = '2';
        let num3 = num2 - 0; // num3 是一个数字类型
        console.log(typeof num3);

        // 最简洁的写法 //没有为什么 js内部就有这样的技巧  你知道会用即可 
        注意点:隐式转换,放加号的值是正数,放减号的值会变成负数,放乘除会代码错误
        let num4 = +num2; //在赋值的前面用上一个+号,也是可以的!
        console.log(typeof num4);/* 这样就变成数字类型了 */
    </script>

显式写法如下

<script>
        let num = '9.9'
        // 显式转换的三种方法
        // Number代表数据类型, 这种写法可以将字符串转换为数据类型, 转化失败会显示NaN
        num1 = Number(num) 
        // 整数转换  得出的值不会带小数点
        // num1 = parseInt(9.9)
        // 转换的值会保留小数点
        // num1 = parseFloat(9.9)
        console.log(typeof num1);
    </script>

6.显式和隐式转换字符串

字符串类型和数据类型相加会使对方也变成字符串类型,减乘除不会,显式和隐式写法如下

    <script>

        let num = 12
        // 2种显式转换字符串类型
        // 第一种 string字符串类型的意思,直接转换
        // str = String(num)  常用
        // str = num.toString();  常用
        // 隐式转换字符串类型,加一个字符串,因为两者相加有一方是字符串得出的结果都是字符串
        // str=12+'';  常用
        console.log(typeof str);
        // 总结:工作那个顺手用那个
    </script>

7.document.write的补充:单双引号只能用与一行写完的,多行的要用反引号,就是官方叫法标准模板