javascript - 如何在添加新元素的同时替换空格？

Question

我有一个按如下方式填充的元素阶梯数组:

class Funnel{
    constructor() {
        this.funnelContents = [];
        this.layer = 0;
    }
    
    get content() {
        return this.funnelContents;
    }

    fill(...nums) {
        let index, startIndex = 0;
        for(let i = 0; i < this.funnelContents.length; i++){
            while ((index = this.funnelContents[i].indexOf(' ', startIndex)) > -1 && nums.length > 0) {
                    this.funnelContents[i][index] = nums.shift();
                    startIndex = index + 1;
            }
        }
        return nums
            .splice(0, 15 - this.funnelContents.reduce((count, row) => count + row.length, 0))
            .filter(num => num < 10)
            .reduce((arr, num) => {
                if (this.funnelContents.length) {
                    this.funnelContents[this.funnelContents.length - 1] = this.funnelContents[this.funnelContents.length - 1].filter(char => char !== ' ');
                    if ((this.funnelContents[this.layer] || []).length !== this.funnelContents[this.layer - 1].length + 1) {
                        this.funnelContents[this.layer] = [...(this.funnelContents[this.layer] || []), num];
                    } else {
                        this.layer++;
                        this.funnelContents[this.layer] = [num];
                    }
                }
                else {
                    this.layer++;
                    this.funnelContents = [...this.funnelContents, [num]];
                }
            }, []);

    }

    toString() {
        let str = '', nums = '', spacesCount = 1;
        for(let i = 5; i > 0; i--){
            str += '\\';
            for(let j = 0; j < i; j++) {
                if (this.funnelContents[i - 1] !== undefined) {
                    if (this.funnelContents[i - 1][j] !== undefined) {
                        nums += this.funnelContents[i - 1][j];
                    } else {
                        nums += ' ';
                    }
                } else {
                    nums += ' ';
                }
            }
            str += nums.split('').join(' ') + '\/\n' + ' '.repeat(spacesCount);
            nums = '';
            spacesCount++;
        }
        return str.substring(0, str.length - 6);
    }
}

let funnel1 = new Funnel();
let funnel2 = new Funnel();
let funnel3 = new Funnel();
let funnel4 = new Funnel();
let funnel5 = new Funnel();
let funnel6 = new Funnel();
let funnel7 = new Funnel();

funnel1.fill(5,4,3,4,5,6,7,8,9,3,2,4,5,6,7,5,6,7,8); //15 elements will be added, the rest are ignored

funnel2.fill(5,4,3,4,5,6,7,8);
funnel2.fill(9,3,2,4,5,6,7);

funnel3.fill(' ');
funnel3.fill(1,5,7);

funnel4.fill(1,2,3);
funnel4.fill(' ');
funnel4.fill(3,4,5);

funnel5.fill(1);
funnel5.fill(' ', ' ', ' ');
funnel5.fill(8,2,1);

funnel6.fill(' ',' ');
funnel6.fill(1,8,2,1);

funnel7.fill(' ',' ',' ',' ',' ');
funnel7.fill(1,8,2,1);

console.log(funnel1.toString()); // the output is as expected.
console.log(funnel2.toString()); // the same result
console.log(funnel3.toString()); // expected [ [1], [5,7] ] and it really is
console.log(funnel4.toString()); // expected [ [1], [2,3], [3,4,5] ] and it really is
console.log(funnel5.toString()); // expected [ [1], [8,2], [1] ] and it really is
console.log(funnel6.toString()); // expected [ [1], [8,2], [1] ] but got [ [], [1,8], [2], [1] ]
console.log(funnel7.toString()); // nothing is changed

在这里您可以看到，在函数 fill 的最开始处，编写了一个循环来插入输入的元素而不是空格。 我人为加了空格，其实还有另外一个函数加的。但是:

1) 由于某些原因，这并不总是有效，对于示例中的数组，它不起作用。使用更简单的空间搜索算法，它也不能正常工作:

for (let i = 0; i < this.funnelContents.length; i++) {
      for (let j = 0; j < this.funnelContents[i].length; j++) {
        if(this.funnelContents[i][j] === ' '){
            this.funnelContents[i][j] = nums.shift();
        }
    }
}

2) 看起来很麻烦，我想更优雅地做一些类似的事情。我在想两个 for 循环来找到我需要的元素，但我仍然希望我可以在 reduce 函数中实现插入而不是空格。

Answer 1

您可以采用单个循环并随着长度的增加对子字符串进行切片。

function funnel(array) {
    var i = 0,
        l = 0,
        result = [];

    while (i < array.length) result.push(array.slice(i, i += ++l));
    return JSON.stringify(result);
}
console.log(funnel([1]));
console.log(funnel([1, 2]));
console.log(funnel([1, 2, 3]));
console.log(funnel([1, 2, 3, 4]));
console.log(funnel([1, 2, 3, 4, 5]));
console.log(funnel([1, 2, 3, 4, 5, 6]));
console.log(funnel([1, 2, 3, 4, 5, 6, 7]));
console.log(funnel([1, 2, 3, 4, 5, 6, 7, 8]));
console.log(funnel([1, 2, 3, 4, 5, 6, 7, 8, 9]));
console.log(funnel([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]));
console.log(funnel([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]));
console.log(funnel([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]));
console.log(funnel([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]));
console.log(funnel([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]));
console.log(funnel([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]));

.as-console-wrapper { max-height: 100% !important; top: 0; }

据我了解评论，你有一个给定样式的数组，计数递增，但有些元素是空格，应该用给定的数据替换这个元素。

在这种情况下，用于获取正确结果集的嵌套循环和用于从数据数组获取值的另一个索引应该可以工作。

class Funnel {
    constructor() {
        this.funnelContents = [];
    }

    get content() {
        return this.funnelContents;
    }

    fill(...nums) {
        var i = 0,
            j = 0,
            l = 1,
            k = 0,
            target = this.funnelContents;
        
        while (k < nums.length) {
            if (!target[i]) target.push([]);
            if ([undefined, ' '].includes(target[i][j])) target[i][j] = nums[k++];
            if (++j === l) {
                if (++i > 4) break; // max 15 elements in result set
                j = 0;
                l++;
            }
        }
    }
}

var funnel = new Funnel;

funnel.fill(' ', ' ', ' ', ' ');
console.log(JSON.stringify(funnel.content));

funnel.fill(1, 2, 3, 4, 5, 6, 7, 8, 9);
console.log(JSON.stringify(funnel.content));

funnel.fill(10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20);
console.log(JSON.stringify(funnel.content));