JavaScript返回含数组的对象赋值给innerHTML显示[object Object]的原因

问题原因 #

• 你的funWithArrays函数返回值是包含arr1、arr2两个数组的对象，当你直接把对象赋值给DOM元素的innerHTML属性时，JavaScript会自动调用对象的默认toString()方法做隐式类型转换，普通JS对象的toString()方法固定返回[object Object]，所以你看不到实际的数组内容。
• 你返回的对象本身的数据是完全正确的，你可以在控制台用console.log(funWithArrays(["we", "cream", "to", "this", "two"]))验证，能看到完整的对象结构和两个数组的内容。

解决方法 #

你可以先取出返回对象里的两个数组，转成可读的字符串格式之后再赋值给innerHTML，示例代码如下：

<script>
    function funWithArrays(arr) {
        const arr1 = []; //short string
        const arr2 = []; //long string
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].length <= 3) {
                arr1.push(arr[i]);
            } else {
                arr2.push(arr[i]);
            }
        }
        return {
            arr1,
            arr2
        };
    }
    // 先获取返回的对象
    const res = funWithArrays(["we", "cream", "to", "this", "two"]);
    // 把两个数组转成JSON字符串拼接后再赋值
    document.getElementById("results").innerHTML = `短字符串数组：${JSON.stringify(res.arr1)} <br> 长字符串数组：${JSON.stringify(res.arr2)}`;
</script>

运行后输出的内容就是你预期的：

短字符串数组：["we","to","two"] 
长字符串数组：["cream","this"]

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