学习js应该避开的几点

最新推荐文章于 2022-08-24 23:09:56 发布

一幕十行

最新推荐文章于 2022-08-24 23:09:56 发布

阅读量165

点赞数

分类专栏：前端js 文章标签：前端学习基础

原文链接：https://blog.csdn.net/qq449245884/article/details/97727289

版权

前端js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端初级入门学习js时需要注意的几点

你是否有过这种感觉

你几乎不明白代码的作用？
代码使用了很多 JavaScript 技巧？
命名和编码风格太过随意？
这些都是不良编码习惯的征兆。

1.不要使用隐式类型转换

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的机会。

现在咱们实现一个获取对象属性的函数。如果属性不存在，函数返回一个默认值

那么试图访问 isVillian属性:

console.log(getProp(hero, ‘isVillian’, true)); // => true
这是一个错误。即使 hero 的属性 isVillian为 false，函数 getProp()也会返回错误的 true。

这是因为属性存在的验证依赖于 if（！object[propertyName]）{…}隐式转换的布尔值。

这些错误很难发现，要修复该函数，就要明确验证值的类型：

这里建议避免直接使用 undefined。因此，上述解决方案可以进一步改进：

function getPropFixedBetter(object, propertyName, defaultValue) {
if (!(propertyName in object)) {
return defaultValue;
}
return object[propertyName]
}
原谅作者建议是:尽可能不要使用隐式类型转换。相反，请确保变量和函数参数始终具有相同的类型，必要时使用显式类型转换。

3. 不要污染函数作用域

在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
}

4.尽量避免 undefined 和 null

未赋值的变量默认被赋值为 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作为参数调用函数。