共计 2693 个字符，预计需要花费 7 分钟才能阅读完成。
咱们先来理解一些 ES6 语法。好多小伙伴就是不重视根底，感觉这有什么难的，多写点我的项目，记住写法就行了，前面天然就会了。其实这种想法是谬误的，要想代码写法标准，bug 少及排错能力强，必须把根底把握牢固。
1、let 与 const
ES2015(ES6) 新增 2 个 JavaScript 关键字: let 和 const
**
let 申明的变量只在所在的代码块中失效。举例说明如下：
| function getShopList() { | |
| let shopCount = 10; | |
| console.log('shopCount1', shopCount); // 正确打印出 10 | |
| } | |
| getShopList(); | |
| console.log('shopCount2', shopCount); // 报错，即 shopCount not defined |
在控制台打印得：
所以，let 申明的变量只在所在的代码块中失效。
const 申明一个只读的常量，一旦申明，常量的值就不能扭转。举例说明如下：
| function getShopList() { | |
| const shopCount = 10; | |
| shopCount = 20; // 从新赋值，就会报错 | |
| console.log('shopCount', shopCount); | |
| } | |
| getShopList(); |
在控制台打印得：
反思点：
爱动脑筋的小伙伴可能会问，如果用 const 申明初始化一个数组或者对象时，为何能扭转它的值？
| function getShopList() {const shopCount = [10]; | |
| shopCount.push(30); | |
| console.log('shopCount', shopCount); | |
| } | |
| getShopList(); |
在控制台打印得：
总结：
const 其实保障的不是变量的值不变，而是保障变量指向的内存地址所保留的数据不容许扭转。然而，简略类型和复合类型保留值的形式是不一样的。对于简略类型（数值 number、字符串 string、布尔值 boolean）, 它的值就保留在变量指向的那个内存地址，因而 const 申明的简略类型变量等同于常量；而简单类型（对象 object，数组 array，函数 function），变量指向的内存地址其实是保留了一个指向理论数据的指针，指针是能够挪动的，所以变量的值也是能够扭转的。
其实下面原理不太了解的小伙伴，也不必太过纠结，咱们只须要记住，罕用的数值和字符串用 const 申明初始化后，是不能够从新赋值的；而数组和对象用 const 申明初始化后，容许扭转其值就 ok 了！
面试题问答：
咱们在面试口试过程中，有时候会遇到考查 const 与 let 关键字的其余知识点？你们遇到过吗，一起持续往下看
| b() // 今天预报有大雨！console.log(a) // undefined | |
| var a = '今天天气不错！' | |
| function b() {console.log('今天预报有大雨！') | |
| } |
下面输入的后果想必大家都晓得了，之所以 变量 a 和 b 函数可能打印出后果，这就是变量和函数晋升的起因。通常状况下，能够了解为将申明的代码移动了顶部。然而更精确的说，js 在生成执行环境时，有两个阶段。第一个阶段是创立阶段，js 会将变量和函数晋升，并在存到开拓好的内存中。所以在第二代码执行阶段，咱们能够间接提前应用，而不会报错。
好了，理解完起因之后，咱们一起看上面的面试题：
| function fn() { | |
| const k = 1; | |
| fn1(); | |
| function fn1() {console.log('k1', k); // k1 1 | |
| } | |
| } | |
| const k = 2; | |
| fn(); | |
| console.log('k2', k); // k2 2 |
通过以上的解说，想必这道面试题对大家来说也是小菜一碟了。我也不多唠叨了!
2、解构赋值
咱们之前必定很常见上面赋值：
| const girl = {name:"Tom" , age:18}; | |
| let boy = {name:"Jim" , age:24}; |
明天咱们聊的是：将他们反过来赋值
| const {name:"Tom" , age:18} = girl; | |
| let {name:"Jim" , age:24} = boy; |
这样的就能够拿到相应的 name 与 age 值了。下面的用法仍然实用于数组。
解析赋值很多用于函数组件中，接下来，就让咱们一起看看吧
| // 这是不应用解析赋值的写法 | |
| handlePersonInfo = (props) =>{return <div> 你好！{props.name}</div> | |
| } | |
| // 应用解析赋值 | |
| handlePersonInfo = ({name}) =>{return <div> 你好！{name}</div> | |
| } |
另外，
属性开展是 JSX 中的一个新个性
咱们尽量少写文字，多代码展现，这样大家能很快把握并正确应用。先举个例子：
| let props = {}; | |
| props.userList = a; | |
| props.roleList = b; | |
| const component = <Component {...props} /> | |
| // 这里的属性开展就是传入对象的属性会被复制到组件内 | |
| // 相当于 const component = <Component userList ={a} roleList ={b}> |
这样写是不是不便很多了呢。
一、笼罩个性
既然它应用起来如此不便，有哪些留神点呢？
它能被屡次应用，也能够和其它属性一起用。留神程序很重要，前面的会笼罩掉后面的。
| let props = {name:"Tom"}; | |
| const component = <Component name={"Jim"} {...props} /> | |
| console.log(conponent.props.name); // "Tom" |
二、合并个性
在一些场合下，咱们须要将两个对象数组合并成一个对象数组，如何应用属性开展来操作呢？
| const a = {name:"Tome"}; | |
| const b = {age:18}; | |
| const userInfo = {...a, ...b}; // 合并之后: userInfo = {name:"Tom", age:18} |
三、拆散个性
如果心愿将某个值从对象数组中分离出来，嘿嘿，拆散个性就能够帮到你了
| const arrObject = {name:"Tom", age:18, school:"zhongshan"}; | |
| const {age, ...a} = arrObject; | |
| // 此时，a = {name:"Tom", school:"zhongshan"} |
3、Promise 对象
它是异步编程的一种解决方案。咱们在这不去过多的理解它的历史及刻板概念形容，比方 Promise 对象状态：pending、fulfilled、rejected 及它们之间如何互相转换的。
咱们终极目标是帮忙小伙伴们疾速把握并应用它，让学习不再有压力。
