Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
一、语法变化
() => {}
如果函数只有一个参数，可以省略 ()
如果函数体中只有一句话，{} 和 return 都可以省略（返回值为对象除外）
不绑定 this。箭头函数 this 的指向由外围最近一层非箭头函数决定。如下，在对象声明的时候， value 和 getvalue() 都是 foo的内部属性(方法），则他们的外围自然是全局了。
var value = "小明" var foo = { value:"小红", getValue:() => console.log(this.value) } foo.getValue() // => 小明
示例：
// ES6之前的函数写法 function f(){ // 函数体 } function f1(arg){ // 函数体 } function f2(arg1,arg2){ // 函数体 } window.onload = function(){ // 函数体 } let f3 = function(){ // 函数体 } let arr = [10,20,30,40,50,60]; arr.sort(function(a,b){ return a - b; }) let f4 = function(arg){ return Math.sqrt(arg); } console.log(f4(9)) // ES6箭头函数写法 () => { // 函数体 } arg => { // 函数体 } (arg1,arg2) => { // 函数体 } window.onload = () => { // 函数体 } let f3 = () => { // 函数体 } let arr = [10,20,30,40,50,60]; arr.sort((a,b) => { return a - b; }) // 或 let arr = [10,20,30,40,50,60]; arr.sort((a,b) => a - b) let f4 = arg => Math.sqrt(arg); console.log(f4(9))
二、函数参数
- 不定参数：用来表示不确定参数个数。由 …(参数展开符) 加上一个具名参数标识符组成。具名参数只能放在参数的最后，并且有且只有一个不定参数。
// 收集参数 let f = (a,b,...args) => { console.log("a:",a,",b:",b,",args:",args); } f(10,20,30,40,50,60,70);// => a: 10 ,b: 20 ,args: (5) [30, 40, 50, 60, 70] // 展开数组 let arr = ["apple","banana","pear","kiwi fruit"]; console.log(...arr); // => apple banana pear kiwi fruit //或 let f = (a,b,c,d) => { console.log(a,b,c,d); // => apple banana pear kiwi fruit } f(...arr); let arr1 = [10,20,30], arr2 = [40,50,60], arr3 = [...arr1,...arr2]; console.log(arr3);// => (6) [10, 20, 30, 40, 50, 60] // 收集 -》 展开 let fn = (a, b) => console.log(a + b); let f = (...args) => fn(...args); //前面参数...args是收集参数，后面...args是展开传递 f(10, 20); // => 30
默认参数：函数声明时，给形参定义默认值；在函数调用时，如果传递了参数，则使用传递的参数值，否则使用默认值
let f = (a, b = 10, c = 20) => { console.log(a, b, c); } f(); //undefined 10 20 f(100); //100 10 20 f(100, 200); //100 200 20 f(100, 200, 300); //100 200 300 f(100, 200, 300, 400); //100 200 300
ES6 箭头函数相关知识
