1、ES6 常用语法 - 图1 我们先来了解一些ES6语法。好多小伙伴就是不注重基础，感觉这有什么难的，多写点项目，记住写法就行了，后面自然就会了。其实这种想法是错误的，要想代码写法规范，bug少及排错能力强，必须把基础掌握牢固。

1、let 与 const

ES2015(ES6) 新增2个JavaScript 关键字: let 和 const
**
let 声明的变量只在所在的代码块中生效。举例说明如下：

  1.     function getShopList() {
  2.         let shopCount = 10;
  3.         console.log('shopCount1', shopCount); // 正确打印出10
  4.     }
  5.     getShopList();
  6.     console.log('shopCount2', shopCount); // 报错，即 shopCount not defined

在控制台打印得：
image.png
所以，let 声明的变量只在所在的代码块中生效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。举例说明如下：

  1.     function getShopList() {
  2.         const shopCount = 10;
  3.         shopCount = 20; // 重新赋值，就会报错
  4.         console.log('shopCount', shopCount);
  5.     }
  6.     getShopList();

在控制台打印得：
image.png

反思点：
爱动脑筋的小伙伴可能会问，如果用 const 声明初始化一个数组或者对象时，为何能改变它的值？

  1.     function getShopList() {
  2.         const shopCount = [10];
  3.         shopCount.push(30);
  4.         console.log('shopCount', shopCount);
  5.     }
  6.     getShopList();

在控制台打印得：
image.png
总结：
const 其实保证的不是变量的值不变，而是保证变量指向的内存地址所保存的数据不允许改变。但是，简单类型和复合类型保存值的方式是不一样的。对于简单类型（数值 number、字符串 string 、布尔值 boolean）,它的值就保存在变量指向的那个内存地址，因此 const 声明的简单类型变量等同于常量；而复杂类型（对象 object，数组 array，函数 function），变量指向的内存地址其实是保存了一个指向实际数据的指针，指针是可以移动的，所以变量的值也是可以改变的。
其实上面原理不太理解的小伙伴，也不用太过纠结，我们只需要记住，常用的数值和字符串用const声明初始化后，是不可以重新赋值的；而数组和对象用const声明初始化后，允许改变其值就ok了！

面试题问答：
我们在面试笔试过程中，有时候会遇到考察 const 与 let 关键字的其他知识点？你们遇到过吗，一起继续往下看

  1. b() // 明天预报有大雨！
  2. console.log(a) // undefined
  4. var a = '今天天气不错！'
  6. function b() {
  7.     console.log('明天预报有大雨！')
  8. }

上面输出的结果想必大家都知道了，之所以 变量a和b函数能够打印出结果，这就是变量和函数提升的原因。通常情况下，可以理解为将声明的代码移动了顶部。但是更准确的说，js在生成执行环境时，有两个阶段。第一个阶段是创建阶段，js会将变量和函数提升，并在存到开辟好的内存中。所以在第二代码执行阶段，我们可以直接提前使用，而不会报错。

好了，了解完原因之后，我们一起看下面的面试题：

  1.     function fn() {
  2.         const k = 1;
  3.         fn1();
  4.         function fn1() {
  5.             console.log('k1', k);  // k1 1
  6.         }
  7.     }
  8.     const k = 2;
  9.     fn();
  10.     console.log('k2', k); // k2 2

通过以上的讲解，想必这道面试题对大家来说也是小菜一碟了。我也不多唠叨了!

2、解构赋值

我们之前肯定很常见下面赋值：

  1. const girl = { name:"Tom" , age:18};
  2. let boy = { name:"Jim" , age:24};


今天我们聊的是：将他们反过来赋值

  1. const { name:"Tom" , age:18} = girl;
  2. let { name:"Jim" , age:24} = boy;

这样的就可以拿到相应的name与age值了。上面的用法依然适用于数组。

解析赋值很多用于函数组件中，接下来，就让我们一起看看吧

  1. //这是不使用解析赋值的写法
  2. handlePersonInfo = (props) =>{
  3.     return <div>你好！{props.name}</div>    
  4. }
  7. //使用解析赋值
  8. handlePersonInfo = ({name}) =>{
  9.     return <div>你好！{name}</div>     
  10. }

另外，

属性展开是JSX中的一个新特性
咱们尽量少写文字，多代码展示，这样大家能很快掌握并正确使用。先举个例子：

  1. let props = {};
  2. props.userList = a;
  3. props.roleList = b;
  5. const component = <Component {...props} />
  6. //这里的属性展开就是传入对象的属性会被复制到组件内
  7. //相当于 const component = <Component userList ={a} roleList ={b}>

这样写是不是方便很多了呢。

一、覆盖特性

既然它使用起来如此方便，有哪些注意点呢？
它能被多次使用，也可以和其它属性一起用。注意顺序很重要，后面的会覆盖掉前面的。

  1. let props = { name:"Tom" };
  2. const component = <Component name={"Jim"} {...props} />
  3. console.log(conponent.props.name); // "Tom"

二、合并特性

在一些场合下，我们需要将两个对象数组合并成一个对象数组，如何使用属性展开来操作呢？

  1. const a = { name:"Tome" };
  2. const b = { age:18 };
  4. const userInfo = { ...a, ...b};   //合并之后: userInfo = { name:"Tom", age:18}

三、分离特性

如果希望将某个值从对象数组中分离出来，嘿嘿，分离特性就可以帮到你了

  1. const arrObject = { name:"Tom", age:18, school:"zhongshan" };
  3. const { age, ...a } = arrObject;
  5. //此时，a = { name:"Tom", school:"zhongshan" }

3、Promise 对象

它是异步编程的一种解决方案。我们在这不去过多的了解它的历史及刻板概念描述，比如Promise对象状态：pending、fulfilled、rejected 及它们之间如何相互转换的。
我们终极目的是帮助小伙伴们快速掌握并使用它，让学习不再有压力。