Question

输入＆amp;输出

背景故事

（我的英语不是最好的）

嘿，我正在努力建立一个能让孩子们了解文字和字母的游戏。我正在使用HTML / CSS＆amp; JS（小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方法的方法，这对于理解非常有用。它允许您迭代一个数组并返回一个新数组，该数组具有可能由所提供函数转换的相同数量的元素。

＆＃13;

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

＆＃13;

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/

如何创建具有多维数组输入的函数，对其进行转换并输出新的多维数组

输入＆amp;输出

3 个答案: