JavaScript基础第二天

171 阅读3分钟

1、变量

2、数据类型

3、数据类型转换

变量

1、概念:

计算机存储数据的“容器”(一个个的盒子)

2、基本使用:

创建变量 ------> 变量赋值 -----> 使用变量

语法:声明单个变量、声明变量同时赋值、声明多个变量(用逗号 , 隔开)

<script>
        // 我的姓名
        let name;//声明变量
        name = "leilei";//变量赋值
        console.log(name);//使用变量

        // 我的年龄
        let age;
        age = "18";
        console.log(age);

        // 我的体重
        let weight;
        weight = "99";
        console.log(weight); 

		// 声明变量的同时 也赋值 常用!
        let color = 'pink';

        color = 'green'; // 变量更新

        // 一次性声明多个变量 同时赋值 
        let username = 'leilei',
            height1 = 200,
            weight1 = 66;
    </script>

②交换变量的值

需求:

有2个变量: num1 里面放的是 10, num2 里面放的是20

最后变为 num1 里面放的是 20 , num2 里面放的是 10

<script>
        let num1 = 10,
            num2 = 20,
            temp;//临时变量,不赋值
           
         // 变换之前的值
        console.log(num1 , num2)

        temp = num1;
        num1 = num2;
        num2 = temp;
        // 变换之后的值
        console.log(num1);
        console.log(num2);
    </script>

注意:不可直接使用两个变量交换,要多创建一个变量 来存放临时的数据

3、变量的本质

①内存:计算机中存储数据的地方,相当于一个空间

②变量:是程序在内存中申请的一块用来存放数据的小空间

1648216117311.png

4、规则和规范

①规则:

必须遵守,不遵守报错 “不合法”

Ⅰ、不能用关键字

Ⅱ、关键字:有特殊含义的字符,JavaScript 内置的一些英语词汇。例如:let、var、if、for等

Ⅲ、只能用下划线、字母、数字、$组成,且数字不能开头

Ⅳ、字母严格区分大小写,如 Age 和 age 是不同的变量

②规范:

建议,不遵守不会报错,但不符合业内通识

Ⅰ、起名要有意义

Ⅱ、遵守小驼峰命名法

Ⅲ、第一个单词首字母小写,后面每个单词首字母大写。例:userName

③语法:(推荐与不推荐)

<script>
        // 创建一个变量从名字就叫做 let、var、if、for...内置的该关键字都不能使用(错误示范)
        // let for = 123;
        
        // 以下符号正确示范
      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>

1648216944127.png

数据类型

1、基本数据类型

① number 数字型

取值:整数、小数、正数、负数

// 数字类型
 let height=100; // 数字类型 外边一定不能够加 ''
 let width=200;

② string 字符串型

凡是单引号( '') 、双引号( "")或反引号( ` )包裹的数据都叫字符串,不管里面是什么内容

注意事项:

Ⅰ、无论单引号或是双引号必须成对使用

Ⅱ、单引号/双引号可以互相嵌套,但是不以自已嵌套自已(口诀:外双内单,或者外单内双)

Ⅲ、 必要时可以使用转义符 \,输出单引号或双引号

 let weight='100';// 不是数字类型!!,是字符串类型

 let msg ='我不是字符串类型哦' ;// 字符串类型 不用管里面装什么内容 就看有没有单引号和双引号

 let userName='小明";  错误的  单双引号 配套出现!!
 
 let address='我叫"leilei"  '; // 外单内双 或者 外双内单

 let str='';  空字符串

数字类型和字符串类型拼接

 // 数字类型和字符串类型
      // 以上这两种类型 使用  加号 +   功能不一样
      // 数字类型使用 +  表示数字的相加

      let money1 = 100;
      let money2 = 200;

      let sum = money1 + money2; // 300
      // console.log(sum);

      // 字符串类型 使用加号 表示两段文字的 拼接

      let userName = '奥特曼';
      let skill = '打怪兽';

      let msg = userName + skill;

      console.log(msg);

字符串拼接

①作用

Ⅰ、拼接字符串和变量

Ⅱ、在没有它之前,要拼接变量比较麻烦

②符号

Ⅰ、反引号 ``

Ⅱ、在英文输入模式下按键盘的tab键上方那个键(1左边那个键)

Ⅲ、内容拼接变量时,用 ${} 包住变量

<script>
      // 早些时候 写代码 都是这样来拼接的  看起来不太直观
      
      let every = '大家好';
      let age=100;
      console.log('你好-' + every + '-世界美好');
      console.log('你好' + '-' + every + '-' + '世界美好');


      // 你好-大家好-世界美好


      // 使用 反引号的方式来拼接 字符串 推荐!! 
      console.log(`你好-every-世界美好`);

      // 模版字符串 
      console.log(`你好-${every}-世界美好${age}`);// 变量 在反引号中 只能使用 ${every}  固定用法

      // 错误的演示
      console.log('你好-${every}-世界美好${age}'); 

      // 反引号和 ${} 两个是一对 要配套出现  。 .;..........
    </script>

③ boolean 布尔型

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

Ⅱ、它有两个固定的值 true 和 false,表示肯定的数据用 true(真),表示否定的数据用 false(假)。

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

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

      // 你睡觉了没有

      let isSleep = false;

      // 有什么用 ? 还没有学习到  条件语句 暂时 感觉不到它的作用

      // 感受

      // 如果你吃饭了, 我现在就去吃大餐
      // 如果你还没有吃饭, 我现在就去吃沙县
    </script>

④ undefined 未定义型

工作中的使用场景:

当我们发现这个数据是 undefined 提醒我们是不是忘记给某个变量赋值 矫正我们写代码

只声明变量,不赋值的情况下,变量的默认值为 undefined,一般很少【直接】为某个变量赋值为 undefined。

情况说明结果
let age ; console.log (age)只声明 不赋值undefined
console.log(age)不声明 不赋值 直接使用报错
age = 10; console.log (age)不声明 只赋值10 (不提倡)

⑤ null 空类型

null 和 undefined 区别:

Ⅰ、undefined 表示没有赋值

Ⅱ、null 表示赋值了,但是内容为空

 <script>
      let age = null;
      console.log(age);

      // undefined 表示没有赋值
      //  创建了一个变量 但是没有赋值 里面就是空
      // 创建了一个房子  里面什么都没有

      // null 表示辅助了 但是为空 
      //  创建了一个变量,但是赋值  这个值 本身就空
      // 创建了一个房子,往里面放了一些空气(看不见,闻不着) 

      // 对于我们初学者来说,
      // 只要发现 这个变量 是 undefined 或者 null => 变量 没有拿到合适的值即可 

      // undefined 就像是 肺癌
      // null  就是  胃癌 
      // 都是不太好 
  </script>

2、引用数据类型

① object 对象

② function 函数

③ array 数组

3、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); // object 对象类型
    </script>

数据类型转换

​ 把一种数据类型的变量转换成我们需要的数据类型

1、隐式转换(简单、用的多)

规则:

  • 号两边只要有一个是字符串,都会把另外一个转成字符串
  • 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

缺点:

  • 转换类型不明确,靠经验才能总结

小技巧:

  • +号作为正号解析可以转换成Number

①转数字

<script>
      // 工作中 比较常用的隐式转换写法
      let num2 = '2';

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

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

②转字符串

<script>
        let num1 = 123;
        let num2 = '2';

      // 把 num1 转成 字符串
      // let str = 123 + ''; // 隐式转换  常用 
  
        // 隐式转换 只要有一个是字符串,都会把另一个转为字符串
        console.log(num1+num2); // 1232 答案
</script>

2、显示转换

  • 自己写代码告诉系统该转成什么类型

①转换数字型

Number(数据)

  • 转成数字类型

  • 如果字符串内容里有非数字,转换失败时结果为 NaN(Not a Number)即不是一个数字

  • NaN也是number类型的数据,代表非数字

parseInt(数据)

  • 只保留整数

parseFloat(数据)

  • 可以保留小数

语法:

Ⅰ、对于 其他类型 转成数字

  • 成功 数字本身(字符串里边是数字)
  • 失败 NaN (not a number) (字符串里边不是数字)
 // 你把一个真正的 字符串 给我 转成数字,会失败 显示 NaN!!
    //   let num1 = 'abbcc';

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

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

    //   let num1 = 'aaaa';

    //   let num2 = +num1;

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

Ⅱ、转整数

let num1 = '9.9';
      // 砍价  收个整数  9块   integer
      let num2 = parseInt(9.9); // 常用  
      console.log(num2);

Ⅲ、保留小数

 let num1 = '9.9';
 let num2 = parseFloat(num1);  // 少
 let num2 = +num1; // 常用
console.log(num2);
console.log(Number(Number(Number(num1))));

②转换字符型

自己写代码告诉系统该转成什么类型

Ⅰ、String(数据)

Ⅱ、变量.toString(进制)

 let num1 = 123;

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

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

      // console.log(typeof str); 

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

      console.log( typeof  str );