javascript错误_JavaScript的所有错误

javascript错误

I was recently thrown into a huge Javascript codebase and I found it extremely hard to navigate.

最近，我陷入了一个巨大的Javascript代码库，发现导航异常困难。

One thing that struck me was that a lot of the same things were done in different ways. Each solution trying to be more clever and in fewer lines of code than the previous solution.

让我印象深刻的一件事是，许多相同的事情是以不同的方式完成的。 与以前的解决方案相比，每种解决方案都试图变得更聪明，使用更少的代码行。

Personally, I believe that everyone should write boring code. Boring code is great as it is easy to write, change, and delete.

我个人认为每个人都应该编写无聊的代码。 无聊的代码很棒，因为它易于编写，更改和删除。

For the last year, I worked mostly in Go, and Go is great for writing boring code!

去年，我主要在Go中工作，Go非常适合编写无聊的代码！

Most of the time there is only 1 way to do a certain thing. So, everyone is forced to write the same code. Which is great to help people understand each other’s code.

大多数时候，只有一种方法可以完成某件事。 因此，每个人都必须编写相同的代码。 这对帮助人们理解彼此的代码非常有用。

If you compare this to the Javascript codebase there is a world of difference.

如果将此与Javascript代码库进行比较，则有很大的不同。

Let’s look at 3 examples that struck me as confusing when looking at Javascript code.

让我们看3个使Java代码令人困惑的示例。

1.循环 (1. Loops)

In Go, you have 1 way to write a for loop. In Javascript, you have 4 different ways to achieve the same thing.

在Go中，您有1种编写for循环的方法。 在Javascript中，您有4种不同的方法来实现同一件事。

Consider the example below. I can use a simple for loop, a for...of loop, a for...in loop or the forEach() function to loop through the items.

考虑下面的示例。 我可以使用简单的for循环， for...of循环， for...in循环或forEach()函数来遍历项目。

const fruits = ["🍉", "🥝", "🍌"];


console.log("simple for loop");
for (let i=0; i<fruits.length; i++) {
	console.log(fruits[i]);
}


console.log("for of loop");
for (const fruit of fruits) {
	console.log(fruit);
}


console.log("for in loop");
for (const index in fruits) {
	console.log(fruits[index]);
}


console.log("forEach() loop");
fruits.forEach(fruit => {
	console.log(fruit);
});

So we have 4 types of loops that all behave in a slightly different way. And to use them correctly you have to know the difference between all 4.

因此，我们有4种类型的循环，它们的行为都略有不同。 为了正确使用它们，您必须了解所有4个之间的区别。

Oh, and if you want to loop over the keys of an object you have to use the hasOwnProperty() method. Which is another thing that you must know, otherwise have fun debugging.

哦，如果要遍历对象的键，则必须使用hasOwnProperty()方法。 这是您必须知道的另一件事，否则请进行有趣的调试。

for (var property in object) {
  if (object.hasOwnProperty(property)) {
    // Do things here
  }
}

2.功能 (2. Functions)

There are a lot of ways to define functions in Javascript. Suppose I want to create a function that returns a string. I could achieve this in the following ways:

有很多方法可以在Javascript中定义函数。 假设我想创建一个返回字符串的函数。 我可以通过以下方式实现：

getFruits1(); // This will work
getFruits2(); // This won't
getFruits3(); // This also won't
getFruits4(); // And this also won't


function getFruits1() {
	return "🍉 🥝 🍌";
}


getFruits2 => {
	return "🍉 🥝 🍌";
}


getFruits3 => (
	"🍉 🥝 🍌"
);


getFruits4 = function() {
	return "🍉 🥝 🍌"; 
}

These are all functions, but they all behave in a slightly different way. And if you don’t know the differences, you are in for a fun debugging session.

这些都是功能，但是它们的行为方式略有不同。 而且，如果您不知道它们之间的差异，那么您将参加一个有趣的调试会话。

For example, the getFruits1() can be called before it is declared. The other functions cannot.

例如，可以在声明getFruits1()之前对其进行调用。 其他功能不能。

And did you know that when you use getFruits => ( "🍉 🥝 🍌" ) you don’t need a return statement.

而且您知道吗，当您使用getFruits => ( "🍉 🥝 🍌" )您不需要return语句。

Al great gimmicks, but does it make the code more clear to read?

很棒的gi头，但这会使代码更清晰易读吗？

Is it really better to use:

使用真的更好吗：

getFruits => ( "🍉 🥝 🍌" )

instead of explicitly saying what you are doing with a return statement.

而不是用return语句明确说明您在做什么。

getFruits => { return "🍉 🥝 🍌"; }

I would go for clarity over cleverness any day of the week.

在一周中的任何一天，我都会出于聪明的考虑而去做。

3. this关键字 (3. The this keyword)

With the this keyword things get really messy.

使用this关键字，事情变得非常混乱。

Consider the following example:

考虑以下示例：

const myObject = {


	fruits: "🍉 🥝 🍌",


	getFruits1: function getFruits1() {
		console.dir(this.fruits);
	},


	getFruits2: () => {
		console.dir(this.fruits);
	},
}


myObject.getFruits1();
myObject.getFruits2();

The output of this is the following:

其输出如下：

'🍉 🥝 🍌'
undefined

If you use the function keyword, this will refer to the object.

如果您使用的function的关键字， this将参照对象。

However, if you use an arrow function, this will refer to an empty object.

但是，如果你用一个箭头的功能， this将涉及到一个空的对象。

This is another thing that you must know, otherwise, a lot of fun debugging sessions are ahead of you.

这是您必须知道的另一件事，否则，您将面临许多有趣的调试会话。

结论 (Conclusion)

Alright, so Javascript has some quirks. There are a lot of things happening under the hood of the Javascript syntax.

好吧，所以Javascript有一些怪癖。 在Javascript语法的幕后发生了很多事情。

And my personal opinion is that it is way to easy to write complicated code in Javascript. This makes it hard for other people to read, understand, and modify the code. Which, in my opinion, is a bad thing.

我个人认为这是一种轻松用Javascript编写复杂代码的方法。 这使其他人很难阅读，理解和修改代码。 我认为这是一件坏事。

Of course, Javascript is still a great tool that you can use to build amazing things. I’m simply stating the quirks I found confusing when going through a Javascript codebase. Take it with a grain of salt :)

当然，JavaScript仍然是一个很棒的工具，可以用来构建令人惊奇的东西。 我只是简单地说明在浏览Javascript代码库时发现的困惑之处。 撒一粒盐:)

Happy coding!

编码愉快！

翻译自: https://levelup.gitconnected.com/everything-wrong-with-javascript-c91168fcfeb1

javascript错误