添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
var students = [ { id: 35, name: '小明', age: 25, address: '环球中心',checked: true }, { id: 36, name: '杰伦', age: 41, address: '中国台湾' ,checked: true }, { id: 37, name: '不撸死', age: 46, address: '霉国' ,checked: true } // 最新数据 var data = [ { id: 35, name: '小明', age: 25, address: '环球中心',checked: false }, { id: 36, name: '杰伦', age: 41, address: '中国台湾' ,checked: false }, { id: 37, name: '不撸死', age: 46, address: '霉国' ,checked: false }, { id: 38, name: '大明', age: 46, address: '哈哈哈哈哈' ,checked: false }, { id: 39, name: '中明', age: 46, address: '中国四川' ,checked: false }
思路如下:

离开页面的时候将勾选的数据缓存,再次返回到页面时,将最新添加的数据和缓存的数据做对比,如果缓存中存在勾选,则更改对应的最新数据。

在做数据比对的时候,可以通过嵌套for循环,一层for循环遍历最新数据,二层for循环遍历缓存数据,如果缓存数据中对应的checked为true,则更改第一层for循环对应的值。虽然通过嵌套循环可以实现效果,但是循环的次数是两个数组长度的乘积,当数据量大的时候,这样会很耗性能。 这里推荐另一种办法,将缓存的数组转换成 Json对象 ,将唯一的 id 作为数组中每一项的 key ,将数组的每一项做为 value ,这样循环的时候只需要一层循环即可

具体代码如下:
// 缓存数据
var students = [
        { id: 35, name: '小明', age: 25, address: '环球中心',checked:true },
        { id: 36, name: '杰伦', age: 41, address: '中国台湾' ,checked:true},
        { id: 37, name: '不撸死', age: 46, address: '霉国' ,checked:true}
 // 最新数据
var data = [
        { id: 35, name: '小明', age: 25, address: '环球中心',checked:false },
        { id: 36, name: '杰伦', age: 41, address: '中国台湾' ,checked:false},
        { id: 37, name: '不撸死', age: 46, address: '霉国' ,checked:false},
        { id: 38, name: '大名', age: 46, address: '哈哈哈哈哈' ,checked:false},
        { id: 39, name: '中明', age: 46, address: '中国四川' ,checked:false}
    // 将数组转换为json对象
function Array2Json(arr, obj = {}) {
        arr.forEach(item => {
            obj[item.id] = item;
        return obj
    students  = Array2Json(students);
    // 此处可以用for循环,但是推荐使用while,因为while比for效率高
    let i = 0;
    while (i < data.length) {
      if (students[data[i].id]) {
        data[i].checked = true
      i++;
    // 最终得到的data就是还原了勾选状态的数据,可以直接渲染在界面上
    console.log(data)

 转载地址:https://segmentfault.com/a/1190000016281753