在这28部分的课程中学习构建应用程序所需JavaScript

Are you struggling to figure out what JavaScript skills you need to build real-world apps? Check out this concise, example-filled course that provides the core JavaScript concepts you need to be productive with libraries like React, Angular, and Vue.

您是否正在努力找出构建实际应用所需JavaScript技能？ 查看这个简洁，包含示例的课程 ，该课程提供了使用React，Angular和Vue之类的库所需的核心JavaScript概念。

If you want to build serious web applications, the language to use is JavaScript.

如果要构建严肃的Web应用程序， 则使用的语言是JavaScript 。

But what JavaScript skills do you need to build apps effectively?

但是，您需要哪些JavaScript技能来有效地构建应用程序？

JavaScript的基本技能是什么？ (What Are the Essential JavaScript Skills?)

There are tons of courses on JavaScript available find online, but few specialize in what so many developers want to know:

可以在网上找到大量关于JavaScript的课程，但是很少有专门研究这么多开发人员想要了解的内容：

What JavaScript skills are essential to building your own applications?

哪些JavaScript技能对于构建自己的应用程序必不可少？

There is a gap between learning vanilla JavaScript and learning a library like React, Angular, and Vue for creating single-page JavaScript applications.

在学习原始JavaScript和学习诸如React，Angular和Vue之类的库以创建单页JavaScript应用程序之间存在差距。

I've put together a complete course with the goal of showing you how to bridge this gap.

我整理了完整的课程，目的是向您展示如何弥合这一差距。

My goal is not only to teach you the skills you need while presenting real-world examples to solidify your understanding, but also to give you a new perspective. You'll find a better way of looking at your JavaScript code that will help you start thinking like a professional app developer.

我的目标不仅是在介绍实际示例以巩固您的理解的同时教您所需的技能，而且还为您提供新的视角。 您会发现一种更好的查看JavaScript代码的方法，这将帮助您像专业的应用程序开发人员一样开始思考。

Want to get started now? Take the entire course here.

想立即开始吗？ 在这里学习整个课程 。

课程概述📝 (Course Overview 📝)

Let's take a brief tour through the course and each major section. We'll see how each section will ensure that you're taught JavaScript in the most effective, no-nonsense way possible.

让我们简要浏览本课程和每个主要部分。 我们将看到每个部分将如何确保以最有效，最轻松的方式教您JavaScript。

In this course, we'll develop our skills from basic concepts to more complex ones. Even if you're an intermediate JavaScript developer, we'll cover every concept with additional depth and observations on the language that you likely haven't heard before.

在本课程中，我们将把技能从基本概念发展到更复杂的概念。 即使您是JavaScript的中级开发人员，我们也将针对您可能从未听说过的语言，对每个概念进行更深入的探讨。

变量和字符串 (Variables and Strings)

We'll begin with the building blocks of any JS program: variables.

我们将从任何JS程序的构建块开始：变量。

First we'll cover declaring variables with let and const and how they are an improvement over the old var syntax. We'll learn concepts like block scoping, variable shadowing and the temporal dead zone, but also discover how these new keywords can make our code easier to process.

首先，我们将介绍用let和const声明变量，以及它们如何对旧的var语法进行改进。 我们将学习诸如块作用域，可变阴影和时间盲区之类的概念，而且还将发现这些新关键字如何使我们的代码更易于处理。

For example, why the

salePrice

variable below becomes more readable when we declare it with const instead of let or var.

例如，为什么当我们使用const而不是let或var声明时，下面的

salePrice

变量变得更具可读性。

Click to watch this lecture

点击观看本讲座

Because we declare the variable with as a constant, we know that it won't be assigned a different value later on. This makes our code easier to understand both for other developers and for ourselves.

因为我们将变量声明为常量，所以我们知道以后不会为其分配其他值。 这使我们的代码更容易为其他开发人员和我们自己理解。

Finally, in this section we'll touch on template literals, and how they improve strings within JavaScript in basically every way, from formatting text, to inserting dynamic values, and more.

最后，在本节中，我们将介绍模板文字，以及它们如何基本上以各种方式改善JavaScript中的字符串，从格式化文本到插入动态值等等。

类型和条件 (Types and Conditionals)

Next we'll touch on types and conditionals, which go hand in hand.

接下来，我们将探讨类型和条件，它们是紧密结合的。

We'll first take a look at a strange (and often poorly understood) part of JavaScript called type coercion, which means how types are changed from one value to another.

我们首先来看一下JavaScript中一个奇怪的(通常理解不清)部分，称为类型强制(type coercion)，这意味着类型如何从一个值更改为另一个值。

Types can change implicitly when we write conditionals and this means we must know about truthy and falsy values, values that are subtly coerced to the boolean true and falsy, respectively.

当我们编写条件语句时，类型可能会隐式更改，这意味着我们必须了解真实值和虚假值，这些值分别被巧妙地强制为布尔值true和falsy。

We'll see how we can use truthy and falsy values to our advantage by creating shorter conditionals using the && (and) and || (or) operators. This trick, known as short circuiting, is the basis of how JS libraries like React display or hide elements.

我们将看到如何通过使用&&(和)和||创建较短的条件来利用真值和虚假值来发挥优势。 (或)运算符。 这个技巧称为短路，是React库之类的JS库显示或隐藏元素的基础。

Click to watch this lecture

点击观看本讲座

Then we'll see how to shorten our if-else conditionals with the ternary operator, and how they come in handy in situations when we want to conditionally set a variable's value.

然后，我们将看到如何使用三元运算符来缩短if-else条件，以及在我们希望有条件地设置变量值的情况下它们如何派上用场。

功能 (Functions)

After that, we'll dive into functions, the powerhouse of any Javascript app.

之后，我们将深入探讨功能，这是任何Javascript应用程序的强大功能。

We'll demystify a crucial feature of functions called closures. We'll wrap our head around what a closure is by through creating our in a practical example.

我们将揭开封闭函数的一个关键特征的神秘面纱。 通过在一个实际的示例中创建我们，我们将围绕闭合是什么来解决。

This will enable us to see why closures are worth knowing and how they can improve our JavaScript code by keeping track of values between function calls:

这将使我们看到为什么闭包值得了解，以及它们如何通过跟踪函数调用之间的值来改善我们JavaScript代码：

Click to watch this lecture

点击观看本讲座

We'll cover a type of function, which you'll find in every modern Javascript app, namely, arrow functions. With arrow functions, we can greatly cut down our code as we go through all of the available tricks to making them as concise as possible.

我们将介绍一种函数类型，您可以在每个现代Javascript应用程序中找到它，即箭头函数。 使用箭头功能，当我们通过所有可用的技巧来尽可能简化代码时，可以极大地减少代码。

Lastly, we'll touch on default values in functions and how they can make our code more reliable, especially if an expected argument isn't provided.

最后，我们将介绍函数中的默认值以及它们如何使我们的代码更可靠，尤其是在未提供预期参数的情况下。

对象 (Objects)

From primitive data types, we'll move onto objects.

从原始数据类型开始，我们将转向对象。

Understanding essential app-building concepts like mutations and immutability isn't possible without knowing the difference between primitive types and object types in JavaScript. We'll cover this difference in detail and see firsthand why it matters for the reliability of our code.

如果不了解JavaScript中原始类型和对象类型之间的区别，就不可能了解诸如突变和不变性之类的基本应用程序构建概念。 我们将详细介绍这种差异，并直接了解为什么它对我们的代码可靠性很重要。

We'll touch on a variety of practical patterns to more easily get our object data through object destructuring, as you see below:

我们将介绍各种实用模式，以通过对象分解更轻松地获取对象数据，如下所示：

Click to watch this lecture

点击观看本讲座

Then after destructuring our objects, we'll see how to better assemble them. By using the object spread operator we can seamlessly merge multiple objects in an immutable fashion.

然后，在分解对象之后，我们将看到如何更好地组装它们。 通过使用对象散布运算符，我们可以以不变的方式无缝地合并多个对象。

数组 (Arrays)

Arrays are essential for any list of data that we display in our apps and we need to know how to manipulate them with ease.

数组对于我们在应用程序中显示的任何数据列表都是必不可少的，我们需要知道如何轻松地操作它们。

We'll cover how to perform actions on all elements in arrays through higher order array functions like map and filter to transform our elements or remove them from our array.

我们将介绍如何通过高阶数组函数(例如map和filter)对数组中的所有元素执行操作，以转换元素或将其从数组中删除。

Additionally, we'll use methods like find to get individual elements based on certain conditions:

此外，我们将使用诸如find之类的方法根据特定条件获取单个元素：

Click to watch this lecture

点击观看本讲座

Then we'll cover the most important array method, reduce, and see its power to transform our array data into virtually any data type we want.

然后，我们将介绍最重要的数组方法，进行缩减，并了解其将数组数据转换为几乎所需的任何数据类型的能力。

面向对象JavaScript (Object-Oriented JavaScript)

Next we'll get started with object-oriented programming and cover the core idea behind it that makes object oriented programming in JavaScript possible–the constructor function.

接下来，我们将开始面向对象的编程，并介绍其背后的核心思想，该思想使JavaScript中的面向对象编程成为可能-构造函数。

Constructor functions make it possible to give our objects shared behavior (functions) through something called the prototype chain.

构造函数可以通过称为原型链的对象为对象提供共享的行为(函数)。

Through another newer JavaScript feature called classes, we'll cover how we can easily inherit functionality through what's known as prototypical inheritance and extend our classes to share features between them.

通过另一个称为类的新JavaScript功能，我们将介绍如何通过所谓的原型继承轻松地继承功能，并扩展我们的类以在它们之间共享功能。

Click to watch this lecture

点击观看本讲座

异步JavaScript (Async JavaScript)

After that we'll move on to async JavaScript, which is a necessary skill to have and understand if want to create sophisticated JavaScript programs of any kind.

之后，我们将继续进行异步JavaScript，这是掌握并了解是否要创建任何复杂JavaScript程序的必要技能。

We'll begin with a discussion of what asynchronous code is and how it was handled in the past using callback functions and how this creates problems in our code (such as 'callback hell').

我们将首先讨论什么是异步代码，以及过去如何使用回调函数处理异步代码，以及这如何在我们的代码中造成问题(例如“回调地狱”)。

Fortunately, we'll fix some of the inherent problems with using callbacks through an ES6 feature called a Promise. We'll gain experience using promises in a practical way by getting familiar with the browser's Fetch API, which allows us to make HTTP requests and bring outside data into our apps.

幸运的是，我们将通过称为Promise的ES6功能使用回调来解决一些固有的问题。 通过熟悉浏览器的Fetch API，我们将以实际的方式获得使用诺言的经验，该API允许我们发出HTTP请求并将外部数据带入我们的应用程序。

Then, best of all, we'll touch on how to make our promises work and look just like synchronous code so we can easily reason about it with the help of the new async-await syntax for functions.

然后，最重要的是，我们将探讨如何使我们的Promise发挥作用并看起来像同步代码，以便我们可以借助新的async-await函数语法轻松地对此进行推理。

Click to watch this lecture

点击观看本讲座

基本主题 (Essential Topics)

We'll wrap up the course with some key skills necessary for starting to build complete JavaScript projects. First of all, we'll do a deep dive into ES Modules, an ES6 feature which allows us to share our JavaScript code across files.

我们将以开始构建完整JavaScript项目所需的一些关键技能来结束本课程。 首先，我们将深入研究ES模块，这是一种ES6功能，可让我们在文件之间共享JavaScript代码。

We'll tackle thorny issues such as the

this

keyword by covering a list of concrete rules to follow in order to figure out it's value in any context, such as in a DOM event handler:

我们将解决一系列棘手的问题，例如

this

关键字，方法是覆盖一系列要遵循的具体规则，以便确定它在任何上下文中(例如在DOM事件处理程序中)的价值，请执行以下操作：

Click to watch this lecture

点击观看本讲座

And finally, we'll wrap up the course with a general discussion of imperative versus declarative code, which you should strive for in your coding career, and why.

最后，我们将对命令式代码与声明式代码进行一般性的讨论，以结束本课程，您在编码生涯中应该为此而努力，以及为什么。

立即观看课程📺 (Watch the course now 📺)

Take this course and, within an afternoon or two, you'll learn concepts that will meaningfully grow your JavaScript skillset and enable you to tackle high-powered front-end libraries like React, Angular, Svelte, Vue, and more with confidence.

参加本课程，在一两个下午内，您将学到有意义的概念，这些概念将有意义地发展您JavaScript技能，并使您能够自信地应对诸如React，Angular，Svelte，Vue等功能强大的前端库。

Enjoy! 🎉

请享用！ 🎉

Click to watch the course

点击观看课程

翻译自: https://www.freecodecamp.org/news/learn-javascript-to-build-apps/