JavaScript的那些事

摘要

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

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

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

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

定时器的参数

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

一般用法:

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

传参用法:

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

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

字符串的拼接

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

一般用法:

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

连字符用法:

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

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

\用法:

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

字符串模板用法

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

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

console.log的修饰

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

  1. console.log('hello js');

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

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

for循环的break

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

  1. for (var i = 0; i < 6; i++) {
  2.     for (var j = 0; j < 1; j++) {
  3.         alert(i);
  4.     }
  5. }

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

  1. for (var i = 0; i < 6; i++) {
  2.     for (var j = 0; j < 1; j++) {
  3.         if (i == 3) {
  4.             break;
  5.         }
  6.         alert(i);
  7.     }
  8. }

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

  1. a: for (var i = 0; i < 6; i++) {
  2.     for (var j = 0; j < 1; j++) {
  3.         if (i == 3) {
  4.             break a;
  5.         }
  6.         alert(i);
  7.     }
  8. }

匿名函数自执行

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

  1. (function() { // 国内常见写法
  2.     console.log('hello js');
  3. })();
  4. (function() { // 国外常见写法
  5.     console.log('hello js');
  6. }());

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

  1. +function() { // 匿名函数自执行+写法
  2.     console.log('hello js');
  3. }();
  4. -function() { // 匿名函数自执行-写法
  5.     console.log('hello js');
  6. }();
  7. !function() { // 匿名函数自执行!写法
  8.     console.log('hello js');
  9. }();
  10. ~function() { // 匿名函数自执行~写法
  11.     console.log('hello js');
  12. }();

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

typeof的写法

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

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

new方法创建对象

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

  1. var arr1 = new Array();
  2. var arr2 = new Array;
  3. console.log(arr1, arr2);
shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: