【个人学习记录】Day2-变量与数据类型——JavaScript

TTP250

已于 2023-06-21 15:04:23 修改

阅读量152

点赞数

文章标签： javascript html 学习前端

于 2023-06-10 16:41:10 首次发布

本文链接：https://blog.csdn.net/TTP250/article/details/131138195

版权

9 字符串、布尔、 Underfined和Null

9.3 Undefined* 和 Null

1 字面量和变量的了解

1.1 字面量

字面量，也叫直接量，即可以直接使用的量。

常用：字符串——以 ' ' 或 " " 包裹起来的内容，如：'hello' "world"

数值 —— 1 2 1.1 -2 0等

其它 —— true false null /g /i /m

注意一下：字符串中的内容会原样输出。比如：alert('5+3');

在控制台中输入以下字面量，观察结果。

<script>
    console.log('hello' + 1 + 2);
    console.log(1 + 2 + 'hello' + 3 + 4);
    console.log(1 + true + 'hello');
</script>

在控制台中输出的结果分别为：

hello12

3hello34

2hello

在第一行语句中，由于数字1、2前为字符串，将其隐式转换为字符串型数据。'+' 作为字符串连接符号，将hello与1、2拼接在一起。

第二行语句中，数字1、2前没有字符串型数据，故第一个 '+' 为逻辑加，之后的 '+' 为字符串连接符。

第三行语句中，true被隐式转换为1，故先做了逻辑运算，之后进行字符串拼接。

1.2 变量

简单来说，变量就是一个装东西的盒子。

通俗来讲，变量是用于存放数据的。我们通过变量名获取数据，甚至数据可以尽心修改。

定义：变化的量，可以通过一些符号表示一些数据，这个符号就是变量（初始化再次修改的量）

本质：变量是程序在内存中申请的一块用来存放数据的空间。

类似我们酒店的房间，一个房间就可以看做是一个变量。

       变量名 = num1

       变量名 = num2

       变量是内存中一个空间（内存栈）

变量在使用时分为两步：

声明变量
赋值

1.2.1 声明变量

<script>
    //声明变量
    var age;    //声明一个名为age的变量
</script>

var是一个JavaScript的关键字，用来声明变量。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管。
age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间。

1.2.2 变量的赋值

<script>
    age = 10;    //给age这个变量赋值为10
</script>

用来把右边的值赋给左边的变量空间中，此处代表赋值的意思。
变量值是程序员保存到变量空间里的值。

下面是声明变量的一般格式。

<script>
    //先声明变量 ，再赋值
    var a;                  // 声明一个变量，变量为a
    a = 10;                 // 把10赋值给变量a    

    //声明变量的同时赋值
    var b = 20;
    //声明一个变量并赋值,我们称之为变量初始化
</script>

2 变量的使用案例

有个叫卡卡西的人在旅店登记的时候前，令他填一张表，这张表里的内容要存到电脑上，表中的内容有:姓名、年龄、邮箱、家庭住址和工资,存储之后需要把这些信息显示出来，所显示的内容如下：

我叫卡卡西，我住在木叶村，我今年30岁了，我的邮箱是kakaxi@naruto.com ，我的工资20000

<script>
    var username;
    var age;
    var email;
    var address;
    var salary;
    username = '卡卡西';
    age = 30;
    email = 'kakaxi@naruto.com';
    salary = 20000;
    console.log('我叫'+ username + ',我今年' +age + '岁了,我的邮箱是' + email + ',我住在' + 
 address + ',我的工资是' + salary);
</script>

也可以使用反引号输出。

<script>
    var username;
    var age;
    var email;
    var address;
    var salary;
    username = '卡卡西';
    age = 30;
    email = 'kakaxi@naruto.com';
    salary = 20000;
    console.log(`我叫${username}，我住在${address}，我今年${age}岁了，我的邮箱是${email} ,我的工资${salary}`);
</script>

3 变量值修改及变量名命名规范

命名规范

1. 可以数字，字母、下划线_和$

2. 不能以数字开头

3. 严格区分大小写

age 和 Age 不是同一个变量

4. 见名知意

如：age gender stuName num

5. 遵循驼峰命名法和下划线命名法

小驼峰 --- 推荐使用 stuName

大驼峰 --- StuName (留给后面讲构造函数来用)

下划线 --- 推荐使用 stu_name

6. 不能使用关键和保留字

如：if for var break

4 声明变量的特殊情况

1. 声明变量，未赋值，直接输出

<script>
    var a;
    console.log(a);
</script>

检查控制台，输出：

undefined

2. 不声明，不赋值，直接输出

<script>
    console.log(b);
</script>

检查控制台，会发现报错：

Uncaught ReferenceError: b is not defined

3. 不声明只赋值

<script>
    c = 30;
    console.log(c);
</script>

检查控制台，输出：

30

但不建议这样操作。

4. 变量提升

<script>
    console.log(d);
    var d = 60;
</script>

检查控制台，输出：

underfined

上述代码相当于这样操作：

<script>
    var d;
    console.log(d);
    d=60;
</script>

5. 赋值不会提升

<script>
    console.log(e);
    e = 100;
</script>

检查控制台，会发现报错：

Uncaught ReferenceError: e is not defined

5 多变量声明

先声明，再赋值
声明的同时，即赋值

同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开。

<script>
    var a, b, c;
    a = 10, b = 20, c = 30;

    //上述语句和下方一致
    var a;
    var b;
    var c;
    a = 10;
    b = 20;
    c = 30;
</script>

<script>
    //也可以以这种方式声明变量
    var a1 = 100, b1 = 200, c1 = 300;


    //注意：
    var a2 = 50, a3 = 50, a4 = 50;
    //相当于
    var a2=50;
    var b2=50;
    var c2=50;

    var b2 = b3 = b4 = 60;
    //相当于
    var b2=60;
    b3=60;
    b4=60;
</script>

6 变量练习

依次询问并获取用户的姓名、年龄、性别，收集数据之后在控制台依次打印出来。

<script>
    var userName=prompt('请输入您的姓名');
    var age=prompt('请输入您的年龄');
    var gender=prompt('请输入您的性别');
    console.log(userName, age, gender);
</script>

1. 询问用户年龄，用户输入年龄后，把用户输入的年龄增加5岁

2. 增加5岁后，通过弹出框提示用户 “ 据我估计，五年后，你可能XX岁了”

<script>
    var age = +prompt('请输入您的年龄');
    //在prompt()方法前添加'+'，输入的字符串型数据隐式转换为Number数据，之后即可进行逻辑加
    age = age + 5;

    alert(`据我估计，五年后，你可能${age}岁了`);
</script>

交换两个变量的值。

<script>
    var name1 = prompt("请输入变量1");
    var name2 = prompt("请输入变量2");
    console.log("输入的结果为：%s,%s", name1, name2);
    var temp = name1;
    name1 = name2;
    name2 = temp;
    console.log("交换后的结果为：%s,%s", name1, name2);
</script>

7 数据类型及Number

7.1 变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

弱类型：在声明变量的时候是没有数据类型的，完全取决于赋值。

在代码运行时，变量的数据类型是由 JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。

JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型。

7.2 数据类型的分类

JavaScript 把数据类型分为两类。

（1）基本数据类型（简单数据类型）——5种

Number(数字类型) String(字符串类型) Boolen(布尔类型) Undefined( Undefined类型未被定义) Null(空值)

（2）引用类型（复杂数据类型）

Object Array Date RegExp

7.2.1 数字型进制

进制分为二进制，八进制，十进制，十六进制。

日常生活中使用的为十进制，范围为0~9；二进制则为0~1；八进制为0~7；十六进制为0~F。

转换进制的方法：数据.toString(n)——n为进制数

以十进制的9为例：

<script>
    var num = 9;
    console.log(num1);        //十进制正常输出
    num = num.toString(2);    //转为二进制
    console.log(num);         //二进制输出9
</script>

在控制台中输出的结果分别为9、1001。

同理，将十进制的9转为八进制和十六进制。

<script>
    var num = 9;
    num = num.toString(8);
    console.log(num);
    num = num.toString(16);
    console.log(num);
</script>

在控制台中输出的结果分别为011，ff。

7.2.2 数字型范围

JavaScript 中数值最大值和最小值。

<script>
    console.log(Number.MAX_VALUE); 
    //该方法可在控制台中显示数字型的最大值
    console.log(Number.MIN_VALUE);
    //该方法可在控制台中显示数字型的最小值
</script>

在控制台中显示的结果分别为1.7976931348623157e+308和5e-324。

个人认为最小值类似于无限趋近于 $0^{+}$ 的数，类似于 $\lim_{n \to 0^{+}}n$ 。

7.2.3 数字型的三个特殊值

数字型有三个特殊值。

Infinity ，代表正无穷，大于任何数值。
-Infinity ，代表负无穷，大于任何数值。
NaN (not a number)，意思为不是一个数，但它仍是一个数据类型为 'number' 的值。

<script>
    console.log(Number.MAX_VALUE * 2);
    console.log(-Number.MAX_VALUE * 2);
    console.log('hello' * 2);
    console.log(typeof NaN);
    //typeof为检测数据类型的一个方法
    console.log(Number.NaN);
</script>

在控制台中得到的结果分别为Infinity , -Infinity , NaN , number , NaN。

8 isNaN

isNaN(参数);

该函数为一个全局函数，用于检查其参数是否是非数字值。若参数为NaN，返回结果为 true 。否则，返回结果为 false 。举个例子，如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true ，否则返回 false 。

其实并不能像它的描述中所写的那样，数字值返回 false，其他返回 true。实际上它是判断一个值能否被 Number() 合法地转化成数字。

Number.isNaN(参数);

如果值为 NaN 且类型为 Number，则返回 true，否则返回 false。

Number.isNaN(参数 ) 参数是不会自行将参数转换成数字，只有在参数是值为 NaN 的数字时，才会返回 true。

下面通过这两个函数来观察一些参数发生隐式转换的情况。

<script>
    console.log(isNaN('123'));              //false     (隐式转换为123)
    console.log(isNaN(123));                //false
    console.log(isNaN('123hell'));          //true
    console.log(isNaN('123hell' * 2));      //true
    console.log(isNaN(true));               //false     (隐式转换为1)
    console.log(isNaN(null));               //false     (隐式转换为0)

    console.log(isNaN(undefined));          //true      ----特殊   不参与数学运算
</script>

<script>
    console.log(Number.isNaN('hello'));     //false
    console.log(Number.isNaN('hello' * 2)); //true
    console.log(Number.isNaN(123));         //false
</script>

9 字符串、布尔、 Underfined和Null

9.1 字符串型String

字符串型可以是引号中的任意文本，其语法为双引号 "" 和单引号 '' 。

9.1.1 字符串引号嵌套

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)。

<script>
    var str1 = "我是'一个一个一个'程序猿啊";
    var str2 = '我是"一个一个一个"程序猿啊';
</script>

9.1.2 字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。转义符都是 \ 开头的，常用的转义符及其说明如下：

转义符	解释说明
\n	换行符，n 是 newline 的意思
\ \	斜杠 \
\'	' 单引号
\"	”双引号
\t	tab 缩进
\b	空格，b 是 blank 的意思

9.1.3 字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。

<script>
    var str = "hello~";
    console.log(str.length);    //在控制台中可以看到数字6
</script>

9.1.4 字符串拼接

多个字符串之间可以使用 '+' 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

+ 号总结口诀：数值相加，字符相连

9.1.5 字符串拼接加强

我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
变量是不能添加引号的，因为加引号的变量会变成字符串
如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间

只要遇到字符串，后续一律拼接，没有遇到字符前可以运算。看下面这行代码，观察其在控制台中输出什么。

<script>
    console.log(1 + 2 + 3 + '8' + 5 + 6);
    console.log('8' + 1 + 2 + 3);
</script>

输出结果分别为6856、8123。

9.2 布尔型 Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真，而 false 表示假。

布尔型和数字型相加的时候，true 的值为 1 ，false 的值为 0。

<script>
    console.log(true + 2);     //3
    console.log(false - 2);    //-2
</script>

9.3 Undefined* 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）。

<script>
    var a;            //声明变量未赋值是undefined  **********
    console.log(a);   //undefined
</script>

总结 undefined 一般不参与数学运算，如果参与数学运输算，则结果为NaN。

<script>
    var a;
    console.log(a + 3);         //NaN
    console.log(a + true + 3);  //NaN
    console.log('hello' + a);   //helloundefined
</script>

一个声明变量给 null 值，里面存的值为空。

<script>
    var vari = null;
    console.log('你好' + vari);  // 你好null
    console.log(11 + vari);      // 11
    console.log(true + vari);    // 1
</script>

10 检测数据类型

typeof 可用来获取检测变量的数据类型。

<script>
    var num = 18;
    console.log(typeof num) // 结果为 number
</script>

不同类型的返回值：

特殊记忆：

<script>
    function fn() {
        console.log('nice');
    }

    console.log(fn, typeof fn);        //返回为'function'
</script>

11 数据类型的转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

我们通常会实现3种方式的转换：

转换为字符串类型
转换为数字型
转换为布尔型

11.1 转换为字符串类型

toString() 和 String() 使用方式不一样。
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

<script>
    //数字型转字符串
    var num;
    num = num.toString();
    console.log(num, typeof num);       //123 string
</script>

<script>
    //布尔型转字符串
    var flag = true;
    flag = flag.toString();
    console.log(flag, typeof flag);     //true string
</script>

<script>
    var a;
    console.log(a,typeof a);      //undefined 
    a = String(a);
    //a = a.toString();           报错
    console.log(a, typeof a);     //undefined string
</script>

<script>
    var b = null;
    console.log(b,typeof b);      //null 'object'
    b = String(b);
    //b = b.toString();           报错
    console.log(b, typeof b);     //undefined string
</script>

11.2 转换为数字型*

注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型 + '123'

一些隐式转换的方法：

'123' ----123

+'123' ----123

'123'*1 ----123

'123'-0 ----123

'123'/1 ----123

'123'%1 ----123

其它类型转为数字类型举例：

字符串转数字类型， ''(空字符串)---0 ' '(空格)---0 '123'---123 'hello'---NaN '123hello'---NaN
布尔型转数字类型 true---1 false---0
Undefined 转数字类型 undefined---NaN
Null 转数字类型 null---0

<script>
    console.log(Number(''));                    //0
    console.log(Number('    '));                //0
    console.log(Number('123'));                 //123
    console.log(Number('hello'));               //NaN
    console.log(Number('123hello'));            //NaN
//  --------------------------------
    console.log(Number(true));                  //1
    console.log(Number(false));                 //0
// ------------------------------------
    console.log(Number(undefined));             //NaN
//------------------------------

    console.log(Number(null));                  //0

// ----------------------------------------
    console.log(parseInt('123.12'));            //123

    console.log(parseInt('123hello'));          //123

    console.log(parseInt(null), parseInt(undefined), parseInt('hello'), parseInt(''));
                                                //NaN NaN NaN NaN

    console.log(parseFloat('123.456hello'));    //123.456
</script>

11.3 转换为布尔型

代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined
其余值都会被转换为 true

<script>
    var a = 10;
    a = Boolean(a);
    console.log(a);                     //true

    console.log(Boolean(false));        //false
    console.log(Boolean(undefined));    //false
    console.log(Boolean(null));         //false
    console.log(Boolean(''));           //false
    console.log(Boolean(0));            //false
    console.log(Boolean(NaN));          //false

//  ----------------------------------
    console.log(Boolean('   '));        //true
    console.log(Boolean([]));           //false
    console.log(Boolean({}));           //false
</script>

TTP250

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【个人学习记录】Day2-变量与数据类型——JavaScript

这里说明一下精度丢失的问题，当使用控制台输出0.2+0.1时，在控制台中得到的结果不是0.3，而是0.30000000000000004，出现了精度丢失。使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。第二行语句中，数字1、2前没有字符串型数据，故第一个 '+' 为逻辑加，之后的 '+' 为字符串连接符。我叫卡卡西，我住在木叶村，我今年30岁了，我的邮箱是kakaxi@naruto.com ，我的工资20000。
复制链接

扫一扫