这篇文章主要介绍“JavaScript不良的编码习惯有哪些”,在日常操作中,相信很多人在JavaScript不良的编码习惯有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript不良的编码习惯有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
JavaScript是一种松散类型的语言。 如果使用得当,这是一个好处,因为它给你带来了灵活性。
大多数运算符+ - * / ==(不包括 ===)在处理不同类型的操作数时会进行隐式转换。
语句if(condition){...},while(condition){...}隐式地将条件转换为布尔值。
下面的示例依赖于类型的隐式转换,这种有时候会让人感到很困惑:
console.log("2" + "1"); // => "21" console.log("2" - "1"); // => 1 console.log('' == 0); // => true console.log(true == []); // -> false console.log(true == ![]); // -> false
过度依赖隐式类型转换是一个坏习惯。 首先,它使你的代码在边缘情况下不太稳定。 其次,增加了引入难以重现和修复的bug的机会。
现在咱们实现一个获取对象属性的函数。如果属性不存在,函数返回一个默认值
function getProp(object, propertyName, defaultValue) { if (!object[propertyName]) { return defaultValue; } return object[propertyName]; } const hero = { name: 'Batman', isVillian: false }; console.log(getProp(hero, 'name', 'Unknown')); // => 'Batman'
getProp() 读取name属性的值,即'Batman'。
那么试图访问isVillian属性:
console.log(getProp(hero, 'isVillian', true)); // => true
这是一个错误。即使 hero 的属性isVillian为false,函数getProp()也会返回错误的true。
这是因为属性存在的验证依赖于if(!object [propertyName]){...}隐式转换的布尔值。
这些错误很难发现,要修复该函数,就要明确验证值的类型:
function getPropFixed(object, propertyName, defaultValue) { if (object[propertyName] === undefined) { return defaultValue; } return object[propertyName]; } const hero = { name: 'Batman', isVillian: false }; console.log(getPropFixed(hero, 'isVillian', true)); // => false
object[propertyName] === undefined确切地验证属性是否为undefined。
这里建议避免直接使用undefined。 因此,上述解决方案可以进一步改进:
function getPropFixedBetter(object, propertyName, defaultValue) { if (!(propertyName in object)) { return defaultValue; } return object[propertyName] }
原谅作者建议是:尽可能不要使用隐式类型转换。相反,请确保变量和函数参数始终具有相同的类型,必要时使用显式类型转换。
优秀实践列表:
始终使用严格的相等运算符===进行比较
不要使用松散等式运算符==
加法运算符 operand1 + operand2:两个操作数应该是数字或字符串
算术运算符 - * /%**:两个操作数都应该是数字
if(condition){...},while(condition){...}等语句:condition 必须是一个布尔类型值
你可能会说这种方式需要编写更多代码......你是对的! 但是通过明确的方法,可以控制代码的行为。 此外,显性提高了可读性。
JavaScript的有趣之处在于,它的创建者没有料到这种语言会如此流行。
基于JavaScript构建的应用程序的复杂性比语言发展的速度还要快。这种情况迫使开发人员使用JavaScript技巧和变通方法,只是为了让事情正常运行。
一个典型的例子是查看数组是否包含某个元素。 我从来不喜欢使用array.indexOf(item)!== -1来检查。
ES6 及以后版本的功能要强大得多,可以使用新的语言特性安全地重构许多技巧。
ES6 中可以使用 array.includes(item) 来代替 array.indexOf(item) !== -1
在ES2015之前,你可能会养成了将所有变量声明在函数作用域里面。
来看看一个例子:
function someFunc(array) { var index, item, length = array.length; /* * Lots of code */ for (index = 0; index < length; index++) { item = array[index]; // Use `item` } return someResult; }
变量index、item和length 在函数作用域内。但是这些变量会影响函数作用域,因为它们只在for()块作用域内才被需要。
通过引入具有块作用域 let和const,应该尽可能地限制变量的生命周期。
function someFunc(array) { /* * Lots of code */ const length = array.length; for (let index = 0; index < length; index++) { const item = array[index]; // Use `item` } return someResult; }
index和 item 变量被限制为for()循环块作用域。length 被移动到使用地方的附近。
重构后的代码更容易理解,因为变量不会分散在整个函数作用域内,它们存在于使用地方的附近。
在使用的块作用域定义变量
if 块作用域
// 不好 let message; // ... if (notFound) { message = 'Item not found'; // Use `message` } // 好 if (notFound) { const message = 'Item not found'; // Use `message` }
for 块作用域
// 不好 let item; for (item of array) { // Use `item` } // 好 for (const item of array) { // Use `item` }
未赋值的变量默认被赋值为undefined。例如
let count; console.log(count); // => undefined const hero = { name: 'Batman' }; console.log(hero.city); // => undefined
count变量已定义,但尚未使用值初始化。 JavaScript隐式赋值给它undefined。
访问不存在的属性hero.city时,也会返回undefined。
为什么直接使用undefined是一个不好习惯? 因为与undefined进行比较时,你正在处理未初始化状态的变量。
变量、对象属性和数组在使用前必须用值初始化
JS 提供了很多避免与undefined进行比较方式。
判断属性是否存在
// 不好 const object = { prop: 'value' }; if (object.nonExistingProp === undefined) { // ... } // 好 const object = { prop: 'value' }; if ('nonExistingProp' in object) { // ... }
对象的默认属性
// 不好 function foo(options) { if (object.optionalProp1 === undefined) { object.optionalProp1 = 'Default value 1'; } // ... } // 好 function foo(options) { const defaultProps = { optionalProp1: 'Default value 1' }; options = { ...defaultProps, ...options } }
默认函数参数
// 不好 function foo(param1, param2) { if (param2 === undefined) { param2 = 'Some default value'; } // ... } // 好 function foo(param1, param2 = 'Some default value') { // ... }
null是一个缺失对象的指示符。应该尽量避免从函数返回 null,特别是使用null作为参数调用函数。
一旦null出现在调用堆栈中,就必须在每个可能访问null的函数中检查它的存在,这很容易出错。
function bar(something) { if (something) { return foo({ value: 'Some value' }); } else { return foo(null); } } function foo(options) { let value = null; if (options !== null) { value = options.value; // ... } return value; }
尝试编写不涉及null的代码。 可替代方法是try /catch机制,默认对象的使用。
有什么比阅读具有随机编码风格的代码更令人生畏的事情? 你永远不知道会发生什么!
如果代码库包含许多开发人员的不同编码风格,该怎么办?,这种就像各色人物涂鸦墙。
整个团队和应用程序代码库都需要相同的编码风格,它提高了代码的可读性。
一些有用的编码风格的例子:
Airbnb JS 风格指南
谷歌 JS 风格指南
老实说,当我在回家前准备提交时,我可能会忘记设计代码的样式。
我自己总说:保持代码不变,以后再更新它,但是“以后”意味着永远不会。
这里建议使用 eslint 来规范编码风格。
安装eslint
使用最适合自己的编码风格配置 eslint
设置一个预提交钩子,在提交之前运行eslint验证。
到此,关于“JavaScript不良的编码习惯有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。