ES6+新特性

一、整理ES6~ES13的新特性

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)
     } 会输出34
for (let i = 1; i <= 3; i++) {
         setTimeout(() => {
             console.log("i=", i);
         }, 1000)
     }由于let{}形成块级作用域,for循环形成了三次块级作用域,输出结果是i=1,i=2,i=3

二、let声明变量的特点

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

二、const关键字的特点

1.const声明常量不存在提升,所以也会形成暂时性死区
2.const与{}也会形成块级作用域
3.const也不能重复声明常量
4.const声明的常量必须直接赋值
5.const声明的常量,并不会挂载到GO上

三、如何理解暂时性死区

iftrue{
	num=888
let{}形成块级作用域
在使用let声明变量之前,不能使用这个变量,在之前的这一区域,叫做暂时性死区
	let num;
}

四、展开运算符和rest运算符有什么区别?

<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.

你可能感兴趣的:(es6,javascript)