wordpress多媒体,长沙网站排名优化,wordpress消息提示插件,网站建设招代理find
在向购物车添加某种规格的商品时#xff0c;查找购物车列表中是否已经存在该规格的商品
find()方法传入一个回调函数#xff0c;代表对数组每一项item的校验要求
返回数组中第一个符合条件的元素的值#xff0c;如果没有则返回undefined const item cartList.value…find
在向购物车添加某种规格的商品时查找购物车列表中是否已经存在该规格的商品
find()方法传入一个回调函数代表对数组每一项item的校验要求
返回数组中第一个符合条件的元素的值如果没有则返回undefined const item cartList.value.find((item) goods.skuId item.skuId);if (item) {// 找到了该规格商品的数量1item.count;} else {// 没找到数组加入该商品cartList.value.push(goods);}
reduce
用于计算购物车中商品的数量总数/ 用于计算购物车中的总金额
reduce()方法传入的参数为两个一个是用于累计的回调函数它将为数组中每一个元素依次执行回调函数另一个是初始值
返回累计值即回调函数中的第一个参数最后计算得到的结果 // 计算属性// 1. 总的数量 所有项的count之和const allCount computed(() cartList.value.reduce((a, c) a c.count, 0));// 0是初始值a是累加项,c是每一项// 2. 总价 所有项的count*price之和const allPrice computed(() cartList.value.reduce((a, c) a c.count * c.price, 0));
filter
用于计算购物车中被选中的商品的数量总数/用于计算购物车中被选中的商品总金额
filter()方法传入一个回调函数代表对数组每一项item的校验要求
返回一个新数组包含所有符合要求的元素 // 3.已选择数量const selectedCount computed(() cartList.value.filter((item) item.selected).reduce((a, c) a c.count, 0));// 4. 已选择商品价钱合计const selectedPrice computed(() cartList.value.filter((item) item.selected).reduce((a, c) a c.count * c.price, 0));
forEach
用于在购物车点击“全选”单选框购物车中的每一个商品都是选中/没有选中的状态
forEach()方法传入一个回调函数代表对数组每一项item的操作
返回undefined不返回新数组 // 全选功能const allCheck (selected) {cartList.value.forEach((item) (item.selected selected));};
every
用于计算当购物车中的每一个商品都被选中时“全选”单选框应处于选中状态 当存在购物车中的商品没有被选中时“全选”单选框应处于没有被选中的状态
every()方法用于检测数组中所有元素都符合指定条件 传入一个回调函数代表对数组中每一项item的校验要求回调函数返回true或false 返回一个布尔值如果数组中所有元素都通过校验则返回true否则返回false // 是否全选const isAll computed(() cartList.value.every((item) item.selected));
findIndex
用于寻找将要被删除的某种规格的商品所处数组中的下标值
并通过splice方法删除处于该下标的商品
findIndex()方法传入一个回调函数代表对数组每一项item的校验要求
返回数组中第一个符合条件的元素的下标位置如果没有符合条件的则返回-1 // 删除购物车中的商品const delCart async (skuId) {if (isLogin.value) {// 调用接口实现接口购物车中的删除功能await delCartAPI([skuId]);updateNewList()} else {// 思路// 1. 找到要删除项的下标值通过下标值删除该项 -splice// 2. 使用数组的过滤方法 -filterconst idx cartList.value.findIndex((item) skuId item.skuId);cartList.value.splice(idx, 1);}};
splice
小兔鲜项目中的例子同上
splice()方法用于在数组中删除、替换和插入元素参考博客js中的splice的三种用法删除替换插入_js splice替换-CSDN博客
array.splice(index,howmany,item1,.....,itemX) 传入第一个参数index为将要被删除的起始元素的下标值 传入第二个元素为从index下标值开始要删除的元素数量 传入的第三个item1及以后的参数表示为从该位置删除后插入的元素列表
返回被删除的元素组成的数组如果要获取被删除元素后的数组直接调用原来的数组即可
参考博客关于js中splice方法返回的结果_splice的返回值-CSDN博客
push
用于向购物车末尾添加商品
push()方法用于向数组末尾添加一个或多个元素 可以传入多个参数为向数组末尾添加的元素列表 参考博客JavaScript push() 方法添加元素 返回数组的新长度 const addCart async (goods) {const { skuId, count } goods;if (isLogin.value) {// 登录之后的加入购物车逻辑await insertCartAPI({ skuId, count });updateNewList()} else {// 添加购物车操作// 已添加过 -count 1// 没有添加过 -直接push// 思路 通过匹配传递过来的商品对象中的skuId能不能在cartList中找到找到了就是添加过const item cartList.value.find((item) goods.skuId item.skuId);if (item) {// 找到了item.count;} else {// 没找到cartList.value.push(goods);}}};
map
用于在向后端合并购物车接口传递参数时重组数组每一项的形式
map()方法用于对数组中每一个元素依次按照函数处理 传入一个回调函数代表对数组每一项item的操作 返回一个新数组新数组中的每个元素为原数组中的每个元素依次调用函数处理后的值 // 2. 定义获取接口数据的action函数const getUserInfo async ({ account, password }) {const res await loginAPI({ account, password });userInfo.value res.result;// 合并购物车的操作await mergeCartAPI(cartStore.cartList.map(item {return {skuId: item.skuId,selected: item.selected,count: item.count}}))cartStore.updateNewList()};
延伸
数组初始化
指定长度的初始化 var vArray new Array(8); 不指定长度的初始化 var vArray new Array();
vArray .push(1);var vArray [];
vArray .push(1); 3.直接对数组进行赋值 var vArray [1,2,3];
slice
slice()方法用于截取数组的一部分
array.slice(start, end) 传入的第一个参数start代表从哪个下标位置开始选取数组元素可为负数表示倒数第几个 传入的第二个参数end代表在哪个下标位置前结束可为负数表示倒数第几个
返回一个新的数组即截取后的数组
var arr [1,2,3,4,5];
console.log(arr.slice(1,5)) //[2, 3, 4, 5]
var arr [1,2,3,4,5];
console.log(arr.slice(-3)) //[3, 4, 5]
pop
pop()方法用于删除数组最后一个元素
不需要传递参数
返回被删除的元素
var arr [1,2,3];
console.log(arr.pop()) //3
console.log(arr) //1 2 shift
shift()方法用于删除数组首部的元素
不需要传递参数
返回被删除的元素
var arr [1,2,3];
console.log(arr.shift()) //1
console.log(arr) //2 3
unshift
push()方法用于向数组开头添加一个或多个元素
array.unshift(item1,item2, ..., itemX) 可以传入多个参数为向数组开头添加的元素列表 返回数组的新长度
var len arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
console.log(len); // 4
len arr.unshift(-2,-1);
console.log(arr); // [-2, -1, 0, 1, 2, 3]
console.log(len); // 6
indexof
indexof()方法用于查找数组中某个元素首次出现的位置
array.indexOf(item,start) 传入的第一个参数item代表要查找的元素 第二个参数可不传代表从哪个下标位置开始查找元素
若找到返回查找到的元素的位置如果没有找到返回-1
var arr [1,2,3,5,6,7];
console.log(arr.indexOf(6)) //4 返回索引位置。
console.log(arr.indexOf(8)) //如果是数组中没有的元素返回-1
concat
用于连接两个或多个数组
array1.concat(array2, array3,..., arrayX)
传入的参数为一个或多个数组
返回一个新数组即为连接后的数组
(参考:JavaScript concat() 方法 | 菜鸟教程)
const array1 [a, b, c];
const array2 [d, e, f];
const array3 array1.concat(array2);console.log(array3); // 输出[a, b, c, d, e, f]
const array1 [a, b, c];
const array2 [d, e, f];
const array3 [g, h, i];
const array4 array1.concat(array2, array3);console.log(array4); // 输出[a, b, c, d, e, f, g, h, i]
join
用于把数组中的所有元素连接为一个字符串
array.join(separator)
传入的参数为可以指定的分隔符可以省略该参数如果省略的话默认用逗号进行连接
返回连接而成的字符串
参考JavaScript join() 方法 | 菜鸟教程
var fruits [Banana, Orange, Apple, Mango];
var energy fruits.join();//Banana,Orange,Apple,Mango
var fruits [Banana, Orange, Apple, Mango];
var energy fruits.join( and );//Banana and Orange and Apple and Mango
