我爱编程

JavaScript的标准库

2018-05-14  本文已影响0人  庄海鑫

1. Object对象

静态方法

所谓“静态方法”，是指部署在Object对象自身的方法。

var obj={
  p1:123,
  p2:456
};
Object.keys(obj)  //["p1","p2"]

var obj = {
  p1: 123,
  p2: 456
};

Object.getOwnPropertyNames(obj) // ["p1", "p2"]

Object.keys()和Object.getOwnPropertyNames(obj)的区别

var a = ['Hello', 'World'];

Object.keys(a) // ["0", "1"]  只返回可枚举的属性
Object.getOwnPropertyNames(a) // ["0", "1", "length"]  返回不可枚举的属性

Object 的实例方法

除了静态方法，还有不少方法定义在Object.prototype对象。它们称为实例方法，所有Object的实例对象都继承了这些方法。

2. Array对象

静态方法

var arr = [1, 2, 3];

typeof arr // "object"
Array.isArray(arr) // true

实例方法

var arr = [];

arr.push(1) // 1
arr.push('a') // 2
arr.push(true, {}) // 4
arr // [1, 'a', true, {}]

var arr = ['a', 'b', 'c'];

arr.pop() // 'c'
arr // ['a', 'b']

var a = ['a', 'b', 'c'];

a.shift() // 'a'
a // ['b', 'c']

var a = ['a', 'b', 'c'];

a.unshift('x'); // 4
a // ['x', 'a', 'b', 'c']

var a = [1, 2, 3, 4];

a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"


[undefined, null].join('#')
// '#'

['a',, 'b'].join('-')
// 'a--b'

['hello'].concat(['world'])
// ["hello", "world"]

['hello'].concat(['world'], ['!'])
// ["hello", "world", "!"]

[].concat({a: 1}, {b: 2})
// [{ a: 1 }, { b: 2 }]

[2].concat({a: 1})
// [2, {a: 1}]

var a = ['a', 'b', 'c'];

a.reverse() // ["c", "b", "a"]
a // ["c", "b", "a"]

arr.slice(start, end);

var a = ['a', 'b', 'c'];

a.slice(0) // ["a", "b", "c"]
a.slice(1) // ["b", "c"]
a.slice(1, 2) // ["b"]
a.slice(2, 6) // ["c"]
a.slice() // ["a", "b", "c"]

arr.splice(start, count, addElement1, addElement2, ...);

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2) // ["e", "f"]
a // ["a", "b", "c", "d"]

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2, 1, 2) // ["e", "f"]
a // ["a", "b", "c", "d", 1, 2]

[10111, 1101, 111].sort(function (a, b) {
  return a - b;
})

[
  { name: "张三", age: 30 },
  { name: "李四", age: 24 },
  { name: "王五", age: 28  }
].sort(function (o1, o2) {
  return o1.age - o2.age;
})
// [
//   { name: "李四", age: 24 },
//   { name: "王五", age: 28  },
//   { name: "张三", age: 30 }
// ]

var numbers = [1, 2, 3];

numbers.map(function (n) {
  return n + 1;
});
// [2, 3, 4]

numbers
// [1, 2, 3]


[1, 2, 3].map(function(elem, index, arr) {
  return elem * index;
});
// [0, 2, 6]

function log(element, index, array) {
  console.log('[' + index + '] = ' + element);
}

[2, 5, 9].forEach(log);
// [0] = 2
// [1] = 5
// [2] = 9

[1, 2, 3, 4, 5].filter(function (elem, index, arr) {
  return index % 2 === 0;
});
// [1, 3, 5]

var arr = [1, 2, 3, 4, 5];
arr.some(function (elem, index, arr) {
  return elem >= 3;
});
// true

var arr = [1, 2, 3, 4, 5];
arr.every(function (elem, index, arr) {
  return elem >= 3;
});
// false

[1, 2, 3, 4, 5].reduce(function (a, b) {
  console.log(a, b);
  return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15

reduce方法和reduceRight方法依次处理数组的每个成员，最终累计为一个值。它们的差别是，reduce是从左到右处理（从第一个成员到最后一个成员），reduceRight则是从右到左（从最后一个成员到第一个成员），其他完全一样。

3. Boolean 对象

4. Number对象

实例方法

toFixed方法先将一个数转为指定位数的小数，然后返回这个小数对应的字符串。

(10).toFixed(2) // "10.00"
10.005.toFixed(2) // "10.01

toExponential方法用于将一个数转为科学计数法形式。

(10).toExponential()  // "1e+1"
(10).toExponential(1) // "1.0e+1"
(10).toExponential(2) // "1.00e+1"

(1234).toExponential()  // "1.234e+3"
(1234).toExponential(1) // "1.2e+3"
(1234).toExponential(2) // "1.23e+3"
toExponential方法的参数是小数点后有效数字的位数，范围为0到20，超出这个范围，会抛出一个 RangeError 错误。


toPrecision方法用于将一个数转为指定位数的有效数字。

(12.34).toPrecision(1) // "1e+1"
(12.34).toPrecision(2) // "12"
(12.34).toPrecision(3) // "12.3"
(12.34).toPrecision(4) // "12.34"
(12.34).toPrecision(5) // "12.340"
toPrecision方法的参数为有效数字的位数，范围是1到21，超出这个范围会抛出 RangeError 错误。

toPrecision方法用于四舍五入时不太可靠，跟浮点数不是精确储存有关。

5. String对象

静态方法

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

实例属性

实例方法

var s = new String('abc');

s.charAt(1) // "b"
s.charAt(s.length - 1) // "c"

'abc'.charCodeAt(1) // 98

var s1 = 'abc';
var s2 = 'def';

s1.concat(s2) // "abcdef"
s1 // "abc"


var one = 1;
var two = 2;
var three = '3';

''.concat(one, two, three) // "123"
one + two + three // "33"

'JavaScript'.slice(0, 4) // "Java"

'JavaScript'.slice(4) 

'JavaScript'.substring(0, 4) // "Java"

'JavaScript'.substring(4) // "Script"

'JavaScript'.substring(10, 4) // "Script"
// 等同于
'JavaScript'.substring(4, 10) // "Script"

'JavaScript'.substr(4, 6) // "Script"

'  hello world  '.trim()
// "hello world"

'cat, bat, sat, fat'.match('at') // ["at"]
'cat, bat, sat, fat'.match('xt') // null

//返回的数组还有index属性和input属性，分别表示匹配字符串开始的位置和原始字符串。
var matches = 'cat, bat, sat, fat'.match('at');
matches.index // 1
matches.input // "cat, bat, sat, fat"

'cat, bat, sat, fat'.search('at') // 1

'aaa'.replace('a', 'b') // "baa"

'a|b|c'.split('|') // ["a", "b", "c"]

// localeCompare方法用于比较两个字符串。它返回一个整数，如果小于0，表示第一个字符串小于第二个字符串；如果等于0，表示两者相等；如果大于0，表示第一个字符串大于第二个字符串。

'apple'.localeCompare('banana') // -1
'apple'.localeCompare('apple') // 0

//该方法的最大特点，就是会考虑自然语言的顺序。举例来说，正常情况下，大写的英文字母小于小写字母。

'B' > 'a' // false

'B'.localeCompare('a') // 1

5. Math对象

静态属性

image.png

静态方法

6. Date对象

静态方法

Date.now方法返回当前时间距离时间零点（1970年1月1日 00:00:00 UTC）的毫秒数，相当于 Unix 时间戳乘以1000。

Date.now() // 1364026285194

Date.parse('Aug 9, 1995')
Date.parse('January 26, 2011 13:51:50')
Date.parse('Mon, 25 Dec 1995 13:30:00 GMT')
Date.parse('Mon, 25 Dec 1995 13:30:00 +0430')
Date.parse('2011-10-10')
Date.parse('2011-10-10T14:48:00')

// 格式
Date.UTC(year, month[, date[, hrs[, min[, sec[, ms]]]]])

// 用法
Date.UTC(2011, 0, 1, 2, 3, 4, 567)
// 1293847384567

实例方法

toUTCString方法返回对应的 UTC 时间，也就是比北京时间晚8个小时。

var d = new Date(2013, 0, 1);

d.toUTCString()
// "Mon, 31 Dec 2012 16:00:00 GMT"


toISOString方法返回对应时间的 ISO8601 写法。

var d = new Date(2013, 0, 1);

d.toISOString()
// "2012-12-31T16:00:00.000Z"

toJSON方法返回一个符合 JSON 格式的 ISO 日期字符串，与toISOString方法的返回结果完全相同。

var d = new Date(2013, 0, 1);

d.toJSON()
// "2012-12-31T16:00:00.000Z"

toDateString方法返回日期字符串（不含小时、分和秒）。

var d = new Date(2013, 0, 1);
d.toDateString() // "Tue Jan 01 2013"

toTimeString方法返回时间字符串（不含年月日）。

var d = new Date(2013, 0, 1);
d.toTimeString() // "00:00:00 GMT+0800 (CST)"

toLocaleDateString方法返回一个字符串，代表日期的当地写法（不含小时、分和秒）。

var d = new Date(2013, 0, 1);

d.toLocaleDateString()
// 中文版浏览器为"2013年1月1日"
// 英文版浏览器为"1/1/2013"

toLocaleTimeString方法返回一个字符串，代表时间的当地写法（不含年月日）。

var d = new Date(2013, 0, 1);

d.toLocaleTimeString()
// 中文版浏览器为"上午12:00:00"
// 英文版浏览器为"12:00:00 AM"

7. RegExp对象

实例属性

var r = /abc/igm;

r.ignoreCase // true
r.global // true
r.multiline // true

var r = /abc/igm;

r.lastIndex // 0
r.source // "abc"

实例方法

正则实例对象的test方法返回一个布尔值，表示当前模式是否能匹配参数字符串。

/cat/.test('cats and dogs') // true
上面代码验证参数字符串之中是否包含cat，结果返回true。

如果正则表达式带有g修饰符，则每一次test方法都从上一次结束的位置开始向后匹配。

var r = /x/g;
var s = '_x_x';

r.lastIndex // 0
r.test(s) // true

r.lastIndex // 2
r.test(s) // true

r.lastIndex // 4
r.test(s) // false

正则实例对象的exec方法，用来返回匹配结果。如果发现匹配，就返回一个数组，成员是匹配成功的子字符串，否则返回null。

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

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

8. JSON对象

静态方法

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

9. console对象

console对象是 JavaScript 的原生对象，它有点像 Unix 系统的标准输出stdout和标准错误stderr，可以输出各种信息到控制台，并且还提供了很多有用的辅助方法。

console的常见用途有两个。

console对象的静态方法

命令行API

$_属性返回上一个表达式的值。

2 + 2
// 4
$_
// 4

控制台保存了最近5个在 Elements 面板选中的 DOM 元素，$0代表倒数第一个（最近一个），$1代表倒数第二个，以此类推直到$4。

$(selector)返回第一个匹配的元素，等同于document.querySelector()。注意，如果页面脚本对$有定义，则会覆盖原始的定义。比如，页面里面有 jQuery，控制台执行$(selector)就会采用 jQuery 的实现，返回一个数组。

$$(selector)返回选中的 DOM 对象，等同于document.querySelectorAll。

$x(path)方法返回一个数组，包含匹配特定 XPath 表达式的所有 DOM 元素。
$x("//p[a]")
上面代码返回所有包含a元素的p元素。

inspect(object)方法打开相关面板，并选中相应的元素，显示它的细节。DOM 元素在Elements面板中显示，比如inspect(document)会在 Elements 面板显示document元素。JavaScript 对象在控制台面板Profiles面板中显示，比如inspect(window)。

getEventListeners(object)方法返回一个对象，该对象的成员为object登记了回调函数的各种事件（比如click或keydown），每个事件对应一个数组，数组的成员为该事件的回调函数。

keys(object)方法返回一个数组，包含object的所有键名。
values(object)方法返回一个数组，包含object的所有键值。

var o = {'p1': 'a', 'p2': 'b'};

keys(o)
// ["p1", "p2"]
values(o)
// ["a", "b"]

monitorEvents(object[, events])方法监听特定对象上发生的特定事件。事件发生时，会返回一个Event对象，包含该事件的相关信息。unmonitorEvents方法用于停止监听。

monitorEvents(window, "resize");
monitorEvents(window, ["resize", "scroll"])
上面代码分别表示单个事件和多个事件的监听方法。

monitorEvents($0, 'mouse');
unmonitorEvents($0, 'mousemove');
上面代码表示如何停止监听。

monitorEvents允许监听同一大类的事件。所有事件可以分成四个大类。

mouse：”mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel”
key：”keydown”, “keyup”, “keypress”, “textInput”
touch：”touchstart”, “touchmove”, “touchend”, “touchcancel”
control：”resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset”
monitorEvents($("#msg"), "key");
上面代码表示监听所有key大类的事件。

命令行 API 还提供以下方法。

clear()：清除控制台的历史。
copy(object)：复制特定 DOM 元素到剪贴板。
dir(object)：显示特定对象的所有属性，是console.dir方法的别名。
dirxml(object)：显示特定对象的 XML 形式，是console.dirxml方法的别名。

10. 属性描述对象

image.png

JavaScript 提供了一个内部数据结构，用来描述对象的属性，控制它的行为，比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”（attributes object）。每个属性都有自己对应的属性描述对象，保存该属性的一些元信息。

{
  value: 123,
  writable: false,
  enumerable: true,
  configurable: false,
  get: undefined,
  set: undefined
}
属性描述对象提供6个元属性。

（1）value

value是该属性的属性值，默认为undefined。

（2）writable

writable是一个布尔值，表示属性值（value）是否可改变（即是否可写），默认为true。

（3）enumerable

enumerable是一个布尔值，表示该属性是否可遍历，默认为true。如果设为false，会使得某些操作（比如for...in循环、Object.keys()）跳过该属性。

（4）configurable

configurable是一个布尔值，表示可配置性，默认为true。如果设为false，将阻止某些操作改写该属性，比如无法删除该属性，也不得改变该属性的属性描述对象（value属性除外）。也就是说，configurable属性控制了属性描述对象的可写性。

（5）get

get是一个函数，表示该属性的取值函数（getter），默认为undefined。

（6）set

set是一个函数，表示该属性的存值函数（setter），默认为undefined。
上一篇 下一篇

猜你喜欢

热点阅读