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

Question

输入&输出

背景

（我的英语不是最好的）

嘿，我正在尝试制作一个游戏，教孩子们单词和字母。我用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']
    ]
];

---

抱歉我的英语不好，但提前谢谢！随便问什么！

Answer 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;
      });
    });
  });
}

Answer 2

尝试使用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);

Answer 3

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

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/