foreach的基本使用方法filter的基本用法

indexOptions.value = resp.data

      indexOptions.value.forEach(item => {
        const arr = []
        if (item.key?.length) {
          item.key.forEach(obj => {
            const { count, department, division, key, name, personLiable } = obj
            const single = {
              count,
              department,
              division,
              personLiable,
              key,
              label: name,
              value: name
            }
            arr.push(single)
          })
          item.value = item.division
          item.label = item.division
          item.children = arr
          delete item.key
        }
      })
      console.log('data11', indexOptions.value)

foreach的基本使用方法filter的基本用法_第1张图片

如果你需要通过 forEach 修改原数组,建议用 forEach 里面的参数 2 和参数 3 来做,具体请看下面的标准做法

forEach() 通过参数 2、参数 3 修改原数组:(标准做法)

// 1、数组的元素是基本数据类型
let numArr = [1, 2, 3];

numArr.forEach((item, index, arr) => {
    arr[index] = arr[index] * 2;
});
console.log(JSON.stringify(numArr)); // 打印结果:[2, 4, 6]

// 2、数组的元素是引用数据类型时,直接修改对象
let objArr = [
    { name: '云牧', age: 28 },
    { name: '许嵩', age: 34 },
];

objArr.forEach((item, index, arr) => {
    arr[index] = {
        name: '小明',
        age: '10',
    };
});
console.log(JSON.stringify(objArr)); 
// 打印结果:[{"name":"小明","age":"10"},{"name":"小明","age":"10"}]

// 3、数组的元素是引用数据类型时,修改对象的某个属性
let objArr2 = [
    { name: '云牧', age: 28 },
    { name: '许嵩', age: 34 },
];

objArr2.forEach((item, index, arr) => {
    arr[index].name = '小明';
});
console.log(JSON.stringify(objArr2)); 
// 打印结果:[{"name":"小明","age":28},{"name":"小明","age":34}]
复制代码

总结

如果纯粹只是遍历数组,那么,可以用 forEach() 方法

但是,如果你想在遍历数组的同时,去改变数组里的元素内容,那么,最好是用 map() 方法来做,map() 方法本身会返回一个经过处理后全新的数组,不要用 forEach() 方法,避免出现一些低级错误

foreach的基本使用方法filter的基本用法_第2张图片

foreach的基本使用方法filter的基本用法_第3张图片

8、饼状图中间显示数据、文字

foreach的基本使用方法filter的基本用法_第4张图片

    series: [
                label: {
                    show: false,
                    position: 'center',
                    formatter: "{b} \n\n{c} 人"//数据
                },
                emphasis: {
                    label: {
                    show: true,
                    fontSize: '15',
                    fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
            ]

filter的使用:

需求:后端返回的数组中包含五个对象。每个对象有个type属性,要求前端取到type属性值为“业务组件”的对象。

this.tableData = res.data.data.list
          this.tableData=this.tableData.filter((item)=>{
           return item.type ==="智能算法"
          })

你可能感兴趣的:(javascript,node.js)