01-let和const关键字
1.使用let声明变量
2.块级作用域
3.使用const声明常量
4,let,const声明变量/常量的特点
02-解构赋值
1.数组的解构赋值
2.对象的解构赋值
3.字符串的解构赋值
4.函数形参刘表的解构赋值
03-展开运算符和rest运算符
04-箭头函数
1.箭头函数的使用
2.箭头函数不适合的场景
05-对象的扩展
1.属性和方法的简写
2.Object.assign API对象的拼接
let和{}会形成块级作用域
里面的块级作用域只针对里面有效
if(true){
let num =10
}
js中有三种作用域:
// 1)全局作用域
// 2)局部作用域(函数内部)
// 3)块级作用域 (let + {})
同步代码:代码的书写顺序和代码的执行顺序是一样的。
异步代码:代码的书写顺序和代码的执行顺序是一样的。例:定时器 setTimeout ajax 事件绑定,均是异步代码。
代码执行的时候,先执行所有的同步代码,等同步代码执行完毕,才会执行异步代码。
for (var i = 1; i <= 3; i++) {
setTimeout(() => {
console.log("i=", i);
}, 1000)
} 会输出3个4
for (let i = 1; i <= 3; i++) {
setTimeout(() => {
console.log("i=", i);
}, 1000)
}由于let与{}形成块级作用域,for循环形成了三次块级作用域,输出结果是i=1,i=2,i=3
1.let声明的变量不会提升
2.会形成暂存性死区
if (true) {
// 暂时性死区
// 在给num初始化之前,是不能使用num
num=555
let num;
}
会产生引用错误
Uncaught ReferenceError:Cannot access 'num' before
3.let与{}形成块级作用域
其他知识点:for循环无法遍历对象,遍历对象可使用for in
for(let key in obj)
4.使用let声明的遍历是不能重复的
function bar() {
语法错误
SyntaxError: Identifier 'name' has already been declared
var name = "123"
let name = "malu"
console.log(name);
}
bar();
5.使用let声明的全局变量,并不会挂载到GO上
let a=100;
console.log(window.a) 输出结果undefined
1.const声明常量不存在提升,所以也会形成暂时性死区
2.const与{}也会形成块级作用域
3.const也不能重复声明常量
4.const声明的常量必须直接赋值
5.const声明的常量,并不会挂载到GO上
if(true){
num=888
let和{}形成块级作用域
在使用let声明变量之前,不能使用这个变量,在之前的这一区域,叫做暂时性死区
let num;
}
<script>
扩展运算符(展开运算符)
...+数组arr,可将数组中的元素展开
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1,...arr2];
console.log(arr3);
</script>
/在形参列表处,可以直接写一个rest参数,也可以写形参
function add(...args) {
console.log(args);
}
console.log(add(1, 2, 3, 4, 5, 6, 7))```
把七个实参传到函数中,rest参数 ...args
就变成了一个数组args=[1,2,3,4,5,6,7]
两者的区别:
1.当3个点出现在形参上,或赋值运算符左侧,此时… 表示rest运算符(将元素转成数组)
2.当3个点出现在实参上,或赋值运算符右侧,此时… 表示展开运算符(将数组中的元素拆分成单个元素)
不适合使用箭头函数的场景:
1.箭头函数不能当一个类(构造器)
TypeError: Person is not a constructor
let Person = (name)=>{
this.name = name;
}
let p1 = new Person("xq");
2.箭头函数是没有原型对象的
<script>
let Person = (name) => {
this.name = name;
}
console.log(Person.prototype);
输出undefined 箭头函数是没有原型对象
</script>
3.给原型对象添加方法,最好不要使用箭头函数
Person.prototype.sayHello = () => {
console.log(this.name + '说: 吾好梦中杀人');
}
let p1 = new Person("曹操");
console.log(p1);
输出是: 说: 吾好梦中杀人 曹操并没有输出
以上三者不适用的共同原因是:箭头函数中没有this,看到箭头函数中的this,就需要往外看一层。
注意点:
1.箭头函数中没有this,箭头函数中的this需要往外找一层
2.不能使用call,bind,apply改变箭头函数中的this指向,原因是注意点1.