编写高质量JS代码的68个有效方法（十）

时间：2022-03-21 19:13:53

*:first-child {
margin-top: 0 !important;
}

body>*:last-child {
margin-bottom: 0 !important;
}

/* BLOCKS
=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {
margin: 15px 0;
}

/* HEADERS
=============================================================================*/

h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
font-size: inherit;
}

h1 {
font-size: 28px;
color: #000;
}

h2 {
font-size: 24px;
border-bottom: 1px solid #ccc;
color: #000;
}

h3 {
font-size: 18px;
}

h4 {
font-size: 16px;
}

h5 {
font-size: 14px;
}

h6 {
color: #777;
font-size: 14px;
}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
margin-top: 0;
padding-top: 0;
}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
margin-top: 10px;
}

/* LINKS
=============================================================================*/

a {
color: #4183C4;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* LISTS
=============================================================================*/

ul, ol {
padding-left: 30px;
}

ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0px;
}

ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}

dl {
padding: 0;
}

dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px;
}

dl dt:first-child {
padding: 0;
}

dl dt>:first-child {
margin-top: 0px;
}

dl dt>:last-child {
margin-bottom: 0px;
}

dl dd {
margin: 0 0 15px;
padding: 0 15px;
}

dl dd>:first-child {
margin-top: 0px;
}

dl dd>:last-child {
margin-bottom: 0px;
}

/* CODE
=============================================================================*/

pre, code, tt {
font-size: 12px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code, tt {
margin: 0 0px;
padding: 0px 0px;
white-space: nowrap;
border: 1px solid #eaeaea;
background-color: #f8f8f8;
border-radius: 3px;
}

pre>code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background: transparent;
}

pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px;
}

pre code, pre tt {
background-color: transparent;
border: none;
}

kbd {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DDDDDD;
background-image: linear-gradient(#F1F1F1, #DDDDDD);
background-repeat: repeat-x;
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
border-image: none;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
padding: 1px 4px;
}

/* QUOTES
=============================================================================*/

blockquote {
border-left: 4px solid #DDD;
padding: 0 15px;
color: #777;
}

blockquote>:first-child {
margin-top: 0px;
}

blockquote>:last-child {
margin-bottom: 0px;
}

/* HORIZONTAL RULES
=============================================================================*/

hr {
clear: both;
margin: 15px 0;
height: 0px;
overflow: hidden;
border: none;
background: transparent;
border-bottom: 4px solid #ddd;
padding: 0;
}

/* IMAGES
=============================================================================*/

img {
max-width: 100%
}
-->

No.46、使用数组而不要使用字典来存储有序集合

Tips:

  1. 使用for...in 循环来枚举对象属性应当与顺序无关
  2. 如果聚集运算字典中的数据，确保聚集操作与顺序无关
  3. 使用数组而不是字典来存储有序集合

由于标准允许JavaScript引擎*选择顺序，那么如果用字典存储有序数据，就会导致兼容性问题。

No.47、绝不要在Object.prototype中增加可枚举的属性

Tips：

  1. 避免在Object.prototype中增加属性
  2. 考虑编写一个函数代理Object.prototype方法
  3. 如果你是在需要在prototype中增加属性，请使用ES5中的Object.defineProperty方法将它们定义为不可枚举的属性

for...in循环非常便利，但是容易受到原型污染。如果在Object.prorotype中增加可枚举属性的话，将会导致大多数for...in循环受到污染。

如果是在是要在Object.prototype上定义属性的话，可以使用如下代码：

Object.defineProperty(Object.prototype, 'allKeys', {

  value: function(){

    var arr = [];

    for(var key in this){

      arr.push(key);

    }

    return arr;

  },

  writable: true,

  enumerable: false, //设置属性为不可枚举

  configurable: true

});

测试代码：

var obj = {a: 1, b: 2};

console.log(obj.allKeys()); // ['a', 'b']

No.48、避免在枚举期间修改对象

Tips：

  1. 当使用for...in 循环枚举一个对象的属性时，确保不要修改该对象
  2. 当迭代一个对象时，如果该对象的内容可能会在循环期间被改变，应该使用while循环或经典的for循环来代替for...in
  3. 为了在不断变化的数据结构中能够预测枚举，考虑使用一个有序的数据结构，例如数组，而不要使用字典

在大部分编译型语言中，如果在迭代时修改对象属性，是会出现编译错误的。在js中，没有这样的编译机制，但是也尽量保证不要修改迭代对象。

如果在被枚举时添加了新对象，并不一定能保证新添加的对象能被访问到：

var obj = {a: 1, b: 2};

for(var p in obj){

  console.log(p);

  obj[p + '1'] = obj[p] + 1;

}

遇到这样的场景，应当使用while和标准的for循环。

No.49、数组迭代要优先使用for循环而不是for...in循环

Tips:

  1. 迭代数组的索引属性应当总是使用for循环而不是for...in循环
  2. 考虑在循环之前将数组的长度存储在一个局部变量中以避免重新计算数组长度

猜测下面一段代码的结果？

var arr = [5, 6, 8, 10, 9];

var sum = 0;

for(var a in arr){

  sum += a;

}

console.log(sum);

要达到正确的结果，那么应该使用for循环

var arr = [5, 6, 8, 10, 9];

var sum = 0;

for(var i = 0, len = arr.length; i < len; i++){

  sum += arr[i];

}

console.log(sum); //38

再看一个比较极端的例子：

var arr = [5, 6, 8, 10, 9];

arr.len = 4;

for(var p in arr){

  console.log(p);

}

这个时候用for...in,完全是达不到预期效果的

再来看一个对于数组长度缓存的测试代码：

var count = 0;

console.time('t1');

while(count < 10000){

  var arr = [5, 6, 8, 10, 9];

  var sum = 0;

  count++;

  for(var i = 0, len = arr.length; i < len; i++){

    sum += arr[i];

  }

}

console.timeEnd('t1');

count = 0;

console.time('t2');

while(count < 10000){

  var arr = [5, 6, 8, 10, 9];

  var sum = 0;

  count++;

  for(var i = 0; i < arr.length; i++){

    sum += arr[i];

  }

}

console.timeEnd('t2');

结果，请自行复制代码执行。。。

No.50、迭代方法优于循环

Tips：

  1. 使用迭代方法（如Array.prototype.forEach和Array.prototype.map）替换for循环使得代码更可读，并且避免了重复循环控制逻辑
  2. 使用自定义的迭代函数来抽象未被标准库支持的常见循环模式
  3. 在需要提前终止循环的情况下，仍然推荐使用传统的循环。另外some和every方法也可用于提前退出

在使用循环的时候，在确定循环的终止条件时容易引入一些简单的错误：

for(var i = 0; i <= n; i++){}

for(var i = 1; i< n; i++){}

比较庆幸的是，闭包是一种为这些模式建立迭代抽象方便的、富有表现力的手法。

我们可以用以下代码来代替：

var arr = [1, 2, 3];

arr.forEach(function(v, i){

  console.log(v);

});

如果要创建新数组，那么可以用以下方式：

var arr = [1, 2, 3];

var arrNew = [];

//方式一

arr.forEach(function(v, i){

  arrNew.push(v);

});

//方式二

for(var i = 0, len = arr.length; i < len; i++){

  arrNew.push(arr[i]);

}

为了简化这种普遍操作，ES5中引入了Array.prototype.map方法：

var arr = [1, 2, 3];

var arrNew = arr.map(function(v){

  return v;

});

同样，如果想提取满足条件的元素，ES5也提供了filter方法：

var arr = [1, 2, 3];

var arrNew = arr.filter(function(v){

  return v > 1;

});

console.log(arrNew);

在ES5中，针对数组也提供了some和every ,可以用来终止循环，但是实际意义等同于C#的Linq方法All和Any：

var arr = [1, 2, 3];

//数组元素有一个>1就返回true，并终止循环

var b = arr.some(function(a){

  return a>1;

});

console.log(b); //true

//数组元素每个都<3，则返回true，否则返回false，并提前终止循环

b = arr.every(function(a){

  return a<3;

});

console.log(b); //false

相关文章