JavaScript中安全地向对象属性数组添加元素的策略与实践

var watchObject = {};
var data = { room: "23", videoId: "blah" }; // 假设 data.room 和 data.videoId 已定义

// 第一次尝试：'23' 不存在于 watchObject 中
if (data.room in watchObject) {
    // 此分支不会执行
} else {
    // '23' 不存在，直接赋值为 data.videoId
    watchObject[data.room] = data.videoId; // watchObject 现在是 { "23": "blah" }
}

// 第二次尝试：'23' 存在，但其值是字符串 "blah"
data.videoId = "bleh"; // 假设 data.videoId 更新为 "bleh"
if (data.room in watchObject) {
    // 此时 watchObject["23"] 的值是 "blah" (一个字符串)，而不是数组
    watchObject[data.room].push(data.videoId); // 错误发生：对字符串调用 push 方法
} else {
    // 此分支不会执行
}

var watchObject = {};

/**
 * 安全地向指定房间的视频列表中添加视频ID
 * @param {string} room - 房间ID
 * @param {string} videoId - 视频ID
 */
function addVideoToRoom(room, videoId) {
    // 方案1A: 检查是否为 null 或 undefined
    // watchObject[room] == null 会同时捕获 undefined (属性不存在) 和 null
    if (watchObject[room] == null) {
        watchObject[room] = []; // 如果不是数组，则初始化为空数组
    }
    // 现在可以安全地向数组中添加元素
    watchObject[room].push(videoId);
}

// 示例用法：
addVideoToRoom("23", "video1"); // watchObject: { "23": ["video1"] }
addVideoToRoom("23", "video2"); // watchObject: { "23": ["video1", "video2"] }
addVideoToRoom("42", "videoA"); // watchObject: { "23": ["video1", "video2"], "42": ["videoA"] }

console.log(watchObject);
// 预期输出: { '23': [ 'video1', 'video2' ], '42': [ 'videoA' ] }

/**
 * 更严格地向指定房间的视频列表中添加视频ID
 * @param {string} room - 房间ID
 * @param {string} videoId - 视频ID
 */
function addVideoToRoomRobust(room, videoId) {
    // 方案1B: 使用 Array.isArray() 严格检查是否为数组
    if (!Array.isArray(watchObject[room])) {
        watchObject[room] = []; // 如果不是数组，则初始化为空数组
    }
    watchObject[room].push(videoId);
}

// 示例用法：
addVideoToRoomRobust("55", "clipX");
console.log(watchObject); // { '23': [ 'video1', 'video2' ], '42': [ 'videoA' ], '55': ['clipX'] }

var watchObjectES6_OR = {};

/**
 * 使用逻辑或赋值操作符安全地添加视频ID
 * @param {string} room - 房间ID
 * @param {string} videoId - 视频ID
 */
function addVideoToRoomES6_OR(room, videoId) {
    // 如果 watchObjectES6_OR[room] 是假值 (包括 undefined, null, "", 0 等)，则赋值为 []
    watchObjectES6_OR[room] ||= [];
    watchObjectES6_OR[room].push(videoId);
}

// 示例用法：
addVideoToRoomES6_OR("10", "track1"); // watchObjectES6_OR: { "10": ["track1"] }
addVideoToRoomES6_OR("10", "track2"); // watchObjectES6_OR: { "10": ["track1", "track2"] }
console.log(watchObjectES6_OR);
// 预期输出: { '10': [ 'track1', 'track2' ] }

var watchObjectES6_NULLISH = {};

/**
 * 使用空值合并赋值操作符安全地添加视频ID
 * @param {string} room - 房间ID
 * @param {string} videoId - 视频ID
 */
function addVideoToRoomES6_NULLISH(room, videoId) {
    // 如果 watchObjectES6_NULLISH[room] 是 null 或 undefined，则赋值为 []
    watchObjectES6_NULLISH[room] ??= [];
    watchObjectES6_NULLISH[room].push(videoId);
}

// 示例用法：
addVideoToRoomES6_NULLISH("20", "songA"); // watchObjectES6_NULLISH: { "20": ["songA"] }
addVideoToRoomES6_NULLISH("20", "songB"); // watchObjectES6_NULLISH: { "20": ["songA", "songB"] }
console.log(watchObjectES6_NULLISH);
// 预期输出: { '20': [ 'songA', 'songB' ] }