本教程操作环境:windows7系统、ECMAScript 6&&React18版、Dell G3电脑。react是什么react.js是 Facebook 推出的一个用来构建用户界面的 javascript 开发框架。Re
本教程操作环境:windows7系统、ECMAScript 6&&React18版、Dell G3电脑。
react.js是 Facebook 推出的一个用来构建用户界面的 javascript 开发框架。
React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。
由于 React的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 WEB 开发的主流工具。
React 是一个为数据提供渲染为 html 视图的开源 JavaScript 库。React 视图通常采用包含以自定义 HTML 标记规定的其他组件的组件渲染。React 为程序员提供了一种子组件不能直接影响外层组件的模型,数据改变时对 HTML 文档的有效更新,和现代单页应用中组件之间干净的分离。
React的优势是:
es6全称ECMAScript6(ECMAScript的第6个版本),是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015)。
ECMAScript 6 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中绝大多数的特性。
在此后ECMA Script每年发布一个大版本新增加一些重要特性,我们称之为ES6+。
了解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.从就业出发,中小型公司,全栈,简历上多一个技能,试用期也能更快的上手。
变量
1. {pojo}(实例变量、实例方法、get、set)
2. function(实例变量、实例方法、prototype、apply、call)
3. class(实例变量、实例方法、prototype、extends、super)
prototype
只有函数、class才有原型,意义在于动态添加实例变量和实例方法及实现继承。
继承
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)
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
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0