【2021-09-01】JS学习（一）---变量、数据类型篇

一、变量

1. 为什么需要变量？

   因为我们一些数据需要保存，所以需要变量

2. 变量是什么？

   变量就是一个容器，用来存放数据的。方便我们以后使用里面的数据

3. 变量的本质是什么?

   变量是内存里的一块空间，用来存储数据。

4. 变量怎么使用的？

   我们使用变量的时候，一定要声明变量，然后赋值

   声明变量本质是去内存申请空间。

5. 什么是变量的初始化？

   声明变量并赋值我们称之为变量的初始化

6. 变量命名规范有哪些？

   变量名尽量要规范，见名知意——驼峰命名法

   区分哪些变量名不合法

7. 交换2个变量值的思路？

   实现思路：使用一个 临时变量 用来做中间存储

   ---

二、数据类型

1. 基本数据类型

Number Boolean String Undefined Null(数字型 布尔值类型 字符串类型 未定义--声明变量未给值 声明变量----空值)

1. Number

1. 交换两个变量值----需要一个临时变量temp

2. 数字型number 八进制 0~7 数字前加上0表示八进制

   【eg：】var num1 = 010

                  console .log（num1） //010八进制 转换为十进制 就是8

3. 数字型的最大值 Number.MAX_VALUE

          数字型的最小值 Number.MIN_VALUE

           数字型的三个特殊值：Infinity 无穷大

                                             -Infinity 无穷小

                                             NaN 代表非数值

      4. isNaN()这个方法用来判断非数字，并且返回一个值 如果是数字，返回的是false，如果不是，返回的是true。

2. String

1. js可以单双引号自由切换，不受限制。

【注】：如果想输出一句长句并且换行，可以用\n...（字符串转义字符---\开头，但是需要将转义字符写到引号里面去！）

alert('......\n.."我".....')

2. 字符串长度

检测获取字符串长度 

var str = 'my name is andy'  //15个

3. 字符串的拼接-----字符串+任何类型=拼接之后的新字符串

====数值相加，字符相连====

拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

console.log('我'+'你')  //我你
console.log('我'+18)     //我18
console.log('我'+true)     //我true
但是：console.log(12+18)     //30  因为都是数字型，所以相加
另外：console.log('12'+12)     //1212   进行了拼接
console.log('我'+18+'岁')  //引引加加

案例：

//弹出一个输入框（prompt），让用户输入年龄（用户输入）
//把用户输入的值用变量保存起来，把刚才输入的年龄与所要的输出的字符串拼接（程序内部处理）
//使用alert语句弹出警示框（输出结果）
var age = prompt('请输入你的年龄');
var src = '您今年已经'+ age +'岁了';
alert(str);

3. boolean undefined null

1. Boolean

--------- true 和 false

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

var flag = true;//flag布尔型
var flag1 = flase;//flase1 布尔型
console.log(flag + 1);//2
console.log(flag1+ 1);//1
/*    console.log(true + 1);//2
     console.log(false + 1);//1     */

2. Undefined

---------- 一个变量声明未赋值，就是undefined 未定义数据类型

var str;
console.log(str);
var variable = undefined;
console.log(variable + 'jaycee');  //undefinedjaycee
console.log(variable + 1);  //  NaN     undefined和数字相加，最后的结果是 NaN

3. Null

---------- 空值

var space = null;//一个声明变量给null值，里面存的值为空
console.log(space + 'pink');//nullpink
console.log(space + 1);//1

2.复杂数据类型

1.NaN===NaN ----false
  isNaN(NaN)----true
2. 尽量避免使用浮点数，存在精度问题。

3.获取变量数据类型

3.1 typeof

var num = 10;
console.log(typeof num);//number
var vari = undefined;
console.log(typeof vari);//undefined
var str = 'jaycee';
console.log(typeof str);//string
var flag = true;
console.log(typeof flag);//boolean
var timer = null;
console.log(typeof timer);//object(对象)

//prompt 取过来的值是 字符型的
var age = prompt('请输入您的年龄')；
console.log(age);
console.log(typeof age);//打印出来的是字符串型的数字，所以typeof可以检测

3.2 字面量

字面量是在源代码中一个固定值的表示方法，通俗来说，就是字面量表示如何表达这个值。

如：数字字面量---8 9 10...

字符串字面量-----‘jaycee’...

布尔型字面量-----true false

等等。。。

4.数据类型转换

4.1 转换为字符串

• toString() eg：var num = 1;alert(num.toString());

• String()强制转换 eg：var num = 1;alert(String(num));

• 加号拼接字符串 eg：var num = 1;alert(num + "我是字符串")

1. 把数字型转换为字符串型 变量 .toString()

var num = 10;//数字型
var str = num.toString();
console.log(str);//10
console.log(typeof str);//字符串型

        2. 利用String(变量)

console.log(String(num));//强制转换

        3. 利用 + 拼接字符串的方法实现转换效果------隐式

console.log(num + '');

toString()和String()使用方式不一样。

三种转换方式，偏向于用第三种，也称之为隐式转换。

4.2 转换为数字型（重点）

• parselnt(string)函数：将String类型转成整数数值型 eg：parselnt('1234')

• parseFloat(string)函数：将String类型转成浮点数数值型 eg：parseFloat（'78.097'）

• Number()强制转换函数：将String类型转换为数值型 eg：Number（'12'）

• js隐式转换（ - * / ）：利用算术运算隐式转换为数值型 eg：'12' - 0

var age = prompt('请输入您的年龄')；
//1、parseInt(变量)  可以把字符型转换为数字型    得到的是整数
/*console.log(parseInt(age));*/
console.log(parseInt('3.14'));//3     取整
console.log(parseInt('2.99'));//2     取证
console.log(parseInt('120px'));//120  去掉单位
console.log(parseInt('rem120px'));//NaN
//2. parseFloat(变量)可以把字符型的转换为数字型得到的是小数 浮点数
console.log(parseFloat('3.14'));//3     取整
console.log(parseFloat('120px'));//120  去掉单位px
console.log(parseFloat('rem120px'));//NaN
//3.利用Number（变量）
var str = '123';
console.log(Number(str));
console.log(Number('12'));
//4.利用了算术运算 - * /   隐式转换
console.log('12' - 0);//12  数字型
console.log('123' - '120');
console.log('123' * 1);

案例：计算年龄

//弹出一个输入框（prompt)，让用户输入出生年份 （用户输入） 
//把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄 （程序内部处理） 
//弹出警示框（alert) ， 把计算的结果输出 （输出结果）
var year = prompt('请输入您的年龄');
var age = 2021 - year;//year取过来是字符串类型，但这里用的减法 有隐式转化，如果是加法，一定要转换为数值型！
alert('您今年已经'+ age +'岁了');

案例：简单加法器

计算两个数的值， 用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示出两次输入值相加的结果。

//先弹出第一个输入框，提示用户输入第一个值 保存起来
//再弹出第二个框，提示用户输入第二个值 保存起来
//把这两个值相加，并将结果赋给新的变量（注意数据类型转换） 
//弹出警示框（alert) ， 把计算的结果输出 （输出结果）
var num1 = prompt('请输入第一个值：')；
var num2 = prompt('请输入第二个值：')；
//prompt取的值是字符型，所以需要进行转换。
var result = parseFloat(num1) + parseFloat(num2);
alert('您的结果是：' + result)；

4.3 转换为布尔型

1. 代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined

2. 其余值都会被转换为 true

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log('------------------------------');
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true