es6阮一峰,深入理解es6和es6标准入门哪本好
es6阮一峰,深入理解es6和es6标准入门哪本好详细介绍
本文目录一览： 详解es6新增数组方法简便了哪些操作
什么是es6?在这里不过多阐述，我也是跟着阮一峰大佬的《es6入门 》来学习的，es6新增了很多的方法、属性，让我们在编码中得到了很高的提升，在这里只对array这块进行阐述，其他的就过不多介绍了。言归正传，在项目中，经常会遇到处理数据，筛选数据的要求，我们更多的会借助于for循环来完成，比如：数组去重，传统方法如下（以下所有实例只列举一种）let a = [1,2,2,3,3,4,5];let b = [a[0]];for(let i = 0; i < a.length; i++){ let flag = false; for(let j = 0; j < b.length; j++){ if( a[i] === b[j] ){ flag = true; break; } } if( !flag ){ b.push(a[i]) }}console.log(b) // [1,2,3,4,5]上面的是es6之前的处理方法，可以解决问题，但代码量可着实不少啊！在es6中，只需要一行代码就可以搞定！Array.from && newSet()let a = [1,2,2,3,3,4,5];let b = Array.from(new Set(a))console.log(b) // [1,2,3,4,5]是不是及其简单！其中 new Set()会把重复的数据过滤到，得到一个类数组的对象，Array.from()可以把类数组的对象转换为真正的数组对象，有兴趣的同学可以对这两个属性进行更加深入的了解。数组过滤在我们拿到后端数据的时候，可能会对数据进行一些筛选、过滤，传统的做法如下// 取出数组中name为kele的数组集合let a = [ { name: 'kele', title: '可口可乐' }, { name: 'kele', title: '芬达' }, { name: 'wlg', title: '王老吉' }]let b = [];for(let i = 0; i < a.length; i++){ if( a[i].name === 'kele' ){ b.push(a[i]) }}console.log(b) //[{name: 'kele', title: '可口可乐'},{name: 'kele', title: '芬达'}]es6中的处理方法如下Array.filter(callback)let a = [ { name: 'kele', title: '可口可乐' }, { name: 'kele', title: '芬达' }, { name: 'wlg', title: '王老吉' }]let b = a.filter(item => item.name === 'kele');console.log(b) //[{name: 'kele', title: '可口可乐'},{name: 'kele', title: '芬达'}]同样的，Array.filter()让我们摆脱了for循环，代码看起来更加的清爽！Array.every(callback)这个方法主要是判断数组中所有的元素都符合条件时，返回truelet a = [1,2,3,4,5];let b = a.every(item => item > 2);console.log(b) // falseArray.some(callback)这个方法和上一个略有区别，这个方法主要判断数组中有一个元素符合条件，就返回truelet a = [1,2,3,4,5];let b = a.some(item => item > 2);console.log(b) // trueArray.find(callback)这个方法是返回数组中符合条件的第一个元素，否则就返回undefinedlet a = [1,2,3,4,5];let b = a.find(item => item > 2);console.log(b) // 3Array.findIndex(callback)这个方法是返回数组中符合条件的第一个元素的索引值，否则就返回-1let a = [1,2,3,4,5];let b = a.findIndex(item => item > 2);console.log(b) // 2 符合条件的为元素3 它的索引为2Array.includes(item, finIndex)这个方法是判断数组中是否包含有指定的值，包含就返回true，否则就是false，它接受两个参数，第一个为搜索的值（必填），第二个为搜索开始的位置（选填，默认从0开始）let a = [1,2,3,4,5];let b = a.includes(2);console.log(b) // trueArray.map(callback)这个方法是返回一个根据你callback函数中的条件，返回一个全新的数组let a = [1,2,3,4,5];let b = a.map(item => item * 2);console.log(b) // [2,4,6,8,10]Array.reduce(callback)这个方法是根据callback中的条件对数组中的每个元素都进行类加的操作，返回一个全新的值，下面做两个不同的例子，便于理解/** 第一种 **/let a = [1,2,3];let b = a.reduce((i, j) => { return i + j;}, 0);console.log(b) // b/** 第二种 **/let a = [1,2,3];let b = a.reduce((i,j) => { i.push(j) return i},[0])console.log(b) // [0,1,2,3]...扩展运算符这个可以很方便的帮我们实现合并两个数组let a = [1,2,3];let b = [4,5,6];let c = [...a,...b];console.log(c) // [1,2,3,4,5,6];小结：基本上新增的一些方法用到的就是这些，一些老的方法例如push、shift、sort等等就不一一列举了。
ES6 浅谈class继承机制
文章来源阮一峰ES6入门，这里做要点掌握大纲。 class——构造函数的语法糖 ES5的继承：修改原型链 先创造子类的实例对象，再将父类的方法添加到this(Parent.apply(this) )
ES6的继承：通过extends实现继承 先将父类实例 的属性方法加到this上(super)，然后再用子类的构造函数修改this
作为函数使用时，代表父类的构造函数，只能在子类构造函数中使用，super内部的this指向子类实例。
作为对象使用时，在静态方法中指向父类，在普通方法中，指向父类原型对象。 注意：super指向父类的原型对象，而不是父类实例，所以父类实例上的属性方法无法通过super调用。(父类构造函数里this调用的属性方法就是实例属性方法)
定义在父类实例上的属性应该是这样子
在普通方法中使用super 对象时， 方法内部的this指向当前的子类实例
对象总是继承自另一个对象，所以可以在任意一个对象里使用super
（1）子类的 proto 属性，表示构造函数的继承，总是指向父类。
（2）子类prototype属性的 proto 属性，表示方法的继承，总是指向父类的prototype属性。 我知道这张图可能不准确，但是这样记能让我一下子找到对应关系。
ES6之async的常用简单总结
generator函数的语法糖。 Async 函数返回一个 Promise 对象，当函数执行的时候，遇到 await 就会先返回，等到异步处理完成之后，再接着处理函数体内await后面的语句。
eg.1
上面这个async函数大概效果就是，请求’categorySearch‘接口，获取返回结果，并把获取到的data值赋值给’searchResult‘。 分析为什么要这么写 ？ service应该改是个异步接口请求的方法，请求需要一定时间；我们必须等接口请求成功有返回值时，才能给searchResult赋值；否则searchResult赋值结果可能是空。
eg.2
这个async函数例子和上面的例子最大的区别就是加了then()方法处理。 为什么可以使用then？ async函数返回的是一个Promise对象，所以可以使用then方法处理。而且， async函数内部return语句的返回值，会成为then方法回电函数的参数 。 同样，async函数也可以使用catch方法处理错误。
有上面的两个简单的例子可以看出来主要有下面两个。
以上总结主要来自于 阮一峰的ES6入门教程之async一章
作为前端开发，需要具备怎样的能力？
作为一个入行快三年的前端开发，我来说说自己的想法吧。
首先作为一名前端开发人员最基础的，也是必须要学会的就是HTML+CSS，学会这一项技能之后你就可以写静态的页面了，当然像bootstrap这样的css框架也是必须的，这样写出来的页面效果会更好。还有如何布局可以学学，如何做到响应适布局，如何弹性布局，什么是css盒子模型都得学会。
第二，原生js的学习，初学者建议参考w3cschool里面的js文档，学完之后对js就有了一个基本的了解，一些简单的逻辑也可以实现了，接下来建议学习《JavaScript高级程序设计》（第三版）和《ES6标准入门》（阮一峰），学习完这两块相信你对js的理解又更深了一步，接下来要在实际项目中去实践，这样才会更好的理解其中的奥秘，帮助你更快提升自己的技术。
第三，框架的学习，对于现在前端行业来说，没有框架我们的开发效率低下，甚至很多问题都解决不了，所以vue，angular，react等框架是我们必须掌握的，还有nodejs，有了它我们前端又向前进了一步一部分后端的工作我们前端也能解决了。
最后，还有一部分小的插件必须layer,swiper，echarts,mui等也是我们要学习的，当然这些用的时候看一下文档就可以的，没有什么难度，有人会说现在的微信小程序很火，当然对于我们前端来说这个不难，会vue框架的，还有熟悉es6语法的，开发小程序的话很简单，因为小程序的语法本身就是跟vue框架很像的。
以上就是作为我们前端开发人员必须要掌握的，不足之处欢迎大家补充。
感谢邀请！我主要是写后端代码的。也不从招聘网站复制别人的应聘要求了，我从工作的角度说几点吧。
1.具备css编写能力
2.掌握js和jquery，可以灵活的操作页面
3.对页面易用性有自己的想法
4.页面能进行良好的交互
5.后端交互统一制定接口规范，方便前端开发
6.自己可以写简单的控件，代码易用性，他人方便调用
7.代码规范方便阅读
以上都是自己对前端的要求心得，从实际开发角度来的。希望对你有所帮助！
你了解vue3.0响应式数据怎么实现吗
从 Proxy 说起 什么是Proxyproxy翻译过来的意思就是”代理“，ES6对Proxy的定位就是target对象(原对象)的基础上通过handler增加一层”拦截“，返回一个新的代理对象，之后所有在Proxy中被拦截的属性，都可以定制化一些新的流程在上面，先看一个最简单的例子const target = {}; // 要被代理的原对象// 用于描述代理过程的handlerconst handler = { get: function (target, key, receiver) { console.log(`getting ${key}!`); return Reflect.get(target, key, receiver); }, set: function (target, key, value, receiver) { console.log(`setting ${key}!`); return Reflect.set(target, key, value, receiver); }}// obj就是一个被新的代理对象const obj = new Proxy(target, handler);obj.a = 1 // setting a!console.log(obj.a) // getting a!上面的例子中我们在target对象上架设了一层handler，其中拦截了针对target的get和set，然后我们就可以在get和set中间做一些额外的操作了注意1：对Proxy对象的赋值操作也会影响到原对象target，同时对target的操作也会影响Proxy，不过直接操作原对象的话不会触发拦截的内容~obj.a = 1; // setting a!console.log(target.a) // 1 不会打印 "getting a!"注意2：如果handler中没有任何拦截上的处理，那么对代理对象的操作会直接通向原对象const target = {};const handler = {};const obj = new Proxy(target, handler);obj.a = 1;console.log(target.a) // 1既然proxy也是一个对象，那么它就可以做为原型对象，所以我们把obj的原型指向到proxy上后，发现对obj的操作会找到原型上的代理对象，如果obj自己有a属性，则不会触发proxy上的get，这个应该很好理解const target = {};const obj = {};const handler = { get: function(target, key){ console.log(`get ${key} from ${JSON.stringify(target)}`); return Reflect.get(target, key); }}const proxy = new Proxy(target, handler);Object.setPrototypeOf(obj, proxy);proxy.a = 1;obj.b = 1console.log(obj.a) // get a from {"a": 1} 1console.log(obj.b) // 1ES6的Proxy实现了对哪些属性的拦截？ 通过上面的例子了解了Proxy的原理后，我们来看下ES6目前实现了哪些属性的拦截，以及他们分别可以做什么？ 下面是 Proxy 支持的拦截操作一览，一共 13 种 get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']; set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值; has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。 deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值; ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for?in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性; getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象; defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值; preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值; getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象; isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值; setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截; apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(?args)、proxy.call(object, ?args)、proxy.apply(?); construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(?args);以上是目前es6支持的proxy，具体的用法不做赘述，有兴趣的可以到阮一峰老师的es6入门去研究每种的具体用法，其实思想都是一样的，只是每种对应了一些不同的功能~实际场景中 Proxy 可以做什么？ 实现私有变量js的语法中没有private这个关键字来修饰私有变量，所以基本上所有的class的属性都是可以被访问的，但是在有些场景下我们需要使用到私有变量，现在业界的一些做法都是使用”_变量名“来”约定“这是一个私有变量，但是如果哪天被别人从外部改掉的话，我们还是没有办法阻止的，然而，当Proxy出现后，我们可以用代理来处理这种场景，看代码：const obj = { _name: 'nanjin', age: 19, getName: () => { return this._name; }, setName: (newName) => { this._name = newName; }}const proxyObj = obj => new Proxy(obj, { get: (target, key) => { if(key.startsWith('_')){ throw new Error(`${key} is private key, please use get${key}`) } return Reflect.get(target, key); }, set: (target, key, newVal) => { if(key.startsWith('_')){ throw new Error(`${key} is private key, please use set${key}`) } return Reflect.set(target, key, newVal); }})const newObj = proxyObj(obj);console.log(newObj._name) // Uncaught Error: _name is private key, please use get_namenewObj._name = 'newname'; // Uncaught Error: _name is private key, please use set_nameconsole.log(newObj.age) // 19console.log(newObj.getName()) // nanjin可见，通过proxyObj方法，我们可以实现把任何一个对象都过滤一次，然后返回新的代理对象，被处理的对象会把所有_开头的变量给拦截掉，更进一步，如果有用过mobx的同学会发现mobx里面的store中的对象都是类似于这样的有handler 和 target，说明mobx本身也是用了代理模式，同时加上Decorator函数，在这里就相当于把proxyObj使用装饰器的方式来实现，Proxy + Decorator 就是mobx的核心原理啦~vue响应式数据实现VUE的双向绑定涉及到模板编译，响应式数据，订阅者模式等等，有兴趣的可以看这里 ，因为这篇文章的主题是proxy，因此我们着重介绍一下数据响应式的过程。2.x版本在当前的vue2.x的版本中，在data中声名一个obj后，vue会利用Object.defineProperty来递归的给data中的数据加上get和set，然后每次set的时候，加入额外的逻辑。来触发对应模板视图的更新，看下伪代码：const defineReactiveData = data => { Object.keys(data).forEach(key => { let value = data[key]; Object.defineProperty(data, key, { get : function(){ console.log(`getting ${key}`) return value; }, set : function(newValue){ console.log(`setting ${key}`) notify() // 通知相关的模板进行编译 value = newValue; }, enumerable : true, configurable : true }) })}这个方法可以给data上面的所有属性都加上get和set，当然这只是伪代码，实际场景下我们还需要考虑如果某个属性还是对象我们应该递归下去，来试试：const data = { name: 'nanjing', age: 19}defineReactiveData(data)data.name // getting name 'nanjing'data.name = 'beijing'; // setting name可以看到当我们get和set触发的时候，已经能够同时触发我们想要调用的函数拉，Vue双向绑定过程中，当改变this上的data的时候去更新模板的核心原理就是这个方法，通过它我们就能在data的某个属性被set的时候，去触发对应模板的更新。现在我们在来试试下面的代码：const data = { userIds: ['01','02','03','04','05']}defineReactiveData(data);data.userIds // getting userIds ["01", "02", "03", "04", "05"]// get 过程是没有问题的，现在我们尝试给数组中push一个数据data.userIds.push('06') // getting userIds what ? setting没有被触发，反而因为取了一次userIds所以触发了一次getting~，不仅如此，很多数组的方法都不会触发setting，比如：push,pop,shift,unshift,splice,sort,reverse这些方法都会改变数组，但是不会触发set，所以Vue为了解决这个问题，重新包装了这些函数，同时当这些方法被调用的时候，手动去触发notify()；看下源码：// 获得数组原型const arrayProto = Array.prototypeexport const arrayMethods = Object.create(arrayProto)// 重写以下函数const methodsToPatch = [ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse',]methodsToPatch.forEach(function(method) { // 缓存原生函数 const original = arrayProto[method] // 重写函数 def(arrayMethods, method, function mutator(...args) { // 先调用原生函数获得结果 const result = original.apply(this, args) const ob = this.__ob__ let inserted // 调用以下几个函数时，监听新数据 switch (method) { case 'push': case 'unshift': inserted = args break case 'splice': inserted = args.slice(2) break } if (inserted) ob.observeArray(inserted) // 手动派发更新 ob.dep.notify() return result })})上面是官方的源码，我们可以实现一下push的伪代码，为了省事，直接在prototype上下手了~const push = Array.prototype.push;Array.prototype.push = function(...args){ console.log('push is happenning'); return push.apply(this, args);}data.userIds.push('123') // push is happenning通过这种方式，我们可以监听到这些的变化，但是vue官方文档中有这么一个注意事项由于 JavaScript 的限制，Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 这个最根本的原因是因为这2种情况下，受制于js本身无法实现监听，所以官方建议用他们自己提供的内置api来实现，我们也可以理解到这里既不是defineProperty可以处理的，也不是包一层函数就能解决的，这就是2.x版本现在的一个问。 回到这篇文章的主题，vue官方会在3.x的版本中使用proxy来代替defineProperty处理响应式数据的过程，我们先来模拟一下实现，看看能否解决当前遇到的这些问题；3.x版本我们先来通过proxy实现对data对象的get和set的劫持，并返回一个代理的对象，注意，我们只关注proxy本身，所有的实现都是伪代码，有兴趣的同学可以自行完善const defineReactiveProxyData = data => new Proxy(data, { get: function(data, key){ console.log(`getting ${key}`) return Reflect.get(data, key); }, set: function(data, key, newVal){ console.log(`setting ${key}`)； if(typeof newVal === 'object'){ // 如果是object，递归设置代理 return Reflect.set(data, key, defineReactiveProxyData(newVal)); } return Reflect.set(data, key, newVal); } })const data = { name: 'nanjing', age: 19};const vm = defineReactiveProxyData(data);vm.name // getting name nanjingvm.age = 20; // setting age 20看起来我们的代理已经起作用啦，之后只要在setting的时候加上notify()去通知模板进行编译就可以了，然后我们来尝试设置一个数组看看；vm.userIds = [1,2,3] // setting userIdsvm.userIds.push(1);// getting userIds 因为我们会先访问一次userids// getting push 调用了push方法，所以会访问一次push属性// getting length 数组push的时候 length会变，所以需要先访问原来的length// setting 3 通过下标设置的，所以set当前的index是3// setting length 改变了数组的长度，所以会set length// 4 返回新的数组的长度回顾2.x遇到的第一个问题，需要重新包装Array.prototype上的一些方法，使用了proxy后不需要了，解决了~，继续看下一个问题vm.userIds.length = 2// getting userIds 先访问// setting length 在设置vm.userIds[1] = '123'// getting userIds 先访问// setting 1 设置index=1的item// "123"从上面的例子中我们可以看到，不管是直接改变数组的length还是通过某一个下标改变数组的内容，proxy都能拦截到这次变化，这比defineProperty方便太多了，2.x版本中的第二个问题，在proxy中根本不会出现了。总结1通过上面的例子和代码，我们看到Vue的响应模式如果使用proxy会比现在的实现方式要简化和优化很多，很快在即将来临的3.0版本中，大家就可以体验到了。不过因为proxy本身是有兼容性的，比如ie浏览器，所以在低版本的场景下，vue会回退到现在的实现方式。总结2回归到proxy本身，设计模式中有一种典型的代理模式，proxy就是js的一种实现，它的好处在于，我可以在不污染本身对象的条件下，生成一个新的代理对象，所有的一些针对性逻辑放到代理对象上去实现，这样我可以由A对象，衍生出B,C,D?每个的处理过程都不一样，从而简化代码的复杂性，提升一定的可读性，比如用proxy实现数据库的ORM就是一种很好的应用，其实代码很简单，关键是要理解背后的思想，同时能够举一反三~扩展： 1.Proxy.revocable()这个方法可以返回一个可取消的代理对象const obj = {};const handler = {};const {proxy, revoke} = Proxy.revocable(obj, handler);proxy.a = 1proxy.a // 1revoke();proxy.a // Uncaught TypeError: Cannot perform 'get' on a proxy that has been revoked一旦代理被取消了，就不能再从代理对象访问了打印proxy 可以看到IsRevoked变为true了2.代理对象的this问题因为new Proxy出来的是一个新的对象，所以在如果你在target中有使用this，被代理后的this将指向新的代理对象，而不是原来的对象，这个时候，如果有些函数是原对象独有的，就会出现this指向导致的问题，这种场景下，建议使用bind来强制绑定this看代码：const target
ES6 之 async 异步函数
1、什么是 async 函数？
异步读取两个文件，用 Generator 函数的写法
异步读取两个文件，用 async 函数的写法
一比较就会发现，async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await，仅此而已。
2、async函数对 Generator函数的改进，体现在哪些方面？
3、async 函数的基本用法
async 函数有多种使用形式。
4、async 语法
5、async函数的实现原理
6、实例：按顺序完成异步操作
7、异步遍历器
for...of循环用于遍历同步的 Iterator 接口。新引入的 for await...of 循环，则是用于遍历异步的 Iterator 接口。
8、异步 Generator 函数
在语法上，异步 Generator 函数就是async函数与 Generator 函数的结合。
异步遍历器的设计目的之一，就是 Generator 函数处理同步操作和异步操作时，能够使用同一套接口。
yield* 语句也可以跟一个异步遍历器。 与同步 Generator 函数一样，for await...of循环会展开yield*。
参考链接 ： 阮一峰ES6教程
你真的了解XMLHttpRequest么？
说起浏览器和服务器的通信，最先想到的技术必然就是Ajax了。在ES6中还提供了fetch API，相当于把Ajax用Promise封装起来，看起来更像同步操作了。先大概看下这两种方式：
很明显 fetch 方法看起来更加简洁，而且fetch也有很多自己很好的特性。想仔细了解fetch的童鞋可以去看看 阮一峰老师 的博客： Fetch API教程 （ps:前端不识阮一峰，学遍技术也枉然）。本篇文章主要是讲ES5中Ajax技术的核心 XMLHttpRequst 对象的用法（下文都把XMLHttpRequest对象称为XHR对象）以及XHR对象的一些属性。
既然要使用XHR对象，当然要先new一个XHR对象了
tip: 对于IE7之前的浏览器会有兼容问题，但我觉得如果现在还有人用IE7之前的浏览器，他也不配用2021年的程序员写的网页。
先说下XHR的readyState属性，该属性表示请求/响应过程的当前阶段，也就是请求/响应事件大概进行到什么程度了。该属性有5个取值：
只要readyState的值改变一次，就会触发onreadystatechange事件。也就是说，其实一次的请求/响应会触发4次onreadystatechange事件，但通常情况我们只对 完成 阶段感兴趣，也就是readyState为4的阶段。然后再说下XHR的另一个属性status。这个属性的值为http请求的响应码，没错，就是那些什么200啊，304啊，404啊，500什么的。还有一个responseText属性，这个属性作为响应主体被返回的文本。明确了这几个概念，就可以为XHR对象的onreadystatechange事件绑定事件响应函数了。
当为onreadystatechange事件绑定事件响应函数后，就要发起请求了。与发起请求有关的第一个函数就是 open() 。这个函数接收三个参数：
但要明确一点，调用open()方法以后并没有真正发送请求，而是做好了发送请求的准备。
这个时候大军已经通过open()方法做好出征的准备了，粮草装备什么的都齐全了，就等总指挥下令了，也就是调用 send() 方法。
send()方法就是用来真正发送一个请求。send()方法接收一个对象参数，这个参数就是作为请求体一起发送给服务器（ POST方法和GET方法的区别 )。如果是使用get请求方式这里直接为空也可以，但是为了兼容有些浏览器最好传一个null。
到此为止，一个XHR对象的Ajax的基本步骤就做完了，至于设置请求头和收到响应后的其他方法，这里就不多做介绍了，最后放一个封装的Ajax函数来结束本篇文章吧
来自一位react新手的react入门须知
所有的html，css都可以写在js中，这就是jsx的用法。
用于验证数据的类型是否是满足你的需要,不过我在现有的项目中没有特意的指定数据的propTyoe，因为这些都是前后端约定好的。
此用法如下图 ：
这个如同vue组件里面的props中的type：Array这个一样
这个与vue-router差不多，大家可以看文档。
react-router的中文官网 ： 中文官网
因为react与vue一样，都是使用vitural-dom，没有处理dom节点，从而大大提高了页面的渲染效率。
当你想要获取真实的dom节点的时候，可以使用ref，具体的使用，可以看阮一峰的react入门，我下面的todolist的demo里面也会涉及到。
不过在你使用无状态组件申明组件的时候，ref在这个组件中是不能使用的。
可以通过webpack安装各种依赖，我使用的最爽的一个就是react-hot-loader，就是热更新，非常好用。不过热更新其他的工具，比如 browser-sync ,下面是一些文档。
如vue的vue-cli脚手架， create-react-app ]( https://github.com/facebookincubator/create-react-app )，使用以上方法的话，与vue-cli脚手架工具类似
我自己的一些总结，单单学react是不难的，难的是要和一些工具混合来用，往往这个过程的成本最高。比如使用webpack构建，redux管理状态， redux-thunk 或者 redux-saga 来处理异步action。
还有一个很大的趋势就是前端变化很快，拿 react-router 来说，你做了一个项目， react-router@2.0.0 是能完美跑起来的，但是换成了当换成了 react-router@3.0.0 ，基本上就跑不起来了，更何况现在的 react-router 已经出到4.0，
相应的 webpack 也是这样，当时一些开发者基于 webpack1.0 开发的，当webpack升到2.0的时候， webpack.config,js 里面的文件要重新配置了。现在 webpack 已经更新到了3.0。
2， 阮一峰的文档： react的入门 ，webpack的入门， react-router
3，react的一些框架和一些轮子：
4，一个渐进的学react的demo。
里面基本上涉及到了，react入门的所有涵盖的知识，他都是自己搭的，没有使用脚手架工具。里面也涵盖了webpack的一些配置，对于新手学习蛮好的。
?
1，jquery、vue、react的todolist，最简单的
2，基于ant-dedign的一个react简单的demo
3,基于react写的一个简易大众点评的demo，里面用到了redux，mock，fetch，es6
如何评价《深入理解ES6》这本书
《深入理解ES6》最大的特点是从浅到深。从为什么引入这个特性开始，一步一步地深入展开讲解。但有时就是由于过分的深入浅出，有头重脚轻的感觉。大篇幅的展开讲引入的原因，到如何使用特性时，反而不是很详细，或者说不是很系统。
《ES6标准入门》这本书继承了阮一峰老师一贯的风格，“猪肚”的部分夯地非常实，把一个特性的各种参数，各种使用场景，各种注意事项都讲得很清楚。比如，该特性有N个属性，M个方法。接下来，就开始系统地讲解这N个属性M个方法，所以，每部分的篇幅都很长。
深入理解es6和es6标准入门哪本好
答:ES6的书籍主要有《深入理解ES6》、阮一峰老师的《ES6标准入门》、小问的《实战ES2015》这三本
现在正在学ES6，说一下这三本书各自的特点
1、《深入理解ES6》最大的特点是从浅到深。从为什么引入这个特性开始，一步一步地深入展开讲解。但有时就是由于过分的深入浅出，有头重脚轻的感觉。大篇幅的展开讲引入的原因，到如何使用特性时，反而不是很详细，或者说不是很系统。
总结一下，就是"为什么"的部分讲得深，"是什么"的部分讲得浅
2、《ES6标准入门》这本书继承了阮一峰老师一贯的风格，“猪肚”的部分夯地非常实，把一个特性的各种参数，各种使用场景，各种注意事项都讲得很清楚。比如，该特性有N个属性，M个方法。接下来，就开始系统地讲解这N个属性M个方法，所以，每部分的篇幅都很长
缺点是“为什么”的部分讲的相对少，有的甚至只有一句话。于是，学起来可能就有一种似懂非懂的感觉