箭头函数的规范使用

箭头函数（没有谈this的指向问题）

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。 (param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression //相当于：(param1, param2, …, paramN) =>{ return expression; } // 当只有一个参数时，圆括号是可选的： (singleParam) => { statements } singleParam => { statements } // 没有参数的函数应该写成一对圆括号。 () => { statements }

例1 const materials = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ]; //array.findIndex(function(currentValue, index, arr), thisValue) //findIndex方法 //参数 描述 //currentValue 必需。当前元素 //index 可选。当前元素的索引 //arr 可选。当前元素所属的数组对象 //thisValue 可选。 传递给函数的值一般用 "this" 值。 //如果这个参数为空， "undefined" 会传递给 "this" 值 console.log(materials.finndIndex(element => element .length>8)); // 3

然而 ，基础函数表达式function（value）{ return value} 与箭头函数 (param1, param2, …, paramN) => { statements } 使用的频率都不尽相同，一直用也没怎么留意 但是 ，最近留意到一个bug 当你的函数表达式为 (param1, param2, …, paramN) => expression 的效果与 (param1, param2, …, paramN) => { statements }并不一致

addshop() { const listitem = { id: this.goodslist.id, count: this.$store.state.value, price: this.goodslist.sell_price }; const list = JSON.parse(window.localStorage.getItem("shop")); if (list == null) { this.local.push(listitem); window.localStorage.setItem("shop", JSON.stringify(this.local)); return false } /*console.log(list)* 此处标记A 后文引用/ //此处 我是用的是基础函数表达式 const n = list.findIndex(function(x){return x.id===listitem.id} ); //此处 我是用的是箭头函数表达式1 const m = list.findIndex((x)=>{return x.id===listitem.id} ); //此处 我是用的是箭头函数表达式2 const c = list.findIndex(x=> x.id===listitem.id); //此处 我是用的是箭头函数表达式3 const t = list.findIndex((x)=> x.id===listitem.id); //此处 我是用的错误函数表达式1 // const error = list.findIndex((x)=> {x.id===listitem.id}); // const error = list.findIndex(x=> {x.id===listitem.id}); console.log(n,'----',m,'-----',c,'-----',t'-----',error); if (n == -1) { list.push(listitem); } else { list[n].count+=listitem.count } window.localStorage.setItem("shop", JSON.stringify(list)); this.toast.success("添加成功"); }

此段函数，应用场景为购物车加购商品

加购商品时 会有商品独有id，商品数量，商品价格 以对象数据存储

以防刷新，数据丢失情况，存放于localStorage 以放后续数据更迭

分情况考虑 ，当第一次加过商品时，需创建localStorage，当第n次加购商品时，需要往localStorage增加对象数据

当第n次加购中，加购的商品，在之前加购过，那么localStorage不能存在两次加购数据，那么需要进行处理

我的处理方式为，使用数组findIndex方法 判断localStorage的数据是加购过我目前要加购的商品 ，可用商品id判断（id真是一个好东西），如果以前没加购过，那么直接可以向localStorage推送数据；否则，找到那个商品，支队该数据进行数量编辑，最后将更新后的数据推送localStorage即可

最后， 说明下我的错误情况 ，当我一不正规书写箭头函数时，findIdex也会执行 但是得到的索引结果为error=-1；而且A的结果是我后面别push后的list数据，似乎没有按照预编译格式执行。