提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

js处理多规格效果demo（整理）

JS 处理 效果 整理 Demo 规格
2023-09-14 09:04:05 时间

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>处理多规格</title>
	</head>
	<body>

	</body>
	<script>
		var arrList = [{
				num1: '颜色',
				arr1: [{
					num2: '红'
				}, {
					num2: '黄'
				}, {
					num2: '蓝'
				}]
			},
			{
				num1: '重量',
				arr1: [{
					num2: '1kg'
				}, {
					num2: '2kg'
				}]
			},
			{
				num1: '码数',
				arr1: [{
					num2: '36码'
				}]
			},
		]
		// 把arrlist处理成list这种格式,并且arrlist和arrlist下面的arr1长度不固定
		var list = [{	//处理后的数据
				cen: '红-1kg-36码',
				jiage1: '',
				kucun: '',
			},
			{
				cen: '红-2kg-36码',
				jiage1: '',
				kucun: '',
			}
		]


		transformArrList(arrList)

		function transformArrList(arrList) {
			const productVariants = arrList.reduce((acc, category) => {
				const categoryVariants = category.arr1.map((variant) => ({
					[category.num1]: variant.num2
				}));
				return acc.length === 0 ?
					categoryVariants :
					acc.flatMap((item) =>
						categoryVariants.map((variant) => ({
							...item,
							...variant
						}))
					);
			}, []);

			let result = productVariants.map(i => {

				return {
					cen: Object.values(i).join('-'),
					jiage1: '',
					kucun: '',
				}
			})
			console.log(result);
			return result;
		}
	</script>
</html>

相关文章