比較值

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>