JS从0开始——第一天笔记

HTML和CSS经过两周的学习基本算是完了，但是还有好多的条条框框需要自己去尝试，去发现，去解决，关键就是一个字——练。除此之外我看了一下H5的，还有移动端的，但是没有整理，我会找个时间整理一下的，其实移动端内容不多的。接下来我进入到了JS的学习，还是老样子，我会发每天整理的js学习笔记，如果有错误，多多提出！
一天学下来，我发现从零开始学习的知识点特别零散，不好串联起来，所以笔记可能也会有点散。

目录

• js的组成：
• JS的输出方法
• 变量命名规则
• innerHTML和innerText
• JS的数据类型
  • 基本数据类型和引用数据类型的根本区别
  • 基本数据类型
    • number
    • string字符串
    • bollean 布尔类型
  • null 和undefined知识点
  • 引用数据类型
    • 对象
    • 数组
  • 数据类型的比较
• typeof：检验数据的类型

js的组成：

• ECMAScript：规定了JS的 基础语法，变量，数据类型，操作语句等内容。
• DOM：（document object model）：文档对象模型，提供了在JS中操作页面元素的属性和方法。
• BOM：（Browser object model）：浏览器对象模型，提供JS操作浏览器的属性和方法。

JS的输出方法

• console.log( ) 在控制台输出，经常用于调试BUG

如果通过id名获取不到内容，那么获取的结果是null

• alert：弹出

1.会让代码停止到这一行
2.会把弹出的值转成字符串：默认调用toString方法

• confirm：相对于alert多一个取消按钮；如果点击确定，a代表true，点击取消，代表false
• confirm.dir() 详细输出
• confirm.table() 把json数据以表格的形式输出

变量命名规则

1. 变量名由字母、数字、下划线、$组成;
2. 变量名数字不能开头，并且严格区分大小写；
3. 遵循驼峰命名法：第一个单词首字母小写，剩余有意义的单词首字母大写；
4. 关键字和保留字不能作为变量名；

innerHTML和innerText

• innerHTML： 改变元素的内容，而且识别标签
• innerText：改变元素内容，但是不能识别标签

JS的数据类型

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

基本数据类型性是操作值的，引用类型操作的是空间地址。

栈内存和堆内存：这是浏览器形成的两个虚拟的内存；

• 基本数据类型值都存储到栈内存中，栈内存提供代码运行环境
• 引用数据类型值都存储到堆内存中，堆内存只提供存储空间，和运行环境没有关系
  对象的定义：
  1. 首先开辟一个堆内存空间；
  2. 把对象中的键值对存储到这个空间内；
  3. 把这个堆内存的空间地址赋值给obj
     注：obj实际上存储了一个十六进制的空间地址：这个空间地址是浏览器给其分配的。
     在JS中，遇到{ } [ ] 都会重新开辟一个新的空间地址。

基本数据类型

number string boolean null undefined

number

整数、小数、0、NaN

• NaN

not a number：不是一个数，但是属于number类型
typeof NaN ->"number"
NaN==NaN：false。NaN和任何其他值都不相等

• isNaN

用来检测当前这个值是否是非有效数字，如果不是有效数字检测的结果是true，反之是有效数字则为false

注：当我们使用isNaN检测值的时候，检测的值不是number类型的，浏览器会默认的把值先转换为number类型，然后再去检测
例：isNaN（'12'） -> false

• Number()

把其它数据类型值强制转化为number类型的值

Number('12') ->12
Number('12px') ->NaN
在使用Number转换的时候只要字符串中出现任何一个非有效数字字符，最后的结果都是NaN

Number（true） ->1
Number（false） ->0

Number（null） ->0
Number（undefined） ->NaN

把引用数据类型转换为number，首先需要把引用数据类型转换为字符串（toString），再把字符串转换为number即可
例：
Number({}) =>{}->"object"->NaN
Number（[]） =>[]->" "->0
Number([12]) =>[12]->"12"->12
Number([12,23]) =>[12,23]->"12,23"->NaN

• parseInt()

也是把其它数据类型值转换为number，和Number方法在处理字符串的时候有所区别

Number('12px') =>NaN
parseInt('12px') =>12
parseInt('12px13') =>12
parseInt('px12') =>NaN
parseInt(' ') =>NaN
parseInt('12.5px') =>12
//提取规则：从左到右依次查找有效数字字符，直到遇见非有效数字，（不管后边是否还有，都不找了）把找到的转换为数字

• parseFloat()

在parseInt()基础上可以识别一位小数点

parseFloat（'12.66.88'） =>12.66
parseInt('12.5px') =>12
parseFloat('12.5px') =>12.5 

思考：parseInt常用的只需要传递一个值做参数即可，但是它支持多个参数
例如：parseInt（'12.5',10）

• toFixed()：保留小数点位数；返回一个字符串，并且进行了四舍五入

语法：number.toFixed(保留小数位数)

var num=12.8889
console.log(num.toFixed(2))=>12.89

string字符串

字符串：用单引号或双引号包起来的值就是字符串类型。
1.length：有长度，length的属性代表字符串的个数；
str.length
2.有索引：索引从0开始，第二个字符索引是1；
str[索引数值]

获取字符串最后一项目
str[str.length-1]

3.字符串运算
任何数字和NaN运算都是NaN
- * /：先把字符串转换成数字，然后再运算。
+：字符串的拼接

bollean 布尔类型

bollean只有两个值：true和false。

• Bollean（）

把其它类型转换为布尔类型；返回值只有true和false。

在JS中，只有 0、NaN、空字符串、null、undefined 这五个数据值转换为布尔类型返回false，其余的都会返回true

• !：取反

叹号在JS中的一个作用：'取反'，先把值转换为布尔类型，然后在去取反（true或者false）

null 和undefined知识点

typeof null-->"object"；
typeof undefined-->"undefined"

• null和undefined都表示没有
• null表示现在没有，以后可能会有；undefined表示现在没有，以后也不可能有。
• null表示空对象指针。
• 如果变量只声明，没有赋值，那么默认存储的值就是undefined。

null的情况

1. 通过id获取元素如果获取不到内容，那么默认返回值是null；
2. 如果需要销毁对象的堆内存，那么给对象赋值为null；

var obj={a:1};
obj=null;

3. 正则进行捕获，捕获不到内容，那么返回值是null；

undefined的情况

1. 如果变量只声明，没有赋值，那么默认存储的值就是undefined；
2. 如果获取对象的属性名对应的属性值，如果属性名不存在，获取的值是undefined；
3. 如果函数的形参没有对应的实参，那么形参默认存储的值是undefined；
4. 如果函数没有return，那么默认的返回值也是undefined

引用数据类型

引用数据类型分为对象数据类型和函数数据类型
对象数据类型分为：对象 数组 正则 函数 Data的实例 Math……
函数数据类型分为：函数 类

对象

对象的特征：对象由键值对组成，键值对由逗号隔开，键值对由属性名和属性值组成，属性名：属性值，前面的是属性名，后面的是属性值，由冒号隔开

1. 对象没有length属性；

var obj={a:1,b:2,1:100}
console.log(obj.length);//=>undefined

2. 获取某个属性名对应的属性值

语法：对象名.属性名

console.log(obj.a);//方法一，一般情况下用方法一
console.log(obj["1"]);//方法二，如果属性名是数字的话，只能用方法二

3. 新增键值对

//在obj中新增一个键值对d：200
obj.d=200;//方法一
obj["d"]=200;//方法二

4. 修改键值对：如果原先没有就是新增，有就是修改

//将c的属性值修改为北京
obj.c="北京";//方法一
obj["c"]="北京";//方法二

5. 删除键值对

语法：delete+对象名.属性名

//删除c键值对
delete obj.c;

6. 只要是以值存在的一定是一个具体的数据类型值。放在等号的后面或者对象属性名冒号的后面一定是值。

数组

数组：数组由数组成员组成，数组成员由逗号隔开。

1. 有length：属性值代表数组成员的个数；
2. 数组是有索引的；索引从0开始，依次递增1；

数据类型的比较

1. ==比较：返回一个布尔值，相等返回true，不相等返回false,允许不同数据类型的比较；

• 如果是不同类型的数据进行比较，会默认进行数据类型之间的转换。
• 如果是对象数据类型之间的比较，比较的是空间地址是不是同一个内存地址。

数据类型比较规律
对象-->先toString转字符串-->再转数字
字符串-->转数字
布尔值-->数字
{ }调用toString 转换成字符串结果是"[object object]"

null==defined; -->true
NaN==NaN; --false; //NaN和任何其他值都不相等

2.===绝对比较：只要数据类型不一样，那么返回false。

typeof：检验数据的类型

返回一个字符串（" 数据类型 "），字符串内容代表当前的数据类型
使用typeof检测，返回的结果是一个字符串，字符串中包含的内容证明了值是属于什么类型的
局限性

1. typeof null不是'null'而是'object'：因为null虽然是单独的一个数据类型，但是它原本意思是空对象指针，浏览器使用typeof检测的时候会把它按照对象来检测
2. 使用typeof无法具体细分出到底是数组还是正则，因为返回的结果都是'object'

typeof null-->"object"；
typeof undefined-->"undefined"

检验数据类型的方法还有：

• typeof：检测数据类型的运算符
• instanceof：检测某个实例是否属于这个类
• constructor：获取当前实例的构造器
• Object.prototype.toString.call：获取当前市里的所属类信息