返回顶部
首页 > 资讯 > 前端开发 > 其他 >react和es6是什么
  • 900
分享到

react和es6是什么

ReactjavascriptES6 2022-11-22 23:11:46 900人浏览 泡泡鱼
摘要

本教程操作环境:windows7系统、ECMAScript 6&&React18版、Dell G3电脑。react是什么react.js是 Facebook 推出的一个用来构建用户界面的 javascript 开发框架。Re

教程操作环境:windows7系统、ECMAScript 6&&React18版、Dell G3电脑。

react是什么


react.js是 Facebook 推出的一个用来构建用户界面的 javascript 开发框架

React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。

由于 React的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 WEB 开发的主流工具

1.png

React 是一个为数据提供渲染为 html 视图的开源 JavaScript 库。React 视图通常采用包含以自定义 HTML 标记规定的其他组件的组件渲染。React 为程序员提供了一种子组件不能直接影响外层组件的模型,数据改变时对 HTML 文档的有效更新,和现代单页应用中组件之间干净的分离。

React的优势是:

  • 更适合大型应用和更好的可测试

  • Web端和移动端原生APP通吃

  • 更大的生态系统,更多的支持和好用的工具

  • 比较适合中大型项目

es6是什么


es6全称ECMAScript6(ECMAScript的第6个版本),是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015)。

ECMAScript 6 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中绝大多数的特性。

在此后ECMA Script每年发布一个大版本新增加一些重要特性,我们称之为ES6+。

2.jpg

了解ES和JS之间的关系

ES = ECMAScript 是一个动态脚本语言的‘标准’,JS = JavaScript是对ES的标准,默认,主流的‘实现’,由于商标权的问题,欧洲计算机协会制定的语言标准不能叫做JS,只能叫ES;

ES6新标准的目的是:使得JS可以用来开发大型的Web应用,成为企业级开发语言。而企业级开发语言就是:适合模块化开发,拥有良好的依赖管理;

为什么要学ES6?ES6的用处是什么?

ES5不能满足目前前端越来越复杂,庞大的现状,可以说已经过时了,ES6是对ES5的增强和升级。

1.主流的浏览器都已经全面支持ES6

2.行业内较新的前端框架都已经全面使用ES6的语法

3.微信小程序,uni-app等都是基于ES6的语法

4.从就业出发,中小型公司,全栈,简历上多一个技能,试用期也能更快的上手。

变量

  • let
    一个作用域中只能声明一个let变量,若子作用域中也声明了let变量,则不影响父作用域中的let变量。
  • var
    一个作用域中可以声明多个var变量,若子作用域中也声明了var变量,也在影响父作用域中的var变量。
  • const
    常量,相当于final,不可被修改。
  • global
    不声明变量类型的变量默认为全局变量(window属性)。

面向对象

  • 原理
    JavaScript 的面向对象特性是基于原型和构造函数的,与常见的基于类的不同。JavaScript 没有 提供对象继承的语言级别特性,而是通过原型复制来实现的。
  • 三种创建对象方法
  1. {pojo}(实例变量、实例方法、get、set) 
  2. function(实例变量、实例方法、prototype、apply、call) 
  3. class(实例变量、实例方法、prototype、extends、super)

prototype

只有函数、class才有原型,意义在于动态添加实例变量和实例方法及实现继承。

继承

  • call/apply
    应用在继承关系中,子类向父类传参时应用此关键字
  • extends
    继承关系中使用,A extends B,则A是B的父类
  • super
    在子类中调用父类的方法时应用次关键字
  • ES5继承方式
    接下来我们手写一套组合继承(原型链继承(继承原型) + 构造继承(继承属性))。这种方式即可避免原型链继承中无法实现多继承,创建子类实例时,无法向父类构造函数传参的弊端,也可避免构造继承中不能继承原型属性/方法的弊端。
function Person(name,age){                                             
    this.name = name || 'father';                            //实例变量
    this.namesonF = this.nameson;
    this.age = age;
    this.talk = function(){alert("talk");};                 //实例方法
};
function Son(name){                                                     
    this.nameson = name || 'son';
    // Person.call(this,'name',18);                          //继承:构造继承,复制父类的实例属性给子类,不能继承原型属性/方法
    Person.apply(this,['name',18]);                          //继承:构造继承,复制父类的实例属性给子类,不能继承原型属性/方法
}
// Son.prototype = new Person("zhangsan",19);                   //继承:原型链继承,父类的实例作为子类的原型,拷贝属性两次,不合理
Son.prototype = Person.prototype;                            //继承:原型链继承,父类的实例作为子类的原型

Person.prototype.publicParam="param1";                       //动态添加实例变量
Person.prototype.talk=function(){alert("talk");}            //动态添加实例方法

var son = new Son();                                         //实例化对象,调用构造函数(constructor)
  • ES6继承方式
    ES6的继承创造了一种新的写法,与Java、Scala等语言非常类似,默认使用组合继承(原型链继承(继承原型) + 构造继承(继承属性))的方式。
class Point {
    constructor(x, y) {
        this.x = x;                                           //实例变量
        this.y = y;
    }
}
class Son extends Point {
    constructor(z, w) {
        super(z,w);
        this.z = z;                                           //实例变量
        this.w = w;
    }
}
var son = new Son(1,2);

arrow functions

箭头函数,是ES6中新加入的语法,于Java的lambda,scala的函数式语法非常相似

  • 代码
var single = a => console.log(a);
var single = (a) => (console.log(a));
var single = (a, b) => {console.log(a + b)};
var single = (a, b) => {return a + b};

template string

模版字符串,字符串拼接的新语法

  • 代码
var templateStr = () => {
    var str1 = "adsf\nsdfa";

    var template1 = `<ul><li>first</li> <li>second</li></ul>`;

    var x = 1;
    var y = 2;
    var template2 = `${x} + ${y} = ${x + y}`;

    var template3 = `${lettest4()}`;
    console.log(str1)
    console.log(template1)
    console.log(template2)
    console.log(template3)
}

destructuring

重构/解构,变量交互的语法

  • 代码
var destructuring = () => {
    var [a,b,...c]=[1,2,3,4,5,6,7,8,9,10];
    let [temp="replaceString"] = ["tempString"];
    let [age2, [{name: fname},{age: fname2="replaceString"}]] = [20, [{name: 'qc'},{}]];
    const [aa,bb,cc,dd,ee,ff]="hello";

    let {name="replaceName",age,id}={name:'cursor',age:19,id:'vc6dfuoc91vpdfoi87s'};
    let {type:tipType,min:minNumber}={type:'message',min:20};
    let {sin,cos,tan,log}=Math;

    var fun = function({x,y}={}){return [x,y];}
    fun({x:100,y:2});

    [a,b]=[b,a];                                        //交换

    var map = [1,2,3]
    var map=new Map();
    map.set("id","007");
    map.set("name","cursor");
    for(let [key,value] of map){}
    for(let [key] of map){}
    for(let [,value] of map){}

    var arr = [1,2,3,4]
    for(let val of arr){val}

}

arguments

实参,ES6中加入的直接读取参数的变量

  • 代码
function argumentsTest(a,b) { 
	for(let val of arguments)
		{console.log(val)
	}
}

以上就是react和es6是什么的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: react和es6是什么

本文链接: https://lsjlt.com/news/173395.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • react和es6是什么
    本教程操作环境:windows7系统、ECMAScript 6&&react18版、Dell G3电脑。react是什么react.js是 Facebook 推出的一个用来构建用户界面的 JavaScript 开发框架。Re...
    99+
    2022-11-22
    React javascript ES6
  • react和es6的概念是什么及有什么功能
    这篇文章主要讲解了“react和es6的概念是什么及有什么功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react和es6的概念是什么及有什么功能”吧!react是Facebook推出的...
    99+
    2023-07-04
  • 什么是vuejs和React
    本篇内容主要讲解“什么是vuejs和React”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“什么是vuejs和React”吧! vu...
    99+
    2024-04-02
  • es5和es6指的是什么
    本文小编为大家详细介绍“es5和es6指的是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“es5和es6指的是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。es5全称“ECMAScript 5”,是EC...
    99+
    2023-07-04
  • es6和es7的含义是什么
    今天小编给大家分享一下es6和es7的含义是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2024-04-02
  • reactnative和react的关系是什么
    React Native是基于React开发的一种移动应用开发框架。它允许开发者使用React的语法和组件模型来构建原生移动应用。R...
    99+
    2023-10-08
    react
  • vue和react的区别是什么
    本文小编为大家详细介绍“vue和react的区别是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue和react的区别是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。具体分析如下:监听数据变化的实现原...
    99+
    2023-06-05
  • 什么是react
    本篇文章为大家展示了什么是react,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。react算是目前最火的js MVC框架。一、React基础1.React 虚拟D...
    99+
    2024-04-02
  • es6中let和const的区别是什么
    这篇“es6中let和const的区别是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“...
    99+
    2024-04-02
  • ES6中let和const的特性是什么
    这篇文章主要介绍了ES6中let和const的特性是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。let的特性:1.不存在变量提升现象:...
    99+
    2024-04-02
  • es6中map和object的区别是什么
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。Map和Object的概念Object在ECMAScript中,Object是一个特殊的对象。它本身是一个顶级对象,同时还是一个构造函数,可以通过它(如:...
    99+
    2022-11-22
    ES6
  • react hook和class的区别是什么
    这篇文章主要介绍“react hook和class的区别是什么”,在日常操作中,相信很多人在react hook和class的区别是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2024-04-02
  • react-scripts是什么
    本篇内容主要讲解“react-scripts是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react-scripts是什么”吧! ...
    99+
    2024-04-02
  • React Hook是什么
    这篇文章主要为大家展示了“React Hook是什么”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“React Hook是什么”这篇文章吧。 ...
    99+
    2024-04-02
  • es6的全称是什么
    这篇文章主要讲解了“es6的全称是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“es6的全称是什么”吧! es6全名是“EC...
    99+
    2024-04-02
  • es6是什么的缩写
    本篇内容主要讲解“es6是什么的缩写”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“es6是什么的缩写”吧! es6是“ECMAScr...
    99+
    2024-04-02
  • es6新特性是什么
    小编给大家分享一下es6新特性是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!es6新特性:1、ES6 引入了class,让JavaScript的面向对象编程...
    99+
    2023-06-06
  • react中antd和dva的概念是什么
    今天小编给大家分享一下react中antd和dva的概念是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们...
    99+
    2024-04-02
  • react中props和state的区别是什么
    在React中,props和state是两个不同的概念,用于处理组件的数据。它们之间的区别如下:1. Props(属性):- Pro...
    99+
    2023-09-13
    react
  • es6和es5有什么区别
    这篇文章主要介绍了es6和es5有什么区别,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 es6和es5的区别:...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作