JavaScript系列之基础篇

Posted 2021-06-29 coderkey

三，数据类型导读

1，数据类型简介

1.1，为什么需要数据类型

（1）含义：

在计算机中，不同的数据所需占用的行储全问是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间,于是定义了不同的数据类型。

1.2，变量的数据类型

（1）含义：

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

（2）语法：

  var age = 10;     //这是一个数字型
  var arerouok ='是的';   //这是一个字符串

（3）注意：

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

2，简单数据类型

2.1，基本数据类型

（1）语法：

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点值，如21，0.22	0
Boolean	布尔值类型，如true、false，等价于1和0	false
String	字符串类型，如“张三”，注意JS里面，字符串都带引号	“ ”
Underfined	var a； 声明了变量a，但是没有给值，此时a = undefined	undefined
Null	var a = null; 声明了变量a为空值	null

2.2，数字型 Number

（1）含义：

JavaScript数字类型既可以用来保存整数值，也可以保存浮点型（小数）。

（2）语法：

  var age = 21；    //整数
  var Age = 22.3756；  //小数

（3）方法：

用isNaN(x)来判断一个变量是否为非数字的类型，如果x的值为数字类型返回false，否则，返回true。

2.3，字符串型 String

（1）含义：

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

（2）语法：

  var strMsg = "你好";        //使用双引号表示字符串
  var strMsg = "你好";    //使用单引号表示字符串

（3）注意：

html标签里面的属性使用的是双引号，JS这里我们更推荐使用单引号。

2.3.1，字符串引号嵌套

（1）含义：

JS可以用单引号嵌套双引号，或者双引号嵌套单引号（外双内单，外单内双）

（2）语法：

var strMsg =  '你好"我是李总"的哥哥';   //可以用' '包含""
var strMsg =  "你好'我是李总'的哥哥";  //可以用""包含' '

2.3.2，字符串转义符

（1）含义：

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符，转义符都是\\开头的。

（2）常用转义符：

转义符	解释说明
\\n	换行符
\\\\	斜杠\\
\\'	’ 单引号
\\*	" 双引号
\\t	tab 缩进
\\b	空格

2.3.3，字符串长度

（1）含义：

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

（2）语法：

  var strMsg = "你好我是李总的哥哥!";
  alert(strMsg.length);      //显示10

2.3.4，字符串拼接

（1）含义：

多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 新字符串。

（2）语法：

  //字符串"相加”
  alert('hello'  +  ' '  +  'world');   // hello  world
  //数值字符串"相加”
  alert('100'  +  '100');    //100100
  //数值字符串 + 数值
  alert（'11'  +  12);     //1112
  //字符串加强
  var age = 18；
  console.log('我'  +  age  +  '岁了');    //我18岁了

（3）注意：

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

2.4，布尔型 Boolean

（1）含义：

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

（2）语法：

  console.log(true  +  1);    // 2
  console.log(false  +  1);    // 1

（3）注意：

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

2.5，Undefined 和 Null

（1）含义：

一个声明后没有被赋值的变量会有一个默认值undefined。

（2）语法：

  var  variable；                               
  console.log(variable);                  // undefined
  console.log('你好'  +  variable);     //你好undefined
  console.log(11  +  variable);           //NaN
  console.log(true  +  variable);        //NaN

（3）含义：

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

（4）语法：

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

3，获取变量数据类型

3.1，获取检测变量数据类型

（1）含义：

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

（2）语法：

  var num = 10;
  console.log(typeof num);  //  number
  var str = 'pink';
  console.log(typeof str);  //  string
  var flag = true;
  console.log(typeof flag);  //  boolean
  var vari = undefined;
  console.log(typeof vari);  //  undefined
  var timer = null;
  console.log(typeof timer);  //  object
  var age prompt('请输入您的年龄");
  console.log(age);
  console.log(typeof age);  //  string

4，数据类型转换

4.1，什么是数据类型转换

（1）含义：

使用表单、prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算，而需要转换变量的数据类型，通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。我们通常会实现3种方式的转换:转换为字符串类型、转换为数字型和转换为布尔型。

4.2，转换为字符串

（1）语法：

方式	说明	案例
toString()	转成字符串	var num = 1；alert(num.toString());
String() 强制转换	转成字符串	var num = 1；alert(String(num))
加号拼接字符串	和字符串拼接的结果都是字符串	var num = 1；alert(num + '')

（2）语法：

加号拼接字符串转换方式，这一种方式称之为隐式转换。

4.3，转换为数字型

（1）语法：

方式	说明	案例
parseInt(string)函数	将string类型转换成整数数值型	parseInt('66'); //66
parseFloat(string)函数	将string类型转换成浮点数数值型	parseFloat('66.88'); //66
Number()强制转换函数	将string类型转换成数值型	Number('12'); 12
js 隐式转换（ - * / ）	利用算术运算符转换为数值型	'12' - 0 //12

（2）注意：

隐式转换是我们在进行算数运算的时候，js自动转换了数据类型。

4.4，转换为布尔型

（1）语法：

方式	说明	案例
Boolean()函数	其它类型转成布尔值	Boolean('true');

（2）例如：

  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(Boolean('小白'));            //true
  console.log(Boolean(12));                  //true

（3）注意：
代表空、否定的值会被转换为false，如''、0、NaN、undefined、null。其余值都会转换为true。

---

四，运算符导读

1，算数运算符

1.1，算术运算符概述

（1）含义：

算术运算使用的符号，用于执行两个变量或值的算术运算。

（2）语法：

运算符	描述	实例
+	加	10 + 20 = 30
-	减	10 - 20 = -10
*	乘	10 * 20 = 200
/	除	10 / 20 = 0.5
%	取模（取余数）	返回除法的余数9%2=1

2，递增和递减运算符

2.1，递增和递减运算符概述

（1）含义：

如果需要反复给数字变量添加或减去1,可以使用递增(++ )和递减(--)运算符来完成。
在JavaScript中,递增(++ )和递减(-- )既可以放在变量前面,也可以放在变量后面。放在变量的前面时,我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。

（2）注意：

递增和递减运算符必须和变量配合使用。

2.2，前置递增运算符

（1）含义：

++num前置递增，就是自加1，类似num = num + 1。

（2）语法：

  var p = 10；
  console.log(++p  +  11);     //22

（3）注意：

先自加1，后返回值。

2.3，后置递增运算符

（1）含义：

num++后置递增，就是自加1，类似num = num + 1。

（2）语法：

  var age = 10；
  console.log(age++  +  10);     //20
  console.log(age);      //11

（3）注意：

先返回值，后自加1。

3，比较运算符

3.1，比较运算符概述

（1）含义：

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算符的结果。

（2）语法：

运算符名称	说明	案例	结果
<	小于号	1 < 2	true
>	大于号	1 > 2	false
>	大于等于号（大于或者等于）	2 >= 2	true
<=	小于等于号（小于或者等于）	3 <=2	false
==	判断等号（有隐式转换）	37 == ‘37’	true
!=	不等号	37 !=37	false
===/ !==	全等/不全等 ，要求值和数据类型都一致/不一致	37 === ‘37’	false

4，逻辑运算符

4.1，逻辑运算符概述

（1）含义：

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值，常用于多个条件的判断。

（2）语法：

逻辑运算符	说明	案例
&&	“逻辑与”，简称“与” and	true&&false
||	“逻辑或”，简称“或” or	false
！	“逻辑非”，简称“非” not	true
<=	小于等于号（小于或者等于）	!true

（3）注意：

1，逻辑与&&，有一个假都为假。
2，逻辑或||，有一个真都为真。
3，逻辑非！也叫取反符，用来取一个布尔值相反的值，如true的相反值是false。

4.2，短路运算（逻辑中断）

（1）含义：

当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值

4.2.1，逻辑与短路运算

（1）语法：

表达式1 && 表达式2

（2）注意：

1，如果第一个表达式的值为真，则返回表达式2。
2，如果第一个表达式的值为假，则返回表达式1。

4.2.2，逻辑或短路运算

（1）语法：

表达式1 || 表达式2

（2）注意：

1，如果第一个表达式的值为真，则返回表达式1。
2，如果第一个表达式的值为假，则返回表达式2。

5，赋值运算符

5.1，赋值运算符概述

（1）含义：

用来把数据赋值给变量的运算符。

（2）语法：

赋值运算符	说明	案例
=	直接赋值	var useName = "我是一个值"
+=、-=	加、减一个数后再赋值	var age = 10； age+=5； //15
*=、/=、%=	乘、除、取模后再赋值	var age = 2； age*=5； //10

（3）注意：

  var age = 10；
  age += 5；  //相当于 age = age + 5
  age -= 5；  //相当于 age = age - 5
  age *= 5；  //相当于 age = age * 5

---