JavaScript 高级程序设计笔记

作者: 小学生的博客 | 来源:发表于2017-03-21 16:31 被阅读10次

记录下遗忘的知识点

Part3

1. ECMAScript5引入严格模式(严格模式下，ECMAScript3中的一些不确定的行为将得到处理，而且对某些不安全的操作也会抛出异常)
  使用方法：这个脚本顶部添加 'use strict'
2.五种简单数据类型（基本数据类型）
Undefined、Null、Bollean、Number、String
一个复杂数据类型：Object
3.undefined（声明了变量但未加以初始化）
4.null （表示一个空指针）
5.boolean 任何数据类型的值调用Boolean()函数，总会返回一个Boolean值，参照下图：

Boolean

6.NaN(非数值是一个特殊的数值)表示一个本来要返回数值的操作数未返回数值的情况。
特殊点：任何涉及NaN的操作都会返回NaN；NaN与任何数值都不想等，包括他本身。
isNaN() ：尝试转换为数值，不能被转换为数值的值返回 true。（转换数值知识点）
7.ECMAScript 中的所有参数传递的都是值，不可能通过引用传递参数。
8.ECMAScript函数不能重载。

Part4

1.基本数据类型是按值访问的，因此可以操作保存在变量中的实际的值。
引用类型的值时按引用访问的（JavaScript不允许直接访问内存中的位置）
2.检测基本数据类型时用 typeof 操作符
检测引用类型的值时用 instanceof 操作符
3.没有块级作用域

Paste_Image.png

查询标识符，从作用域链的前端开始，向上逐级查询与给定名字匹配的标识符。

4.垃圾收集：
标记清除：算法的思想是给当前不使用的值加上标记，然后在回收其内存。
第一阶段,标记所有的可访问对象.第一阶段叫做标记阶段.
第二阶段,垃圾收集算法扫描堆并回收所有的未标记对象.第二阶段叫做收集阶段.
引用计数：算法是思想是跟踪记录所有的值被引用的次数。
引用计数对循环引用的垃圾回收会出现内存泄漏，而IE的DOM回收机制便是采用引用计数的。IE9+把BOM和DOM对象都转换成真正意义的JavaScript对象。避免两种垃圾收集算法的并存。
5.解除变量的引用不仅有助于消除循环引用现象，而且对垃圾收集也有好处。为了确保有效地回收内存，应该及时解除不在使用的全局对象、全局对象属性以及循环引用变量的引用。

Part5 引用类型

对象是某个特定引用类型的实例

1.Object类型

创建方式：
① new操作符后跟Object构造函数
②使用对象字面量表示法。

2.Array类型

ECMAScript数组的每一项可以保存任何类型的数据。
创建方式：
①使用Array构造函数 eg： var arr= new Array();
②使用数组字面量表示法 eg: var arr=[1,2,'A'];
数组最多包含4294967295个项

2.1检测数组
ECMAScript新增 Array.isArray()

2.2转换方法
toString()
valueOf()
toLocaleString()
调用数组的 toString()方法会返回有数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。
调用数组的 valueOf()方法会返回的还是数组。
toLocaleString()不同之处在于，为取到每一项的值，调用的是toLocaleString()方法，而不是toString()方法

join()方法可以使用不同的分隔符来构建这个字符串。如， || *

2.3栈方法（后进先出）
push() 可以接收任意数量的参数，把他们逐个添加到数组末尾。并返回修改后数组的长度。
pop() 从数组末尾移除最后一项，减少数组的length值，返回移除的项。

2.4队列方法（先进先出）
shift() 移除数组中的第一个项并返回该项，同时将数组长度减一。
unshift()在数组前端添加任意个项并返回新数组的长度。

2.5重排序方法
reverse() 翻转数组项的顺序

sort() 方法时按升序排列数组项（调动数组项的toString()转型方法，比较字符串。）
arrayObject.sort(sortby)
sortby 可选。规定排序顺序。必须是函数。
给数值型数组排序时，可以定义排序函数

var arr = [12,5,8,40];
function sortNumber(a,b){
   return a - b  //  return b-a 为降序排列
}
arr.sort(sortNumber);

或者复杂点

    var arr = [12,5,8,40];
    function compare(value1, value2) {
        if (value1 < value2) {
            return -1;
        } else if (value1 > value2) {
            return 1;
        } else {
            return 0;
        }
    }
    arr.sort(compare);

2.6操作方法
concat()
创建当前数组的一个副本，将接收到的参数添加到这个副本的末尾，最后返回新构建的数组，

slice()
arrayObject.slice(start,end)
start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
arrayObject.splice(index,howmany,item1,.....,itemX)
index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX 可选。向数组添加的新项目。

2.7位置方法
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

2.8迭代方法
map()是对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。这个数组的每一项都是在原始数据中的对应项上运行传入函数的结果
filter()是对数组中的每一项运行给定函数，返回该函数会返回true的项所组成的数组。它利用指定的函数确定是否在返回的数组中包含某一项
every()是对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。
some()是对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。
forEach() 是多数组中的每一项运行给定函数，这个方法没有返回值。它只是对数组中的每一项运行传入的函数，没有返回值。本质上与使用for循环迭代数组一样。

2.9缩小方法
reduce() reduceRight()
迭代数组的所有项，然后构建一个最终返回的值。

3.Date类型

4.RegExp类型

5.Function类型

函数是对象，函数名是指针。

5.1 没有重载（两个同名函数，后面的会覆盖前面的函数）

5.2 函数声明与函数表达式
解析器会率先读取函数声明，并使其在执行任何代码前可用，
函数表达式，会在解析器执行到它所在是代码行，才会真正被解释执行。

5.3作为值的函数

5.4函数内部属性
特殊对象：arguments 和 this
用例：阶乘

  function factorial(num) {
        if (num <= 1) {
            return 1;
        } else {
            return num * arguments.callee(num - 1);
        }
    }

5.5函数属性和方法
每个函数都包含两个属性 length 和 prototype
length 表示函数希望接受的命名参数的个数。
prototype是保存他们所有实例方法的真实所在。

6基本包装类型

引用类型与基本包装类型的主要区别就是对象的生存期。

基本包装类型，也是一种引用类型。基本包装类型是对基本数据类型的封装，封装后即具有基本类型的功能，也有各自的特殊行为（方法）

基本包装类型需要一个new来创建。请看下面的例子：
1.字面量写法：var box = 'Mr. Lee';//字面量
box.name = 'Lee';//无效属性
box.age = function () {//无效方法
return 100;
};
alert(box);//Mr. Lee
alert(box.substring(2));//. Lee
alert(typeof box);//string
alert(box.name);//undefined
alert(box.age());//错误

2.new 运算符写法：var box = new String('Mr. Lee');//new 运算符
box.name = 'Lee';//有效属性
box.age = function () {//有效方法
return 100;
};
alert(box);//Mr. Lee
alert(box.substring(2));//. Lee
alert(typeof box);//object
alert(box.name);//Lee
alert(box.age());//100

6.1Boolean类型
6.2Number类型
6.3String类型

7.单体内置对象

Global对象
Math对象

Part7

1.递归：是在一个函数通过名字调用自身的情况下构成的
2.闭包：是指有权访问另一个函数作用域中的变量的函数

Part8 BOM

1.BOM的核心对象是window，他表示浏览器的一个实例。
2.全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以。
1. JavaScript是单线程语言，但他允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。
  超时调用： setTimeout();
  间歇调用： setInterval();
4.系统对话框
alert()
confirm()
prompt()

Part9 客户端检测

1.客户端检测是JavaScript开发中最具争议的一个话题。经常使用：
能力检测：在编写代码之前先检测特定浏览器的能力。
怪癖检测：实际上是浏览器实现中存在的bug。（无法精确检测特定的浏览器和版本）
用户代理检测：通过检测用户代理字符串来识别浏览器。（万不得已才使用）

Part10 DOM

最基本的节点类型时Node，用于抽象地表示文档中一个独立的部分，所有其他类型都继承自Node
*jQuery 的核心就是通过CSS选择符查询DOM文档取得元素的引用。从而抛开了getElementById()和getElementByTagName()

Part13

1.事件流描述的是从页面中接收事件的顺序。
2.IE的事件流叫做事件冒泡。（所有现代浏览器都支持事件冒泡）
3.事件捕获。相反，document对象首先接收到click事件，然后事件沿着DOM书依次向下。直到事件的实际目标。
4.DOM事件流。包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
5.事件处理程序：
HTML事件处理程序
DOM0级事件处理程序
DOM2级事件处理程序
IE级事件处理程序
跨浏览器的事件处理程序
6.建立在事件冒泡机制智商的事件委托技术，可以有效的减少事件处理程序的数量。
7.建议在浏览器卸载页面之前移除页面中的所有事件处理程序。

Part23 客户端存储

cookie 的限制使其可以存储少量的数据。
Web Storage定义了两种存储数据的对象，sessionStorage 和localStorage
前者严格用于在一个浏览器会话中存储数据，因为数据在浏览器关闭后会立即删除。
后者用于跨会话持久化数据并遵循跨域安全策略。
IndexedDB是一种类似SQL数据库的结构化数据存储机制。但他的数据不是保存在表中，而是保存在对象存储空间中。

Part25 新兴API

requestAnimationFrame()：优化JS动画API，能够在动画运行期间发出信号，是浏览器能都自动优化屏幕重绘操作
Page VIsibility API ：让开发者知道用户什么时候正在看着页面，而什么时候页面是隐藏的。
Geolocation API ：在得到许可的情况下，可以确定用户所在的位置。
File API ：可以读取文件内容。用于显示、处理、上传。
Web计时：给出页面加载和渲染过程的很多信息。对性能优化非常有价值。
Web Workers ：可以运行异步JavaScript代码，避免阻塞用户界面。