咱们先来理解一些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) // undefinedvar 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 及它们之间如何互相转换的。
咱们终极目标是帮忙小伙伴们疾速把握并应用它,让学习不再有压力。