【学习】es6（2）

2022.1.17

【1】解构赋值

解构： 表示分解数据结构；赋值： 给变量赋值。

1.数组解构

let [a, b, c] = [1, 2, 3];
 console.log(a)//1
 console.log(b)//2
 console.log(c)//3
//如果解构不成功，变量的值为undefined

注：数组解构中，“=”右边是数组，里面有3个值，分别为1、2、3，左边的中括号[ ]不是表示数组，而是表示结构。中括号内是用let关键字声明的变量。“=” 左、右两边是一一对应的关系。

2.对象解构

从对象中提取值，将提取出来的值，赋给另外的变量。

let person = { 
		name: 'zhangsan', 
		age: 20 
	}; 
let { name, age } = person;
console.log(name); // 'zhangsan' 
console.log(age); // 20

let {name: myName, age: myAge} = person; // myName myAge 属于别名
console.log(myName); // 'zhangsan' 
console.log(myAge); // 20

注： 对象解构中，“=”左边用大括号{}表示，大括号中依然是关键字let声明的变量；“=”的右边，是具体的被解构的对象。

对象解构，实际上是属性匹配。即变量名称匹配对象中属性的名称；

如果匹配成功，就将对象中属性的值，赋值给变量。

【2】箭头函数

作用： 用来简化函数定义语法；是ES6中新增的定义函数的方式。

1.语法规范

( ) => {}

():代表函数（小括号里面放形参）； =>:必须的符号，指向哪一个代码块；{}:函数体；

2.箭头函数的调用

通常，将箭头函数赋值给一个变量，变量名就是函数名，通过变量名来调用函数。

const fn = () => {}//代表把一个函数赋值给fn
<script>
        const fn =()=>{   // 小括号里放形参
            console.log(123);
        };
        fn();
</script>

A、普通写法：

 function sum(num1, num2) { 
     return num1 + num2; 
 }
B、省略{}大括号后的ES6写法

 //es6写法
 const sum = (num1, num2) => num1 + num2; 

2）如果 形参 只有一个，可以省略小括号()。

function fn (v) {
return v;
}
// 省略小括号后
const fn = v => v;