js 基础 02

橙子兄
130 阅读3分钟

js 基础 02天

变量概念

  • 可以理解成是计算机储存数据的 “ 容器”. （一个储存数据的盒子）

作用:

  1. (可以让计算机变得有记忆，用过这些记忆来储存数据)

1648232822948.png

变量的基本使用

1.创建变量

创建变量的 专业说法 （声明变量 ）

  • 两部分构成： 声明关键字，变量名（标识）
  • let 即是关键字 （let：允许，许可，让，要 ），所谓关键字就是系统提供的专门用力声明 （定义）变量的词。
  • 变量名：即变量的名称，也叫标识符

1648232931923.png

2.变量赋值

  • 定义了一个变量后，你就能初始化它（赋值）。在变量名之后跟上一个 = ，然后是数值。

1648233176586.png

3.更新变量

  • 变量赋值后，还可以通过简单地给它一个不同地值来更新它.
  • 注意； let 不允许多次声明一个变量
<body>
    


<script>
    // 声明age 变量， 同时在里面放 18 这个数据
    let age = 18
    //变量里地数值被更改为19
        age = 19
    //  页面输出的结果为19
        document.write(age)




    // 下面这个是错误的
    // 声明变量
    let age1 = 18
    //  这里是不允许多次声明一个变量的
    let age1 = 19
    // 输出会报错
    document.write(age)
</script>
</body>

4.变量的使用

代码实现

<script>
        // 变量  我的姓名
        let username;  //创建变量  变量名：（userName）
        username = '大聪明'; // 变量赋值 
        console.log(username);  //变量的使用

        //  变量   我的身高
        let height;  //  创建变量
        height = '199999mm' ;  // 变量赋值
        console.log(height); // 变量的使用

        //变量  我的体制
        let weight;  //创建变量
        weight = '300';  //变量赋值
        console.log(weight);  // 变量的使用
    </script>
</body>

变量的本质

  • 内存：计算机中存储数据的地方，相当于一个空间
  • 变量：是程序在内存中申请一块永安里存放数据的小空间

1648264939389.png

变量命名规则与规范

规则

  • 必须遵守规则，不然会报错
  • 不能用关键字 关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。如；let 、var、if、for等
  • 只能用下划线、字母、数字、$组成、且数字不能开头
  • 字母严格 区分大小 如 Age 和 age 是不同的变量

规范

  • 起名要有意义 （见名知意）
  • 用小驼峰命名法：第一个单词首字母小写，后面每个单词首字母大写。如：userName

js 整体两大 数据类型

1648266648161.png

基本数据类型

数字类型（number）
  • js 中的正数、负数、小数等统一为 数字类型
  • 注意事项!

1648266469997.png

字符串型（string）
  • 通过单引号（' '）、双引号（" "）或反引号 ( ` ) 包裹的数据都叫字符串，单双引号没有本质上的区别，推荐是用单引号。

1648266957230.png 字符串拼接：

<script>
    
    document.write('我叫' + '大聪明')  //  我叫大聪明

    let uname = '大聪明'
    let song = '发量惊人'
    document.write(uname + song )   //   大聪明发量惊人
</script>

  1. 模板字符串

    • 拼接字符串和变量

    • 在没有它之前，要拼接变量比较麻烦

    • <script>  
    document.write('我的姓名是' + userName + '我的年龄是' + 'age')
</script>

  2. 符号

    • ``
    • 输引文下的反引号
    • 内容拼接变量时，用${ }包住变量
     <script>
        // 1 用户名
        let userName = prompt('您的姓名');
        // 2 年龄
        let age = prompt('你的年龄');

        // 3 输出
        document.write(`我的姓名是${userName}, 我的年龄是${age}`)
    </script>
布尔型 （boolean）

  • 表示肯定或否定时在计算机中对应的是布尔类型数据

  •  <script>
        //   boolean 布尔 只有两种值  真 true   假 false

        // 你吃饭了吗
        let isEat = true;

        //你睡觉了没有

        let isSleep = false;
       
    </script>
未定义型 （undefined）

  • 未定义是比较特殊的类型，只有一个值 undefined。

  • 只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少 [ 直接] 为某个变量赋值为 undefined。

  • <script>
    
    let age     //  声明变量但是未赋值
    document.write(age)     //    输出  undefined
</script>

  • 工作中的使用场景：

    我们开发中经常声明一个变量，等待传送过来的数据。

    如果我们不知道这个数据是否传递过来， 此时我们可以通过检测这个变量是不是 undefined ，就判断用户是否有数据传递过来。

1648269699022.png

空类型 （ null ）

1.null 表示 值 为空的

<script>
    
    let odj = null
</script>

2.nil 和 undefined 区别：

   1.  undefined    表示没有赋值
      2.  null 表示赋值了，但是内容为空的

3.null 开发中的使用场景

  1. 官方解释：把 null 作为尚未创建的对象
  2. 大白话：将来有个变量里面存放的是一个对象， 但是对象还没创建好， 可以先给一个 null

typeof 检测数据类型

 <script>
        let num = 1;
        let userName = '翠花';
        let isRain = true;
        let foods;
        let money = null; // 后面继续讲解到 引用类型的时候区补充


        // console.log ("num是什么数据类型"); 能不能通过过程的方式 自动的输出当前变量的数据类型!!

        // typeof

        console.log(typeof num); // number 输出 num 变量的类型
        console.log(typeof userName); // string
        console.log(typeof isRain); // boolean
        console.log(typeof foods); // undefined
        console.log(typeof money); // odject 对象类型
    </script>

类型转换

为什么需要类型转换

  • js 是弱数据类型： js 也不知道变量到底属于哪还种数据类型， 只有赋值了才清楚。

  • 坑：使用表单、prompt 获取过来的数据默认是字符串类型的， 此时就不能直接简单的进行加法运算。

  • <script>

     console.log('100' + '200')
	//输出结果为100200
   </script>

此时需要转换变量的数据类型。

通俗来说，就是 把一种数据类型的变量转换成我们需要的数据类型。

隐式转行

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

  • 规则：
    1. +号 两边只要有一个是字符串，都会把另一个转成字符串
    2. 除了 + 以外 的算术运算符 比如 - * / 都会把数据转成数字类型
  • 缺点：
    • 转换类型不明确， 靠经验才能总结
  • 小技巧：
    • +号作为正号解析可以喜欢换成 Number

1648271627498.png

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

        let num3 = num2 - 0;  // num3 是一个数字类型
        console.log(typeof num3);

        // 最简洁的写法  没有为什么 js 内部就有这样的技巧  知道会用即可
        let num4 = +num2; //  也是可以的！
        console.log(typeof num4);
    </script>
</body>

显示转换

1648271758208.png

  • 概念：自己写代码告诉系统改转换成什么类型
  • 转换数字类型
    • Number（数据）
      • 转成数字类型
      • 如果字符串内容里有非数字，转换失败结果为 NaN ( Not a Number) 即不是一个数字
      • NaN 也是 number 类型的数据，代表非数字
    • pqrseInt （ 数据）
      • 只保留整数
    • parseFloat （数据）
      • 可以保留小数
    • 转换为字符型
      • String（数据）
      • 变量. toString （进制）
<body>
    
    <script>
        // 你把一个真正的 字符串 给我 转成数字， 会失败！！
        // let num1 = 'abcd';

        // 显示转换 转成 数字类型
        // let num2 = Number(num1);

        // console.log(num2); // NaN num2  不是一个数字 类似 确实 unmber类型

        // 对于 其他类型 转成数字
        // 1 成功 数字本身
        // 2 失败 NaN ( not a number )

        // let num1 = 'aaa';

        // let num2 = +num1;

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

        // let num1 = '9.9';

        // 取整数 9 integer 
        // let num2 = parseInt(9.9); //常用
        // console.log(num2);

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

        let num1 = 123;

        // 把 num1 转成 字符串
        // let str = 123 + ''; // 隐式转换  常用 

        // let str = String(num1);  // 显示转换 常用

        // console.log(typeof str);


        let str = num1.toString(); // 显示转换  常用

        console.log(typeof str);
    </script>
</body>
avatar
文章
阅读
粉丝