ES6+新特性

powerfour

已于 2022-10-13 09:58:21 修改

阅读量220

点赞数

文章标签： es6 javascript

于 2022-10-10 20:39:40 首次发布

本文链接：https://blog.csdn.net/powerfour/article/details/127250940

版权

一、整理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)
     } 会输出3个4

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上

三、如何理解暂时性死区

if（true）{
	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);
    输出是： 说: 吾好梦中杀人  曹操并没有输出