比较值

Question

事实：

• 我有几个阵列（任何地方从2到几十个），全部由CSS类。
• 每个阵列中的每个类都使用以下命名空间之一：'alignment__','font__','leading__','size__'或'tracking__'。
• 数组中的值通常不会以相同的顺序排列。
• 数组不会总是包含每个名称空间类的值。

我需要什么：

• 如果每个命名空间的值是相同每个阵列中，我需要返回className不的命名空间。
• 如果任何命名空间的值是不等于在任何数组中，我需要返回false。

例子：

这里是阵列的集合的一个小例子，我将要使用：

p1 = ["alignment__left", "size__18px", "leading__170", "tracking__0", "font__Operator--1408"]; 
p2 = ["size__18px", "tracking__0", "font__Operator--1408", "alignment__left"]; 
p3 = ["alignment__left", "size__18px", "leading__170", "tracking__0", "font__Operator--1408"]; 
p4 = ["alignment__left", "size__18px"]; 

阵列的这汇集应该返回类似：

return { 
    alignment: 'left', 
    font: false, 
    leading: false, 
    size: '18px', 
    tracking: false 
} 

对此有何建议？我从这个角度来看每个角度看起来都很慢并且效率低下。我在这个项目中使用lodash，以防万一简化。

Answer 1

这里的东西我扔在一起。

'use strict'; 
const originalArrays = [ 
    ["alignment__left", "size__18px", "leading__170", "tracking__0", "font__Operator--1408"], 
    ["size__18px", "tracking__0", "font__Operator--1408", "alignment__left"], 
    ["alignment__left", "size__18px", "leading__170", "tracking__0", "font__Operator--1408"], 
    ["alignment__left", "size__18px"] 
] 
const countInArray = (array, what) => { 
    lt count = 0; 
    for(let i = 0; i < array.length; i++) { 
    if(array[i] === what) { 
     count++; 
    } 
    } 
    return count; 
}; 
const theFunction = (originalArrays) => { 
    const flattenedArray = originalArrays.reduce((a, b) => a.concat(b)); 
    let interimResults = []; 
    let results = {}; 

    for(let item of flattenedArray) { 
    if(countInArray(flattenedArray, item) === originalArrays.length) { 
     if(interimResults.indexOf(item) === -1) { 
     interimResults.push(item) 
     } 
    } else { 
     results[item.split('__')[0]] = false; 
    } 
    } 

    for(let result of interimResults) { 
    let parts = result.split('__'); 
    results[parts[0]] = parts[1]; 
    } 
    return results; 
}; 

Answer 2

下面为一个简单的方法来实现，使用lodash：

const u = require('lodash'); 

var p1 = ["alignment__left", "size__18px", "leading__170", "tracking__0", "font__Operator--1408"]; 
var p2 = ["size__18px", "tracking__0", "font__Operator--1408", "alignment__left"]; 
var p3 = ["alignment__left", "size__18px", "leading__170", "tracking__0", "font__Operator--1408"]; 
var p4 = ["alignment__left", "size__18px"]; 

// I will obtain the unique values from the arrays given using the `union` method: 
var union = u.union(p1, p2, p3, p4) 

// Then, I will create an array of unique values that are included in all given arrays. 
var inter = u.intersection(p1, p2, p3, p4) 

// Finally, you can use the `difference` method to obtain those unique values 
// that are not included in the `union` array. 
var diff = u.difference(union, inter); 

所以，inter数组中，你将有一个在所有上述（P1，P2定义数组的值相同的类名， p3，p4），而diff数组将包含所有未包含在每个数组中的名称空间。

Answer 3

我还没有测试过这个。如果我正确理解你的问题，以下可能是解决这个问题的方法之一。我不能说这是否是最佳的。我会尝试找出更好的方法。但现在这是代码。

var functionWhichHasAccessToArrays() { 
    var totalNoOfArrays = someNumber; // 2 or dozens 

    function doAllArraysHaveSameValue(value) { 
     return !!(_.every(arrayOfArrays, function(array) { 
      return (-1 !== _.indexOf(array, value)); 
     })); 
    } 

    var result = {}; 
    _.each(arrayWithMaxLength, function(valueInArray){ 
     var keyValue = valueInArray.split('__'); 
     if (doAllArraysHaveSameValue(valueInArray)) { 
      result[keyValue[0]] = keyValue[1]; 
     } else { 
      result[keyValue[0]] = false; 
     } 
    }) 
} 

Answer 4

这是我想出来的。没有像我打算的那样干净，但似乎完成了这项工作。

p1 = ["alignment__left", "size__18px", "leading__170", "tracking__0", "font__Operator--1408"]; 
 
p2 = ["size__18px", "tracking__0", "font__Operator--1408", "alignment__left"]; 
 
p3 = ["alignment__left", "size__18px", "leading__170", "tracking__0", "font__Operator--1408"]; 
 
p4 = ["alignment__left", "size__18px"]; 
 

 
var classes = [p1, p2, p3, p4], 
 
    flat = classes.reduce(function(prev, curr) { return prev.concat(curr) }, []), 
 
    unique = flat.reduce(function(prev, curr) { 
 
     return prev.indexOf(curr) == -1 ? prev.concat([curr]) : prev; 
 
    }, []); 
 

 
var result = {}; 
 

 
unique.forEach(function (style) { 
 
    result[style.split('__')[0]] = classes.every(function (clss) { 
 
    return clss.indexOf(style) !== -1; 
 
    }) ? style.split('__')[1] : false; 
 
}) 
 

 
document.getElementById('result').innerHTML = JSON.stringify(result, null, 4);

<body> 
 
    <pre id="result"> 
 
    </pre> 
 
</body>