数字化管理平台

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 箭头函数相关知识