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 及它们之间如何相互转换的。
我们终极目的是帮助小伙伴们快速掌握并使用它,让学习不再有压力。