文章

如何缩小js代码

如何缩小js代码

写在前面

相较于简写形式带来的代码体积减小,易于理解的代码书写方式能显著提升可维护性,因此在选择简写方案时需谨慎。

Arguments

1
2
3
4
setInterval(function () {
  console.log("z");
}, 100); // before
setInterval('console.log("z")', 100); // after

Variables

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var o = {}; // Object literal
var a = []; // New Array
var r = /.*/; // New Regex
var s = "" + 0; // Convert to string
var n = +"7"; // Convert to number (7)
var b = !!b; // Converts to a boolean
var f = ~~3.434; // Same as Math.floor(3.434)
var g = -~3.434; // Same as Math.ceil(3.434)
var x = 5e3; // Same as 5000
var c = c || z; // Coalesce, if c is null then set it to z.
"abcde"[1]; // charAt shorthand, results in 'b'.
+new Date(); // Shorthand for (new Date()).getTime();
Date.now(); // Even shorter shorthand for the above
var a = x ? y : z; // Ternary operator, short for: var a;if(x){a=y;}else{a=z;}
!0; // Shorthand for true
!1; // Shorthand for false
void 0; // Shorthand for undefined

隐式转换

1
2
3
4
5
6
7
8
9
a = "30";
b = "10";
c = a + b; // failure
c = parseInt(a) + parseInt(b); // too long

c = -(-a - b); // try these
c = ~~a + ~~b;
c = +a + +b;
c = a - -b;

运算符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
hasAnF = "This sentence has an f.".indexOf("f") >= 0; // before
hasAnF = ~"This sentence has an f.".indexOf("f"); // after
// ==================================

// Longhand
if (str.indexOf(ndx) == -1) {
  // Char not found
}

// Shorthand
if (~str.indexOf(ndx)) {
  // Char not found.
}
//===========================================

rand10 = Math.floor(Math.random() * 10); // before
rand10 = 0 | (Math.random() * 10); // after
// ~ 优先级低于|

//===========================================
Math.floor(a / 2); // before
a >> 1; // after

Math.floor(a / 4); // before
a >> 2; // after
//==========================================

million = 1000000; // before
million = (1e6)[ // after
  //==========================================

  (Infinity, -Infinity)
][(1 / 0, -1 / 0)]; // before // after
//=============================================

if (isFinite(a))
  if (1 / a)
    // before
    // after
    //==========================================

    //使用当前日期生成随机整数
    new Date() & 1; // Equivalent to Math.random()<0.5
new Date() % 1337; // Equivalent to Math.floor(Math.random()*1337))

i = 0 | (Math.random() * 100); // before
i = new Date() % 100; // after
//=============================================

string

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
html = "<a href='" + url + "'>" + text + "</a>"; // before
html = text.link(url); // after
//'abc'.link('www.baidu.com') -> '<a href="www.baidu.com">abc</a>'
//==================================================

// Longhand
"myString".charAt(0);

// Shorthand
"myString"[0]; // returns 'm'

//Pretty useful for RGB declarations.
"rgb(" + (x + 8) + "," + (y - 20) + "," + z + ")"; // before
"rgb(" + [x + 8, y - 20, z] + ")"; // after

"rgb(255," + (y - 20) + ",0)"; // before
"rgb(255," + [y - 20, "0)"]; // after

条件语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
// Longhand
var big;

if (x > 10) {
  big = true;
} else {
  big = false;
}

// Shorthand
var big = (x > 10) ? true : false;

var big = (x > 10);

//further nested examples
var x = 3,
big = (x > 10) ? 'greater 10' : (x < 5) ? 'less 5' : 'between 5 and 10';

console.log(big); // "less 5"

var x = 20,
big = { true: x > 10, false : x< =10 };

console.log(big); // "Object {true=true, false=false}"
//==================================================

// Longhand
if(myvar == 1 || myvar == 5 || myvar == 7 || myvar == 22)  {
  console.log('ya');
}

// Shorthand
([1,5,7,22].indexOf(myvar) !=- 1) && alert('yeah baby!');
//=====================================================

// Longhand
if (type === 'aligator') {
  aligatorBehavior();
}
else if (type === 'parrot') {
  parrotBehavior();
}
else if (type === 'dolphin') {
  dolphinBehavior();
}
else if (type === 'bulldog') {
  bulldogBehavior();
} else {
  throw new Error('Invalid animal ' + type);
}

// Shorthand
var types = {
  aligator: aligatorBehavior,
  parrot: parrotBehavior,
  dolphin: dolphinBehavior,
  bulldog: bulldogBehavior
};

var func = types[type];
(!func) && throw new Error('Invalid animal ' + type); func();
//========================================================

//Longhand
if (x == a) {
 x = b;
}
else if (x == b) {
 x = a;
}
// x = 1, a = 1, b = 2
// 1st run: x = 2
// 2nd run: x = 1
// 3rd run: x = 2
// 4th run: x = 1
// ...

// Shorthand
x = a ^ b ^ x;
//====================================================
本文由作者按照 CC BY 4.0 进行授权