分享Js小基础（2）

流行奶黄包
134 阅读2分钟

js变量

可以理解变量是计算机存储数据的“容器”就是一个装东西的盒子，它可以让计算机变得有记忆。

注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子

1648170925972.png

一、变量的基本使用

1、声明变量： 要想使用变量，首先需要创建变量（专业说法： 声明变量） ①语法：let 变量名 （声明变量里有两部分构成：声明关键字、变量名（标识） ②如：let age; (age 变量的名称，也叫标识符)

二、变量赋值：（给盒子装东西）

定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。 如图： 1648217596649.png 注意：是通过变量名来获得变量里面的数据

三、变量的使用

        // 变量 我的姓名
        let username; /* 创建变量 */
        username='吴彦祖'; /* 变量赋值 */
        console.log(username) /* 变量的使用 */

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

        // 变量 我的身高
        let weight; /* 创建变量 */
        weight=70; /* 变量赋值 */
        console.log(weight); /* 变量的使用 */
1、声明变量的同时也可以赋值：
// 声明变量的同时 也赋值 常用！
        let color = 'yellow';
2、更新变量：
 // 声明变量的同时 也赋值 常用！
        let color = 'yellow';

        color = 'black'; // 变量更新
3、一次声明多个变量：
 // 一次性声明多个变量 同时赋值 逗号隔开
        let username1 = '两百块',
        height1 = 190,
        weight1 = 200;
4、变量的交换：

练习：

1648220845228.png

 <script>
        // 交换变量值

        // 1.要创建三个变量 temp(暂时存放)
        let num1=10,num2=20,temp;

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

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

        // 4.设置num2等于之前存放num1的值的temp
        num2=temp;


        console.log(num1)
        console.log(num2)
    </script>
思路总结：关键在于要多创建一个变量来存放临时的数据。

1648221062593.png

四、变量的本质

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

1648221135669.png

五、变量的规则和规范

规则：必须遵守，不遵守报错 规范：建议，不遵守不会报错，但不符合业内通识

  1. 规则： 不能用关键字 关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等 只能用下划线、字母、数字、$组成，且数字不能开头 字母严格区分大小写，如 Age 和 age 是不同的变量
  2. 规范： 起名要有意义 遵守小驼峰命名法 第一个单词首字母小写，后面每个单词首字母大写。例：userName

1648222110320.png


    <script>
        // 创建一个变量  内置的关键字:let\var\if\for\ 都不能使用
        // 如:let for = 111; 

        // 符号也是可以的
        let _hello = '111';下划线
        let $hello = '111';$
        let hello = '111';字母开头
        // let 1hello = '111';不能以数字开头


        // 要区分大小写
        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>

六、数据类型

⑴计算机程序可以处理大量的数据，为什么要给数据分类？

① 更加充分和高效的利用内存 ② 也更加方便程序员的使用数据

⑵JS 数据类型整体分为两大类：

1、基本数据类型
①number 数字型

JavaScript 中的正数、负数、小数等 统一称为 数字类型。

1648225301387.png

    <script>
    //   数字类型
    let height=180;//外边不能加引号
    </script>

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

1648225539073.png 注意事项：

  1. 无论单引号或是双引号必须成对使用
  2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
  3. 必要时可以使用转义符 \，输出单引号或双引号(了解)
let userName='李华"；错误的 单双引号要配套出现

let address='我住在"房子里" ';外单内双或者外双内单
2、字符串拼接：（模板字符串）

作用：拼接字符串和变量 在没有它之前，拼接变量比较麻烦

    <script> 
        // 你好-我好-大家好
        // 方式1:

        // console.log("你好-"+"我好"+"-大家好")；

        // 方式2： 

        // let my="我好";
        // console.log("你好-"+my+"-大家好")；

    </script>

符号：`` 内容拼接变量时，用${}包住变量

 <script> 
        // 你好-我好-大家好

        // 使用反引号的方式来拼接字符串 推荐
        // 反引号和${}是一对 要配套出现
        let my="我好";
        // `你好-${变量名}-大家好`
        console.log(`你好-${my}-大家好`)
    </script>
3、数字类型和字符串类型使用+号，功能是不一样的
<script>
    
    // 数字类型表示数字相加
    let money1=100;
    let money2=200;
    let sum=100+200; //等于300
    console.log(sum)

    // 字符串类型表示拼接
    let userName='奥特曼';
    let skill='打怪兽';
    let smg=userName+skill; //奥特曼打怪兽
    console.log(smg)

    </script>
③boolean 布尔型

表示肯定或否定时在计算机中对应的是布尔类型数据。 它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。须结合后续知识使用！！！！

<script>
        // Boolean布尔 有两种值：真true 假：false

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

        // 你睡了吗
        let isSleep=false;

        // 暂未学习到其作用
        // 如果你吃饭了，我去吃大餐
        // 如果你还没吃饭，我就去吃饭
        if(isEat===true){
            //吃了
            console.log("我去吃大餐")
        }else {
            //没吃
            console.log("我去吃饭")
        }
    </script
④undefined (未定义型 )

1.未定义是比较特殊的类型，只有一个值 undefined。 2.那么什么情况出现未定义类型？ 只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

1648230725819.png

1648230958965.png

3.工作中的使用场景： 我们开发中经常声明一个变量，等待传送过来的数据。
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。

⑤null (空类型)

表示值为空（可以理解为有钱包，但里面是空的） null 和 undefined 区别： undefined 表示没有赋值 null 表示赋值了，但是内容为空 对于初学者来说，只要发现某个变量是undefined或者是null变量没有拿到值即可！!

1648232646630.png

2、引用数据类型(后面补充)

⑶typeof检测数据类型

通过 typeof 关键字检测数据类型，控制台会显示出数据类型

1648274363539.png

（4）类型转换

JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。 使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。 此时需要转换变量的数据类型。 通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。

①隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。 规则： +号两边只要有一个是字符串，都会把另外一个转成字符串 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

1648278504698.png

②显示转换

1.概念： 自己写代码告诉系统该转成什么类型

2.转换为数字型 Number(数据)： 转成数字类型 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字 NaN也是number类型的数据，代表非数字 parseInt(数据)：只保留整数 parseFloat(数据)：可以保留小数

​ // 对于 其他类型 转成数字

​ // ①成功 数字本身

​ // ②失败 NaN(Not a Number)

3.转换为字符型: String(数据) 变量.toString(进制)

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

        // let str =String(num1);//显示转换 常用
        // console.log(typeof str);

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

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