- console.time()，console.timeEnd()
这两个方法用于计时，可以算出一个操作所花费的准确时间。
console.time('Array initialize');
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd('Array initialize');
// Array initialize: 1914.481ms
$(selector)返回第一个匹配的元素，等同于document.querySelector()如果页面脚本对 $ 有定义，则会覆盖原始的定义。比如，页面里面有 jQuery，控制台执行$(selector)就会采用 jQuery 的实现，返回一个数组$$(selector)返回选中的 DOM 对象，等同于document.querySelectorAllgetEventListeners(object)方法返回一个对象，该对象的成员为 object 登记了回调函数的各种事件（比如 click 或 keydown），每个事件对应一个数组，数组的成员为该事件的回调函数keys(object)方法返回一个数组，包含 object 的所有键名。values(object)方法返回一个数组，包含 object 的所有键值。Object.keys 只返回对象自身的可遍历属性的全部属性名，如 length 不可遍历不返回，Object.getOwnPropertyNames() 则会返回 length 属性- Chrome 浏览器中，当代码运行到debugger语句时，就会暂停运行，自动打开脚本源码界面
for(var i = 0; i < 5; i++){
console.log(i);
if (i === 2) debugger;
}
- 如果Object方法的参数是一个对象，它总是返回该对象，即不用转换，利用这一点，可以写一个判断变量是否为对象的函数。
function isObject(value) {
return value === Object(value);
}
isObject([]) // true
isObject(true) // false
- 由于 JavaScript 没有提供计算对象属性个数的方法， 可用
Object.keys(obj).length - 字符串 [object Object] 本身没有太大的用处，但是通过自定义 toString 方法，可以让对象在自动类型转换时，得到想要的字符串形式
var obj = new Object();
obj.toString = function () {
return 'hello';
};
obj + ' ' + 'world' // "hello world"
数组、字符串、函数、Date 对象都分别部署了自定义的 toString 方法，覆盖了 Object.prototype.toString 方法。
[1, 2, 3].toString() // "1,2,3"
'123'.toString() // "123"
(function () {
return 123;
}).toString()
// "function () {
// return 123;
// }"
(new Date()).toString()
// "Tue May 10 2016 09:11:31 GMT+0800 (CST)"
使用 Object.prototype.toString 方法，通过函数的 call 方法，可以在任意值上调用这个方法，帮助我们判断这个值的类型（防止 toString 被覆盖）
不同数据类型的Object.prototype.toString方法返回值如下。
数值：返回[object Number]。
字符串：返回[object String]。
布尔值：返回[object Boolean]。
undefined：返回[object Undefined]。
null：返回[object Null]。
数组：返回[object Array]。
arguments 对象：返回[object Arguments]。
函数：返回[object Function]。
Error 对象：返回[object Error]。
Date 对象：返回[object Date]。
RegExp 对象：返回[object RegExp]。
其他对象：返回[object Object]。
利用这个特性，可以写出一个比typeof运算符更准确的类型判断函数。
var type = function (o){
var s = Object.prototype.toString.call(o);
return s.match(/\[object (.*?)\]/)[1].toLowerCase();
};
type({}); // "object"
type([]); // "array"
type(5); // "number"
type(null); // "null"
type(); // "undefined"
type(/abcd/); // "regex"
type(new Date()); // "date"
['Null',
'Undefined',
'Object',
'Array',
'String',
'Number',
'Boolean',
'Function',
'RegExp'
].forEach(function (t) {
type['is' + t] = function (o) {
return type(o) === t.toLowerCase();
};
});
type.isObject({}) // true
type.isNumber(NaN) // true
type.isRegExp(/abc/) // true
- toLocaleString 这个方法的主要作用是留出一个接口，让各种不同的对象实现自己版本，用来返回针对某些地域的特定的值。
var person = {
toString: function () {
return 'Henry Norman Bethune';
},
toLocaleString: function () {
return '白求恩';
}
};
person.toString() // Henry Norman Bethune
person.toLocaleString() // 白求恩
目前，主要有三个对象自定义了toLocaleString方法。
Array.prototype.toLocaleString()
Number.prototype.toLocaleString()
Date.prototype.toLocaleString()
var date = new Date();
date.toString() // "Tue Jan 01 2018 12:01:33 GMT+0800 (CST)"
date.toLocaleString() // "1/01/2018, 12:01:33 PM"
- Object.prototype.hasOwnProperty 方法接受一个字符串作为参数，返回一个布尔值，表示该实例对象自身是否具有该属性
- join()方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔
var a = [1, 2, 3, 4];
a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"
- concat 方法用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变
['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}]
[1, 2, 3].concat(4, 5, 6)
// [1, 2, 3, 4, 5, 6]
var obj = { a: 1 };
var oldArray = [obj];
// 浅拷贝
var newArray = oldArray.concat();
obj.a = 2;
newArray[0].a // 2
- slice 方法用于提取目标数组的一部分，返回一个新数组，原数组不变，它的第一个参数为起始位置（从 0 开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。如果省略第二个参数，则一直返回到原数组的最后一个成员（深拷贝）。如果 slice 方法的参数是负数，则表示倒数计算的位置，-2 表示倒数计算的第二个位置，-1 表示倒数计算的第一个位置，slice 方法的一个重要应用，是将类似数组的对象转为真正的数组
Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })
// ['a', 'b']
Array.prototype.slice.call(document.querySelectorAll("div"));
Array.prototype.slice.call(arguments);
- splice方法用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组
arr.splice(start, count, addElement1, addElement2, ...);
var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2, 1, 2) // ["e", "f"]
a // ["a", "b", "c", "d", 1, 2]
// 如果只是单纯地插入元素，splice方法的第二个参数可以设为0。
var a = [1, 1, 1];
a.splice(1, 0, 2) // []
a // [1, 2, 1, 1]
// 如果只提供第一个参数，等同于将原数组在指定位置拆分成两个数组。
var a = [1, 2, 3, 4];
a.splice(2) // [3, 4]
a // [1, 2]
- sort 方法对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变。
['d', 'c', 'b', 'a'].sort()
// ['a', 'b', 'c', 'd']
[4, 3, 2, 1].sort()
// [1, 2, 3, 4]
[11, 101].sort()
// [101, 11]
[10111, 1101, 111].sort()
// [10111, 1101, 111]
sort 方法不是按照大小排序，而是按照字典顺序。也就是说，数值会被先转成字符串，再按照字典顺序进行比较，所以101排在11的前面。如果想让 sort 方法按照自定义方式排序，可以传入一个函数作为参数。sort的参数函数本身接受两个参数，表示进行比较的两个数组成员。如果该函数的返回值大于0，表示第一个成员排在第二个成员后面；其他情况下，都是第一个元素排在第二个元素前面
[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 }
// ]
- map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回，原数组没有变化
var numbers = [1, 2, 3];
numbers.map(function (n) {
return n + 1;
});
// [2, 3, 4]
numbers
// [1, 2, 3]
map方法的回调函数有三个参数，elem为当前成员的值，index为当前成员的位置，arr为原数组（[1, 2, 3]）
[1, 2, 3].map(function(elem, index, arr) {
return elem * index;
});
// [0, 2, 6]
map方法还可以接受第二个参数，用来绑定回调函数内部的this变量
var arr = ['a', 'b', 'c'];
[1, 2].map(function (e) {
return this[e];
}, arr)
// ['b', 'c']
如果数组有空位，map方法的回调函数在这个位置不会执行，会跳过数组的空位。
var f = function (n) { return 'a' };
[1, undefined, 2].map(f) // ["a", "a", "a"]
[1, null, 2].map(f) // ["a", "a", "a"]
[1, , 2].map(f) // ["a", , "a"]
- forEach 方法与 map 方法很相似，区别在于有无返回值
function log(element, index, array) {
console.log('[' + index + '] = ' + element);
}
[2, 5, 9].forEach(log);
// [0] = 2
// [1] = 5
// [2] = 9
forEach 方法也可以接受第二个参数，绑定参数函数的 this 变量
var out = [];
[1, 2, 3].forEach(function(elem) {
this.push(elem * elem);
}, out);
out // [1, 4, 9]
注意，forEach 方法无法中断执行，总是会将所有成员遍历完。如果希望符合某种条件时，就中断遍历，要使用 for 循环。
- filter 它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组，参数如上，回调三个参和原方法第二个参绑定 this
[1, 2, 3, 4, 5].filter(function (elem) {
return (elem > 3);
})
// [4, 5]
var arr = [0, 1, 'a', false];
// filter 方法返回数组 arr 里面所有布尔值为 true 的成员
arr.filter(Boolean)
// [1, "a"]
- some 方法是只要一个成员的返回值是 true，则整个 some 方法的返回值就是 true，否则返回 false。every 方法是所有成员的返回值都是 true，整个 every 方法才返回 true，否则返回 false。对于空数组，some 方法返回 false，every 方法返回 true，回调函数都不会执行，他们的参数如上
var arr = [1, 2, 3, 4, 5];
arr.every(function (elem, index, arr) {
return elem >= 3;
});
// false
- reduce 方法和 reduceRight 方法依次处理数组的每个成员，最终累计为一个值。它们的差别是，reduce 是从左到右处理（从第一个成员到最后一个成员），reduceRight 则是从右到左（从最后一个成员到第一个成员），其他完全一样。参数：(1)累积变量，默认为数组的第一个成员，(2)当前变量，默认为数组的第二个成员， (3)当前位置（从0开始），(4)原数组，只有前两个是必须的，后两个则是可选的
[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 方法的第二个参数
[1, 2, 3, 4, 5].reduce(function (a, b) {
return a + b;
}, 10);
// 25
由于空数组取不到初始值，reduce 方法会报错。这时，加上第二个参数，就能保证总是会返回一个值
function add(prev, cur) {
return prev + cur;
}
[].reduce(add)
// TypeError: Reduce of empty array with no initial value
[].reduce(add, 1)
// 1
由于这两个方法会遍历数组，所以实际上还可以用来做一些遍历相关的操作。比如，找出字符长度最长的数组成员。reduce 的参数函数会将字符长度较长的那个数组成员，作为累积值。这导致遍历所有成员之后，累积值就是字符长度最长的那个成员
function findLongest(entries) {
return entries.reduce(function (longest, entry) {
return entry.length > longest.length ? entry : longest;
}, '');
}
findLongest(['aaa', 'bb', 'c']) // "aaa"
- indexOf 方法返回给定元素在数组中第一次出现的位置，lastIndexOf 方法返回给定元素在数组中最后一次出现的位置，如果没有出现则都返回 -1，这两个方法不能用来搜索 NaN 的位置，即它们无法确定数组成员是否包含 NaN，因为这两个方法内部，使用严格相等运算符（===）进行比较，而 NaN 是唯一一个不等于自身的值，方法还可以接受第二个参数，表示搜索的开始位置
['a', 'b', 'c'].indexOf('a', 1) // -1
- 上面这些数组方法之中，有不少返回的还是数组，所以可以链式使用。先产生一个所有 Email 地址组成的数组，然后再过滤出以 t 开头的 Email 地址，最后将它打印出来
var users = [
{name: 'tom', email: '[email protected]'},
{name: 'peter', email: '[email protected]'}
];
users
.map(function (user) {
return user.email;
})
.filter(function (email) {
return /^t/.test(email);
})
.forEach(function (email) {
console.log(email);
});
// "[email protected]"
- 包装对象还可以自定义方法和属性，供原始类型的值直接调用
String.prototype.double = function () {
return this.valueOf() + this.valueOf();
};
'abc'.double()
// abcabc
Number.prototype.double = function () {
return this.valueOf() + this.valueOf();
};
// 123外面必须要加上圆括号，否则后面的点运算符（.）会被解释成小数点
(123).double()
种自定义方法和属性的机制，只能定义在包装对象的原型上，如果直接对原始类型的变量添加属性，则无效，这里的包装对象是自动生成的，赋值后自动销毁，所以最后一行实际上调用的是一个新的包装对象
var s = 'abc';
s.p = 123;
s.p // undefined
- Number.prototype.toFixed() 方法先将一个数转为指定位数的小数，然后返回这个小数对应的字符串
(10).toFixed(2) // "10.00"
10.005.toFixed(2) // "10.01"
上面代码中，10 和 10.005 转成 2 位小数，其中 10 必须放在括号里，否则后面的点会被处理成小数点。toFixed 方法的参数为小数位数，有效范围为 0 到 20，超出这个范围将抛出 RangeError 错误
- String.prototype.charAt() 返回指定位置的字符，参数是从0开始编号的位置，这个方法完全可以用数组下标替代，如果参数为负数，或大于等于字符串的长度，charAt返回空字符串
'abc'.charAt(1) // "b"
'abc'[1] // "b"
'abc'.charAt(-1) // ""
'abc'.charAt(3) // ""
- String.prototype.charCodeAt() 返回字符串指定位置的 Unicode 码点（十进制表示），相当于String.fromCharCode()的逆操作。
// abc的1号位置的字符是b，它的 Unicode 码点是98，如果没有任何参数，charCodeAt返回首字符的 Unicode 码点
'abc'.charCodeAt(1) // 98
// 如果参数为负数，或大于等于字符串的长度，charCodeAt返回NaN
'abc'.charCodeAt(-1) // NaN
'abc'.charCodeAt(4) // NaN
注意，charCodeAt方法返回的 Unicode 码点不会大于65536（0xFFFF），也就是说，只返回两个字节的字符的码点。如果遇到码点大于 65536 的字符（四个字节的字符），必需连续使用两次charCodeAt，不仅读入charCodeAt(i)，还要读入charCodeAt(i+1)，将两个值放在一起，才能得到准确的字符
- String.prototype.concat() 用于连接两个字符串，返回一个新字符串，不改变原字符串
var s1 = 'abc';
var s2 = 'def';
s1.concat(s2) // "abcdef"
s1 // "abc"
// 该方法可以接受多个参数
'a'.concat('b', 'c') // "abc"
var one = 1;
var two = 2;
var three = '3';
// concat方法将参数先转成字符串再连接，所以返回的是一个三个字符的字符串。
// 作为对比，加号运算符在两个运算数都是数值时，不会转换类型，所以返回的是一个两个字符的字符串
''.concat(one, two, three) // "123"
one + two + three // "33"
- String.prototype.slice() 从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（不含该位置）。由于规则违反直觉，因此不建议使用 substring 方法，应该优先使用 slice
'JavaScript'.slice(0, 4) // "Java"
// 如果省略第二个参数，则表示子字符串一直到原字符串结束
'JavaScript'.slice(4) // "Script"
// 如果参数是负值，表示从结尾开始倒数计算的位置，即该负值加上字符串长度
'JavaScript'.slice(-6) // "Script"
'JavaScript'.slice(0, -6) // "Java"
'JavaScript'.slice(-2, -1) // "p"
// 如果第一个参数大于第二个参数，slice方法返回一个空字符串
'JavaScript'.slice(2, 1) // ""
- String.prototype.substr() 从原字符串取出子字符串并返回，不改变原字符串，第一个参数是子字符串的开始位置（从0开始计算），第二个参数是子字符串的长度
'JavaScript'.substr(4, 6) // "Script"
// 如果省略第二个参数，则表示子字符串一直到原字符串的结束
'JavaScript'.substr(4) // "Script"
// 如果第一个参数是负数，表示倒数计算的字符位置。如果第二个参数是负数，将被自动转为0，因此会返回空字符串
'JavaScript'.substr(-6) // "Script"
'JavaScript'.substr(4, -1) // ""
- String.prototype.indexOf()，String.prototype.lastIndexOf() 。indexOf 方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回 -1，就表示不匹配。
'hello world'.indexOf('o') // 4
'JavaScript'.indexOf('script') // -1
// indexO f方法还可以接受第二个参数，表示从该位置开始向后匹配。lastIndexOf 的第二个参数表示从该位置起向前匹配
'hello world'.indexOf('o', 6) // 7
- String.prototype.trim() 用于去除字符串两端的空格，返回一个新字符串，不改变原字符串。该方法去除的不仅是空格，还包括制表符（\t、\v）、换行符（\n）和回车符（\r）
'\r\nabc \t'.trim() // 'abc'
- String.prototype.toLowerCase()，String.prototype.toUpperCase() 都返回一个新字符串，不改变原字符串
- String.prototype.match() 用于确定原字符串是否匹配某个子字符串，返回一个数组，成员为匹配的第一个字符串。如果没有找到匹配，则返回 null，match 方法还可以使用正则表达式作为参数
'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"
- String.prototype.search()，String.prototype.replace() 。search 方法的用法基本等同于 match，但是返回值为匹配的第一个位置。如果没有找到匹配，则返回 -1，还可以使用正则表达式作为参数。replace 方法用于替换匹配的子字符串，一般情况下只替换第一个匹配（除非使用带有 g 修饰符的正则表达式）
'cat, bat, sat, fat'.search('at') // 1
'aaa'.replace('a', 'b') // "baa"
- String.prototype.split() 按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。split 方法还可以使用正则表达式作为参数
'a|b|c'.split('|') // ["a", "b", "c"]
// 如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。
'a|b|c'.split('') // ["a", "|", "b", "|", "c"]
// 如果省略参数，则返回数组的唯一成员就是原字符串
'a|b|c'.split() // ["a|b|c"]
// 如果满足分割规则的两个部分紧邻着（即两个分割符中间没有其他字符），则返回数组之中会有一个空字符串
'a||c'.split('|') // ['a', '', 'c']
// 如果满足分割规则的部分处于字符串的开头或结尾（即它的前面或后面没有其他字符），则返回数组的第一个或最后一个成员是一个空字符串
'|b|c'.split('|') // ["", "b", "c"]
'a|b|'.split('|') // ["a", "b", ""]
// split方法还可以接受第二个参数，限定返回数组的最大成员数
'a|b|c'.split('|', 2) // ["a", "b"]
- String.prototype.localeCompare() 方法用于比较两个字符串。它返回一个整数，如果小于0，表示第一个字符串小于第二个字符串；如果等于0，表示两者相等；如果大于0，表示第一个字符串大于第二个字符串。该方法的最大特点，就是会考虑自然语言的顺序。举例来说，正常情况下，大写的英文字母小于小写字母
'B' > 'a' // false
'B'.localeCompare('a') // 1
// 还可以有第二个参数，指定所使用的语言（默认是英语），然后根据该语言的规则进行比较
'ä'.localeCompare('z', 'de') // -1
'ä'.localeCompare('z', 'sv') // 1
- Math.floor()，Math.ceil() 。Math.floor 方法返回小于参数值的最大整数（地板值）。Math.ceil 方法返回大于参数值的最小整数（天花板值）
Math.floor(3.2) // 3
Math.floor(-3.2) // -4
Math.ceil(3.2) // 4
Math.ceil(-3.2) // -3
// 这两个方法可以结合起来，实现一个总是返回数值的整数部分的函数。
function ToInteger(x) {
x = Number(x);
return x < 0 ? Math.ceil(x) : Math.floor(x);
}
ToInteger(3.2) // 3
ToInteger(3.5) // 3
ToInteger(3.8) // 3
ToInteger(-3.2) // -3
ToInteger(-3.5) // -3
ToInteger(-3.8) // -3
- Math.round() 用于四舍五入
Math.round(0.1) // 0
Math.round(0.5) // 1
Math.round(0.6) // 1
// 等同于
Math.floor(x + 0.5)
// 注意，它对负数的处理（主要是对0.5的处理）
Math.round(-1.1) // -1
Math.round(-1.5) // -1
Math.round(-1.6) // -2
- Math.random() 返回0到1之间的一个伪随机数，可能等于0，但是一定小于1
// 任意范围的随机数生成函数如下
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
getRandomArbitrary(1.5, 6.5)
// 2.4942810038223864
// 任意范围的随机整数生成函数如下
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
getRandomInt(1, 6) // 5
- JSON.stringify() 用于将一个值转为 JSON 字符串。该字符串符合 JSON 格式，并且可以被JSON.parse方法还原
JSON.stringify('abc') // ""abc""
JSON.stringify(1) // "1"
JSON.stringify(false) // "false"
JSON.stringify([]) // "[]"
JSON.stringify({}) // "{}"
JSON.stringify([1, "false", false])
// '[1,"false",false]'
JSON.stringify({ name: "张三" })
// '{"name":"张三"}'
注意，对于原始类型的字符串，转换结果会带双引号
JSON.stringify(false) // "false"
JSON.stringify('false') // "\"false\""
上面代码中，如果不是内层的双引号，将来还原的时候，引擎就无法知道原始值是布尔值还是字符串
如果对象的属性是undefined、函数或XML对象，该属性会被JSON.stringify过滤
var obj = {
a: undefined,
b: function () {}
};
JSON.stringify(obj) // "{}"
如果数组的成员是undefined、函数或XML对象，则这些值被转成null
var arr = [undefined, function () {}];
JSON.stringify(arr) // "[null,null]"
正则对象会被转成空对象
JSON.stringify(/foo/) // "{}"
JSON.stringify 方法会忽略对象的不可遍历的属性
var obj = {};
Object.defineProperties(obj, {
'foo': {
value: 1,
enumerable: true
},
'bar': {
value: 2,
enumerable: false
}
});
JSON.stringify(obj); // "{"foo":1}"