Javascript-сравнение deepEqual
вопрос (из красноречивого Javascript 2nd Edition, Глава 4, Упражнение 4):
напишите функцию deepEqual, которая принимает два значения и возвращает true, только если они одинаковое значение или объекты с одинаковыми свойствами, значения которых также равно по сравнению с рекурсивным вызовом deepEqual.
Тестовые Случаи:
var obj = {here: {is: "an"}, object: 2};
console.log(deepEqual(obj, obj));
// → true
console.log(deepEqual(obj, {here: 1, object: 2}));
// → false
console.log(deepEqual(obj, {here: {is: "an"}, object: 2}));
// → true
мой код:
var deepEqual = function (x, y) {
if ((typeof x == "object" && x != null) && (typeof y == "object" && y != null)) {
if (Object.keys(x).length != Object.keys(y).length)
return false;
for (var prop in x) {
if (y.hasOwnProperty(prop))
return deepEqual(x[prop], y[prop]);
/*This is most likely where my error is. The question states that all the values
should be checked via recursion; however, with the current setup, only the first
set of properties will be checked. It passes the test cases, but I would like
to solve the problem correctly!*/
}
}
else if (x !== y)
return false;
else
return true;
}
Я думаю, что у меня есть общая идея; однако, как я как указано в комментарии, программа не будет проверять второе свойство в объектах. Я чувствую, что у меня есть структурная/логическая проблема, и я просто неправильно использую рекурсию, поскольку я изначально намеревался перебирать свойства, использовать рекурсию для сравнения значений первого свойства, а затем продолжить в цикле к следующему свойству и сравнить снова. Хотя, я не уверен, что это вообще возможно?
Я много думал и попробовал пару разных подходы, но это был самый правильный ответ, я пришел до сих пор. Есть какие-нибудь подсказки, чтобы указать мне правильное направление?
5 ответов
как вы подозреваете, вы возвращаете совпадение первого увиденного свойства. Вы должны вернуться false
если это свойство не соответствует, но продолжайте искать иначе.
кроме того, return false
если нет prop
свойства нашли на y
(то есть количество совпадает, но не фактические свойства).
если все свойства совпадают, return true
:
var deepEqual = function (x, y) {
if (x === y) {
return true;
}
else if ((typeof x == "object" && x != null) && (typeof y == "object" && y != null)) {
if (Object.keys(x).length != Object.keys(y).length)
return false;
for (var prop in x) {
if (y.hasOwnProperty(prop))
{
if (! deepEqual(x[prop], y[prop]))
return false;
}
else
return false;
}
return true;
}
else
return false;
}
var deepEqual = function (x, y) {
if (x === y) {
return true;
}
else if ((typeof x == "object" && x != null) && (typeof y == "object" && y != null)) {
if (Object.keys(x).length != Object.keys(y).length)
return false;
for (var prop in x) {
if (y.hasOwnProperty(prop))
{
if (! deepEqual(x[prop], y[prop]))
return false;
}
else
return false;
}
return true;
}
else
return false;
}
var obj = {here: {is: "an", other: "3"}, object: 2};
console.log(deepEqual(obj, obj));
// → true
console.log(deepEqual(obj, {here: 1, object: 2}));
// → false
console.log(deepEqual(obj, {here: {is: "an"}, object: 2}));
// → false
console.log(deepEqual(obj, {here: {is: "an", other: "2"}, object: 2}));
// → false
console.log(deepEqual(obj, {here: {is: "an", other: "3"}, object: 2}));
// → true
почувствуйте, что эта версия немного более читабельна (легче понять). Однако логика очень похожа на верхний ответ. (ES6 на этот раз)
function deepEqual(obj1, obj2) {
if(obj1 === obj2) // it's just the same object. No need to compare.
return true;
if(isPrimitive(obj1) && isPrimitive(obj2)) // compare primitives
return obj1 === obj2;
if(Object.keys(obj1).length !== Object.keys(obj2).length)
return false;
// compare objects with same number of keys
for(let key in obj1)
{
if(!(key in obj2)) return false; //other object doesn't have this prop
if(!deepEqual(obj1[key], obj2[key])) return false;
}
return true;
}
//check if value is primitive
function isPrimitive(obj)
{
return (obj !== Object(obj));
}
кстати, есть версия Deep equal, которая работает как шарм)) однако она примерно в 1,6 раза медленнее.
function cheatDeepEqual(obj1, obj2)
{
return JSON.stringify(obj1) === JSON.stringify(obj2);
}
вы можете использовать переменную вне цикла for, чтобы отслеживать сравнение:
var allPropertiesEqual = true;
for (var prop in x) {
if (y.hasOwnProperty(prop)) {
allPropertiesEqual = deepEqual(x[prop], y[prop]) && allPropertiesEqual;
} else {
allPropertiesEqual = false;
}
}
return allPropertiesEqual;
предыдущий пример не оптимизирован специально. Поскольку вы сравниваете объекты, вы знаете, что можете return false
Как только вы найдете неравенство, и вы можете продолжать цикл, пока все предыдущие проверено свойства равны:
for (var prop in x) {
if (y.hasOwnProperty(prop)) {
if (! deepEqual(x[prop], y[prop]) )
return false; //first inequality found, return false
} else {
return false; //different properties, so inequality, so return false
}
}
return true;
Я совершенно новичок в JS, но именно так я решил это:
function deepEqual(obj1, obj2) {
if (typeof obj1 === "object" && typeof obj2 === "object") {
let isObjectMatch = false;
for (let property1 in obj1) {
let isPropertyMatch = false;
for (let property2 in obj2) {
if (property1 === property2) {
isPropertyMatch = deepEqual(obj1[property1], obj2[property2])
}
if(isPropertyMatch){
break;
}
}
isObjectMatch = isPropertyMatch;
if (!isObjectMatch) {
break;
}
}
return isObjectMatch;
} else {
return obj1 === obj2;
}
}
и вот мои тесты:
var obj = {here: {is: "an"}, object: 2};
console.log(deepEqual(obj, obj));
// → true
console.log(deepEqual(obj, {here: 1, object: 2}));
// → false
console.log(deepEqual(obj, {here: {is: "an"}, object: 2}))
// → true
console.log(deepEqual(obj, {object: 2, here: {is: "an"}}));
// → true
console.log(deepEqual(obj, {object: 1, here: {is: "an"}}));
// → false
console.log(deepEqual(obj, {objectt: 2, here: {is: "an"}}));
// → false
console.log(deepEqual(2, 2));
// → true
console.log(deepEqual(2, 3));
// → false
console.log(deepEqual(2, null));
// → false
console.log(deepEqual(null, null));
// → false
console.log(deepEqual(obj, null));
// → false
Я только что прочитал эту главу и тоже хотел показать свою работу.
недостаток в моем (дайте мне знать, если есть больше) заключается в том, что свойства объекта должны быть в точном порядке. Я предпочитаю решение @paul и @danni.
// Deep equal
const deepEqual = (x, y) => {
const xType = typeof x;
const yType = typeof y;
if ( xType === 'object' && yType === 'object' && ( x !== null && y !== null ) ) {
const xKeys = Object.keys(x);
const yKeys = Object.keys(y);
const xValues = Object.values(x);
const yValues = Object.values(y);
// check length of both arrays
if ( xKeys.length !== yKeys.length ) return false;
// compare keys
for ( i = 0; i < xKeys.length; i++ )
if (xKeys[i] !== yKeys[i]) return false;
// compare values
for ( i = 0; i < xValues.length; i++ )
if (!deepEqual(xValues[i], yValues[i])) return false;
} else {
if ( x !== y ) return false;
}
return true;
};
// Objects
let obj1 = {
value: false,
pets: null
};
let obj2 = {
value: false,
pets: null
};
let obj3 = {
value: false,
pets: {
cat: false,
dog: {
better: 'yes'
}
}
};
let obj4 = {
value: false,
pets: {
cat: false,
dog: {
better: 'yes'
}
}
};
let obj5 = {
value: false,
dog: true
};
let obj6 = {
value: false,
cat: true
};
let obj7 = {
value: true,
dog: {
cat: {
wow: true
}
}
};
let obj8 = {
value: true,
dog: {
cat: {
wow: false
}
}
};
let obj9 = {
value: true,
dog: {
cat: {
wow: true
}
}
};
let obj10 = {
dog: {
cat: {
wow: true
}
},
value: true
};
// Just for building a pretty result, ignore if you'd like
const result = (x, y) => {
return `For: <br/>
${JSON.stringify(x)} <br/>
and <br/>
${JSON.stringify(y)} <br/>
<span>>> ${deepEqual(x, y)}</span>`;
};
// To print results in
const resultDivs = document.querySelectorAll('.result');
resultDivs[0].innerHTML = result(obj1, obj2);
resultDivs[1].innerHTML = result(obj3, obj4);
resultDivs[2].innerHTML = result(obj5, obj6);
resultDivs[3].innerHTML = result(obj7, obj8);
resultDivs[4].innerHTML = result(obj9, obj10);
body {
font-family: monospace;
}
span {
color: #a0a0a0;
}
.result {
margin-bottom: 1em;
}
<div class="result">
</div>
<div class="result">
</div>
<div class="result">
</div>
<div class="result">
</div>
<div class="result">
</div>