JavaScript作为一门网页脚本语言,因为Node的出现变得相当火热。对于多数人来说,JS可能是一门相对容易学习的编程语言。
JavaScript虽然容易学习,但不简单。当我们对于它的学习越加深入的时候,越能发现这门语言的魅力。今天,笔者就来详谈一下JS那些鲜为人知的“黑科技”。
JavaScript作为一门网页脚本语言,因为Node的出现变得相当火热。对于多数人来说,JS可能是一门相对容易学习的编程语言。
JavaScript虽然容易学习,但不简单。当我们对于它的学习越加深入的时候,越能发现这门语言的魅力。今天,笔者就来详谈一下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);