javascript编写_JavaScript ES6-编写更少，做更多

javascript编写

JavaScript ES6 brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write less code and do more. ES6 introduces us to many great features like arrow functions, template strings, class destruction, Modules… and more. Let’s take a look.

JavaScript ES6带来了新的语法和令人敬畏的新功能，使您的代码更现代，更易读。 它使您可以编写更少的代码并完成更多工作。 ES6向我们介绍了许多很棒的功能，例如箭头功能，模板字符串，类破坏，模块等。 让我们来看看。

const让 (const and let)

const is a new keyword in ES6 for declaring variables. const is more powerful than var. Once used, the variable can’t be reassigned. In other words, it’s an immutable variable except when it used with objects.

const是ES6中用于声明变量的新关键字。 const比var更强大。 一旦使用，该变量将无法重新分配。 换句话说，它是一个不可变的变量，除非与对象一起使用。

This is really useful for targeting the selectors. For example, when we have a single button that fires an event, or when you want to select an HTML element in JavaScript, use const instead of var. This is because var is ‘hoisted’. It’s always preferable to use const when don’t want to reassign the variable .

这对于定位选择器非常有用。 例如，当我们有一个触发事件的按钮时，或者当您想在JavaScript中选择HTML元素时，请使用const而不是var 。 这是因为var已“吊起”。 当不想重新分配变量时，最好使用const 。

In the code above, const will not change and cannot be reassigned. If you try to give it a new value, it will return you an error.

在上面的代码中， const不会更改，也无法重新分配。 如果您尝试给它一个新值，它将返回一个错误。

let can be reassigned and take new value. It creates a mutable variable.

let可以重新分配并获得新的价值。 它创建一个可变变量 。

let is the same as const in that both are blocked-scope. It means that the variable is only available within its scope.

let与const相同，因为两者都是块状范围。 这意味着该变量仅在其范围内可用。

箭头功能 (Arrow functions)

The arrow function is really awesome, and makes your code more readable, more structured, and look like modern code. Instead of using this:

箭头功能真的很棒，它使您的代码更易读，更结构化，并且看起来像现代代码。 而不是使用此：

Use this:

用这个：

As you see, the arrow function seems more readable and clean! You won’t need to use the old syntax anymore.

如您所见，箭头功能似乎更易读易懂！ 您不再需要使用旧语法。

Also, you can use Arrow function with map, filter, and reduce built-in functions.

另外，您可以将Arrow函数与map ， filter和reduce 内置功能。

The map function with arrows looks more clear and readable than map in ES5. With ES6 you can write shorter and smarter code. You can use the same with filter and reduce.

带箭头的地图功能比ES5中的map看起来更清晰易读。 使用ES6，您可以编写更短，更智能的代码。 您可以将其与filter和reduce 。

模板文字 (Template Literals)

Template literals or template strings are pretty cool. We don’t have to use the plus (+) operator to concatenate strings, or when we want to use a variable inside a string.

模板文字或模板字符串非常酷。 我们不必使用加号(+)运算符来连接字符串，也不必在字符串中使用变量时使用。

The old syntax:

旧语法：

With new ES6 syntax:

使用新的ES6语法：

So simple! It’s a really huge difference between the old syntax and ES6. When playing with strings, the literal string in ES6 looks more organized and well structured than ES5.

很简单！ 旧语法和ES6之间确实有很大的不同。 在使用字符串时，与ES5相比，ES6中的文字字符串看起来更具组织性和结构性。

默认参数 (Default parameters)

When I work in PHP, I usually use default parameters. These allow you to define a parameter in advance.

在PHP中工作时，通常使用默认参数。 这些允许您预先定义参数。

So, when you forget to write the parameter, it won’t return an undefined error because the parameter is already defined in the default. So when you run your function with a missed parameter, it will take the value of the default parameter t, and it will not return an error!

因此，当您忘记编写参数时，它不会返回未定义的错误，因为该参数已在默认值中定义。 因此，当您使用缺少的参数运行函数时，它将采用默认参数t的值，并且不会返回错误！

Look at this example:

看这个例子：

The function above returns undefined, because we forgot to give it the second parameter age.

上面的函数返回undefined，因为我们忘记给它第二个参数age 。

But if we used the default parameter, it won’t return undefined, and it will use its value when we forget to assign a parameter!

但是，如果使用默认参数，它将不会返回未定义的值，并且当我们忘记分配参数时，它将使用其值！

As you see, the function returns a value even though we missed the second parameter. Now with the default parameter we can handle the error in advance.

如您所见，即使我们错过了第二个参数，该函数也会返回一个值。 现在，使用默认参数，我们可以提前处理错误。

数组和对象销毁 (Array and object destructing)

Destruction makes the assignment of the values of an array or object to the new variable easier.

破坏使得将数组或对象的值分配给新变量更加容易。

The old syntax:

旧语法：

With ES6 syntax:

使用ES6语法：

With ES5, we have to assign each value to each variable. With ES6, we just put our values within curly brackets to get any property of the object.

使用ES5，我们必须将每个值分配给每个变量。 使用ES6，我们只需将值放在大括号中即可获取对象的任何属性。

Note: if you assign a variable that is not identical to the name of property, it will return undefined. For example, if the name of the property is name and we assign it to a username variable, it will return undefined.

注意： 如果分配的变量与属性名称不同，则它将返回未定义。 例如，如果属性的name是name ，我们将其分配给username 变量， 它将返回未定义。

We always have to name the variable the same as the name of the property. But in case we want to rename the variable, we can use the colon : instead.

我们总是必须将变量的名称与属性的名称相同。 但是，如果要重命名变量，可以使用冒号:代替。

For the array, we use the same syntax as the object. We have just to replace the curly brackets with square brackets.

对于数组，我们使用与对象相同的语法。 我们只需将花括号替换为方括号即可。

进出口 (Import and export)

Using import and export in your JavaScript application makes it more powerful. They allow you to create separate and reusable components.

在JavaScript应用程序中使用import和export功能使其更强大。 它们使您可以创建单独的可重用组件。

If you are familiar with any JavaScript MVC framework, you will see that they use import and export to handle the components most of the time. So how do they really work?

如果你熟悉任何JavaScript MVC框架，你会发现他们使用import和export来处理大部分时间的成分。 那么它们如何真正起作用？

It is simple! export allows you to export a module to be used in another JavaScript component. We use import to import that module to use it in our component.

很简单！ export允许您导出要在另一个JavaScript组件中使用的模块。 我们使用import导入该模块以在我们的组件中使用它。

For example, we have two files. The first is named detailComponent.js and the second is named homeComponent.js.

例如，我们有两个文件。 第一个名为detailComponent.js 第二个名为 homeComponent.js 。

In detailComponent.js we are going to export the detail function.

在detailComponent.js 我们将导出detail功能。

And if we want to use this function in homeComponent.js, we will just use import.

如果我们要在homeComponent.js使用此功能， 我们将只使用import 。

If we want to import more than one module, we just put them within curly brackets.

如果要导入多个模块，只需将它们放在大括号中即可。

So cool, isn’t it?!

太酷了，不是吗？

承诺 (Promises)

Promises are a new feature of ES6. It’s a method to write asynchronous code. It can be used when, for example, we want to fetch data from an API, or when we have a function that takes time to be executed. Promises make it easier to solve the problem, so let’s create our first Promise!

承诺是ES6的新功能。 这是一种编写异步代码的方法。 例如，当我们想从API提取数据时，或者当我们有一个需要花费时间才能执行的函数时，可以使用它。 Promise使解决问题变得更加容易，因此让我们创建第一个Promise！

If you log your console, it will return a Promise. So, if we want to execute a function after data is fetched, we will use a Promise. The Promise takes two parameters: resolve and reject to handle an expected error.

如果您登录控制台，它将返回一个Promise。 因此，如果要在获取数据后执行函数，则将使用Promise。 Promise有两个参数： resolve和reject以处理预期的错误。

Note: the fetch function returns a Promise itself!

注意：fetch函数本身会返回Promise！

const url='https://jsonplaceholder.typicode.com/posts';

const getData=(url)=>{return fetch(url);}

getData(url).then(data=> data.json()).then(result=> console.log(result));

Now if you log your console it will return an array of data.

现在，如果您登录控制台，它将返回一个数据数组。

Rest参数和Spread运算符 (Rest parameter and Spread operator)

The rest parameters are used to get the argument of an array, and return a new array.

rest参数 s用于获取数组的参数，并返回一个新数组。

The spread operator has the same syntax as the rest parameter, but the spread operator takes the Array itself and not just the arguments. We can use the Spread parameter to get the values of an Array, instead of using a for loop or any other method.

传播运算符的语法与rest参数相同，但是传播运算符采用Array本身，而不仅仅是参数。 我们可以使用Spread参数来获取Array的值，而不是使用for循环或任何其他方法。

const arr=['said',20,'JavaScript enthusiast','Hi','Said','How are you?'];

const Func=(...anArray)=>{
  return anArray;
}

console.log(Func(arr));

//output  ["said", 20, "JavaScript enthusiast", "Hi", "Said", "How are you?"

班级 (Classes)

Classes are the core of object oriented programming (OOP). They make your code more secure and encapsulated. Using classes gives your code a nice structure and keeps it oriented.

类是面向对象编程(OOP)的核心。 它们使您的代码更加安全和封装。 使用类为您的代码提供了一个不错的结构，并使它保持定向。

To create a class, use the class keyword followed by the name of the class with two curly brackets.

要创建一个类，请使用class关键字，后跟带有两个大括号的类的名称。

Now we can access the class methods and properties using the new keyword.

现在，我们可以使用new关键字访问class方法和属性。

class myClass{
    constructor(name,age){
    this.name=name;
    this.age=age;
}
}
const Home= new myClass("said",20);
console.log(Home.name)//  said

To inherit from another class, use the extends keyword followed by the name of the class you want to inherit from.

要从另一个类继承，请使用extends关键字，后跟要继承的类的名称。

You can learn more about Classes here.

您可以了解有关课程的更多信息 在这里 。

ES6 has other amazing features — you can explore them here.

ES6还具有其他惊人的功能-您可以在此处进行探索。

结论 (Conclusion)

I hope you guys found this article useful, and I hope I was able to introduce you some of the ES6 features. If so, subscribe to this mail-list to learn more about Front-end topics. Thanks for your time.

我希望你们对本文有所帮助，并希望能够向您介绍一些ES6功能。 如果是这样，请订阅此邮件列表以了解有关前端主题的更多信息。 谢谢你的时间。

By the way, I’ve recently worked with a strong group of software engineers for one of my mobile applications. The organization was great, and the product was delivered very quickly, much faster than other firms and freelancers I’ve worked with, and I think I can honestly recommend them for other projects out there. Shoot me an email if you want to get in touch — said@devsdata.com.

顺便说一句，我最近与一群强大的软件工程师一起为我的一个移动应用程序工作。 该组织很棒，产品交付速度非常快，比我所合作的其他公司和自由职业者要快得多，我想我可以诚实地推荐他们用于其他项目。 如果您想与我联系，请给我发送电子邮件-said@devsdata.com 。

翻译自: https://www.freecodecamp.org/news/write-less-do-more-with-javascript-es6-5fd4a8e50ee2/

javascript编写