[译]ES入门（第三部分）

原文戳这里

[译]ES6入门（第一部分）

[译]ES6入门（第二部分）

这篇文章的第1部分出现在这里

文章的第2部分出现在这里

我将在本文中介绍的主题

1、数组映射

2、数组过滤器

3、数组降维

4、模板文字

5、导入和导出

6、解构对象和数组

7、extend和super

数组映射

Map运算符用于对数组的所有元素执行特定操作，并返回包含已修改元素的数组。

它很容易实现。我们来看一个例子吧。

let arr = [1,2,3,4,5];
let modifiedArr = arr.map（function（element，index，arr）{ 
  return element * 10; 
}）; 
console.log（modifiedArr）;
输出：
[10,20,30,40,50]

如您所见，map使用带三个参数的函数。

第一个参数是元素本身。

第二个参数是元素的索引。

第三个参数是整个数组。

并且还要注意我们最终必须返回一些值。这将是该元素的修改值。如果您没有返回任何内容，那么特定元素将是未定义的。

另外，我想说的是第二个和第三个参数只是可选的。只有第一个参数是必需的。

let modifiedArr = arr.map（function（element）{ 
  return element * 10; 
}）;

如您所见，map使用单个参数的函数。

好吧..让我们尝试用箭头函数编写map运算符。

let modifiedArr = arr.map（（element，index）=> { 
  console.log（“index”+ index）; 
  return element * 10; 
}）; 
console.log（modifiedArr）;
输出：
index 0 
index 1 
index 2 
index 3 
index 4 
[10,20,30,40,50]

我想我不必多解释。这很简单。

最后一个例子。

let modifiedArr = arr.map（element => element * 10）; 
console.log（modifiedArr）;

酷吧:)

如果你很了解箭头函数，它应该很容易理解。但如果你没有明白它，我会尝试解释。

这里有两件事要解释。

1、如果一个函数带有单个参数，则不需要（）。在我们的例子中，element是参数。

2、如果单行代码作为函数体，则不需要{}，并且JS将在执行函数后隐式返回值。您不必使用return关键字。

数组过滤器

数组过滤器用于根据某些条件过滤整个数组。数组过滤器获取数组的每个元素并检查给定条件。如果元素通过条件，它将元素保留在数组中，否则它将删除元素。

让我们看一些例子。

let arr = [1,2,3,4,5,6] 
let modifiedArr = arr.filter（function（element，index，array）{ 
  return element％2 == 0 
}）; 
console.log（modifiedArr）;
输出：
[2,4,6]

正如您在上面的示例中所看到的，像map一样，这里filter也使用三个参数。

我们必须为数组的每个元素返回一个布尔值。如果您不在末尾返回任何布尔值，则filter将其视为false并删除该元素。

好吧..让我们试试箭头功能吧。

let modifiedAarr = arr.filter（（element，index）=> element％2 == 0）

希望你明白了。并且不要忘记注意，只有第一个参数是强制性的。其他两个参数是可选的。

数组降维

数组降维用于聚合数组的所有元素并返回单个值。

让我们看一些例子

let arr = [1,2,3,4,5,6] 
let total = arr.reduce（function（sum，element，index，array）{ 
  return sum + element; 
}，0）; 
console.log（“total is”+ total）;
输出：
total is 21

与filter和map不同，reduce使用具有四个参数的函数以及一个附加元素。在我们的例子中，它是0。

让我们看看它是如何工作的。

带四个参数的函数第一个参数是聚合器元素。它是所有元素总和，并且可以给定一个初始值。它的初始值被定义为附加元素。在我们的例子中，它是0。

然后第二个，第三个和第四个参数与filter和map相同。

像filter和map一样，您必须返回最终结果。

让我们看另一个例子。

let arr = [1,2,3,4,5,6]; 
let totalSum = arr.reduce（function（sum，element，index，array）{ 
  console.log（sum +“+”+ element +“=”+ sum + element）; 
  return sum + element; 
}，10）; 
console.log（“Total sum is ”+ totalSum）;
输出：
10 + 1 = 11 
11 + 2 = 13 
13 + 3 = 16 
16 + 4 = 20 
20 + 5 = 25 
25 + 6 = 31 
Total sum is 31

希望你弄懂了这个例子。请注意，我们将聚合器元素总和的初始值设置为10。

让我们用箭头函数编写相同的代码。

let totalSum = arr.reduce（（sum，element）=> element + sum，0）

希望你明白了。这是直截了当的。

与filter和map不同，前两个参数是必需的。其他两个是可选的。

这是jsfiddle, 去玩一玩。:)

模板文字

如果您知道其他脚本语言，如ruby，python，那么模板文字对您来说并不新鲜。

它们是新的语法，可以轻松添加表达式。

模板文字用于执行任何JS表达式。

让我们看一些例子

let name = "Jon Snow";
let msg = `My name is ${name}`;
console.log(msg);
输出:
My name is Jon Snow

简单吧。

您还可以使用多行字符串。

let msg = `My name
is ${name}`;
console.log(msg);
输出:
My name
is Jon Snow

让我们看看其他例子

let name = "Srebalaji";
let languages = () => {return "Ruby, Js, Java, Python"}
let msg = `My name is ${name}
My age is ${20+3}
And I code in ${languages()}`
输出:
My name is Srebalaji
My age is 23
And I code in Ruby, Js, Java, Python

希望你明白了。它直截了当。

您可以轻松添加任何表达式以及多行字符串。

导入和导出

在ES6中导入和导出模块是您将在现代前端库中看到的有用功能之一。

我强烈建议您在此Plunk中使用此功能。环境已经设置在那个plunk中。

好吧..那么导入和导出如何在ES6中发挥作用。

模块中使用导出来显式导出某些变量或函数或类。（即）如果导出变量，则可以在其他模块中使用。

导入用于从其他模块导入变量，函数和类。

如果你没弄明白我讲的。让我们看一些例子。

app.js
export let name = "Jon"
export let age = 23
index.js
import {name, age} from './app'
console.log(name);
console.log(age);
index.html
<script src="./index.js"></script>
输出:
Jon
23

在上面的例子中，我们定义了两个变量name和age并导出。

在另一个文件中，我们导入了变量并访问了它们的值。

简单吧。

让我们深入一点

app.js
export default const name = "Jon"
index.js
import name from './app.js'
console.log(name);
输出:
Jon

在上面的代码中，您可以看到我们使用了新的关键字default。如果需要从模块中导出单个值或函数或对象，则主要使用默认值。并且模块中只能有一个默认值。

关于默认值的另一件事。由于模块中只有一个默认值，因此您可以在导入期间使用任何名称来引用它。

例

import n from './app.js'
console.log(n);
输出:
Jon

如您所见，我们在此处将默认值引用为n。

让我们深入一点。

app.js
let a = 10;
let b = 2;
let sum = () => a+b;
export {a,b}
export default sum
index.js
import * as variables from './app'
import addition from './app' // default value
console.log(variables.a);
console.log(variables.b);
console.log(addition());
输出:
10
2
12

在上面的例子中，您可以看到我们已经导出了两个变量和一个函数。我们使用*导入了所有变量。

导入时要记住两件事。

1、如果使用*来导入值，则必须使用别名（也就是）引用导入的所有的值。在我们的示例中，我们使用variables作为别名。

2、使用*导入值不会导入默认值。你必须单独导入它。

import addition, * as variables from './app'

如果需要在一行中导入默认值和其他值，则可以使用上述语法。

希望你明白了。:)

解构对象和数组

解构是ES6中的一个有用功能。它使用起来非常简单。

让我们举个例子吧。

let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName, lastName, age} = person
console.log(firstName);
console.log(lastName);
console.log(age);
输出:
Jon
Snow
23

在上面的代码，你可以看到对象person有多个键值对。

我们从对象本身创建了三个变量firstName，lastName，age（与对象键相同。）。

换句话说，我们从对象中提取键创建了三个变量。

让我们看看其他一些例子

let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName} = person
console.log(firstName);
输出:
Jon

在上面的示例中，您可以看到我们只从对象中提取了所需的值。

let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName: name, age} = person
console.log(name);
console.log(age);
输出:
Jon
23

在上面的示例中，您可以看到我们已经定义了一个新的变量name，并使用firstName进行了分配。

希望你明白了。这很简单。

让我们看看如何解构数组。

let arr [1, 2, 3, 4]
const [a, b, c, d] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
输出:
1
2
3
4

希望你能明白上面的代码。这很简单。

我们将数组的每个元素分配给变量。

让我们看另一个例子。

let arr = [1,2,3,4,5,6]
let [a,b,,d,e] = arr
console.log(a);
console.log(b);
console.log(d);
console.log(e);
输出:
1
2
4
5

在上面的代码中，您可以看到我们已经跳过了数组的第三个元素。除此之外，一切都与前面的例子相同。

让我们看另一个例子。

let person = {firstName: "Jon", lastName: "Snow", age: 23}
let displayName = ({firstName, lastName:last}) => {
  console.log(`${firstName} - ${last}`);
}
displayName(person);
Output:
Jon - Snow

希望你明白了。它直截了当。

Extend和Super

如果您有使用OOPS编码的经验，那么Extend和Super对您来说并不新鲜。

Extend用于从父类创建子类。子类继承了父类的所有属性，还可以修改父类的属性。

class Person{
 constructor(firstName, lastName, age) {
   this.firstName = firstName;
   this.lastName = lastName;
   this.age = age;
 }
 displayName() {
  return `${this.firstName} - ${this.lastName}`;
 }
}
class Employee extends Person {
 constructor(firstName, lastName, age, salary) {
  super(firstName, lastName, age);
  this.salary = salary;
 }
 displaySalary() {
  return `${this.salary}`;
 }
 displayName() {
  return super.displayName();
 }
 displayAge() {
  return this.age;
 }
}
let manager = new Employee("Jon", "Snow", 23, 100);
console.log(manager.displaySalary());
console.log(manager.displayName());
console.log(manager.displayAge());
输出:
100
Jon Snow
23

在上面的代码中，您可以看到我们已经使用构造函数和简单方法定义了一个Person类。

然后我们定义了另一个类Employee，它是一个继承自Person的子类。我们使用extend来实现这一目标。希望你明白这一点。

然后我们使用super关键字来调用父类的构造函数。我们还使用super调用父类中声明的方法。

注意：只有在调用super之后才能在子类中使用this。如果在子类中调用super之前使用this，则会得到RefrenceError。

所以，我们在上面的代码中已经完成了三件事

1、我们使用extends从父类创建一个子类。
2、我们用super来调用父类的构造函数。
3、我们使用super来调用父类中定义的方法。
希望你明白了:)

这是用来玩的jsfiddle。

如果你喜欢这篇文章尝试给一些鼓掌并分享它:) :)