javascript - 在 $.each 循环中，获取两种不同类型的对象返回值和未定义

Question

我有一个可以动态创建 key 的本地存储。它们基本上存储 'name' 和 'age'，每种情况都有不同的前缀。为了区分，我使用 endsWith() 方法。

我有一个函数，它将使用这两个数据.append到一个元素。问题是，目前调用函数，由于结果未定义，我无法使其工作:

// below I'm faking result of localStorage
var fakeStorage = {
  'aaa-name': 'John',
  'aaa-age': 20,
  'bbb-name': 'Robert',
  'bbb-age': 45,
  'ccc-name': 'James',
  'bbb-age': 30,
  'somethingUneeded': 'cars',
  'anotherSomethingUneeded': 'money'
}

$.each(fakeStorage, function (key, value) {
  if (!key.endsWith('name') && !key.endsWith('age')) {
      return
  }
  var name
  var age
  if (key.endsWith('name')) {
    name = value
  } else {
    // get results of "age"
    age = value
  }
  console.log(name)
  // returns: 
  // John
  // undefined
  // Robert
  // undefined
  // James
  // undefined

  console.log(age)
  // returns: 
  // 20
  // undefined
  // 45
  // undefined
  // 30
  // undefined

  // Here's the function I need for the sake of undertanding.
  // with the above output I can't call it due to undefined
  // functionToAppendBoth(name, age)
})

如何处理该代码以便可以跳过“未定义”值？我用 CodePen 做了一个当前结果:http://codepen.io/anon/pen/ZLRjNg?editors=1010

Answer 1

您可以创建一个新对象并为其分配稍后可以轻松使用的值，

我可以想到这样的结构:

{
  name: [],
  age: []
}

示例片段:

// below I'm faking result of localStorage
var fakeStorage = {
  'aaa-name': 'John',
  'aaa-age': 20,
  'bbb-name': 'Robert',
  'bbb-age': 45,
  'ccc-name': 'James',
  'bbb-age': 30,
  'somethingUneeded': 'cars',
  'anotherSomethingUneeded': 'money'
}
var tempObj = {
  name: [],
  age: []
};
$.each(fakeStorage, function(key, value) {
  if (!key.endsWith('name') && !key.endsWith('age')) {
    return
  }
  if (key.endsWith('name')) {
    tempObj.name.push(value)
  } else {
    tempObj.age.push(value)
  }
});
console.log(tempObj);

$.each(tempObj.name, function(index) {
  console.log(tempObj.name[index] + ' ' + tempObj.age[index]);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或者我们可以进行条件检查，看看我们是否有姓名和年龄。

示例片段:

// below I'm faking result of localStorage
var fakeStorage = {
  'aaa-name': 'John',
  'aaa-age': 20,
  'bbb-name': 'Robert',
  'bbb-age': 45,
  'ccc-name': 'James',
  'bbb-age': 30,
  'somethingUneeded': 'cars',
  'anotherSomethingUneeded': 'money'
}
var tempObj = {
  name: '',
  age: ''
};
$.each(fakeStorage, function(key, value) {
  if (!key.endsWith('name') && !key.endsWith('age')) {
    return
  }
  if (key.endsWith('name')) {
    tempObj.name = value
  } else {
    tempObj.age = value
  }
  if (tempObj.name && tempObj.age) {
    console.log(tempObj.name + ' ' + tempObj.age);
    //call desired function here;
    tempObj = {
      name: '',
      age: ''
    };
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>