一.ES6中增加了那些新的功能?
1> for-of循环:
使用 for-of 的时候,循环的是数组内部的元素且不会出现 for-in 中将附加属性也遍历的情况,其次,循环变量的类型和其在数组中的类型保持一致,而不是全部是 string 的情况。
var arrObj = ['alexchen',1,{}]; arrObj._name = 'attr-alexchen'; for (var i of arrObj) { console.log(i);//这里只会输出,alexchen,1,object{},不会输出attr-alexchen console.log(typeof(i))//这里会输出 string,number,object if (i == 1) { break; } console.log(i)//只会输出 alexchen,满足条件之后就不在继续循环,提高了效率并且可以自由控制跳出循环或继续循环 }
2>模版字符串:
(function sayHello(name, words) { console.log(`hello: ${name},welcome es6,your words is: ${words}`); // })('alexchen','im admin')//运行之后将会输出:hello: alexchen,welcome es6,your words is: im admin
模版字符串不会转义特殊字符,因此需要自己处理其中的安全隐患。模版字符串并不能够代替模版框架,原因是模版字符串没有内置的循环语法和条件语句。因此,对于常规的普通的字符串拼接,我们可以使用它来完成,会让你的代码看起来更酷一点.
3>默认参数:
可以给参数设置默认值,而不用在函数内部去判断后赋默认值,不但可以赋值默认值,还可以使用运算表达式.
(function testDefaultsParams(pars1 = "alexchen", pars2 = (pars1 == "alexchen") ? "admin" : "not admin") { console.log(`welcome ${pars1} ,u r ${pars2}!!`)//用到了上面说的模版字符串 })(); /**参数为空时输出,welcome alexchen ,u r admin!!, 如果第一个参数不是alexchen则输出,welcome alexchen ,u r not admin!!**/
4>箭头操作符:
简化了函数的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs。
我们知道在JS中回调是经常的事,而一般回调又以匿名函数的形式出现,每次都需要写一个function,甚是繁琐。当引入箭头操作符后可以方便地写回调了。
var array = [1, 2, 3]; //传统写法 array.forEach(function(v, i, a) { console.log(v); }); //ES6 array.forEach(v = > console.log(v));
5>类的支持:
ES6中添加了对类的支持,引入了class关键字(其实class在javascript中一直是保留字,目的就是考虑到可能在以后的新版本中会用到,现在终于派上用场了)。JS本身就是面向对象的,ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方法和构造函数等概念都更加形象化。
//类的定义 class Animal { //ES6中新型构造器 constructor(name) { this.name = name; } //实例方法 sayName() { console.log('My name is '+this.name); } } //类的继承 class Programmer extends Animal { constructor(name) { //直接调用父类构造器进行初始化 super(name); } program() { console.log("I'm coding..."); } } //测试我们的类 var animal=new Animal('dummy'), wayou=new Programmer('wayou'); animal.sayName();//输出 ‘My name is dummy’ wayou.sayName();//输出 ‘My name is wayou’ wayou.program();//输出 ‘I'm coding...’
6>解构:
自动解析数组或对象中的值。比如若一个函数要返回多个值,常规的做法是返回一个对象,将每个值做为这个对象的属性返回。但在ES6中,利用解构这一特性,可以直接返回一个数组,然后数组中的值会自动被解析到对应接收该值的变量中。
var [x,y]=getVal(),//函数返回值的解构 [name,,age]=['wayou','male','secrect'];//数组解构 function getVal() { return [ 1, 2 ]; } console.log('x:'+x+', y:'+y);//输出:x:1, y:2 console.log('name:'+name+', age:'+age);//输出: name:wayou, age:secrect
7>不定参数:
不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖,在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如下面这个例子中,…x代表了所有传入add函数的参数。
//将所有参数相加的函数 function add(...x){ return x.reduce((m,n)=>m+n); } //传递任意个数的参数 console.log(add(1,2,3));//输出:6 console.log(add(1,2,3,4,5));//输出:15
8>let与const 关键字:
可以把let看成var,只是它定义的变量被限定在了特定范围内才能使用,而离开这个范围则无效。const则很直观,用来定义常量,即无法被更改值的变量。
9>Promises:
Promises是处理异步操作的一种模式,之前在很多三方库中有实现,比如jQuery的deferred 对象。当你发起一个异步请求,并绑定了.when(), .done()等事件处理程序时,其实就是在应用promise模式。
//创建promise var promise = new Promise(function(resolve, reject) { // 进行一些异步或耗时操作 if ( /*如果成功 */ ) { resolve("Stuff worked!"); } else { reject(Error("It broke")); } }); //绑定处理程序 promise.then(function(result) { //promise成功的话会执行这里 console.log(result); // "Stuff worked!" }, function(err) { //promise失败会执行这里 console.log(err); // Error: "It broke" });
还有很多很多,这里只记录和总结常见常用的......
二.fetch和ajax的区别:
Ajax的本质是使用XMLHttpRequest对象来请求数据;
fetch 是全局量 window 的一个方法,用于发送请求的API,
它的主要特点有:
1、第一个参数是URL:
2、第二个是可选参数,可以控制不同配置的 init 对象
3、使用了 JavaScript Promises 来处理结果/回调
三.Redux的核心概念:
http://www.jianshu.com/p/3334467e4b32
四.props和state的区别:
props: 一般用于父组件向子组件通信,在组件之间通信使用。
state: 一般用于组件内部的状态维护,更新组建内部的数据,状态,更新子组件的props等。
未完待续......