javascript错误_您可能会犯的javascript错误

javascript错误

Today I am going to talk about common mistakes you may be making in your Javascript project.

今天，我将讨论您在Javascript项目中可能犯的常见错误。

Javascript is one of the most popular language in the world but it’s still very easy to make mistakes when writing code through misunderstanding or overlooking stuff that we already know.

Javascript是世界上最受欢迎的语言之一，但是在通过我们已经知道的误解或忽略代码编写代码时，仍然很容易出错。

未定义和空 (Undefined and Null)

Javascript has both undefined and null for non-values. However, there are quite a few differences between the two. undefined means that the variable may have been declared, but nothing is set to it. A variable can also be explicitly set as undefined. The type of an undefined variable, when checking the type with the typeof operator, will show you the type undefined. Functions that don’t return anything returns undefined. On the other hand, null values have to be explicitly set by functions that return null or just set directly to a variable. When you check an object that has the null value set, you will see that the type of it is object if a variable has the null value.

对于非值，Javascript既未undefined又为null 。 但是，两者之间有很多差异。 undefined表示该变量可能已声明，但未对其进行任何设置。 变量也可以显式设置为undefined. 当使用typeof运算符检查类型时， undefined变量的类型将为您显示类型undefined 。 不返回任何内容的函数返回undefined 。 另一方面，必须由返回null或直接将其直接设置为变量的函数显式设置null值。 当您检查设置了null值的object如果变量具有null值，您将看到其类型为object 。

For this reason, it will be easier to stick to undefined whenever you can when you’re setting variable values to non-values. It reduces confusion and we only have to check that the type of a variable is undefined to see whether it’s undefined. It’s less painful than having two checks, for both null and undefined.

因此，将变量值设置为非值时，只要有可能就更容易坚持undefined 。 它减少了混乱，我们只需要检查变量的类型是否undefined即可查看它是否undefined 。 它比对null和undefined进行两次检查要容易得多。

To write functions that return undefined, you don’t have to do anything like this:

要编写返回undefined函数，您无需执行以下操作：

const f = () => {}

To set a variable that was assigned some other value to undefined:

要将分配了其他值的变量设置为undefined ：

x = undefined;

To check if a property value is undefined:

要检查属性值是否undefined ：

typeof obj.prop === 'undefined'

or

要么

obj.prop === undefined

To check if a variable is undefined:

要检查变量是否undefined ：

typeof x === 'undefined'

A declared variable that hasn’t been assigned anything automatically has the value undefined.

没有自动分配任何内容的声明变量的值undefined 。

If you need to check null:

如果需要检查null ：

obj.prop === null

or

要么

x === null

for variables. You cannot use the typeof operator for checking null because the data type of null is object.

对于变量。 你不能使用typeof运算符检查null ，因为数据类型null的object 。

加法和串联 (Addition and Concatenation)

In Javascript, the + operator is used for both adding two numbers and concatenating strings together. Because Javascript is a dynamic language, so the operands will be automatically converted to the same type before the operation will be applied. For example:

在Javascript中， +运算符用于将两个数字相加并将字符串连接在一起。 由于Javascript是动态语言，因此在应用操作之前，操作数将自动转换为相同类型。 例如：

let x = 1 + 1;

then you get 2 because they both have same type. The + operation was used for addition as you expected. However, if you have the following expression:

那么您将得到2，因为它们都具有相同的类型。 如您所料， +操作用于添加。 但是，如果您具有以下表达式：

let x = 1 + '1';

then you will get '11' because the first operand will be coerced into a string before the + operation will be applied. The +operation will be used for concatenation instead of addition. When you use the + operator on multiple variables, this makes knowing the type even harder. In this case:

那么您将得到'11'因为在应用+操作之前，第一个操作数将被强制转换为字符串。 +操作将用于串联而不是加法。 当您在多个变量上使用+运算符时，这将使了解类型变得更加困难。 在这种情况下：

let x = 1;  
let y = 2;  
let z = x + y;

you will get 3 because x and y are both numbers.

您将得到3，因为x和y都是数字。

Instead, if we have:

相反，如果我们有：

let x = 1;  
let y = '2';  
let z = x + y;

then you will get '12' because y is string, so the + operator will be used for concatenation instead. For solving this problem, we should convert all the operands to numbers before using. Which means we should rewrite the above code into the following:

那么您将得到'12'因为y是字符串，因此+运算符将被用于串联。 为了解决这个问题，我们应该在使用之前将所有操作数转换为数字。 这意味着我们应该将上面的代码重写为以下代码：

let x = 1;  
let y = '2';  
let z = Number(x) + Number(y);

This variable z will have 3 since we converted both operands to numbers with Number factory function. The Number function takes in any object and returns a number if it can be parsed into a number, or NaN otherwise. An alternative way to do this is to use the new Number(...).valueof() function, like this:

由于我们使用Number factory函数将两个操作数都转换为数字，因此该变量z将为3。 Number函数接受任何对象并返回一个数字(如果可以将其解析为数字)，否则返回NaN 。 另一种执行此操作的方法是使用new Number(...).valueof()函数，如下所示：

let x = 1;  
let y = '2';  
let z = new Number(x).valueOf() + new Number(y).valueOf();

Since new Number(...)is constructor that creates an object type, you want to use the the valueof function to convert it back to a primitive type to make sure that what we get is a number type. A simple way to do this is:

由于new Number(...)是创建object类型的构造函数，因此您想使用valueof函数将其转换回原始类型，以确保我们得到的是数字类型。 一种简单的方法是：

let x = 1;  
let y = '2';  
let z = +x + +y;

The + sign in front of a single operand will try to convert the single operand into a number or toNaN if it can’t be converted into a number. It does the same thing as the Number function. You also can convert a variable to a particular type of number. The Number object has a parseInt function to convert a string or object into an integer and a parseFloat function to convert a string or object into a floating-point number. parseInt takes the object you want to convert to a number as the first argument. It also takes a radix as an optional second argument, which is the base of the mathematical numeral systems. If the string starts with 0x, then the radix will be set to 16. If the string starts with anything else, then the radix will be set to 10.

单个操作数前面的+号将尝试将单个操作数转换为数字，或者将其转换为NaN如果无法将其转换为数字)。 它与Number函数具有相同的作用。 您还可以将变量转换为特定类型的数字。 Number对象具有一个parseInt函数将字符串或对象转换为整数，以及parseFloat函数将字符串或对象转换为浮点数。 parseInt将要转换为数字的对象作为第一个参数。 它还将基数作为可选的第二个参数，这是数学数字系统的基础。 如果字符串以0x ，则基数将设置为16。如果字符串以任何其他开头，则基数将设置为10。

You can use them like this:

您可以像这样使用它们：

let x = 1;  
let y = '2';  
let z = Number.parseInt(x) + Number.parseInt(y)

Also you can use parseFloat instead of parseInt as following:

您也可以使用parseFloat代替parseInt ，如下所示：

let x = 1;  
let y = '2';  
let z = Number.parseFloat(x) + Number.parseFloat(y)

将语句返回多行 (Return Statements Into Multiple Lines)

JavaScript closes a statement at the end, so one line code is considered distinct from the other. For example, if you have:

JavaScript在最后关闭一条语句，因此一个行代码被认为与另一行代码不同。 例如，如果您有：

const add = (a, b) => {  
  return  
  a + b;  
}

You will get undefined if you run console.log(add(1, 2)); since you ran the return statement, which ended the function execution, before a + b is run. Therefore, a + b will never be run in this function. To fix this, you either have to put the return statement all in one line or use parentheses to surround what you want to return. For example:

如果运行console.log(add(1, 2));将会得到undefined console.log(add(1, 2)); 由于您在运行a + b之前运行了return语句，从而结束了函数的执行。 因此， a + b将永远不会在此函数中运行。 要解决此问题，您要么必须将return语句全部放在一行中，要么使用括号将要返回的内容括起来。 例如：

const add = (a, b) => {  
  return a + b;  
}

This will log 3 if you run console.log(add(1, 2)); since you are actually returning the computed result in the function. You can also write:

如果运行console.log(add(1, 2));这将记录3 console.log(add(1, 2)); 因为您实际上是在函数中返回计算结果。 您还可以编写：

const add = (a, b) => {  
  return (  
    a + b  
  );  
}

This is handy for returning expressions that might be longer than one line. This will also log 3 if we run console.log(add(1, 2));. For arrow functions, you can also write:

这对于返回可能长于一行的表达式很方便。 如果我们运行console.log(add(1, 2));这也将记录3 console.log(add(1, 2)); 。 对于箭头功能，您还可以编写：

const add = (a, b) => (a + b)

to get the same result. This also works for single-line arrow functions.

得到相同的结果。 这也适用于单行箭头功能。

In JavaScript, if a statement is incomplete, like the first line of:

在JavaScript中，如果语句不完整，例如：

const power = (a) => {  
  const  
    power = 10;  
  return a ** 10;  
}

inside the function then the JavaScript interpreter will run the first line together with the second line to get the full statement. So:

在函数内部，JavaScript解释器将第一行与第二行一起运行以获取完整的语句。 所以：

const  
  power = 10;

However, for complete statements like return statements, the JavaScript interpreter will treat them as separate lines. So:

但是，对于像return语句这样的完整语句，JavaScript解释器会将它们视为单独的行。 所以：

return   
  a ** 10;

is not the same as:

与以下内容不同：

return a ** 10;

结论 (Conclusion)

Even though JavaScript is a friendly language, it’s still very easy to make mistakes when writing JavaScript code. It’s easy to confuse undefined and null when you aren’t familiar with JavaScript. Because of the dynamic typing nature of JavaScript, operators like the + operator that can do multiple things can easily be converted to a type we don’t expect and produce the wrong result. Also, if statements can be complete on their own, then they shouldn’t be written in their own lines if you want both lines to be together.

即使JavaScript是一种友好的语言，编写JavaScript代码时也很容易出错。 当您不熟悉JavaScript时，很容易混淆undefined和null 。 由于JavaScript具有动态类型性质，因此+运算符等可以执行多种操作的运算符很容易转换为我们不期望的类型，并产生错误的结果。 另外，如果语句可以自己完成，那么如果您希望这两行在一起，则不应以自己的行编写语句。

That’s it for today.

今天就这样。

Thanks for your attention and stay tuned.

感谢您的关注并继续关注。

Happy coding!

祝您编码愉快！

翻译自: https://medium.com/dev-genius/javascript-mistakes-you-may-be-making-b316a0352c37

javascript错误