一、数据类型

数据值是一门编程语言进行生产的材料，JS中包含的值有以下这些类型

• 基本数据类型（值类型）
  • 数字number
  • 字符串string
  • 布尔boolean
  • null
  • undefined
• 引用类型
  • 对象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,45];//=>中括号包裹起来，包含零到多项内容，这种是数组对象[]空数组

var reg=/-?(\d|([1-9]\d+))(\.\d+)?/g;//=>由元字符组成一个完整的正则 //不是空正则，是单行注释

function fn(){
}
alert(typeof fn);// 值是function fn(){},类型返回字符串是function

[Symbol]
创建出来的是唯一的值
var a=Symbol('珠峰');
var b=Symbol('珠峰');
//a===b =>false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

扩展：JS代码如何被运行及运行后如何输出结果
[如何被运行]

• 把代码运行在浏览器中(浏览器内核来渲染解析)
• 基于NODE来运行(NODE也是一个基于V8引擎渲染和解析JS的工具)node官网
  [如何输出结果]
• alert：在浏览器中通过弹框的方式弹出（浏览器提示框）

var num=12;
alert(num);//=>window.alert()

var str='珠峰';
alert(str);

 基于alert输出的结果都会转换成字符串：把值（如果是表达式先计算出结果）通过toString把结果转换成字符串，然后输出
alert(1+1);//=>'2'
alert(true);//=>'true'
alert([12,23]);//=>'12,23'
alert({name:'xxx'});//=>'[object Object]'

1
2
3
4
5
6
7
8
9
10
11
12

• confirm：和alert用法一致，只不过提示的框中有确定和取消两个按钮，所以它是确认提示框

var flag=confirm('确定要退出吗');
if(flag){
//=>flag:true 用户点击的是确定按钮
}else{
//=>flag:false 用户点击的是取消按钮
}
1
2
3
4
5
6

• console.log：在浏览器控制台中输出日志
  • Elements：当前页面中的元素和样式在这里可以看到，还可以调节样式修改结构
  • Console：控制台，可以在JS代码中通过.log输出到这里，也可以在之而立直接编写JS代码
  • Sources：当前网站的源文件都在这里
• console.dir：比log输出的更加详细一些（尤其是输出对象数据值的时候）
• console.table：把一个JSON数据按照表格的方式输出

二、数据类型的详细剖析

number数字类型

NaN：not a number 但是它是数字类型的
isNaN：检测当前这个值是否不是一个有效数字 true不是一个有效数字 false是一个有效数字

//=>语法：isNaN([value])
var num=12;
isNaN(num);//=>检测num变量存储的值是否为非有效数字 false
isNaN('13');//=>false
isNaN('珠峰');//=>true
isNaN(true);//=>false
isNaN(false);//=>false
isNaN(null);//=>false
isNaN(undefined);//=>true
isNaN({age:9});//=>true
isNaN([12,23]);//=>true
isNaN([12]);//=>false
isNaN(/^$/);//=>true
isNaN(function(){});//=>true
1
2
3
4
5
6
7
8
9
10
11
12
13
14

isNaN的检测机制

1. 首先验证当前要检测的值是否为数字类型的，如果不是，浏览器会默认的把值转换成数字类型
   把非数字类型的值转换成数字

• 把其他基本类型转换成数字：直接用Number方法转换
  [字符串转数字]
  Number(‘13’) -> 13
  Number(‘13px’) ->NaN 如果当前字符串中出现任意一个非有效数字字符，结果则为NaN
  Number(‘13.5’) -> 可以识别小数
  Number(true) -> 1
  Number(false) ->0
  [其他]
  Numebr(null) ->0
  Number(undefined) -> NaN
• 把引用数据类型转换成数字：先把引用值调取toString转换成字符串，然后再把Number转换成数字
  [对象]
  ({}).toString() ->‘[object Object]’ ->NaN
  [数组]
  [12,23].toString()->‘12,23’ ->NaN
  [12].toString()->‘12’->12
  [正则]
  /^KaTeX parse error: Expected group after '^' at position 19: …oString() -> '/^̲/’ ->NaN
  Number(‘’)->0
  [].toString()->‘’

2. 当前检测的值已经是数字类型，是有效数字返回false，不是返回true
   parseInt/parseFloat

等同于Number，也是为了把其他类型的值转换成数字类型
和Number的区别在于字符串转换分析上

Number：出现任意非有效数字字符，结果就是NaN
parseInt：把一个字符串中的整数部分解析出来，parseFloat是把一个字符中小数部分解析出来

parseInt('13px');//=>13
parseFloat('13.5px');//=>13.5
parseInt('width:13.5px');=>NaN 从字符串最左边查找有效数字字符，并且转换为数字，但是一遇到一个非有效数字字符，查找结束
1
2
3

NaN的比较

isNaN检测一个变量是否是不是一个有效数字，返回true表示不是有效数字，返回false表示是有效数字
NaN和谁都不相等，包括自己

NaN==NaN=>false 
1

if(Number(num)==NaN){
alert('num不是有效数字');
}
NaN和谁都不相等，条件永远都不成立，（即使num确实不是一个有效数字，转换的结果确实是NaN，但是NaN!=NaN）
if(isNaN(num)){
//=>检测是否为有效数字，只有这一种方案
alert('num不是有效数字');
}
1
2
3
4
5
6
7
8

isfinite

检测是否超过极限

布尔类型

只有两个值：true/false
如何把其他类型转换成布尔类型

• Boolean
• !
• !!

Boolean(0);//=>false
Boolean(1);//=>true

!'珠峰培训'//=>先把其他数据类型转换为布尔类型，然后取反

!!null =>取两次反，也就剩下转化为布尔类型了
1
2
3
4
5
6

规律：在Js中只有“0/NaN/空字符串/null/undefined”这五个值转换为布尔值为false，其余转换为true

null & undefined

都代表空或没有

• null：空对象指针
• undefined：未定义
  null一般都是意料中的没有（通俗理解：一般都是认为手动的现赋值为null，后面的程序中我们会再次给它赋值）

字符串初始化用空字符串
数值初始化用0
布尔值初始化用false

var num=null;//=>null是手动赋值，于是这后面我会把num变量的值进行修改，先声明了对象引用而必须初始化的结果

1
2

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

var num;//=>此时变量的值浏览器分配的就是undefined
1

String类型

String类型用于表示由于零或多个16位Unicode组成的字符序列，即字符串。字符串可以有双引号或单引号表示

toString

toString()方法可以将值转换成字符串，一般不需要传参，将数字转换为字符串时可以传递进制参数，不能将null和undefined转换为字符串

String()方法可以将null和undefined转换为字符串

Object对象数据类型

普通对象

• 由大括号包裹起来的
• 有零到多组属性名和属性值（键值对）组成
  属性是描述对象特征和特点的，属性是具备这个特征，属性值是对这个属性的描述 （专业语法，属性名称为键key，属性值成为值value）一组属性名和属性值称为一组键值对
  对象包含属性（字段）和方法（函数）

1. 使用字面量创建对象，这种方法不会调用构造函数

var obj={
name:'珠峰培训',
age:9
};
1
2
3
4
5

2. 通过new操作符创建对象，这种方法会调用构造函数

var box=new Object();
1

对象的操作，对键值对的增删改查

[增/改]

//JS对象中，属性名是不允许重复的，是唯一的
var obj1={
name:'xxx'
};
var obj2={
name:'qqq'
};
obj1.name='帝释天';//原有对象中存在name属性，此处属于修改属性值
obj1.sex='男';//原有对象不存在sex属性，此处相当于给当前对象增加一个属性sex
//对象的属性可以是一个函数
obj1.sumay=function(){
return '对象的函数';
}
1
2
3
4
5
6
7
8
9
10
11
12
13

[查]

//语法：对象.属性名 / 对象[属性]
var obj={};
obj.name;
obj['name'];//对象的属性名都是字符串格式的（属性值不固定，任何值都可以）
1
2
3
4

[删]

//彻底删除：对象中不存在这个属性
delete obj['age'];
//假删除：并没有删除这个属性，只是让当前这个属性为空
obj.sex=null;
1
2
3
4

在获取属性值的时候如果有当前对象有这个属性可以获取属性值即使是null，如果没有这个属性名则获取的结果是undefined
思考题

var obj={
name:'帝释天',
age:9
};
var name='zhufeng';
obj.name;//获取name属性的值
obj['name'];//获取name属性的值
obj[name];//此处的name是一个变量，我们要获取的属性不叫name，是name存储的值
1
2
3
4
5
6
7
8

'name’和name的区别
'name’是一个字符串值，它代表的是本身
name是一个变量，不是值，它代表的是本身存储的这个值
一个对象的属性名不仅仅是字符串格式的还有可能是数字格式的

var obj={
name:'帝释天',
0:12
};
obj[0];
obj['0'];
1
2
3
4
5
6

当我们存储的属性名不是字符串也不是数字的时候，浏览器会把这个值转换为字符串（toString）然后在进行存储

var obj[{}]=300;//先把{}通过toString转换为字符串'[object Object]'然后存储300
1

数组对象

数组内的元素可以是任何类型的元素

1. 用字面量方法创建数组

var ary=[12,23];// 创建一个数组并分配了两个元素
通过观察结果，发现数组对象的属性名是数字（我们把数字属性名称为当前对象的索引）
1
2

2. 用new关键字创建数组

var arr=new Arry();// 创建一个空数组
var arr1=new Arry(10);// 创建一个包含十个元素的数组
1
2

使用索引下表读取数组的值

var arr=['ary',19,'man'];
arr[0];// 获取'ary'
arr[1];// 获取19
1
2
3

var box=[];
box['name']='ary';
alert(box);// 输出为空，字符串下标不会体现在数组上
1
2
3

length属性

数组的length属性可以获取数组的长度即元素的个数

本地格式区域

1. 当浏览器渲染和解析JS是会提供一个供JS代码运行的环境，我们把这个环境成为全局作用域（global /window scope）
2. 代码自上而下执行（之前还有一个变量提升阶段）

Date对象

创建一个日期对象

var date=new Date();// 创建一个日期对象，构造方法里面可以传参数以指定时间，如果没传则默认当前时间
1

基本数据类型和引用类型的区别

基本类型的值会存储在当前作用域下

var a=2;
var b=a;
b=13;
console.log(a);
/*
*1.创建一个空间存储12；
*2.在当前作用域中声明一个变量；
*3.让声明的变量和存储的12进行关联（把存储的12赋值给a，赋值操作叫做定义）
栈内存：本身就是一个环境，所有的基本数据类型的值在栈内存中开辟一个位置进行存储
*/
/*
基本数据类型（也叫作值类型），是按照值来操作的，把原有的值复制一份放到新的空间或位置上去，和原来的值没有关系
*/
1
2
3
4
5
6
7
8
9
10
11
12
13

/*
引用类型的值不能直接存储到当前作用域中（因为可能存储的内容过于复杂），我们需要先开辟一个新的空间（理解为仓库）,把内容存储到这个空间中
1.首先开辟一个新的空间，把对象中的键值对依次存储起来，（为了保证后面可以找到这个空间） ，此空间有一个16进制的地址
2.声明一个变量
3.让变量和空间地址关联在一起（把空间地址赋值给变量）
引用类型不是按值操作，他操作的是空间的引用地址：把原来空间的地址赋值给新的变量，但是原来的空间没有被克隆，还是一个空间，这样就会出现多个变量关联的是相同的空间，相互之间就会出现影响了
堆内存用来存储引用类型中的信息值的，对象存储的是键值对，函数存储的是代码字符串
*/
var obj1={n:100};
var obj2=obj1;
obj['n']=200;
console.log(obj1.n);
1
2
3
4
5
6
7
8
9
10
11
12

练习

var obj={
	n:10,
	m:obj.n*10
};
console.log(obj.m);//报错 此时堆内存信息还没存储完成，空间的地址还没给obj，此时的obj是undefined
1
2
3
4
5

typeof

在JS中用来检测数据类型的方式之一，除了它以外还有

• Instanceof
• constructor
• Object.prototuype.toString.call()

语法：typeof [value]=>检测数据类型，可以操作变量，也可以操作字面量
返回值：使用typeof检测出来的结果是一个字符串，字符串中包含着对应的数据类型 
var box;
alert(typeof box);// 'undefined',box是Undefined类型，值是undefined
typeof null=>'object' 因为null代表空对象指针（没有指向任何的内存空间）无法细分对象
1
2
3
4
5

instanceof

作用域

var box = 'Lee';// 全局变量，最外围，window的属性
function sum(){// 全局方法，最外围，window的方法
	return 123;
}
1
2
3
4

当执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁。
全局中的方法和属性在程序执行完毕或网页关闭会被销毁

var box = 'Lee';
function setBox(col){
	console.log(col);
}
setBox('red');// 输出‘’
console,log(box);

1
2
3
4
5
6
7

每个函数在执行时，都会创建自己的执行环境，当执行这个函数时，函数的环境就会被推到栈中去执行，而执行后又在环境栈中弹出，把控制权交给上一级的执行环境。

作用域链

当代码在一个环境中执行时，就会形成一个叫做作用域链的东西。它的作用是保证对执行环境中有访问权限的变量和函数进行有序访问。作用域链的前端，就是执行环境的变量对象。

没有块级作用域

块级作用域表示诸如if语句等有花括号封闭的代码块，所以，支持条件判断来定义变量。

if(true){
	var box = 'Lee';
}
console.log(window.box);// 输出'Lee',是全局变量
1
2
3
4

在函数体中有 var 就是局部变量，去掉 var 就是全局

变量搜索

变量查询中，访问局部变量要比全局变量更快，因为不需要向上搜索作用域链

内存

自动垃圾收集机制

执行环境会负责管理代码执行中使用的内存。垃圾收集方式是标记清除，垃圾收集器会在运行的时候给内存中的变量加上标记。然后他会去掉黄景中正在使用的标记，而没有去掉标记的变量将被视为准备删除的变量。最后，垃圾收集器完成内存清理工作，销毁那些带标记的值并回收它们所占用的内存空间。
垃圾收集器是周期性的，优化内存的最佳方案，就是变量不使用时，手动设置为null，释放引用，这种方式为解除引用。

基本包装类型

Boolean、Sting、Number类型与其他引用类型相似，但同时也具有与嘎子的基本类型相应的特殊行为。
实际上，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而调用一些方法。