前言：

虽然项目周期紧张如弦上的箭，我仍挤出夜晚的宁静时光，沉浸在《编写可维护的JavaScript》的海洋中。书籍被划分为三个精彩的篇章：编程风格、编程实践和自动化。今天，我想与大家分享的是第一部分编程风格中我认为尤为精彩的片段——检测值与格式化。这些内容也在我的项目中得到了应用，希望能为大家在重构优化代码方面带来些许启示和帮助。

情景引入：

在JavaScript的编码世界里，我们经常会遇到这样的代码：对变量与null进行比较，以判断其是否拥有合理值。比如：

```javascript

var Controller = {

process: function (items) {

if (item !== null) { // 不好的写法

items.sort();

items.forEach(item => {

// 一些代码

});

}

}

}

```

虽然这段代码的意图明显——只有当items是数组时才进行后续操作，但它存在一个关键问题。仅仅与null比较并不能确保后续代码的安全执行。因为items的值可能是数字、字符串或其他对象，它们都与null不相等，但却可能导致process()方法在调用sort()时出错。

那么，如何更准确地检测值呢？让我们来探讨一下。

在JavaScript中，原始类型包括字符串、数字、布尔值、undefined和null。对于前四种类型，我们可以使用typeof运算符进行检测。例如：

对于字符串：

```javascript

if (typeof name === "string") { // 执行代码 }

```

对于数字：

```javascript

if (typeof count === "number") { // 一些代码 }

```

对于布尔值：

```javascript

if (typeof found === "boolean") { // 一些代码 }

```

对于undefined：

```javascript

if (typeof MyApp === "undefined") { // 一些代码 }

``` 需要注意的是，对于null的检测，我们并不推荐使用typeof运算符，因为它的返回值是'object'，这可能导致误判。当需要验证null时，应直接使用恒等运算符(===)或非等运算符(!==)。例如：判断输入框的值是否为null。

```javascript

if (this.skuName !== null) { // 输入框有值才执行请求接口 this.copySkuBlock()} else { // 提示输入框要输入值 this.$message({ type: 'error', message: '请输入商品规格' })}

在ES5中，JavaScript引入了Array.isArray()方法，该方法能够准确地判断一个值是否为数组。这一功能在IE9及更高版本中得到了支持。

示例代码如下：

```javascript

function isArray(value) {

return Array.isArray(value);

}

```

对于不支持Array.isArray()的老版本浏览器，可以通过Object.prototype.toString.call()方法进行检测，如果返回的值是"[object Array]"，则表示该值是一个数组。

在检测对象属性是否存在时，推荐使用in运算符。in运算符能够判断属性是否存在于对象自身或其原型链中。这种方式简洁明了，不容易引发错误。

示例代码如下：

```javascript

if ("count" in object) {

// 一些代码

}

```

如果你只想检测对象自身的属性，可以使用hasOwnProperty()方法，但这种方法只在IE9及更高版本中可用。在实际应用中，我更倾向于使用in运算符，只在需要明确区分实例属性和继承属性时才会使用hasOwnProperty()方法。

1. 变量和函数采用小驼峰式命名，变量使用名词作为前缀，函数使用动词作为前缀。这种命名方式有助于提高代码的可读性。

关于编程风格的一些深入理解与应用

当我们谈到遍历自定义对象的属性时，for-in循环是一个很好的工具。它不仅仅会遍历对象自身的属性，还会遍历从原型链上继承的属性。为了确保只处理对象自身的属性，推荐使用hasOwnProperty()方法来过滤结果。下面是一个好的写法示例：

```javascript

var prop;

for (prop in object) {

if (object.hasOwnProperty(prop)) {

console.log('Property name is ' + prop);

console.log('Property value is ' + object[prop]);

}

}

```

我们要注意，for-in循环主要用于遍历对象的属性，而不是数组的元素。对于数组，推荐使用其他方法，如forEach或for循环。

接下来，让我们关注变量、函数和运算符的编程风格。

在定义局部变量时，推荐将所有var语句合并为一个语句，每个变量的初始化独占一行。赋值运算符应当对齐，以提高代码的可读性。对于那些没有初始值的变量，应当放在var语句的尾部。下面是一个好的示例：

```javascript

function doSomething() {

var value = 10,

result = value + 10,

i,

len;

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

doOtherSomething(items[i]);

}

}

```

关于严格模式("use strict")，它不仅仅适用于全局作用域，也适用于局部作用域。为了避免在全局作用域中引发不必要的错误，最好不要在全局作用域中使用严格模式。关于运算符的选择，由于JavaScript具有强制类型转换机制，推荐使用===和!==，避免使用==和!=。

关于eval()函数和函数声明，我们需要强调一点：严禁使用eval()函数，并且只在必要时使用函数声明。

以上就是我对第一部分编程风格的理解和应用。如果你觉得这篇文章对你有帮助，可以点赞收藏。如果你有任何疑问或更好的想法，欢迎在下方评论区与我交流。我们一起进步，共同成长。感谢大家的阅读和支持！

一起交流：提高自我技能的不妨多与身边的异性朋友交流，互相学习，共同进步。作者：付出，原文已附在文章末尾。