[译]ES入门(第三部分)

栏目: Ruby · 发布时间: 6年前

内容简介:Map运算符用于对数组的所有元素执行特定操作,并返回包含已修改元素的数组。它很容易实现。我们来看一个例子吧。如您所见,map使用带三个参数的函数。

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。

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Data Structures and Algorithms in Java

Data Structures and Algorithms in Java

Robert Lafore / Sams / 2002-11-06 / USD 64.99

Data Structures and Algorithms in Java, Second Edition is designed to be easy to read and understand although the topic itself is complicated. Algorithms are the procedures that software programs use......一起来看看 《Data Structures and Algorithms in Java》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具