想来想去还是把ES6的一些笔记挑选了开发中基础，简单又最常用的知识点拿出来作为铺垫。其他知识，比如Promise，Generator函数，async函数修饰器等自行查看资料，后面有时间整理dva这个框架会在介绍这些深入的知识。个人觉得学习ES6看阮一峰大神的那本书是个不错的选择，现在已经更新到第三版了。入口在这ES6入门。
本章源码地址在最下方有链接。
ps: 更新，下面每个块级作用域中的代码可在高版本谷歌浏览器中直接运行（2018-11-19更新）如图(高版本谷歌浏览器-version:70.0.3538.102)：

先来看看这一章的思维导图：

1.变量和常量

    {// let 和 const// 用let代替var来声明变量，const用来声明常量，常量一旦初始化则不可在修改(基本数据类型)。但是对object和数组是可以改变值得。let a = 10;const  b = 12;const obj = {name:"常量"};// b = 34;// 编辑器都报错了obj.name = "改变值可以哦";a = 12;console.log(a);// 12console.log(b);// 12console.log(obj);// obj// let 和 var 的区别在于，用var声明的变量属于全局变量，let则是属于离他最近的块级作用域，最典型的就是for循环for(var va = 0;va<10;va++){}for(let le = 0;le<10;le++){}console.log(va);// 11// console.log(le);// undefined,let创建的le变量只在for循环的块内有效。}

为什么对象和数组类型的被声明常量还是能改变值，因为引用。obj改变name属性值得实惠并没有改变内存指向。用图说话：

2.解构赋值

数组解构赋值：

   {//解构赋值: 按照一定的模式，从数组中或对象中提取值付给变量，被称为解构赋值。// 数组的解构赋值let arr = [1,2,4,3,5];// 现在需要把数组的每个值分别付给不同的变量a,b,c,d,e;普通方式则是a = arr[0];......let [a,b,c,d,e] = arr;console.log(a,b,c,d,e);// 1 2 4 3 5// 我只要前两个值，后面的都放在一个变量中let [one,two,...arr2] = arr;console.log(one,two,arr2);// 1 2 [4,3,5]// 左边变量和右边数组值根据位置相互对应，不对应的则会被赋值成undefined，其中 ...三个小点是扩展运算符}

对象解构赋值

    {// 对象解构赋值// 对象解构赋值也比较简单，左边变量名和右边对象的属性名相同则会把右边的属性名对应的值赋值给左边的变量。与数组相比左边的变量没有顺序要求let { name , age } = {name:"Jim",age:16};console.log(name,age);const baseObj = {name:'Car',age:33,country:'china'};const { country } = baseObj;// 对象的解构赋值在React中非常常用console.log(country);}

3.字符串

    {//字符串方法//模板字符串。react中也是非常的常用。let name = '字符串模板';let age = 21;console.log("我的名字是："+name+" ，年龄："+age);// 平时拼接字符串方式console.log(`我的名字是：${name} , 年龄：${age}`);// 使用模板字符串，符号单撇号“ ` ”，解析的值放进${}中即可// 遍历字符串 let ... of let str = 'string';for(let char of str){console.log(char);}//includes(str,num):从第num开始是否包含str字符或者字符串。//startsWith(str,num):从第num开始是否包含str字符或者字符串。//endsWith(str,num):从第num开始之前的字符是否包含str字符或者字符串。console.log(str.includes('g',4));// trueconsole.log(str.startsWith('str'))// trueconsole.log(str.endsWith('r',2));// false}

4.箭头函数

箭头函数属于ES6函数扩展中的知识，详细的可以看上面提供的ES6入门。

    {// 箭头函数let fun2 = () => {console.log('fun2')}// 等同于function fun1() {console.log('fun1');}fun1();fun2();// 带有参数let fun3 = (op1,op2,op3) => {console.log(op1,op2,op3);}fun3('op1','op2','op3');}

5.对象扩展

仔细看，把代码贴到test.js中运行一下看看也是很不错的。

  {//根据解构赋值，对象就有简洁的表示法let price = 9;let car = {name:'五菱宏光S',price,// 等同于 price: price,这种写法，既属性名即变量名，属性值即变量值。}console.log(car);// {name: "五菱宏光S", price: 9}// Object.assign()方法，常用合并多个对象的属性于一个对象。第一个参数为目标参数，后面的参数的属性会添加到目标参数中，且如果目标参数中// 具有与源参数相同的属性时，则会以源参数的值为准——即后面的会覆盖前面的。let s = {name:'小刚',age:12,like:'book',country:'China',childs:[2,3]};let a = {name:'小明'};let b = {age:23};let c = {like:'LOL'};let o = Object.assign({},a,b,c);let o2 = Object.assign(s,a,b,c);console.log(o);// {name: "小明", age: 23, like: "LOL"}console.log(o2);// {name: "小明", age: 23, like: "LOL", country: "China"}// 对象属性的遍历，这个也是经常用到方法，这里介绍两个for...in和Object.keysfor(let key in s){console.log(`key=${key},value=${s[key]}`);}console.log(Object.keys(s))// 数组，返回所有属性名Object.keys(s).forEach(key => {console.log(`key=${key},value=${s[key]}`);})// 对象的扩展运算符：... 三个小点。ES8中引入的，ES7只是一个提案。但放心babel都已经支持。功能和数组的基本一致let s2 = {...s};// 把对象s属性全部展开到{}中，该行操作相当于一个浅拷贝。s2.age = 999;s2.childs[0] = 999;console.log(s);// 打印值证明浅拷贝，其中的数组对象值被改变了。let { name, age, ...other } = s;// 对象使用扩展运算符进行结构赋值，除了name,age的值被赋到name和age变量，剩余属性全部放到other变量中console.log(name);console.log(age);console.log(other);}

6.数组扩展

这里就介绍5个方法：
(1). find(function(value,index,arr){}):查找数组中符合特定条件（自己设定的条件）第一个元素，如果没有则返回undefined。
参数是一个函数，该函数有三个参数
value：数组元素值；index：数组对应元素值的下标；arr：数组本身。
函数根据是否满足设定的条件返回一个布尔值，如果返回true，则find立刻返回符合规则的value值。
(2). findIndex(function(value,index,arr){}):查找数组中符合特定条件（自己设定的条件）第一个元素下标，如果没有则返回undefined。
(3). entrise():返回一个Iterator对象，与for of一起使用可以遍历数组的键值对
(4). values():返回一个Iterator对象，与for of一起使用可以遍历数组的值
(5). keys()：返回一个Iterator对象，与for of一起使用可以遍历数组键值

    {let array = ['a','v','r','t','f','dfdfdf'];console.log(array.entries());console.log(array.values());console.log(array.keys());for(let [index,value] of array.entries()){console.log(`array[${index}]=${value}`);}for(let value of array.values()){console.log(value);}for(let index of array.keys()){console.log(index);}}

7.jsx注意的两点

说小补jsx语法，不如说是需要注意的两个地方。注释和布尔类型值
注释必须放在{}内，{}内他如果是布尔值，是不会显示的。

    class Test extends Component{constructor(props){super(props);}render(){return(<div className='mainStyle'>{/*这里是jsx的注释,下面的值并不会显示*/// 这个也不会显示}{false}{true}<h1 className='titleColor'>Hello React!</h1><h1>Hello React!</h1></div>)}}

结语：这里面的每一段代码我都跑过了，木有问题。这几个知识点虽然有笔记，一气一条条在写出来并且用代码跑一遍还是有点小累啊。希望大家多多支持，有问题欢迎评论留言。下一张我们进入react！
源码地址：点击源码.

R2-React之ES6基础相关推荐

2020前端最新面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）（3年前端菜鸟级开发师含泪总结）
2020前端最新面试题总结(js.html.小程序.React.ES6.Vue.算法.全栈热门视频资源) 文档描述 (今年确实挺难 3年前端菜鸟级开发师含泪总结希望能帮助大家) 本文是关注微信小程序 ...
前端面试题总结（js、html、小程序、React、ES6、Vue、全栈）
前端面试题总结(js.html.小程序.React.ES6.Vue.全栈) 文档描述本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序. 并有热点框架(vue re ...
Part2：面向对象、原型链、函数、ES6基础语法
一.面向对象标记语言:HTML5/CSS3 编程语言:编程思想面向过程 C 面向对象 JAVA.PHP.C#(ASP.NET).JavaScript- 1.单例设计模式 let name='和冉' ...
ES6基础5（Promise）-学习笔记
文章目录 ES6基础5(Promise)-学习笔记 Promise 三个状态状态转换手写Promise源码同步异步概念 jquery中串行并行 async-await 微任务宏任务 ES6基 ...
ES6基础4（数据结构）-学习笔记
文章目录 ES6基础4(数据结构)-学习笔记 set map symbol ES6基础4(数据结构)-学习笔记 set //set 数据结构类似数组成员信息唯一性var s = new Set() ...
ES6基础3（扩展）-学习笔记
文章目录 ES6基础3(扩展)-学习笔记字符串扩展数值扩展函数扩展扩展运算符 ES6基础3(扩展)-学习笔记字符串扩展 //扩展//字符串扩展charAt(); //返回指定索引位置的字符 ...
ES6基础2（块级作用域、数组对象解构）-学习笔记
文章目录 ES6基础2(块级作用域.数组对象解构)-学习笔记块级作用域数组解构对象解构字符串解构函数的参数解构 ES6基础2(块级作用域.数组对象解构)-学习笔记块级作用域 //let c ...
ES6基础（var let const 箭头函数）-学习笔记
文章目录 ES6基础(var let const 箭头函数)- 学习笔记定义:var let const 箭头函数数据结构 set map ES6基础(var let const 箭头函数)- 学 ...
【ES6基础】Object的新方法
Object对象可谓是JS的重要核心内容,在你使用JS的过程中,你会发现自己的工作大部分都是在操作对象,ES6.ES7.ES8引入了不少新的方法,本篇文章笔者将带着大家一起熟悉下重点的新方法. 本篇文 ...
[react] 使用ES6的class定义的组件不支持mixins了，那用什么可以替代呢？
[react] 使用ES6的class定义的组件不支持mixins了,那用什么可以替代呢? HOC 高阶组件是一个以组件为参数并返回一个新组件的函数.HOC 运行你重用代码.逻辑和引导抽象.最常见的可 ...

R2-React之ES6基础