工作时，遇到 变量，数据类型的那些坑！！！

核桃路
361 阅读5分钟

1---10

五 : 变量（variable） 它不是具体的值，只是一个用来存储具体值的容器或者代名词，因为它存储的值可以改变，所以称为变量

```
	基于ES语法规范，在JS中创建变量有以下方式
	- var （ES3）
	- function (ES3)  创建函数（函数名也是变量，只是过存储的值是函数类型）
	- let (ES6)  
	- const (ES6)  创建的是常量
	- import(ES6)  基于ES6的模块规范导出需要的信息
	- class  （ES6） 基于ES6创建类
```

六 : 语法 : var [变量名] = 值 let [变量名] = 值
const [变量名] = 值 function 函数名 () { }

```
var n = 13;
n = 15;
alert(n+10);  //=>弹出来25  此时N代表15
const  m = 100;
m = 200;// => Uncaught  TypeError:
Assignment  to  constant  variable.
不能给一个常量重新赋值（常量存储的值不能被修改，能够修改就是变量了
```

七: 创建变量， 命名的时候遵循一些规范 - 严格区分大小写 - 遵循驼峰命名法 ：按照数字、字母 、下划线来命名（数字不能作为名字的开头) , 命名的时候基于英文单词拼接成一个完整的名字（第一个单词字母小写，其余每一个有意义单词的首字母都大写 - 不能使用关键字和保留字，未来可能会成为关键字的叫做保留字

	var n = 12;
	var N = 13;  //两个n不是同一个变量
	var student Info / student_info /
	_studentInfo (下划线在前的，都是公共变量)   /
	$studentInfo (一般存储的是JQ元素) . . .	
	
	语义化强一些

八 : 数据值是一有以下这些类型

  • 基本数据类型（值类型）
    • 字 number
    • 字符串string
    • 布尔boolean
    • null
    • undefind
  • 引用数据类型
    • 对象object
      • 普通对象
      • 数组对象
      • 正则对象
      • 日期对象
      • . . .
    • 函数function
  • ES6中新增加的一个特殊的类型 : Symbol , 唯一的值
   	 [基本数据类型]
   	 var n =13;  //=>0     -13    13.2  数据类型中有一个特殊的值NaN(not a number 代表不是一个有效的数字，但是属于number类型的）
   	var s = ' ';  //=> ""   "13"  "{}"    JS中所有用单引号或者双引号包裹起来的都是字符串，里面的内容是当前字符串中的字符（一个字符串由零到多个字符组成）
   	
   	var b = true // =>布尔类型只有两个值  true真  false 假
   	
   	[引用数据类型]
   	var o ={name: ‘马德路，age ：9} ;  //=>普通的对象:由大括号包裹起来，里面包含多组属性名和属性值（包含多组键值对）  {}  空对象
   	
   	var   ary = [12,23,34,45];  //=>中括号包裹,包含零到多项内容，这种是数组对象   []  空数组
   	//验证是否为有效数字的正则
   	
   	var reg = /-?(\d  |  ([1-9]\d+)) (\. \d+)?/g   //=>由元字符组成一个完整的正则     //=>不是空正则是单行注释
   	function  fn(){
   }
   [ Symbol]
   创建出来的是一个唯一的值
   var a = Sybol('马德路1’);
   var b= Sybol('马德路2’);
   a==b=  >false

扩展: JS 代码如何被运行以及运行后如何输出结果 [如何被运行] - 把代码运行在浏览器中（浏览器内核来渲染解析） - 基于NODE来运行 （NODE也是基于V8引擎渲染和解析JS的工具） - [如何输出结果] - alert: 在浏览器中通过弹框的方式输出（浏览器提示框） ``` var num = 12; alert（num） ; // => window.alert var str = '马德路' ; alert(str);

		alert(1+1);  => '2' 基于alert 输出的结果都会转化为字符串:把值（如果是表达式先计算出结果）通过toString 这个方法转化为字符串，然后再输出
		alert(true);  => 'true'
		alert([12,23]);  '12,23' 
		alert({name: 'xxx'});  =>'[object object]'  对象toString后的结果就是object  object,为啥？
	```
	-  confirm : 和alert的用法一致,只不过提示的框中有确定和取消两个按
	钮,所以他是确认提示框

	```
		var flag = confirm ('确定要退吗？');
		if(flag){
			//=>flag:true  用户点击的是确定按钮
		}else{
			//=》flag:flase  用户电机的是取消按钮
		}
	```
	- prompt  : 在confirm的基础上增加输入框
	-  console .log  :  在浏览器控制台输出日志 （按F12（FN+F12）打开浏览器
	的控制台）
			+ Elements  :  当前页面中的元素和样式在这里都可以看到，还可以调节样式修改结构等
			+ Console :  控制台, 可以在JS代码中通过.log 输出到这里, 也可以在这里直接编写JS代码
			+ Sources : 当前网站源文件都在这里
	-  console.dir : 比log输出的更加详细一些（尤其是输对象数据值的时候）
	-  console.table :  把一个JSON数据按照表格的方式输出
	-   . . . (自己回去扩展更多console输出方法)

九、数据类型的详细刨析 1、number 数字类型 NaN: not a number 但是他是数字类型的 isNaN：检测当前值是否不是有效数字,返回true 代表不是有效数字,返回flase是有效数字

	//=>语法：isNaN([value])
	var num = 12;
	isNaN(num);    //->检测num变量存储的值是否为有效数字  false

	isNaN('13')=> false
	isNaN(true) =>false 
	isNaN(true) =>false 
	isNaN(null) =>false
	isNaN(undefind)=>true
	isNaN({age:9}) => true
	isNaN([12,23]) =>true 
	isNaN([12]) 
	=>false 
	isNaN(/^$/) =>true
	isNaN(function(){})=>true
	
	
	重要：isNaN检测的机制
	1、首先验证当前要检测的值是否为数字类型的，如果不是，浏览器会默认的把值转化为数字类型
		把非数字类型的值转化为数字
		- 其他基本类型转化为数字: 直接使用Number这个方法转化的
		- 把值转化为数字类型
		把非数字类型的值转化为数字
		- 其他基本类型转化为数字：直接使用Number 这个方法转换的
		
		[字符串转数字]
			Number ('13') ->13
			Number('13px')->NaN  如果当前字符串出现任意一个非有效数字字符，结果为NaN
			Number('13.5')->13.5 可以识别小数
		[布尔转数字]
			Number(true)->1
			Number(false)->0
		[其他]
			Number(null)->0
			Number(undefined)->NaN
		- 把引用数据类型转化为数字: 先把引用值调取toString转化为字符串，然后在把字符串调取Number转化为数字
		[对象]
			({}).toString() ->'[object object]'->NaN
		[数组]
			[12,23].toString()->'12,23'->NaN
			[12].toString()->'12'->12
			[正则]
				/^$/.toString()->'/^$/'->NaN

			Number('')->0
			[].toString()->''=>isNaN([]);
			
			
				
			

	2、当前检测的值已经是数字类型，是有效数字返回false,不是返回true(数字类型中只有NaN不是
	有效数字，)

2.parseInt / parseFloat 等同于Number ,也是为了把其他类型的值转化为数字类型 和Number的区别在于字符串转化分析上 Number : 出现任意非有效数字字符,结果是NaN

parseInt : 把一个字符串中的整数部分解析出来 parseFloat 是把一个字符串中小数(浮点数)部分解析出来

   parseInt('13.5px') =>13
   parseFloat('13.5px') =>13.5
   parseInt('width:13.5px') =>NaN  从字符串最左边字符开始查找有效数字字符，并且转化为数字，但是一旦遇到一个非有效数字字符，查找结束

  1. NaN的比较

	NaN==NaN;   false  NaN和谁都不相等，包括自己

思考题 : 有一个变量num ,存储的值不知道，我想检测它是否为一个有效数字，下面方案是否可以

	if(Number(num)==NaN){
		alert('num不是有效数字');
	}和谁都不相等，条件永远不结果确实是成立(即使num确实不是有效数字,转换的结果确实是NaN,但是NaN!=NaN的)

	if(isNaN(num)){
		//=>检测是否为有效数字，只有这一种方案
		alert('num不是有效数字')
	}

###布尔类型

只有两个值：true/false

如何把其他数据类型转化为布尔类型？

  • Boolern
  • !
  • !!
Boolean(1)=>true
!'马德路' => 先把其他数据类型转化为布尔类型,然后
取反
!!null =>取两次反，等价于没取反，也就只剩下转换为布尔类型了

规律：'在JS中只有：0/NaN/空字符串/null/undefined =>这五个值转化为布尔类型的false,其余转换为true

###null &&undefined

都代表空

  • null :空对象指针
  • undefined : 未定义

null : 一般都是意料之中的没有 （通俗理解：一般都是人为手动的先赋值为null，后面的程序中我们会再次给他赋值）

	var num =null;  //=>null是手动赋值，于是着后面我会把num变量的值进行修改
	...
	num = 12;

undefined 代表没有一般都不是人为手动控制的，大部分都是浏览器自主为空（后面可以赋值也可以不赋值）

	var num;  //=>此时变量的值，浏览器给分配的就是undefined
	undefined
	...
	后面可以赋值也可以不赋值

这是我建的qq群里面有很多资源，希望能和大家一起学习讨论共同进步!

这是群号:778734441

我还会分享更好的资料给大家，希望大家多多支持，我会发布很多优秀的作品出来的！！！

avatar
文章
阅读
粉丝