[译]JavaScript基础

);}}导出默认应用；如果你之前没有学过ES6，那么你可能会认为这个类Statements是React的一个特性。其实这是ES6的一个新特性，所以学好ES6可以让你更好地理解React代码。我们将从ES6类开始。ES6的类ES6引入了类语法，类似于Java或Python等OO（面向对象）语言。ES6中的基本类如下所示：classDeveloper{constructor(name){this.name=name;}你好（）{返回'你好世界！我是'+this.name+'并且我是一名网络开发者'；}}class语法后跟可用于创建新对象的标识符（或名称）。始终在对象初始化时调用构造方法。传递给该对象的任何参数都将传递给新对象。示例：varnathan=newDeveloper('Nathan');nathan.hello();//你好世界！我是Nathan，我是一名Web开发人员，类可以定义它需要的任何方法，在这种情况下，我们定义了一个返回字符串的hello方法。从一个类继承的类可以扩展另一个类的定义，并且从该类初始化的新对象将具有两个类的所有方法。classReactDeveloperextendsDeveloper{installReact(){return'安装React..Done.';}}varnathan=newReactDeveloper('Nathan');nathan。你好（）;//你好世界！我是Nathan，我是一名网络开发人员nathan.installReact();//安装React..完成。继承另一个类的类通常称为子类或子类，而扩展的类称为父类或超类。子类也可以覆盖父类中定义的方法，这意味着它将用自己定义的新方法替换父类中方法的定义。例如，让我们覆盖hello函数：classReactDeveloperextendsDeveloper{installReact(){return'installingReact..Done.';}你好（）{返回'你好世界！我是'+this.name+'并且我是一名REACT开发者'；}}varnathan=newReactDeveloper('Nathan');nathan.hello();//你好世界！我是Nathan，我是一名REACT开发者就这样，我们重写了Developer类中的hello方法。使用React现在我们了解了ES6类和继承，我们可以理解src/app.js中定义的React类。这是一个React组件，但它实际上只是一个普通的ES6类，它继承了从React包中导入的ReactComponent类的定义。importReact,{Component}from'react';classAppextendsComponent{//classcontentrender(){return(

HelloReact!

)}}这允许我们使用render()方法、JSX、this.state和其他方法。所有这些定义都在Component类中。但正如我们稍后将看到的，类并不是定义React组件的唯一方式。如果你不需要状态和其他生命周期方法，你可以使用函数。在ES6中使用let和const声明变量由于JavaScript的var关键字是声明全局变量，所以在ES6中引入了两个新的变量声明来解决这个问题，即let和const。它们都用于声明变量。不同的是，const声明后不能改变它的值，而let可以。这两个声明都是局部的，这意味着如果let在函数作用域内声明，则不能在函数外调用。constname="David";letage=28;varoccupation="SoftwareEngineer";使用哪一个？根据经验，变量默认声明为const。稍后，当您编写应用程序时，当您意识到const的值需要更改时，您应该将const重构为let。希望它能让您习惯新的关键字，并且您将开始识别应用程序中需要使用const或let的模式。我们什么时候在React中使用它？当我们需要变量时：importReact,{Component}from'react';classAppextendsComponent{//classcontentrender(){constgreeting='WelcometoReact';return(

{greeting}

)}}Greeting在应用程序的整个生命周期中是不会改变的，所以我们这里使用const箭头函数箭头函数是ES6的新特性，在现代代码库中使用几乎是普遍的，因为它使代码简洁易读。它允许我们使用更短的语法编写函数。//常规函数consttestFunction=function(){//content..}//箭头函数consttestFunction=()=>{//content..}如果您是一位经验丰富的JS开发人员，请从常规函数语法转换为箭头语法可能会让你不舒服。当我学习箭头函数时，我用这两个简单的步骤重写了我的函数：去掉function关键字并在()之后添加=>括号仍然用于传递参数，如果只有一个参数括号可以省略。consttestFunction=(firstName,lastName)=>{returnfirstName+''+lastName;}constsingleParam=firstName=>{returnfirstName;}隐藏return如果箭头函数只有一行，可以不使用return返回一个值关键字和大括号。consttestFunction=()=>'你好。';testFunction();React中constHelloWorld=(props)=>{return

{props.hello}

;}的使用相当于ES6ClassComponentclassHelloWorldextendsComponent{render(){return(

{props.你好

;);}}在React应用中使用箭头函数可以让代码更加简洁。但它也从组件中删除了状态的使用。这种类型的组件称为无状态功能组件。你会在很多React教程中看到这个名字。解析数组和对象赋值作为ES6中引入的最有用的新语法之一，解构赋值只是简单地复制对象或数组的一部分并将它们放入命名变量中。一个简单的例子：constdeveloper={firstName:'Nathan',lastName:'Sebhastian',developer:true,age:25,}//解构开发者对象const{firstName,lastName}=developer;console.log(firstName);//返回'Nathan'console.log(lastName);//返回'Sebhastian'console.log(developer);//返回对象如您所见，我们将开发人员对象中的名字和姓氏分配给新变量名字和姓氏。现在，如果您想将firstName放入一个名为name的新变量中怎么办？const{firstName:name}=developer;console.log(name);//返回'Nathan'解构也适用于数组，使用索引而不是对象键：constnumbers=[1,2,3,4,5];const[一，二]=数字；//one=1,two=2可以传入，在解构过程中跳过一些下标:const[one,two,,four]=numbers;//One=1,two=2,four=4在React中最常用来解构方法中的状态：reactFunction=()=>{const{name,email}=this.state;};或者在stateless的函数组件中，结合前面提到的例子：constHelloWorld=(props)=>{return

{props.hello}

;}我们可以马上简单的解构参数：constHelloWorld=({hello})=>{return

{hello}

;}Map和filter尽管本文主要关注ES6，但需要提及JavaScript数组Map和filter方法，因为它们可能是最常见的构建React应用程序时常用的ES5特性之一。尤其是在处理数据的时候。这两种方式在处理数据的时候用的比较多。例如，假设从API结果返回一个JSON数据数组：constusers=[{name:'Nathan',age:25},{name:'Jack',age:30},{name:'Joe',年龄:28},];然后我们可以像这样在React中渲染项目列表：25},{名字:'杰克',年龄:30},{名字:'乔',年龄:28},];return(

{users.map(user=>
• {user.name}
)}

)}}我们也可以在render

{users.filter(user=>user.age>26).map(user=>
• {user.name}
)}

ES6模块系统ES6模块系统使JavaScript能够导入和导出文件。让我们再看一下src/app.js代码来解释这一点。importReact,{Component}from'react';importlogofrom'./logo.svg';import'./App.css';classAppextendsComponent{render(){return(

编辑src/App.js并保存到重新加载。

学习React);}}导出默认应用；在第一行代码中，我们看到了import语句：importReact,{Component}from'react';在第一行代码中我们看到exportdefault语句：exportdefaultApp;要理解这些语句，让我们首先讨论模块语法。模块只是一个JavaScript文件，它使用export关键字导出一个或多个值（可以是对象、函数或变量）。首先在src目录下新建一个名为util.js的文件touchutil.js然后我们在里面写一个函数，使用defaultexportexportdefaultfunctiontimes(x){returnx*x;}或者多个exportnamedexportfunctiontimes(x){returnx*x;}exportfunctionplusTwo(number){returnnumber+2;}然后我们可以在src/App.js中导入它。import{times,plusTwo}from'./util.js';控制台日志（时间（2））；控制台日志（plusTwo（3））；每个模块可以有多个命名导出，但只有一个默认导出。可以在没有大括号和相应导出函数名称的情况下导入默认导出：//inutil.jsexportdefaultfunctiontimes(x){returnx*x;}//inapp.jsexportkfrom'./util.js';控制台日志（k（4））；//返回16但对于命名导出，您必须使用花括号和确切名称导入。或者，导入可以使用别名以避免两个不同的导入具有相同的名称：//inutil.jsexportfunctiontimes(x){returnx*x;}exportfunctionplusTwo(number){returnnumber+2;}//inapp.jsimport{乘法，plusTwo为plus2}from'./util.js';像这样直接导入名称：importReactfrom'react';将使JavaScript检查node_modules以获取适当的包名称。因此，如果您要导入本地文件，请不要忘记使用正确的路径。在React中使用它显然我们已经在src/App.js文件中看到了这一点，然后在index.js文件中看到了导出的App组件是如何呈现的。让我们暂时忽略serviceWorker部分。//index.jsfileimportReactfrom'react';importReactDOMfrom'react-dom';import'./index.css';importAppfrom'./App';import*asserviceWorkerfrom'./serviceWorker';ReactDOM.render(,document.getElementById('root'));//如果你想让你的应用程序离线工作并加载得更快，你可以在下面将//unregister()更改为register()。请注意，这会带来一些陷阱。//了解有关服务工作者的更多信息：http://bit.ly/CRA-PWAserviceWorker.unregister();请注意App是如何从./App目录导入的，并且省略了.js扩展名。我们在导入JavaScript文件时只能省略文件扩展名，但在其他文件中我们必须包含扩展名，例如.css。我们还导入了另一个节点模块react-dom，它使我们能够将React组件呈现为HTML元素。至于PWA，它是一个让React应用程序可以离线工作的特性，但由于它默认是禁用的，所以一开始没有必要学习它。最好在对构建ReactUI有足够的信心后，再学习PWA。总而言之，React的伟大之处在于它不会像其他Web框架那样在JavaScript之上添加任何外部抽象层。这就是React变得非常受JS开发人员欢迎的原因。它只是使用最好的JavaScript来使构建用户界面更容易和可维护。在React应用中，JavaScript确实比Reactspecix语法多，所以一旦你更好地理解JavaScript——尤其是ES6——你就可以自信地编写React应用。但这并不意味着您必须了解JavaScript的所有知识才能开始编写React应用程序。现在就去写一个，当机会出现时，你会成为一个更好的开发者。感谢阅读，希望您学到了新东西:)最后一本小册子《您不知道的Chrome调试技巧》现已开放预订。欢迎关注公众号“前端小霸王”，扫描二维码关注，会有很多好东西等着你~