js数据重组（三个实用场景）

1. 问题：通常我们在使用vue时子组件需要向父组件传递数据时，我们想传递多条数据，有哪些方法呢？

首先我想到的方法有

1. 可以一个一个向父组件传递数据（这样太麻烦了，增加代码量，也不容易操作）

2. 可以使用本地存储（但是这种方法不太方便也会阻碍网站性能）

3. 这时可以使用数据重组方法（这种方法把所有需要传递的数据直接重组成新的对象，子组件传递仅需把这个对象传递过去，父组件就可以接收到了）

子组件向父组件传递多个数据（采用数据重组的方法）

let newRows = [] //生成一组新数据
                newRows.push({
                    item: item,
                    index: index
                })
                console.log('New的行数据', newRows,typeof(newRows))
                this.$emit('changeNav',newRows) //这里只能传递一个数据

父组件接收子组件传递的对象数据

changeNav(params){
                console.log('数据表切换按钮',params)
            }

这时就拿到传递的数据源了

2. 问题：除此之外，我们在使用uniapp页面间跳转传递数据时，通常只能传递一个字符串形式的数据，如果我们想要传递多条数据应该怎么做呢？***注意带%时候的问题****

首先，同样也有以上三种方法

1. 可以一个一个向父组件传递数据（这样太麻烦了，增加代码量，也不容易操作）

2. 可以使用本地存储（但是这种方法不太方便也会阻碍网站性能）

3. 这时可以使用数据重组方法（但是uniapp页面间跳转数据只能传递string而不能传递对象或者数组，这时就需要我们转换字符串了）

A页面跳转B页面，uniapp页面间跳转携带参数（数据重组＋转化字符串）

let newRows = [] //生成一组新数据
                newRows.push({
                    item: item,
                    carnum: this.sendsearch
                })
                console.log('New的行数据', newRows)
                let newStr = JSON.stringify(newRows)//JSON.stringify(数组)来把这个数组变成一个字符串
                let newData = newStr.replace(/%/g, '%25'); //先将带%字符串的转换统一处理
                let newsAll = encodeURIComponent(newData); //JSON.stringify(数组)来把这个数组变成一个字符串
                console.log(newsAll, '转换后的数组')
                uni.navigateTo({
                    url: '/pages/nsppackage/index/entrydata?item=' + newsAll
                })

B页面接收A页面传递的数据，onLoad方法接收上个页面传递的数据参数（转化字符串）

    onLoad(options) {
            console.log(options.item,'接收来的参数')
               //判断options.item是否为空 不然会因为json.parse解析undefined报错
                if (options.item) {
                  this.informs = JSON.parse(decodeURIComponent(options.item)); //json字符串转换为数组
                  console.log(this.informs,'接收来的通知单信息')
                }
        },

3. 问题：如果我们从后端返回的数据一些数据并不是我们想要的，这时应该怎么办呢？

首先我想到的方法有

1. 进行拿到的数据赋值给一个新数组，在进行数据重组（这个方法很实用，不过有时数据多的时候会很麻烦）

2. 这时可以使用map来进行给数组的某些字段重命名并组成新数组（非常使用哦）

举个例子

案例一

//这时我们只想要这个时间
            let data=[   //data的数据
              {"txt":"09:00-12:00","codId":"1","flgDel":"0","id":1},
              {"txt":"13:00-16:00","codId":"1","flgDel":"0","id":2},
              {"txt":"18:00-20:00","codId":"1","flgDel":"0","id":3}
            ]
            let time = data.map(item =>(item.txt))
            console.log(time)//控制台输出如下
            //['09:00-12:00', '13:00-16:00', '18:00-20:00']

案例二

//这时取我们想要的数据进行重新命名字段 
let data1=[  //新data数据
              {"txt":"张三","flgDel":"0","id":1,"school":'石家庄学院'},
              {"txt":"李四","flgDel":"0","id":2,"school":'保定学院'},
              {"txt":"王五","flgDel":"0","id":3,"school":'石家庄理工'},
              {"txt":"李四","flgDel":"0","id":2,"school":'保定学院'},
              {"txt":"王五","flgDel":"0","id":3,"school":'石家庄理工'},
              {"txt":"李四","flgDel":"0","id":2,"school":'保定学院'},
              {"txt":"王五","flgDel":"0","id":3,"school":'石家庄理工'},
            ]
            console.log(data1,'类型为',typeof(data1[0].txt),data1[0].txt)
            //只需一行map()
            let resion = data1.map(item =>({name: item.txt,id:item.id,school:item.school}))  //取返回来的对象为一个新对象
            console.log('输出类型',typeof(resion),resion)

非常使用的一些方法哦，希望可以帮到正在前端道路奋斗的小白们！！！