es6 concat不能与stringify一起正常工作(javascript)

在JavaScript中，Array.prototype.concat() 方法用于合并两个或多个数组，并返回一个新数组，而 JSON.stringify() 方法则用于将JavaScript对象或值转换为JSON字符串。如果你发现 concat() 和 JSON.stringify() 不能一起正常工作，可能是因为你对这两个方法的使用存在一些误解。

基础概念

concat(): 合并数组，不会改变原数组。
stringify(): 将JavaScript对象或值转换为JSON字符串。

可能的问题及原因

当你尝试将 concat() 方法的结果直接传递给 JSON.stringify() 时，通常不会出现问题。问题可能出现在你尝试合并的数组或对象中包含了不可序列化的值（如函数、undefined等）。

示例代码及解决方案

假设你有以下数组：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, {a: 6, b: function() {}}];

如果你尝试这样合并并序列化：

let combined = arr1.concat(arr2);
let jsonString = JSON.stringify(combined);
console.log(jsonString);

你会得到一个错误，因为对象中的函数是不可序列化的。

解决方案

移除不可序列化的值：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, {a: 6, b: function() {}}];

// 移除对象中的函数
arr2[2] = Object.assign({}, arr2[2], {b: undefined});

let combined = arr1.concat(arr2);
let jsonString = JSON.stringify(combined);
console.log(jsonString); // 输出: [1,2,3,4,5,{"a":6,"b":null}]

使用自定义的replacer函数：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, {a: 6, b: function() {}}];

function replacer(key, value) {
    if (typeof value === 'function') {
        return undefined; // 忽略函数
    }
    return value;
}

let combined = arr1.concat(arr2);
let jsonString = JSON.stringify(combined, replacer);
console.log(jsonString); // 输出: [1,2,3,4,5,{"a":6}]