这里的想法是计算从中间的距离（距离不允许对角线），如果足够近，则填上x，如果不够近，则填上o。
换句话说，“x”的外边缘应该总是从正方形中心移动相同的次数（不包括对角线），所以如果你所在的点在那个距离或更近，它应该是x，否则是o。

// the distance from one point to another, assuming we can only move
// left or right and up or down
const distance = (point_a, point_b) =>
  // distance left and right
  Math.abs(point_a[0] - point_b[0]) +
    // distance up and down
    Math.abs(point_a[1] - point_b[1]);

const make_pattern = (side_length) => {
  const halfish_length = Math.floor(side_length / 2);
  const middle = [halfish_length, halfish_length];
  
  return Array.from(
    { length: side_length },
    (_, row_i) => Array.from(
      { length: side_length },
      (_, col_i) => distance(middle, [col_i, row_i]) > halfish_length ? 'o' : 'x'
    )
  );
};

const draw_pattern = (side_length) =>
  make_pattern(side_length)
    .map((row) => row.join(''))
    .join("\n");

console.log(draw_pattern(5));
console.log(draw_pattern(7));

对于循环版本：

const distance = (point_a, point_b) =>
  Math.abs(point_a[0] - point_b[0]) + Math.abs(point_a[1] - point_b[1]);

const make_pattern = (side_length) => {
  const halfish_length = Math.floor(side_length / 2);
  const middle = [halfish_length, halfish_length];
  
  let rows = [];
  
  for(let row_i = 0; row_i < side_length; row_i++) {
    let cols = [];
    
    for(let col_i = 0; col_i < side_length; col_i++)
      cols.push( distance(middle, [col_i, row_i]) > halfish_length ? 'o' : 'x' );
    
    rows.push(cols);
  }
  
  return rows;
};

const draw_pattern = (side_length) =>
  make_pattern(side_length)
    .map((row) => row.join(''))
    .join("\n");

console.log(draw_pattern(5));
console.log(draw_pattern(7));

参考文献：

• Array.from() on MDN

如果你一次做一行，并使两边波动：

function drawPattern(X) {
  // Create an empty grid
  const grid = [];
  // Calculate the middle of the grid
  let middle = left = right = Math.floor(X / 2); // works because arrays are 0 based
  // Loop through each row of the grid
  for (let i = 0; i < X; i++) {
    // Create an empty row
    const row = [];
    // Loop through each column of the row
    let j = 0;
    for (; j < left; j++)   row.push("o"); // from 0 to left
    for (; j <= right; j++) row.push("x"); // from where we are now to right
    for (; j < X; j++)      row.push("o"); // from where we are now to end
    // Add the row to the grid
    grid.push(row.join('')); // join the items
    // count up or down
    left += i<middle ? -1 : 1; // how far down? if less than the middle move left
    right += i<middle ? 1 : -1; // how far down? if less than the middle move right
  }
  // Return the grid
  return grid.join('\n'); // join the rows
}
console.log(drawPattern(5))
console.log(drawPattern(7))

使用扩展和阵列。从并镜像操作系统

const drawPattern = X => {
  // Calculate the middle of the grid
  let middle = oLen = Math.floor(X / 2); // works because arrays are 0 based
  // Loop through each row of the grid using Array.from and map
  return Array.from({ length: X }).map((_, i) => {
    const o = Array.from({length:oLen}).fill("o");       // fill from start
    const x = Array.from({length:X-(oLen*2)}).fill("x"); // fill from last o
    oLen += i < middle ? -1 : 1;    
    return [...o,...x,...o] // spread to get copy - last o is repeat of first o
    .join('');   // join items 
  }).join('\n'); // join rows
};
console.log(drawPattern(5))
console.log(drawPattern(7))

我已经把代码分解成可管理的部分。解决这类问题的关键是将其分解为子问题。

// Generate a single row
function getRow(c1, n, c2, m) {
    const row = [];

    // Generate left side consisting of n characters
    for (let i=0; i<n; i++)
      row.push(c1);
  
    // Generate middle consisting of m characters
    for (let i=0; i<m; i++)
      row.push(c2);

    // Generate right side consisting of n characters 
    for (let i=0; i<n; i++)
      row.push(c1);
  
  return row;
}

// Generate grid data
function getGrid(c1, c2, p) {
    let grid = [];

    // Generate rows starting with 1 character in the middle
    // until p characters in the middle. 
    for (let i=1; i<=p; i+=2) {
        let m = i;
        let n = (p - i) / 2;
        let row = getRow(c1, n, c2, m);
        grid.push(row);
    }
  
    // Generate the second part of the grid's rows starting
    // at p-2 characters to avoid repeating the middle row
    // until 1 single character is left in the middle row.
    for (let i=p-2; i>=1; i-=2) {
        let m = i;
        let n = (p - i) / 2;
        let row = getRow(c1, n, c2, m);
        grid.push(row);
    }
  
    return grid;
}

function prettyPrint(grid) {
    for (const row of grid)
      console.log(row.join(''));
}

console.log('Printing patterns:');
prettyPrint(getGrid('o', 'x', 5));
console.log('');
prettyPrint(getGrid('o', 'x', 7));

console.log('Printing raw data:');
console.log(getGrid('o', 'x', 5));
console.log('');
console.log(getGrid('o', 'x', 7));

我想出了这个代码（一个非常简化的版本玩）
希望这个演示能教育你解决未来的问题！主要准则：

• 当具有信息（方向、画多少字符等）时。）-使用变量
• 尝试编写一个长而低效的代码来解决问题
• 测试边缘（例如：如果size = 1会发生什么）并优化代码
• 考虑在性能方面做得更好

快乐编码

const matrix = []
const size = 5 // control the size of the matrix

let start = parseInt(size / 2) // control the start point - in your case the middle
let count = 1 // control how many `x`s are we going to draw
let direction = -1 // control the direction of drawing

for (let i = 0; i < size; i++) {
  const row = []

  for (let j = 0; j < size; j++) {
    // as long as j is inside the drawing range - draw `x`
    row.push(j >= start && j < start + count ? 'x' : 'o')
  }

  start += direction // update start position for next line

  if (start < 0) { // if we need to change direction
    direction *= -1
    start += 2
  }

  count = count - direction * 2

  matrix.push(row)
}

console.log(matrix.join('\n')) // you should use a better printing method if you want a nice draw of the matrix