1. Object 对象

JavaScript 的所有其他对象都继承自Object对象，即那些对象都是Object的实例。

• Object对象的原生方法分成两类：
  Object本身的方法：直接定义在Object对象的方法
  Object的实例方法：定义在Object原型对象Object.prototype上的方法
• Object本身是一个函数，可以当作工具方法使用，将任意值转为对象。
• Object构造函数的首要用途，是直接通过它来生成新对象。

💡 虽然用法相似，但是Object(value)与new Object(value)两者的语义是不同的，Object(value)表示将value转成一个对象，new Object(value)则表示新生成一个对象，它的值是value。

1.1 Object 的静态方法

• Object.keys方法(只返回可枚举的属性，更常用)和Object.getOwnPropertyNames方法都用来遍历对象的属性。

1.2 Object 的实例方法

• Object.prototype.valueOf()：返回当前对象对应的值。JavaScript 自动类型转换时会默认调用这个方法，可以用自定义的obj.valueOf覆盖Object.prototype.valueOf
• Object.prototype.toString()：返回当前对象对应的字符串形式。数组、字符串、函数、Date 对象都分别部署了自定义的toString方法，覆盖了Object.prototype.toString方法。
• Object.prototype.toLocaleString()：返回当前对象对应的本地字符串形式。
• Object.prototype.hasOwnProperty()：判断某个属性是否为当前对象自身的属性，还是继承自原型对象的属性。
• Object.prototype.isPrototypeOf()：判断当前对象是否为另一个对象的原型。
• Object.prototype.propertyIsEnumerable()：判断某个属性是否可枚举。

2. 属性描述对象

JavaScript 提供了一个内部数据结构，用来描述对象的属性，控制它的行为，比如该属性是否可写、可遍历等等。

{
  value: undefined,
  writable: true,
  enumerable: true, //是否可遍历
  configurable: true, //是否可配置
  get: undefined,
  set: undefined
}
1
2
3
4
5
6
7
8

💡 一旦定义了取值函数get（或存值函数set），就不能将writable属性设为true，或者同时定义value属性，否则会报错。

---

• 三个参数：object属性所在对象；propertyName字符串【属性名】；attributesObject属性描述对象
• writable、configurable、enumerable这三个属性的默认值都为false |
  | propertyIsEnumerable() | - 返回一个布尔值，用来判断某个属性是否可遍历
• 只能用于判断对象自身的属性 |

---

2.1 元属性

属性描述对象的各个属性称为“元属性”。

---

2.2 控制对象状态

有时需要冻结对象的读写状态，防止对象被改变。JavaScript 提供了三种冻结方法，最弱的一种是Object.preventExtensions，其次是Object.seal，最强的是Object.freeze

💡 BUG：可以通过改变原型对象，来为对象增加属性；
如果属性值是对象，上面这些方法只能冻结属性指向的对象，而不能冻结对象本身的内容

3. Array 对象

Array是 JavaScript 的原生对象，同时也是一个构造函数，可以用它生成新的数组。

• 缺陷：不同参数个数会导致不一样的行为，因此建议直接使用数组字面量生成新数组。
• Array.isArray()返回一个布尔值，表示参数是否为数组

---

3.1 实例方法

---

4. 包装对象

所谓“包装对象”，指的是与数值、字符串、布尔值分别相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成（包装成）对象。

4.1 Boolean 对象

作为构造函数，它主要用于生成布尔值的包装对象实例。

if (new Boolean(false)) {//所有对象对应的布尔值都是true
  console.log('true');
} // true

if (new Boolean(false).valueOf()) {//返回实例对应的初始值
  console.log('true');
} // 无输出
1
2
3
4
5
6
7

Boolean对象除了可以作为构造函数，还可以单独使用，将任意值转为布尔值。这时Boolean就是一个单纯的工具方法。

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean('') // false
Boolean(NaN) // false

Boolean(1) // true
Boolean('false') // true
Boolean([]) // true
Boolean({}) // true
Boolean(function () {}) // true
Boolean(/foo/) // true
1
2
3
4
5
6
7
8
9
10
11
12

💡 使用双重的否运算符（!）也可以将任意值转为对应的布尔值。

4.2 Number 对象

作为构造函数时，它用于生成值为数值的对象。作为工具函数时，它可以将任何类型的值转为数值。

---

Number对象拥有以下一些静态属性

Number.POSITIVE_INFINITY // Infinity
Number.NEGATIVE_INFINITY // -Infinity
Number.NaN // NaN

Number.MAX_VALUE
// 1.7976931348623157e+308
Number.MAX_VALUE < Infinity
// true

Number.MIN_VALUE
// 5e-324
Number.MIN_VALUE > 0
// true

Number.MAX_SAFE_INTEGER // 9007199254740991
Number.MIN_SAFE_INTEGER // -9007199254740991
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---

Number对象有4个实例方法，都跟将数值转换成指定格式有关。

4.3 String 对象

String对象是 JavaScript 原生提供的三个包装对象之一，用来生成字符串对象

除了用作构造函数，String对象还可以当作工具方法使用，将任意类型的值转为字符串。

var s1 = 'abc'; //字符串
var s2 = new String('abc'); //字符串对象

typeof s1 // "string"
typeof s2 // "object"

s2.valueOf() // "abc"

// 字符串对象是一个类似数组的对象，有数值键和length属性
new String('abc')
// String {0: "a", 1: "b", 2: "c", length: 3}

(new String('abc'))[1] // "b"
1
2
3
4
5
6
7
8
9
10
11
12
13

4.3.1 静态方法：String.fromCharCode()

String.fromCharCode()：参数是一个或多个数值，代表 Unicode 码点，返回值是这些码点组成的字符串。

String.fromCharCode() // ""
String.fromCharCode(97) // "a"
String.fromCharCode(104, 101, 108, 108, 111) // "hello"
1
2
3

4.3.2 实例属性和方法

字符串实例的length属性返回字符串的长度

'abc'.length // 3
1

实例方法

补充：Unicode字符集的编码方式以及码点、码元

---

5. Math 对象

Math是 JavaScript 的原生对象，提供各种数学功能。该对象不是构造函数，不能生成实例，所有的属性和方法都必须在Math对象上调用。

• Math对象的静态属性提供一些数学常数【只读，不可修改】

Math.E // 2.718281828459045
Math.LN2 // 0.6931471805599453
Math.LN10 // 2.302585092994046
Math.LOG2E // 1.4426950408889634
Math.LOG10E // 0.4342944819032518
Math.PI // 3.141592653589793
Math.SQRT1_2 // 0.7071067811865476
Math.SQRT2 // 1.4142135623730951
1
2
3
4
5
6
7
8

• Math对象的一些静态方法

  • Math.abs()：绝对值
  • Math.ceil()：向上取整
  • Math.floor()：向下取整
  • Math.max()：最大值
  • Math.min()：最小值
  • Math.pow()：幂运算，返回以第一个参数为底数、第二个参数为指数的幂运算值
  • Math.sqrt()：平方根，返回参数值的平方根。如果参数是一个负值，则返回NaN
  • Math.log()：自然对数，返回以e为底的自然对数值
  • Math.exp()：e的指数
  • Math.round()：四舍五入
  • Math.random()：随机数，返回0到1之间的一个伪随机数，可能等于0，但是一定小于1

  // 任意范围的随机数生成函数
  function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
  }
  1
  2
  3
  4

  // 任意范围的随机整数生成函数
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  1
  2
  3
  4

• Math对象还提供一系列三角函数方法

  • Math.sin()：返回参数的正弦（参数为弧度值）
  • Math.cos()：返回参数的余弦（参数为弧度值）
  • Math.tan()：返回参数的正切（参数为弧度值）
  • Math.asin()：返回参数的反正弦（返回值为弧度值）
  • Math.acos()：返回参数的反余弦（返回值为弧度值）
  • Math.atan()：返回参数的反正切（返回值为弧度值）

6. Date 对象

Date对象是 JavaScript 原生的时间库。它以国际标准时间（UTC）1970年1月1日00:00:00作为时间的零点，可以表示的时间范围是前后各1亿天（毫秒）

• 作为普通函数，无论有没有参数都直接返回一个代表当前时间的字符串
• 作为构造函数，new命令返回Date对象实例；无参数返回当前时间，有参数返回参数对应的时间实例【当前时区的时间】
  • 除了日期的默认值为1，小时、分钟、秒钟和毫秒的默认值都是0
  • 两个日期实例对象进行减法运算时，返回的是它们间隔的毫秒数；进行加法运算时，返回的是两个字符串连接而成的新字符串。

// 参数为时间零点开始计算的毫秒数
new Date(1378218728000)
// Tue Sep 03 2013 22:32:08 GMT+0800 (CST)

// 参数为日期字符串
new Date('January 6, 2013');
// Sun Jan 06 2013 00:00:00 GMT+0800 (CST)

// 参数为多个整数，年和月是不能省略的，其他参数都可以省略的。
// 代表年、月、日、小时、分钟、秒、毫秒
new Date(2013, 0, 1, 0, 0, 0, 0)
// Tue Jan 01 2013 00:00:00 GMT+0800 (CST)
1
2
3
4
5
6
7
8
9
10
11
12

---

6.1 静态方法

【UTC：世界标准时间】

6.2 实例方法

Date的实例对象的方法，除了valueOf和toString，可以分为以下三类。

• to类：从Date对象返回一个字符串，表示指定的时间。
• get类：获取Date对象的日期和时间。
• set类：设置Date对象的日期和时间。

---

1. valueOf方法返回实例对象距离时间零点（1970年1月1日00:00:00 UTC）对应的毫秒数。
2. to类方法

以下三种方法，可以将 Date 实例转为表示本地时间的字符串。

• Date.prototype.toLocaleString()：完整的本地时间。
• Date.prototype.toLocaleDateString()：本地日期（不含小时、分和秒）。
• Date.prototype.toLocaleTimeString()：本地时间（不含年月日）。

---

1. get类方法

• getTime()：返回实例距离1970年1月1日00:00:00的毫秒数，等同于valueOf方法。
• getDate()：返回实例对象对应每个月的几号（从1开始）。
• getDay()：返回星期几，星期日为0，星期一为1，以此类推。
• getFullYear()：返回四位的年份。
• getMonth()：返回月份（0表示1月，11表示12月）。
• getHours()：返回小时（0-23）。
• getMilliseconds()：返回毫秒（0-999）。
• getMinutes()：返回分钟（0-59）。
• getSeconds()：返回秒（0-59）。
• getTimezoneOffset()：返回当前时间与 UTC 的时区差异，以分钟表示，返回结果考虑到了夏令时因素。
• Date对象还提供了这些方法对应的 UTC 版本，用来返回 UTC 时间。getUTC*

计算本年度还剩多少天

function leftDays() {
  var today = new Date();
  var endYear = new Date(today.getFullYear(), 11, 31, 23, 59, 59, 999);
  var msPerDay = 24 * 60 * 60 * 1000;
  return Math.round((endYear.getTime() - today.getTime()) / msPerDay);
}
1
2
3
4
5
6

---

1. get类方法

Date对象提供了一系列与get*方法对应的set*方法，用来设置实例对象的各个方面。但是没有setDay—是计算出来的而非设置

• setDate(date)：设置实例对象对应的每个月的几号（1-31），返回改变后毫秒时间戳。
• setFullYear(year [, month, date])：设置四位年份。
• setHours(hour [, min, sec, ms])：设置小时（0-23）。
• setMilliseconds()：设置毫秒（0-999）。
• setMinutes(min [, sec, ms])：设置分钟（0-59）。
• setMonth(month [, date])：设置月份（0-11）。
• setSeconds(sec [, ms])：设置秒（0-59）。
• setTime(milliseconds)：设置毫秒时间戳。
• set*系列方法除了setTime()，都有对应的 UTC 版本，即设置 UTC 时区的时间。

7. RegExp 对象

正则表达式*（regular expression）*是一种表达文本模式（即字符串结构）的方法，有点像字符串的模板，常常用来按照“给定模式”匹配文本。

• 新建正则表达式的两种方法

// 使用字面量，以斜杠表示开始和结束【在编译时新建】
var regex = /xyz/;
// 使用RegExp构造函数【在运行时新建】
var regex = new RegExp('xyz');
// 正则表达式/xyz/有一个修饰符i
var regex = new RegExp('xyz', 'i');
// 等价于
var regex = /xyz/i;
1
2
3
4
5
6
7
8

• 修饰符：g 全文查找，i 忽略大小写，m 多行查找

7.1 实例方法

/cat/.test('cats and dogs') // true
1

• RegExp.prototype.test()
  • 返回一个布尔值，表示当前模式是否能匹配参数字符串
  • 如果正则表达式带有g修饰符，则每一次test方法都从上一次结束的位置*（lastindex）*开始向后匹配。
  • 如果正则模式是一个空字符串，则匹配所有字符串。

var s = '_x_x';
var r1 = /x/;
var r2 = /y/;

r1.exec(s) // ["x"]
r2.exec(s) // null

// 组匹配
var s = '_x_x';
var r = /_(x)/;

r.exec(s) // ["_x", "x"]
1
2
3
4
5
6
7
8
9
10
11
12

• RegExp.prototype.exec()
  • 返回匹配结果。如果发现匹配，就返回一个数组，成员是匹配成功的子字符串，否则返回null
  • 如果正则表示式包含圆括号（即含有“组匹配”），则返回的数组会包括多个成员。第一个成员是整个匹配成功的结果，后面的成员就是圆括号对应的匹配成功的组。
  • exec()方法的返回数组还包含以下两个属性：
    • input—整个原字符串
    • index—模式匹配成功的开始位置

字符串的实例方法之中，有4种与正则表达式有关。

• String.prototype.match()：返回一个数组，成员是所有匹配的子字符串。
• String.prototype.search()：按照给定的正则表达式进行搜索，返回一个整数，表示匹配开始的位置。
• String.prototype.replace()：按照给定的正则表达式进行替换，返回替换后的字符串。
• String.prototype.split()：按照给定规则进行字符串分割，返回一个数组，包含分割后的各个成员。

---

7.2 匹配规则

JavaScript中正则表达式判断匹配规则及常用方法

• 在正则表达式中某个字符只表示它字面的含义——字面量字符

/c.t/  //c.t匹配c和t之间包含任意一个字符的情况

// test必须出现在开始位置
/^test/.test('test123') // true
// test必须出现在结束位置
/test$/.test('new test') // true

/11|22/.test('911') // true
1
2
3
4
5
6
7
8

• 有一部分字符有特殊含义，不代表字面的意思——元字符
  • **点字符.**匹配除回车（\r）、换行(\n) 、行分隔符\u2028）和段分隔符（\u2029）以外的所有字符。（一个）
  • 位置字符 ^ 字符串开始位置 💲 字符串结束位置
  • 选择符 ｜ 表示OR，选择符可以联合使用
• 有特殊含义的元字符要匹配本身，就需要在前面要加上反斜杠
  • 正则表达式中，需要反斜杠转义的，一共有12个字符：^、.、[、$、(、)、|、*、+、?、{和\
  • 如果使用RegExp方法生成正则对象，需要两个斜杠进行转义：作为字符串参数先被转义一次，再被正则表达式转义一次
• 对一些不能打印的特殊字符（换行、回车等），提供了表达方法
• 字符类匹配规则——所有可供选择的字符都放在方括号内[]：有一系列字符可供选择，只要匹配其中一个就可以了。
  • 脱字符（^）在字符类的第一个位置时，表示除了字符类之中的字符，其他字符都可以匹配；只有[^]，就表示匹配一切字符，其中包括换行符
  • 连字符（-）对于连续序列的字符，表示字符的连续范围。[abc]可以写成[a-c]
• 预定义模式：某些常见模式的简写方式。
  • \d 相当于[0-9]。
  • \D 匹配所有0-9以外的字符，相当于[^0-9]。
  • \w 匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_]。
  • \W 相当于[^A-Za-z0-9_]。
  • \s 匹配空格（包括换行符、制表符、空格符等），相等于[ \t\r\n\v\f]。
  • \S 相当于[^ \t\r\n\v\f]。
  • \b 匹配词的边界。
  • \B 匹配非词边界，即在词的内部。
• 重复类：模式的精确匹配次数，使用大括号（{}）表示。类似于区间的形式
• 量词符：设定某个模式出现的次数
  • ？== {0，1}
  • * == {0，}
  • + == {1，}

'abb'.match(/ab*/) // ["abb"]  贪婪模式
'abb'.match(/ab*?/) // ["a"]

'abb'.match(/ab?/) // ["ab"]
'abb'.match(/ab??/) // ["a"]
1
2
3
4
5

💡 贪婪模式：最大可能匹配，即匹配到下一个字符不满足匹配规则为止
非贪婪模式：最小可能匹配。只要一发现匹配，就返回结果，不要往下检查。
将贪婪模式改为非贪婪模式，可以在量词符后面加一个问号。

• 修饰符：模式的附加规则，放在正则模式的最尾部；可以单个使用，也可以多个一起使用

  • g修饰符：全局匹配；每次都是从上一次匹配成功处，开始向后匹配
  • i修饰符：忽略大小写
  • m修饰符：多行模式multiline；加上m修饰符以后，^和$会识别换行符（\n）

• 组匹配：正则表达式的括号表示分组匹配，括号中的模式可以用来匹配分组的内容。

  • 使用组匹配时，不宜同时使用g修饰符，否则match方法不会捕获分组的内容
  • 正则表达式内部，还可以用\n引用括号匹配的内容，n是从1开始的自然数，表示对应顺序的括号
  • 括号还可以嵌套，\n指向从外到内

  //组匹配网页标签
  var tagName = /<([^>]+)>[^<]*<\/\1>/;
  tagName.exec("bold")[1]
  // 'b'
  
  //捕获带有属性的标签
  var html = 'Helloworld';
  var tag = /<(\w+)([^>]*)>(.*?)<\/\1>/g;
  
  var match = tag.exec(html);
  
  match[1] // "b"
  match[2] // " class="hello""
  match[3] // "Hello"
  
  match = tag.exec(html);
  
  match[1] // "i"
  match[2] // ""
  match[3] // "world"
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20

  • 非捕获组(?:x)：不返回该组匹配的内容

  var m = 'abc'.match(/(?:.)b(.)/);
  m // ["abc", "c"]
  // 第一个括号是非捕获组，所以最后返回的结果中没有第一个括号，只有第二个括号匹配的内容。
  1
  2
  3

  • x(?=y)称为先行断言，x只有在y前面才匹配，y不会被计入返回结果。
  • x(?!y)称为先行否定断言，x只有不在y前面才匹配，y不会被计入返回结果。

8. JSON 对象

8.1 JSON 格式

JSON 格式（JavaScript Object Notation ）是一种用于数据交换的文本格式，目的是取代繁琐笨重的 XML 格式。

• 优点：书写简单，一目了然；符合 JavaScript 原生语法，可以由解释引擎直接处理，不用另外添加解析代码。
• 每个JSON对象只能是一个值；null、空数组和空对象都是合法的 JSON 值。

JSON 对值的类型和格式的规定

1. 复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。
2. 原始类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, Infinity和undefined）。
3. 字符串必须使用双引号表示，不能使用单引号。
4. 对象的键名必须放在双引号里面。
5. 数组或对象最后一个成员的后面，不能加逗号。

8.2 JSON 对象

JSON对象是 JavaScript 的原生对象，用来处理 JSON 格式数据。它有两个静态方法：JSON.stringify()和JSON.parse()

• JSON.stringify()

  • 用于将一个值转为 JSON 字符串，可以被JSON.parse()方法还原

    • 如果对象的属性是undefined、函数或 XML 对象，该属性会被JSON.stringify()过滤。
    • 如果数组的成员是undefined、函数或 XML 对象，则这些值被转成null。
    • 正则对象会被转成空对象。
    • 会忽略对象的不可遍历的属性。

  • 此方法的第二个参数

    • 可以接受一个数组（对象的键名组成），指定参数对象的哪些属性需要转成字符串。

    JSON.stringify({0: 'a', 1: 'b'}, ['0'])
    // "{"0":"a"}"
    1
    2

    • 一个递归处理所有键的函数，用来更改JSON.stringify()的返回值；如果处理函数返回undefined或没有返回值，则该属性会被忽略。

    var obj = {a: {b: 1}};
    
    function f(key, value) {
      console.log("["+ key +"]:" + value);
      return value;
    }
    //递归处理中，每一次处理的对象，都是前一次返回的值。
    JSON.stringify(obj, f)
    // []:[object Object]
    // [a]:[object Object]
    // [b]:1
    // '{"a":{"b":1}}'
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

  • 此方法的第三个函数

    • 用于增加返回的 JSON 字符串的可读性，默认返回的是单行字符串，对于大型的 JSON 对象，可读性非常差。第三个参数使得每个属性单独占据一行，并且将每个属性前面添加指定的前缀（不超过10个字符）

    // 分行输出 
    // 第三个属性\t在每个属性前面添加一个制表符，然后分行显示。
    JSON.stringify({ p1: 1, p2: 2 }, null, '\t')
    // {
    // 	"p1": 1,
    // 	"p2": 2
    // }
    1
    2
    3
    4
    5
    6
    7

    • 第三个属性如果是一个数字，则表示每个属性前面添加的空格（不超过10个）

  • 参数对象的 toJSON() 方法

    • 如果参数对象有自定义的toJSON()方法，那么JSON.stringify()会使用这个方法的返回值作为参数，而忽略原对象的其他属性。

    var user = {
      firstName: '三',
      lastName: '张',
    
      get fullName(){
        return this.lastName + this.firstName;
      },
    
      toJSON: function () {
        return {
          name: this.lastName + this.firstName
        };
      }
    };
    
    JSON.stringify(user)
    // "{"name":"张三"}"
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    • Date对象就有一个自己的toJSON()方法。
    • toJSON()方法可以将正则对象自动转为字符串。JSON.stringify()默认不能转换正则对象，但设置toJSON()之后就能转换了

    var obj = {
      reg: /foo/
    };
    
    // 不设置 toJSON 方法时
    JSON.stringify(obj) // "{"reg":{}}"
    
    // 设置 toJSON 方法时 在正则对象原型上部署toJSON()方法
    RegExp.prototype.toJSON = RegExp.prototype.toString;
    JSON.stringify(/foo/) // ""/foo/""
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

---

JSON.parse('{}') // {}
JSON.parse('true') // true
JSON.parse('"foo"') // "foo"
JSON.parse('[1, 5, "false"]') // [1, 5, "false"]
JSON.parse('null') // null

var o = JSON.parse('{"name": "张三"}');
o.name // 张三

JSON.parse("'String'") // illegal single quotes
// SyntaxError: Unexpected token ILLEGAL

function f(key, value) {
  if (key === 'a') {
    return value + 10;
  }
  return value;
}

JSON.parse('{"a": 1, "b": 2}', f)
// {a: 11, b: 2}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• JSON.parse()
  • 用于将 JSON 字符串转换成对应的值。
  • 如果传入的字符串不是有效的 JSON 格式，JSON.parse()方法将报错。
  • JSON.parse()方法可以接受一个处理函数，作为第二个参数，用法与JSON.stringify()方法类似。