JavaScript笛卡尔积超简单实现算法示例
2019-05-15 本文已影响1人
中v中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS笛卡尔积算法</title>
</head>
<body>
<script>
function cartesianProductOf() {
return Array.prototype.reduce.call(arguments, function(a, b) {
var ret = [];
a.forEach(function(a) {
b.forEach(function(b) {
ret.push(a.concat([b]));
});
});
return ret;
}, [[]]);
}
console.log(cartesianProductOf(['1','3'],['a','b']))
</script>
</body>
附： vue 添加商品规格时的实现
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>goods sku</title> <link href="[https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css](view-source:https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css)" rel="stylesheet"> </head> <body> <div id="app"> <form class='form-inline'> <ul v-for="(c,name) in this.category"> <p>{{name}}</p> <label v-for="(unit,i) in c"> {{unit}} <span> </span> </label> <input v-model="newunit" class='form-control' value='' name='category_name'/> <button type="button" class="btn btn-primary btn-sm" @click="addUnit(name)">添加规格</button> </ul> <input v-model="newcategory" class='form-control' value='' name='category_name'/> <button type="button" class="btn btn-primary btn-sm" @click="addCategory">添加分类</button> </form> <table class='table '> <tr v-if="this.tableHeader!=''"> <th v-for='item in tableHeader'>{{item}}</th> <th>库存</th> <th>sku</th> </tr> <tr v-for="row in this.table"> <td v-for='(item,key) in row' >{{item}}</td> <td ><input v-model='row.price' class='form-control'/></td> <td ><input v-model='row.sku' class='form-control' /></td> </tr> </table> <p>数据：{{this.table}}</p> <button type="button" class="btn btn-primary btn-sm" @click="add">提交 查看console</button> </div> <script src="[https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js](view-source:https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js)"></script> </body> </html> <script type="text/javascript"> var vm = new Vue({
el: '#app',
data: {
newunit:'',
newcategory:'',
category:{},
table:[],
tableHeader:[],
selectCategory:[],
s:{},
},
watch : {
category:{
handler:function(category){
this.tableHeader =[];
this.selectCategory =[];
for(var i in category){
this.tableHeader.push(i);
this.selectCategory.push(category[i])
}
this.table = this.cartesianProductOf.apply(this,this.selectCategory);
var c = this.category;
},
deep: true
}
},
methods: {
addCategory: function() {
vm.$set(this.category,this.newcategory,[]);
this.newcategory = "";
},
addUnit:function(name){
this.category[name].push(this.newunit)
},
add:function(){
alert(this.table);
console.log(this.table);
},
cartesianProductOf:function(){//笛卡尔积
return Array.prototype.reduce.call(arguments,function(a, b) {
var ret = [];
a.forEach(function(a) {
b.forEach(function(b) {
ret.push(a.concat([b]));
});
});
return ret;
}, [[]]);
}
}
}) </script>
