JavaScript的那些事

摘要

JavaScript作为一门网页脚本语言，因为Node的出现变得相当火热。对于多数人来说，JS可能是一门相对容易学习的编程语言。

JavaScript虽然容易学习，但不简单。当我们对于它的学习越加深入的时候，越能发现这门语言的魅力。今天，笔者就来详谈一下JS那些鲜为人知的“黑科技”。

文章目录

JavaScript作为一门网页脚本语言，因为Node的出现变得相当火热。对于多数人来说，JS可能是一门相对容易学习的编程语言。

定时器的参数

在JS中，有两个比较常用的定时器：setInterval和setTimeout。相信很多人对于这两个定时器都不陌生，但是很多人确没有深入了解过它们。下面以setTimeout为例：

一般用法：

setTimeout(function() {
console.log('hello js');
}, 1000);

传参用法：

setTimeout(function(arg1, arg2) {
console.log(arg1, arg2);
}, 1000, 'hello js', 'hello world');

注：大部数人都用过第一种写法，确不知道setInterval和setTimeout其实可以接受多个参数(前面函数的实参)。

字符串的拼接

字符串的拼接相信是很多开发者都头疼的问题，大量的字符串拼接会让很多没有耐性的人抓狂。对于有换行的代码让我们做字符串拼接，我们通常这样写：

一般用法：

window.onload = function() { // 去掉换行
document.body.innerHTML = '<h1>标题1</h1><h2>标题2</h2><h3>标题3</h3>';
};

连字符用法：

window.onload = function() { // 加号拼接
document.body.innerHTML =
'<h1>标题1</h1>' +
'<h2>标题2</h2>' +
'<h3>标题3</h3>';
};

上面是两常见的用法，下面给出简单快捷的方法：

\用法：

window.onload = function() { // 行尾\拼接
document.body.innerHTML =
'<h1>标题1</h1>\
<h2>标题2</h2>\
<h3>标题3</h3>';
};

字符串模板用法：

window.onload = function() { // ``字符串模板
document.body.innerHTML =
`<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>`;
};

注：\用法是js中字符串拼接的一个小技巧，兼容性良好。``的拼接方法是ES6中提供的用法(字符串模板)，因此只有支持ES6的浏览器才能使用，否则会报错。

console.log的修饰

控制台应该是我们做调试时用的最多的一个工具，其中console.log函数用来帮我们输出一些信息(IE可能不支持)，如：

console.log('hello js');

这样只会在控制台简单的输出不带任何修饰的hello js字符串，但是我们打开某电商页面下面的控制台，我们会发现控制台输出的文字是有样式的。其实，要实现这样的效果很简单，我们可以通过给console.log里面的参数设置样式。因此，我们只需要这样做即可：

console.log('%c' + 'hello js', 'font-size: 30px; background: #ff0;');

for循环的break

for循环是我们常用的一个流程控制语句，有时我们在处理一些问题时往往需要多层嵌套，如下：

for (var i = 0; i < 6; i++) {
for (var j = 0; j < 1; j++) {
alert(i);
}
}

现在我们有如下需求，当i = 3时，直接跳出最外层的for循环，可能很多人会想到用break跳出循环，代码如下：

for (var i = 0; i < 6; i++) {
for (var j = 0; j < 1; j++) {
if (i == 3) {
break;
}
alert(i);
}
}

运行代码后发现，确实没有弹出3，但是4和5却弹了出来，这意味着当i = 3时，并没有跳出最外层的for的循环。其实要实现这种需求并不难，用另一种不常见但符合标准的写法即可，代码如下：

a: for (var i = 0; i < 6; i++) {
for (var j = 0; j < 1; j++) {
if (i == 3) {
break a;
}
alert(i);
}
}

匿名函数自执行

有些时候，我们为了不污染全局变量且为了实现某些需求，可能会用到匿名函数自执行，这也是一种很典型的闭包写法。最常见到的写法如下：

(function() { // 国内常见写法
console.log('hello js');
})();
(function() { // 国外常见写法
console.log('hello js');
}());

其实要让一个匿名函数自执行有很多写法，只要我们在匿名函数的function前面加上这些符号就行：+、-、!、~，代码如下：

+function() { // 匿名函数自执行+写法
console.log('hello js');
}();
-function() { // 匿名函数自执行-写法
console.log('hello js');
}();
!function() { // 匿名函数自执行!写法
console.log('hello js');
}();
~function() { // 匿名函数自执行~写法
console.log('hello js');
}();

注：最上面那两种匿名函数自执行返回的结果是undefined，+和-返回的是NaN、!返回的是true、~返回的是-1。

typeof的写法

在JS中，很多函数的写法不止一种，最常见的就是typeof、instanceof、in等。这些函数的括号可以用空格来代替，代码如下：

console.log(typeof([]) == typeof []) // 完全等价的

new方法创建对象

平时我们通过new的方法创建对象时，都会带上()括号，其实，在JS中我们是可以省略()的，下面这两种写法其实是等价的：

var arr1 = new Array();
var arr2 = new Array;
console.log(arr1, arr2);