如何制作具有多维数组输入的函数，对其进行转换并输出新的多维数组答案

【问题标题】：How can I make a function which has a multidimensional array input, transforms it, and ouputs the new multidimensional array如何制作具有多维数组输入的函数，对其进行转换并输出新的多维数组
【发布时间】：2015-09-14 13:36:30
【问题描述】：

输入与输出

背景故事

（我的英语不是最好的）

嘿，我正在尝试开发一款游戏来教孩子们认识单词和字母。我用 HTML/CSS & JS(little JQuery) 和一点 PHP 来制作它。我必须建造一棵树，里面有叶子，里面有字母。我想构建很多关卡，但我必须自己输入一个非常大的数组（而且我知道应该可以自动完成）。

非常感谢您的帮助！

问题

我有一个多维数组，如下所示：

var words = [
    [
        ['SNEL'],
        ['WORD'],
        ['TIJD'],
        ['BORD'],
        [etc]
    ],
    [
        [BORDE]
        [etc]
    ],
    [
        etc
    ],
    [
        ['BEWUSTER']
    ]
];

我正在尝试构建一个将其输出到的函数：

var modifiedWords1 = [
    [
        ['img/Letters_normal/S.png', 'img/Letters_normal/N.png', 'img/Letters_normal/E.png', 'img/Letters_normal/L.png'],
        ['img/Letters_normal/W.png', 'img/Letters_normal/O.png', 'img/Letters_normal/R.png', 'img/Letters_normal/D.png'],
        [img/Letters_normal/etc]
    ],
    [
        ['img/Letters_normal/B.png', 'img/Letters_normal/O.png', 'img/Letters_normal/R.png', 'img/Letters_normal/D.png', 'img/Letters_normal/E.png']
        [etc]
    ],
    [
        etc
    ],
    [
        ['img/Letters_normal/B.png', 'img/Letters_normal/E.png', 'img/Letters_normal/W.png', 'img/Letters_normal/U.png', 'img/Letters_normal/S.png', 'img/Letters_normal/T.png', 'img/Letters_normal/E.png', 'img/Letters_normal/R.png']
    ]
];

还有这个：

var Modifiedwords2 = [
    [
        ['S.png', 'N.png', 'E.png', 'L.png'],
        ['W.png', 'O.png', 'R.png', 'D.png'],
        ['T.png', 'I.png', 'J.png', 'D.png'],
        ['B.png', 'O.png', 'R.png', 'D.png'],
        [etc]
    ],
    [
        ['B.png', 'O.png', 'R.png', 'D.png', 'E.png']
        [etc]
    ],
    [
        etc
    ],
    [
        ['B.png', 'E.png', 'W.png', 'U.png', 'S.png', 'T.png', 'E.png', 'R.png']
    ]
];

对不起，我的英语不好，但提前谢谢！随便问吧！

【问题讨论】：

什么是words？任何 4 个字母组合（没有双关语）？
您以错误的方式处理此问题。保留一个多维字母数组，然后为需要它的函数的路径添加一个附加参数，保持您的代码和您的数据 DRY。

标签： javascript jquery arrays function multidimensional-array

【解决方案1】：

由于到目前为止我们不知道您做了什么，这是一种使用原生Array.prototype.map 方法的方法，非常易于理解。它允许您遍历一个数组并返回一个新数组，该数组具有相同数量的元素，这些元素可能已被提供的函数转换。

var words = [
  [
    ["SNEL"],
    ["WORD"],
    ["TIJD"],
    ["BORD"]
  ],
  [
    ["BORDE"]
  ],
  [
    ["BEWUSTER"]
  ]
];

var modifiedWords1 = modifyWords(words, 'img/Letters_normal/');
var modifiedWords2 = modifyWords(words);

document.write(
  "<h3>modifiedWords1:</h3>" +
  "<pre>" + JSON.stringify(modifiedWords1, null, 4) + "</pre>" + 
  "<h3>modifiedWords2:</h3>" +
  "<pre>" + JSON.stringify(modifiedWords2, null, 4) + "</pre>"
);

// Uses:
// modifyWords([...], 'some/prefix/to/use/', '.someSuffixToUse');
// modifyWords([...], undefined, '.someSuffixToUse');
// modifyWords([...], 'some/prefix/to/use/'); // suffix would be '.png'
// modifyWords([...]); // suffix would be '.png'
function modifyWords(arr, prefix, suffix) {
  // default prefix to ''
  prefix = prefix || '';
  // default suffix to '.png'
  suffix = suffix || '.png';

  return arr.map(function mapInputArray(list) {
    return list.map(function mapWordArray(word) {
      // Create an array from a string by splitting with an empty string
      return word[0].split('').map(function mapLetterArray(letter) {
        return prefix + letter + suffix;
      });
    });
  });
}

【讨论】：

【解决方案2】：

你可以使用一点递归来解决这个问题：

function isArray(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
}

function process(arr, beforeStr, afterStr) {
    beforeStr = beforeStr || '';
    afterStr = afterStr || '';
    var len = arr.length;
    var copy = new Array(len);
    for(var i = 0; i < len; i++) {
        if(isArray(arr[i])) {
            copy[i] = process(arr[i], beforeStr, afterStr);
        } else {
            var letters = arr[i].split('');
            for(j = 0; j < letters.length; j++) {
                letters[j] = beforeStr + letters[j] + afterStr;
            }
            return letters;
        }
    }
    return copy;
}

var processed = process(words, '/some/path/name/', '.png');

JSFiddle：http://jsfiddle.net/dgrundel/17g2u1p4/

【讨论】：

【解决方案3】：

尝试使用Array.prototype.map()，String.prototype.split()

var words = [
  [
    ["SNEL"],
    ["WORD"],
    ["TIJD"],
    ["BORD"],
    ["etc"]
  ],
  [
    ["BORDE"],
    ["etc"]
  ],
  [
    ["etc"]
  ],
  [
    ["BEWUSTER"]
  ]
];

var modifyWords = function(arr, mod, beforeAfter) {
  return arr.map(function(val, key) {
    return val.map(function(v, k) {
      return v[0].split("").map(function(value, index) {
        return mod && beforeAfter 
               ? beforeAfter === "before" 
                 ? mod + value : value + mod
               : value
      })
    })
  });
};

var modifiedWords1 = modifyWords(words, "img/Letters_normal/", "before");
var modifiedWords2 = modifyWords(words, ".png", "after");

console.log("modifiedWords1:", modifiedWords1
            , "modifiedWords2:", modifiedWords2);

【讨论】：