JavaScrip-变量&数据类型-知识点

变量

什么是变量

在代数中，我们经常使用字母来保存值，例如：

	a=2
	b=3
	c=a+b

计算上面的表达式，c=5。

在 JS中，这些字母a、b、c被称为变量。

变量可用于存放值（比如 b=3）和表达式（比如 c=a+b），它就是程序中保存数据的一个容器。

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

变量的使用

变量在使用时包括：

1. 声明变量
2. 赋值
3. 初始化

①声明

// 声明 名为age 的变量
var age;

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

②赋值

变量赋值，将右边的值，赋值给左边的变量。

// 给age变量赋值为10  
age = 10;         

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

③初始化

初始化变量：声明一个变量并赋值。

// 声明变量同时赋值为 18, 18即为变量的初始值。
var age  = 18;

④扩展

• 更新变量：给变量赋新值。

 var age = 18;
 age = 81;   //age最终值为81

• 同时声明多个变量：声明时，多个变量名之间使用英文逗号隔开。

 var age = 10,  name = 'zhangsan', sex = '男';       

• 声明变量特殊情况

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

命名规范

规则：

• 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，

 	如：usrAge
 		num01
 		_name
 		$name

• 严格区分大小写。

 	var app; 和 var App; 是两个变量

• 不能以数字开头。

 	var 18age;//是错误的

• 不能 是关键字、保留字。

 	例如：var、for、while

• 变量名尽量有意义（语义化）。

 例如： 年龄 var age; 
  	    和   var sum;
  	    城市 var city;

• 遵守驼峰命名法。

  首字母小写，后面单词的首字母需要大写。如imgBox、companyName。

合法的标识符：

	_top
	$str
	helloWorld

不合法标识符：

	1a     //第一个字符不能是数字；
	***   //标识符不能包含星号；
	a+b   //标识符不能包含加号；
	-d   //标识符不能包含减号；

关键字&保留字

关键字

关键字：是指 JS本身已经使用了的字。

【注意】

	不能再用它们充当变量名、方法名。

关键字可参考此博客: JavaScript关键字，保留字含义

保留字

保留字：实际上就是预留的“关键字”，意思是虽然现在还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。
【注意】

	不能再用它们充当变量名、方法名。

保留字可参考此博客: JavaScript关键字，保留字含义

数据类型

简介

• 为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间不同，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
  	
简单来说，数据类型就是数据的类别型号。比如姓名=“李四”，年龄=10，这些数据的类型是不一样的。

• 变量的数据类型

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

示例：

  var num;  //无法确定num属于哪种数据类型
  var age = 21;        // 这是一个数字型
  var areYouOk = '你好世界';   // 这是一个字符串     

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

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

 var a = 6;           // a 为数字
 var a = "Hello world";      // a 为字符串    

• 数据类型的分类

  • 简单类型：
    • 字符串（String)
    • 数字（Number）
    • 布尔（Boolean）
    • 空（Null）
    • 未定义（Undefined）
    • Symbol、Bigint（ES6新增两大数据类型）
  • 复杂类型：

    • 对象（Object），包括数组Array、函数Function等。

      简单数据类型(值类型)：

      字符串（String)
      数字（Number）
      布尔（Boolean）
      空（Null）
      未定义（Undefined）
      Symbol、Bigint

      复杂数据类型(引用类型)：

      Object

简单类型

简单数据类型也叫基本数据类型、值类型。

1. 数字型 Number（默认值为0）

数字类型既可以保存整数，也可以保存小数(浮点数）。

  var age = 21;  // 整数
  var PI = 3.14;  // 小数     

• JS中数值的最大和最小值

  	1. 最大值：Number.MAX_VALUE，值为： 1.7976931348623157e+308
  	
  	2. 最小值：Number.MIN_VALUE，值为：5e-32
  

• 数字型中特殊类型

  	1. Infinity，无穷大，大于任何数值
  	
  	2. -Infinity，无穷小，小于任何数值
  	
  	3. NaN，(即Not a number)，表示非数值
  

2. 字符串型 String（默认值为""）

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

   var str1 = "你好世界";  // 使用双引号表示字符串
   var str2 = '你好世界';    // 使用单引号表示字符串
   var str3 = 你好世界;       // 报错

• 字符串引号嵌套

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

var str1 = '我是程序猿';   // 可以用''包含""
var str2 = "我是'可爱'程序猿";  // 也可以用"" 包含''
var str3 = '我是程序猿"; // 报错，不能 单双引号搭配

• 字符串转义符

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

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

• 字符串长度

字符的数量就是字符串的长度，通过字符串 length 属性获取。

var str= "我是可爱程序猿";
alert(str.length); // 弹窗显示7 

• 字符串拼接

多个字符串之间可以使用 + 进行拼接，并生成新的字符串。

//1.1 字符串 "相加"
alert( 'hello' + ' ' + 'world' ); // hello world
//1.2 数值字符串 "相加"
alert( '123' + '1' ); // 1231
//1.3 数值字符串 + 数值
alert( '12' + 12 );     // 1212 

3. 布尔型Boolean（默认值为false）

   布尔类型表示真或假、开或关、是或否、对或错，这个类型只有两个值：true 和 false

   布尔型在javascript中通常是比较操作的结果，例如：

   a > 4
   //测试a是否等于数值4，如果是，返回true;否则返回false 

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

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

4. Undefined和Null（默认值为undefined、null）

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

   var name;
   console.log(name);           // undefined
   console.log('你好' + name);  // 你好undefined
   console.log(123 + name);     // NaN
   console.log(true + name);   //  NaN

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

   var age = null;
   console.log('你好' + age);  // 你好null
   console.log(123 + age);     // 123
   console.log(true + age);   //  1

总结：undefined 是没有定义的，null 是定义了但是为空。

复杂类型

• Object ：对象

在 JavaScript 中，对象是一组无序的相关属性和方法的集合。

var obj = {
    name:'李四',
    age:21,
    score:100
};

• Array：数组

数组是多个数据的集合。

 // 创建一个空数组
 var arr1 = []
 
 // 创建一个有内容的数组
 var arr2 = [1, 2, 3]

获取变量的数据类型

• typeof

  可用来获取变量的数据类型

  语法：typeof(变量名或表达式)；

  示例：

  var num = 18;
  console.log(typeof num) // 结果 number   
  console.log(typeof(num+'str')) // 结果 string  

不同类型的返回值：

类型	例子	结果
String	typeof “小李”	“string”
Number	typeof 21	“number”
Boolean	typeof true	“boolean”
Undefined	typeof undefined	“undefined”
Null	typeof null	“object”

typeof结果为’object’时 --> 说明是对象类型的变量或值，或者null(这个是js历史遗留问题，将null作为object类型处理)

数据类型转换

什么是数据类型转换?

把一种数据类型的变量转换成另外一种数据类型。

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

	1. 转换为字符串类型
    
	2. 转换为数字型        
	
	3. 转换为布尔型

1. 转换为字符串

       // 数据类型转换
       var num = 18;
       console.log(num.toString());      //结果："18"
       console.log(String(num));        //结果："18"
       console.log(num + '');   	   //结果："18"，''表示空字符串，是String类型
       console.log(num + '任意字符串');      //结果："18任意字符串"

       var result = 100 > 99;  //布尔类型
       console.log(String(result))         //结果：true 得到字符串true
       console.log(typeof String(result))  //结果：string

2. 转换为数字型（重点）

• parseInt()不会四舍五入，例如parseInt(56.652) 结果会是56
• 隐式转换是在进行算数运算时，JS 自动转换了数据类型
• 隐式转换数字类型不包括加法运算

var num='3.14';
console.log(parseInt(num));       //结果：3
console.log(parseFloat(num));     //结果：3.14
console.log(Number(num));         //结果:3.14
console.log(num-0);                //结果：3.14
console.log(num*1);                //结果：3.14

3. 转换为布尔型

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

• 其余值都会被转换为 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(Boolean('小张')); // true
console.log(Boolean(12)); // true

以上总结的知识点可能会有些错误的地方，如有更好的建议，欢迎您在评论区友善发言。