ES6适用于初学者part-3

本文的第1部分出现在这里

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

我将在本文中讨论的主题

阵列图
阵列过滤器
数组减少
模板文字
进出口商品
解构对象和数组
扩展和超级

阵列图

映射运算符用于对数组的所有元素执行特定操作，并返回带有修改后元素的数组。

这很容易实现。让我们来看一个例子。

let arr = [1,2,3,4,5];

let modifiedArr = arr.map(function(element, index, arr) {
  return element * 10;
});
console.log(modifiedArr);

Output:
[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);

Output:
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);

很酷的权利:)

如果您知道箭头功能很好，应该很容易理解。但是，如果您不明白，我会尽力解释。

这里有两件事需要解释。

如果您具有单个参数的函数，则不需要（）。在我们的例子中，元素是参数。
而且，如果您将单行作为函数的主体，则不需要{}，并且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);

Output:
[2, 4, 6]

如上例所示，像map这样的过滤器采用三个参数。

而且，我们必须为数组的每个元素返回一个布尔值。如果最后不返回任何布尔值，则过滤器会将其视为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);

Output:
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);

Output:
10 + 1 = 11
11 + 2 = 13
13 + 3 = 16
16 + 4 = 20
20 + 5 = 25
25 + 6 = 31
Total sum is 31

希望你得到了榜样。请注意，我最初已将聚合器元素sum的初始值设置为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);

Output:
My name is Jon Snow

简单的权利。

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

let msg = `My name
is ${name}`;

console.log(msg);

Output:
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()}`

Output:
My name is Srebalaji
My age is 23
And I code in Ruby, Js, Java, Python

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

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

进出口商品

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

我强烈建议在此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>

Output:
Jon
23

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

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

简单的权利。

让我们更深入

 app.js 
export default const name = "Jon"

 index.js 
import name from './app.js'
console.log(name);

Output:
Jon

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

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

例

import n from './app.js'
console.log(n);

Output:
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());

Output:
10
2
12

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

导入时要记住两件事。

如果使用*导入值，则必须使用别名（即）名称来引用导入的值。在我们的示例中，我们使用变量作为别名。
使用*导入值不会导入默认值。您必须单独导入。

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);

Output:
Jon
Snow
23

在上面的代码，你可以看到我们有对象者有多个按键。

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

简而言之，我们从对象中提取键创建了三个变量。

让我们看看其他例子

let person = {firstName: "Jon", lastName: "Snow", age: 23}

const {firstName} = person
console.log(firstName);

Output:
Jon

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

let person = {firstName: "Jon", lastName: "Snow", age: 23}

const {firstName: name, age} = person
console.log(name);
console.log(age);

Output:
Jon
23

在上面的示例中，您可以看到我们已经定义了一个新的变量名，并为其分配了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);

Output:
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);

Output:
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

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

扩展和超级

如果您有使用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());

Output:
100
Jon Snow
23

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

然后，我们定义了另一个类Employee ，它是从Person继承的子类。我们使用扩展来实现这一目标。希望您对此之前保持清醒。

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

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

因此，我们在以上代码中实现了三件事

我们使用扩展来从父类创建子类。
我们使用super来调用父类的构造函数。
我们使用super来调用父类中定义的方法。

希望你明白了:)

这是可玩的jsfiddle 。

如果您喜欢这篇文章，请尝试鼓掌并分享它:) :)

https://hackernoon.com/es6-for-beginners-part-2-ee8a77f7f4c7

From: https://hackernoon.com/es6-for-beginners-77bf34bec2d1