为何JavaScript条件判断顺序会影响delete属性的执行结果？

核心问题在于JavaScript的if...else if是按顺序匹配条件的，一旦某个分支的条件成立，后续所有分支都会被直接跳过。

结合你调用的场景updateRecords(recordCollection, 2548, "tracks", "")来拆解：

• 第一个条件prop !== 'tracks' && value：prop是tracks，不满足，跳过。
• 第二个条件prop === 'tracks' && !records[id].hasOwnProperty(prop)：2548的记录里明确有tracks属性，不满足，跳过。
• 第三个条件prop === 'tracks' && records[id].hasOwnProperty(prop)：这个条件完全成立！代码会执行records[id][prop].push(value)——也就是往tracks数组里添加一个空字符串，此时后续的else if (!value)分支根本没机会触发。

当你把else if (!value)和第三个条件交换顺序后：

• 会先判断!value（此时value是空字符串，!value为true），直接执行delete records[id][prop]，后续的tracks相关分支被跳过，自然就实现了删除属性的预期效果。

修正后的代码示例 #

const recordCollection = {
  2548: {
    albumTitle: 'Slippery When Wet',
    artist: 'Bon Jovi',
    tracks: ['Let It Rock', 'You Give Love a Bad Name']
  },
  2468: {
    albumTitle: '1999',
    artist: 'Prince',
    tracks: ['1999', 'Little Red Corvette']
  },
  1245: {
    artist: 'Robert Palmer',
    tracks: []
  },
  5439: {
    albumTitle: 'ABBA Gold'
  }
};

function updateRecords(records, id, prop, value) {
  if(prop !== 'tracks' && value) {
    records[id][prop] = value
  } else if (!value) { // 优先处理值为空的删除逻辑
    delete records[id][prop]
  } else if (prop === 'tracks' && !records[id].hasOwnProperty(prop)) {
    records[id][prop] = [value]
  } else if (prop === 'tracks' && records[id].hasOwnProperty(prop)) {
    records[id][prop].push(value)
  }

  return records
}
console.log(updateRecords(recordCollection, 2548, "tracks", ""))

关键提醒 #

写if...else if分支时，一定要注意条件的优先级：更通用、需要优先执行的逻辑要放在前面。比如这里“值为空则删除属性”的逻辑，优先级高于“往tracks数组添加内容”，所以必须放在tracks相关条件的前面。

内容的提问来源于stack exchange，提问作者g4rv