JavaScript中onclick事件传递数组参数时接收的是[object,object]，需要转为字符串传递

 问题描述

在JavaScript中定义button的onclick点击事件，传递参数的时候，某个参数是数组，在方法体里面接收到的值是[object,object]。

一开始在网上找解决办法，使用JSON.stringify(arr)传递数组参数，还是不行，出现解析失败问题。

直到看到下面这篇博文的时候解决了问题：

js中onclick事件中传入object对象参数，将object对象转成字符串_js click传递object-CSDN博客

var data = {"report_file_name":"128_20180601152433_Report_gl5lmm.pdf",
"downCount":27,
"userCount":45,
"role_id":1,
"report_id":1
};
var dom = '<li οnclick=‘'+
+'"readPdf(' + JSON.stringify(data).replace(/"/g, '&quot;')+')">';

原文链接：https://blog.csdn.net/lanfwq/article/details/80570530

解决办法

使用JSON.stringify(arr).replace(/"/g, '"')传递数组参数，示例：
我传递了两个参数给点击事件方法modifyFunc，第一个参数是字符串，第二个参数是数组。

let str= 'tabTest';
let arr= [];//数组，这里用空数组代指，比如从后台返回的List
let html = '<button onclick="modifyFunc(\''+str+'\', '+JSON.stringify(arr).replace(/"/g,'&quot;')+')">修改</button>';
$("#dsDiv")..append(html);

function modifyFunc(str, arr) {
    var arr= arr; //这里的arr是字符串数组，而不是[object,object]
    ...
    ...
}

问题分析

将数组参数转换为JSON字符串是一个很好的做法，这样可以确保数组中的数据以正确的格式传递给函数。然而，如果你在转换过程中遇到问题，可能是因为字符串中的某些特殊字符没有被正确解析处理。

使用replace(/"/g, '"')是一个很好的解决方案，它可以将双引号（"）替换为转义的双引号（"），这样可以确保字符串在传递时不会被错误地解析。

如果你在函数中接收的arr参数仍然是数组，那么你可能需要使用JSON.parse()将字符串转换回数组。例如：

function modifyFunc(str, arr) { 
    var arr= JSON.parse(arr); 
    // 然后你可以像平常一样使用arr数组 
}