为何该WebRTC示例中map()方法未写return仍可链式调用forEach？

问题分析 #

你观察到的问题是完全正确的，这段WebRTC官方文档的示例代码本身存在编写错误，不符合JS数组方法的设计逻辑。

• Array.map()的核心作用是将原数组的每一个元素经过转换后返回，生成一个长度和原数组一致的新数组。如果回调函数没有显式写return语句，默认返回值就是undefined，因此这段代码里map执行完返回的是一个全是undefined的数组。
• 后续forEach遍历的时候拿到的cameraOption全部都是undefined，调用listElement.add(undefined)不会产生任何效果，页面的相机下拉选框不会加载出任何选项，这属于官方文档的示例疏漏。

正确的改写方式 #

有两种常用的合理写法：

写法1：补全map的返回逻辑（符合原示例的链式调用思路）

function updateCameraList(cameras) {
    const listElement = document.querySelector('select#availableCameras');
    listElement.innerHTML = '';
    cameras.map(camera => {
        const cameraOption = document.createElement('option');
        cameraOption.label = camera.label;
        cameraOption.value = camera.deviceId;
        // 补全return，把创建的option元素放到map生成的数组里
        return cameraOption;
    }).forEach(cameraOption => listElement.add(cameraOption));
}

写法2：直接用forEach遍历（更符合语义的写法）

因为此处不需要生成新数组，仅需要遍历数组执行创建DOM、插入到页面的副作用操作，用forEach更符合方法的设计语义，不需要额外调用map：

function updateCameraList(cameras) {
    const listElement = document.querySelector('select#availableCameras');
    listElement.innerHTML = '';
    cameras.forEach(camera => {
        const cameraOption = document.createElement('option');
        cameraOption.label = camera.label;
        cameraOption.value = camera.deviceId;
        listElement.add(cameraOption);
    });
}

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