十堰网站建设公司手机最新产品新闻

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()};

延伸

数组初始化

1. 指定长度的初始化

   var vArray = new Array(8);

2. 不指定长度的初始化

   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