内容简介: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。
如果你喜欢这篇文章尝试给一些鼓掌并分享它:) :)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 深度强化学习从入门到大师:简单介绍A3C (第五部分)
- Git 和 GitHub:从入门到实践,第 1 部分: Git 和 GitHub 基础简介
- Git 和 GitHub 从入门到实践,第 2 部分: Git 和 GitHub 基础配置
- 深度强化学习从入门到大师:以 Cartpole 和 Doom 为例介绍策略梯度 (第四部分)
- Git 和 GitHub:从入门到实践,第 3 部分: Git 分支简介、Git 和 GitHub 日常操作
- 深度强化学习从入门到大师:以Doom为例一文带你读懂深度Q学习(第三部分 - 上)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Visual C++/Turbo C串口通信编程实践
熊光明 / 电子工业出版社 / 2004-10 / 55.0
一起来看看 《Visual C++/Turbo C串口通信编程实践》 这本书的介绍吧!