JavaScript新手求助：如何移除数组中的空白子数组？

我是JavaScript新手，现在遇到了数组处理的问题：

初始数据 #

["Argentina", "Maroon 5:50<br>"] ["Australia", "Maroon 5:224<br>"] ["Austria", "Maroon 5:42<br>"] ["Belgium", "Maroon 5:10<br>"] [""] ["Brazil", "Maroon 5:187<br>"] [""] ["Canada", "Maroon 5:160<br>"] [""] ["China", "Maroon 5:10<br>"] [""] [""] [""] [""] [""] [""] [""] [""] ["France", "Maroon 5:1533<br>"]

我的现有代码 #

$.each(resp.result.artists_detail, function(index, item) {
    var arr = [];
    var pop_val = [];
    var artistdetails="";
    for (var i = 0; i < resp.result.artists.length; i++) {
        arr.push(item[0].country_name);
        if(item[i].play_count != 0){
            artistdetails +=item[i].artist_name +':'+ item[i].play_count+'<br>';
        }else{
            arr.pop(artistdetails);
        }
    }
    arr.push(artistdetails);
    arrOfChart.push(arr);
});

期望得到的结果 #

["Argentina", "Maroon 5:50<br>"] ["Australia", "Maroon 5:224<br>"] ["Austria", "Maroon 5:42<br>"] ["Belgium", "Maroon 5:10<br>"] ["Brazil", "Maroon 5:187<br>"] ["Canada", "Maroon 5:160<br>"] ["China", "Maroon 5:10<br>"] ["France", "Maroon 5:1533<br>"]

我尝试过使用push和pop方法，但还是没办法移除那些空白数组，请问该怎么解决这个问题？

咱们先拆解下你现有代码里的问题，再给你两种可行的解决方案：

问题出在哪？ #

1. 你在循环里每次都执行arr.push(item[0].country_name)，这会重复往数组里塞同一个国家名，逻辑完全混乱了
2. arr.pop(artistdetails)是错误用法——pop()根本不需要参数，它只会删掉数组最后一个元素，你传进去的字符串完全没用
3. 不管artistdetails有没有内容，你最后都把arr塞进了arrOfChart，空白数组自然就留了下来

解决方案 #

方案一：生成子数组时就判断，只留有效数据（推荐）

直接修改你的循环逻辑，只有当收集到有效的播放数据时，才把国家+数据的数组添加到总列表里：

var arrOfChart = [];
$.each(resp.result.artists_detail, function(index, item) {
    let artistdetails = "";
    // 先收集该国家下的有效播放数据
    const artistsLength = resp.result.artists.length;
    for (let i = 0; i < artistsLength; i++) {
        if (item[i].play_count !== 0) {
            artistdetails += `${item[i].artist_name}:${item[i].play_count}<br>`;
        }
    }
    // 只有当有有效内容时，才添加到总数组
    if (artistdetails.trim() !== "") {
        arrOfChart.push([item[0].country_name, artistdetails]);
    }
});

方案二：生成完所有数组后统一过滤

如果不想大改原代码，也可以在最后用filter方法把空白数组筛掉：

// 假设arrOfChart是你生成的包含空白数组的总数组
arrOfChart = arrOfChart.filter(subArr => {
    // 过滤掉空数组，或者所有元素都是空白字符串的数组
    return subArr.length > 0 && subArr.some(item => item.trim() !== "");
});

小提示 #

• 循环里重复访问resp.result.artists.length会有点浪费性能，把它存在变量里会更高效
• 用trim()判断字符串是否为空，能避免空格、换行这类空白字符的干扰
• 如果你只需要处理Maroon 5的数据，可以在循环里加个判断item[i].artist_name === "Maroon 5"，这样更精准

内容的提问来源于stack exchange，提问作者paresh shiyal