当前位置: 首页 > news >正文

JS实现古诗竖排从右至左

一个老题目,将下面古诗文由横排,变成古文竖排模式:

静夜思 李白
床前明月光,
疑似地上霜。
举头望明月,
低头思故乡。

变成:

低|举|疑|床|静
头|头|似|前|夜
思|望|地|明|思
故|明|上|月| 
乡|月|霜|光|李
。|,|。|,|白

1.原始文本转成二维数组,简化起见,暂时去掉标点符号和标题作者:

console.log("床前明月光\n疑似地上霜\n举头望明月\n低头思故乡".split(/\n/).map( v => v.split(''))
);

输出:

[[ '床', '前', '明', '月', '光' ],[ '疑', '似', '地', '上', '霜' ],[ '举', '头', '望', '明', '月' ],[ '低', '头', '思', '故', '乡' ]
]

直接一行行输出的时候,就是横排输出,变成竖排,刚好是行列互换,在二维数组、矩阵中,就是矩阵转置transpose,4x5的矩阵行列互换后,变成5x4,现在要实现一个transpose函数:

let arr = [[1, 2, 3],[4, 5, 6]
];
// 取首行,循环每一列,循环列的时候,取对应列的元素变成行返回,如果某行元素不足首行,可以填充空白字符
console.log( arr[0].map((_, col) =>arr.map(row => row[col]))
);

转换后变成:

[ [ 1, 4 ], [ 2, 5 ], [ 3, 6 ] ]

封装成一个函数:

// tranpose函数实现有很多种,这是最简单一种
let transpose = arr => {return arr[0].map((_, col) =>arr.map(row => row[col]));
};
console.log( transpose("床前明月光\n疑似地上霜\n举头望明月\n低头思故乡".split(/\n/).map( v => v.split('')))
);

输出:

[[ '床', '疑', '举', '低' ],[ '前', '似', '头', '头' ],[ '明', '地', '望', '思' ],[ '月', '上', '明', '故' ],[ '光', '霜', '月', '乡' ]
]

变成字符串输出:

let transpose = arr => {return arr[0].map((_, col) =>arr.map(row => row[col]));
};
console.log( transpose("床前明月光\n疑似地上霜\n举头望明月\n低头思故乡".split(/\n/).map( v => v.split(''))).map( row => row.join("|") ).join("\n")
);

输出:

|||低
前|||头
明|||思
月|||故
光|||

现在是从左到右,要变成从右向左,每一行还需要先反转数组:row.reverse()

let transpose = arr => {return arr[0].map((_, col) =>arr.map(row => row[col]));
};
let str = transpose("床前明月光\n疑似地上霜\n举头望明月\n低头思故乡".split(/\n/).map( v => v.split('')))
.map( row => row.reverse().join("|") )
.join("\n");
console.log(str);

输出:

低|举|疑|床
头|头|似|前
思|望|地|明
故|明|上|月
乡|月|霜|光

如果不想定义函数,可以用reduce来实现:

console.log([[1, 2, 3],[4, 5, 6]].reduce((s, a) => (a.map((v, j)=> s[j] = (s[j] || []).concat([v])), s), [])
);

输出:

[ [ 1, 4 ], [ 2, 5 ], [ 3, 6 ] ]

reduce改写:

let str = '静夜思 李白\n床前明月光,\n疑似地上霜。\n举头望明月,\n低头思故乡。'.split(/\n/)
.map( v => v.split('') )
.reduce((s, a) => (a.map((v, j)=> s[j] = (s[j] || []).concat([v])), s), [])
.map( d => d.reverse().join('|') )
.join('\n');
console.log(str);

输出:

低|举|疑|床|静
头|头|似|前|夜
思|望|地|明|思
故|明|上|月| 
乡|月|霜|光|李
。|,|。|,|白

ruby内置了transpose函数:

# puts "静夜思 李白\n床前明月光,\n疑似地上霜。\n举头望明月,\n低头思故乡。".split(/\n/).map(&:chars).transpose.map{ it.reverse * '|' } * "\n"
# csdn的 ruby 版本过低,上面代码不能正常运行
puts "静夜思 李白\n床前明月光,\n疑似地上霜。\n举头望明月,\n低头思故乡。".split(/\n/).map(&:chars).transpose.map{|it| it.reverse.join('|') }.join("\n")

输出:

低|举|疑|床|静
头|头|似|前|夜
思|望|地|明|思
故|明|上|月| 
乡|月|霜|光|李
。|,|。|,|白

完。

http://www.xdnf.cn/news/549163.html

相关文章:

  • 谈谈jvm的调优思路
  • c++学习方向选择说明
  • [软件工程]第二章题目汇总
  • MySQL 8.0窗口函数详解
  • 48、c# 中 IList 接⼝与List的区别是什么?
  • Gin--Blog项目-flags文件解析
  • RK3576 Android 14.0 SDK开发指南(第一集)
  • 丝杆升降机在锂电行业的自动化应用有什么?
  • Unity-编辑器扩展
  • 2025年护网行动蓝队防御全解析:构建智能动态防御体系
  • Raft算法学习(1)博士论文大纲
  • Go学习教程(附电子书资料)
  • 桥梁凝冰在线监测装置:科技守护道路安全的新防线
  • Python入门手册:Python简介,什么是Python
  • C++之fmt库介绍和使用(2)
  • GPS模块_亿佰特E108-GN04D_u-center2调试
  • Linux:面试题
  • CAU数据库class3 关系型数据库基础
  • WebSocket心跳机制
  • 85.评论日记
  • 【C++算法】69.栈_验证栈序列
  • C++类与对象--7 特性三:多态
  • # YOLOv5:目标检测的新里程碑
  • 日语学习-日语知识点小记-构建基础-JLPT-N4阶段(25):受身形(3)
  • GitHub 自动认证教程
  • cv2.VideoWriter_fourcc(*‘mp4v‘)生成的视频无法在浏览器展
  • Fast Video Cutter Joiner v6.8.2 视频剪切合并器汉化版
  • 第10天-Python操作MySQL数据库全攻略:从基础连接到高级应用
  • 云计算与大数据进阶 | 27、存储系统如何突破容量天花板?可扩展架构的核心技术与实践—— 分布式、弹性扩展、高可用的底层逻辑(上)
  • 第7天-Python+PyEcharts实现股票分时图实战教程