JavaScript高级程序设计－摘要笔记－1

说明：

1. 此摘要笔记系列是我最近看《JavaScript高级程序设计(第3版)》随手所记。

2. 里面分条列举了一些我认为重要的、需要记下的、对我有帮助的点，是按照我看的顺序来的。

3. 摘要笔记本身没有系统性，没有全面性可言，写在这里供有一定基础的前端开发者参考交流。

4. 里面的知识点、例子大部分来源于本书，或者延伸出来的，都经过我的测试是对的，但是没办法保证100%正确，如果有人看到错误的地方，希望指出来，谢谢。

正文：

1、数组检测方法：

1. value instanceof Array  // true / false
2. Array.isArray(value)  // true / false, 支持的浏览器 IE 9+，Firefox 4+, Safari 5+, Opera 10.5+, Chrome

2、栈和队列

栈是一种 LIFO(Last-In-First-Out后进先出) 的数据结构。在数组中表现为 push() pop() 方法
队列数据结构的访问规则是 FIFO(First-In-First-Out) ，在数组中表现为 push() shift() 方法

3、数组的 sort() 会对每一项调用 toString() 方法，所以是按照字符串来排序的，可以传一个函数作为参数来解决这个问题，如下：

function compare (value1, value2) {
  if (value1 < value2) {
    return -1
  } else if (value1 > value2) {
    return 1
  } else {
    return 0
  }
}

或者

function compare (value1, value2) {
  return value1 - value2
}
values.sort(compare)

得到从小到大的升序排列

4、数组的 slice() 方法，如果参数中有负数，则用数组长度加上该数来确定相应的位置，如果结束位置小于起始位置，则返回空数组

数组的 splice() 方法始终会返回一个数组

5、数组的 indexOf() lastIndexOf() 方法采用全等方法来查找项，返回查找到的项的索引，如果找不到返回 -1

// 支持的浏览器 IE 9+，Firefox 2+, Safari 3+, Opera 9.5+, Chrome

6、数组的迭代方法总结：

每个方法都接受两个参数， 1. 在每一项上运行的函数，2. 运行该函数的作用域对象——影响 this 的值(可选)
传入的函数会接受三个参数，数组项的值、索引、该数组

1. every() // 对每一项运行给定函数，如果每一项都返回true，则返回true。
2. filter() // 对每一项运行给定函数，返回该函数会返回true的项组成的数组。
3. forEach() // 对每一项运行给定函数，没有返回值。
4. map() // 对每一项运行给定函数，返回每一项调用的结果组成的数组。
5. some() // 对每一项运行给定函数，如果有一项返回true，则返回true。
// 支持的浏览器 IE 9+，Firefox 2+, Safari 3+, Opera 9.5+, Chrome

7、归并方法 reduce() reduceRight() // reduce()是从头部开始遍历，reduceRight()是从尾部开始遍历，其它都一样

// 这两个方法都接受两个参数，一个是在每一项上调用的函数，一个是作为归并基础的初始值(可选)，
// 传入的函数接受四个参数，前一个值、当前值、索引、数组对象，这个函数返回的任何值都会作为第一个参数传给下一项
// 注意：如果传递了第二个参数，即归并的初始值，那么函数会从数组第一项开始遍历，如果不传则把第一项作为初始值直接从第二项开始遍历

8、关于函数

函数实际上是对象，所以每个函数都是Function类型的实例，而且和其它引用类型一样具有属性和方法。
由于函数是对象，因此函数名实际上是指向一个函数对象的指针，不会与某个函数绑定。

9.函数两种定义方式：

区别在于函数声明提升。

a.函数声明：

  function sum (n1, n2) {
    return n1 + n2
  }

b.函数表达式：

  var sum = function (n1, n2) {
    return n1 + n2
  }

10.函数可以作为参数传给另一个函数，可以从一个函数中返回另一个函数，如：

function createComparisonFunction (propertyName) {
  return function (obj1, obj2) {
    var value1 = obj1[propertyName]
    var value2 = obj2[propertyName]

    if (value1 < value2) {
      return -1
    } else if (value1 > value2) {
      return 1
    } else {
      return 0
    }
  }
}

var data = [{
  name: 'ZhangSan',
  age: 18
}, {
  name: 'Nicholas',
  age: 19
}]
data.sort(createComparisonFunction('name'))

11. 函数内部属性

 在函数内部有两个特殊对象， arguments、this。
arguments 有一个名叫 callee 的属性，是一个指针，指向拥有这个 arguments 对象的函数，
应用如下：
求阶乘：

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

this 指执行这个函数的环境对象
es5 规范化了另一个函数对象的属性 caller，这个属性保存着调用当前函数的函数的引用，如果在全局作用域中则为null，如：

  function outer () {
    inner()
  }
  function inner () {
    alert(inner.caller)  // 显示 outer 函数的源代码
  }

或者：

function outer () {
  inner()
}
function inner () {
  alert(arguments.callee.caller)  // 显示 outer 函数的源代码
}

12. 函数的属性和方法

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

每个函数都包含两个非继承过来的方法，call()和apply()，作用都是在特定的作用域中调用函数，实际上等于设置函数体内this指针的值
apply() 接受两个参数，一个是在其中运行的作用域，一个是包含所有参数的数组，可以是 Array 的实例，也可以是 arguments 对象
call() 第一个参数同 apply(), 之后把所有参数直接传递给函数，如：

  window.color = 'red'
  var o = {
    color: 'blue'
  }
  function sayColor () {
    alert(this.color)
  }
  sayColor() // 'red'
  sayColor.call(this) // 'red'
  sayColor.call(window) // 'red'
  sayColor.call(o) // 'blue'

es5 定义了 bind() 方法，这个方法会创建一个函数的实例，其this值会被绑定到传给 bind() 函数的值，如：

window.color = 'red'
var o = {
  color: 'blue'
}
function sayColor () {
  alert(this.color)
}
var objSayColor = sayColor.bind(o)
objSayColor() // 'blue'
// 支持的浏览器 IE 9+，Firefox 4+, Safari 5.1+, Opera 12+, Chrome

13. num.toString(n) // 该方法返回几进制数值的字符串形式，如：

var num = 10
num.toString() // '10'
num.toString(10) // '10'
num.toString(2) // '1010'
num.toString(8) // '12'
num.toString(16) // 'a'

num.toFix(n) // 该方法将按照指定的小数位返回数值的字符串表示，如：
var num = 10
num.toFix(2) // '10.00'
// 如果数值本身比指定的小数位多，在现代浏览器上则按照四舍五入的办法来处理
num.toExponential(n) // 表示用指数表示法（也称e表示法）来把数值按指定的位数来转化成字符串形式，如：
var num2 = 10.1234
num2.toExponential(4) // '1.0123e+1'

14. String 类型的每个实例都有 length 属性，注意，即使有双字节字符，每个字符也只算一个字符，计算长度的时候算1，如：

var str = '哈哈'
str.length // 2

15. 字符方法：charAt() charCodeAt() // 这两个方法都接受一个基于0的字符位置的参数，前者返回对应字符，后者返回对应字符的字符编码，如：

var stringValue = 'hello world'
stringValue.charAt(1) // 'e'
stringValue.charCodeAt() // 101 // 数值类型
// es5 定义了 方括号加数字索引来访问特定字符的方法，如：
stringValue[1] // 'e'
// 支持的浏览器 IE 8+，Firefox , Safari , Opera , Chrome

16. 字符串操作方法

str.concat() // 类似于 + 号拼接字符串，可以传递多个参数，返回新的把str和所有参数拼接在一起的字符串
slice() substring() substr() // 这三个都是会返回被操作字符串经过分割得到的新字符串，接受一个或两个参数，第一个参数指定分割开始位置，
 // slice() substring() 的第二个参数指定分割结束位置，不包括该位置的字符串，substr() 第二个参数指返回的字符个数。
 // 如果没有给定第二个参数，则将字符串的长度作为结束位置，如：
var stringValue = 'hello world!'
stringValue.slice(3) // 'lo world!'
stringValue.substring(3) // 'lo world!'
stringValue.substr(3) // 'lo world!'

stringValue.slice(3, 7) // 'lo wo'
stringValue.substring(3, 7) // 'lo wo'
stringValue.substr(3, 7) // 'lo worl'
 // 如果传入的参数为负值，三个方法处理情况不相同：slice() 把两个负参数都跟字符串长度相加，substring() 把两个负参数都转化成0，
 // substr() 把第一个参数跟字符串长度相加，第二个参数转化成0

17. 字符串位置方法：indexOf() lastIndexOf() // 这两个方法都是从一个字符串中搜索给定的子字符串，然后返回子字符串的位置（没找到，则返回 －1）

// 这两个方法的区别在于，一个从前向后搜索子字符串，一个从后向前搜索子字符串，如：

var stringValue = 'hello world'
stringValue.indexOf('o') // 4
stringValue.lastIndexOf('o') // 7

// 这两个方法都可以接受第二个参数，表示从字符串中的哪个位置开始搜索，包括指定的位置，如以下方法通过循环调用找到所有匹配的子字符串：

function getAllStr (str1, str2) {
  var positions = []
  var pos = str1.indexOf(str2)
  while (pos > -1) {
    positions.push(pos)
    pos = str1.indexOf(str2, pos + 1)
  }
  return positions
}

18. trim() // es5 定义了这个方法，会返回一个删除了前置及后缀的所有空格的新字符串，如：

var stringValue = '  abc  '
stringValue.trim() // 'abc'
 // 支持的浏览器 IE 9+，Firefox 3.5+, Safari 5+, Opera 10.5+, Chrome
 // 此外 Firefox 3.5+, Safari 5+ Chrome 8+ 还支持非标准的 trimLeft() trimRight() 方法，分别用来删除字符串开头和结尾的空格

19. 字符串大小写转换方法

toLowerCase() toLocaleLowerCase() toUpperCase() toLocaleUpperCase()
toLocaleLowerCase() toLocaleUpperCase() // 为对少数语言应用的特殊规则

var stringValue = 'Hello World!'
stringValue.toLowerCase() // 'hello world!'
stringValue.toUpperCase() // 'HELLO WORLD!'

20. 字符串的模式匹配方法

这一部分稍后添加上去?

21. URI 编码方法 encodeURI() encodeURIComponent() 对应 decodeURI() decodeURIComponent()

编码方法可以对 URI(Uniform Resource Identifiers 通用资源标识符) 进行编码，以便发送给浏览器。有效的 URI 不能包含某些字符，如空格。
它们用特殊的 UTF-8 编码替换所有无效字符，从而让浏览器能够接受和理解。
区别是 encodeURI() 不会对本身属于 URI 的特殊字符进行编码，例如冒号、正斜杠、问号、井号；而 encodeURIComponent()
会对它发现的所有非标准字符进行编码。

decodeURI() 是 encodeURI() 的反操作
decodeURIComponent() 是 encodeURIComponent() 的反操作

---

第一部分结束。