Как проверить, если объект JavaScript пуст? - PullRequest
Новая
       77

Как проверить, если объект JavaScript пуст?

0 голосов
/ 17 октября 2018

Я пытаюсь проверить значение объекта "empty-ish".Другими словами, если свойства объекта не имеют значений или содержат только пробельные значения, давайте рассмотрим его пустым.

Я ссылался на этот пост

https://coderwall.com/p/_g3x9q/how-to-check-if-javascript-object-is-empty

инашел несколько полезных вещей, чтобы попробовать.Этот, который мне понравился больше всего, использует JSON.stringify как один лайнер.Я не уверен, что точно понимаю, как это работает - я думаю, что когда консоль выводит пару фигурных скобок {} из нее, это означает, что она нашла объект, но, возможно, есть больше нюансов, чем это?

Я хочу избежать написания пользовательской функции или импорта любых библиотек, если это возможно.

Вот пример кода MVP, который демонстрирует мою ошибку.Обратите внимание, что два элемента TD в дальнем правом углу кажутся пустыми, но в них есть вкладки.Я включаю логические тесты для «пустого вывода», которые я пробовал, и их результаты после этого кода: 

console.clear();

// Set selector values
var selectors = {
  blockSel: "td",
  titleSel: "span",
  urlSel: ""
};

var styles = {
  // reddish text
  style1: "background: bisque; color: brown; font-weight: bold; margin-top: .2em; padding-top: .3em; border-top: solid red 3px;",
  style2: "background:aliceblue;",
  style3: "background:orange;",
  h2: "color: black; font-weight: 700; font-size: 1.2em;"
};

var outObj = {};

// var titles = document.querySelectorAll('#res h3');
var blocks = document.querySelectorAll(selectors.blockSel);

[...blocks].forEach(function(block, i) {
  // Debugging ...
  console.log("%cNumber %s", styles.style1, i);

  console.log("%c\tVALUES:\t\t\t", styles.h2);

  console.log("%cblock.innerText = %s", styles.style2, block.innerText);
  console.log(
    "%cJSON.stringify(block.innerText) = %s",
    styles.style2,
    JSON.stringify(block.innerText)
  );
  console.log(
    "%cJSON.stringify(block.innerText.trim()) = %s",
    styles.style2,
    JSON.stringify(block.innerText.trim())
  );

  console.log("%c\tTESTS:\t\t\t", styles.h2);

  console.log(
    '%cJSON.stringify(block.innerText.trim()) == ""',
    styles.style3,
    JSON.stringify(block.innerText.trim()) == ""
  );
  console.log(
    "%cJSON.stringify(block.innerText) !== undefined",
    styles.style3,
    JSON.stringify(block.innerText) !== undefined
  );
  console.log(
    "%cJSON.stringify(block.innerText) != undefined",
    styles.style3,
    JSON.stringify(block.innerText) != undefined
  );
  console.log(
    '%cJSON.stringify(block.innerText) != ""',
    styles.style3,
    JSON.stringify(block.innerText) != ""
  );
});
body {
  background-position: center bottom;
  padding: 0px;
  margin: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000000;
  background-image: url('images/abstract_background.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #00111B;
}

td {
  background: #ffffb3;
  min-width: 13vw;
  text-align: center;
}

#description {
  color: white;
  font-size: 1.2em;
  max-width: 1024px;
}
<div id="description">

  <h2>DESCRIPTION</h2>

  <section>
    <h3>Purpose:</h3>
    <p>This pen demonstrates an issue I'm having with trying test for an "empty-ish" value of an object. In other words, if the object has no values, or contains only whitespace values, let's consider it empty. This isn't working so I'm posting my code to
      help me debug this issue.</p>

    <p>Please open the JavaScript console to view output</p>

    <h3>Errors</h3>

    <ul>
      <li>None.</li>
    </ul>

  </section>

</div>

<table>
  <tr>
    <td valign="top">
      <div id="Archives1_DataList1_ctl40_div1" class="rlvI">
        <div style="width: 175px; float: left; margin-bottom: 5px;">
          <span id="Archives1_DataList1_ctl40_Label2">January 17, 2018</span>
        </div>
        <div>
          <a class="example7" href="/editionviewer/default.aspx?Edition=1ca546d2-2e81-486c-b199-a3d056d157a2" target="_self">
            <img id="Archives1_DataList1_ctl40_Image1" src="https://media.iadsnetwork.com/edition/1964/136061/resized/175_0_1964719d1738-a4a9-46a0-a45e-a1f9aadb7fa7.jpg" style="border-width:0px;">
          </a>
        </div>
      </div>
    </td>
    <td valign="top">
      <div id="Archives1_DataList1_ctl41_div1" class="rlvI">
        <div style="width: 175px; float: left; margin-bottom: 5px;">
          <span id="Archives1_DataList1_ctl41_Label2">January 10, 2018</span>
        </div>
        <div>
          <a class="example7" href="/editionviewer/default.aspx?Edition=cd43c968-1e66-4919-9f97-fc0fe69d749f" target="_self">
            <img id="Archives1_DataList1_ctl41_Image1" src="https://media.iadsnetwork.com/edition/1964/135726/resized/175_0_19644b88f108-6e80-46d6-b7fb-d22f4cebac54.jpg" style="border-width:0px;">
          </a>
        </div>
      </div>
    </td>
    <td valign="top">
      <div id="Archives1_DataList1_ctl42_div1" class="rlvI">
        <div style="width: 175px; float: left; margin-bottom: 5px;">
          <span id="Archives1_DataList1_ctl42_Label2">January 3, 2018</span>
        </div>
        <div>
          <a class="example7" href="/editionviewer/default.aspx?Edition=fd6fb6f4-6b86-4489-a65f-eeb41d64eade" target="_self">
            <img id="Archives1_DataList1_ctl42_Image1" src="https://media.iadsnetwork.com/edition/1964/135385/resized/175_0_1964a8b1cc88-08f4-49f0-ace1-ca84b8a26d55.jpg" style="border-width:0px;">
          </a>
        </div>
      </div>
    </td>
    <td></td>
    <td></td>
  </tr>
</table>

Вот скриншот 3-го и 4-го TD.Как вы можете видеть, элемент 3 показывает значение innerText, но элемент 4 не имеет текста, только символ TAB.Но они оба проверяют одно и то же.

enter image description here

ПРЕДУПРЕЖДЕНИЕ:

Этот пост Как мне проверитьпустой объект JavaScript? был предложен в качестве возможного дубликата.Хотелось бы, чтобы было, но это не так.Кроме того, я попробовал самый лучший ответ, используя решение Pre-ECMA 5 для максимальной совместимости, но безрезультатно.Реализация этой функции не сработала.В скором времени я обновлю минимальный проверяемый код ...

Попытка кода 2:

В этой попытке я пробую две разные функции для проверки пустого объекта.Как я уже говорил, мои объекты не обязательно пусты, но они могут содержать пробельные символы.Я удалил много отладок из первого примера, чтобы сделать его более точным и меньшим.

Вот функции, которые я использовал

Pre-ECMA 5 

function isEmpty(obj) {
    for(var prop in obj) {
        if(obj.hasOwnProperty(prop))
            return false;
    }

    return JSON.stringify(obj) === JSON.stringify({});
}

ECMA 5 

function isEmpty2(obj) {
  if ( Object.keys(obj).length === 0 && obj.constructor === Object ) {
    return true;
  }

  return false;
}

Опять же, НИКОГДА из этих функций не сработало.А вот полный пример кода для этой попытки: 

console.clear();

var outObj = {};

var blocks = document.querySelectorAll('td');

[...blocks].forEach(function(block, i) {
  // Debugging ...
  console.log("%cNumber %s", styles.style1, 1+i);

  console.log(block);
  console.log("%cisEmpty(block) = %s", styles.style4, isEmpty(block));
  console.log("%cisEmpty2(block) = %s", styles.style4, isEmpty2(block));
  
});

/* isEmpty() */
function isEmpty(obj) {
    for(var prop in obj) {
        if(obj.hasOwnProperty(prop))
            return false;
    }

    return JSON.stringify(obj) === JSON.stringify({});
} 

/* isEmpty2() */
function isEmpty2(obj) {
  if ( Object.keys(obj).length === 0 && obj.constructor === Object ) {
    return true;
  }
  
  return false;
}
body
{
    background-position: center bottom;
    padding: 0px;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    background-image: url('images/abstract_background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #00111B;
}

td {
  background: #ffffb3;
  min-width: 13vw;
  text-align: center;
}

#description {
  color: white;
  font-size: 1.2em;
  max-width: 1024px;
}
<table>
  <tr>
    <td valign="top">
      <div id="Archives1_DataList1_ctl40_div1" class="rlvI">
        <div style="width: 175px; float: left; margin-bottom: 5px;">
          <span id="Archives1_DataList1_ctl40_Label2">January 17, 2018</span>
        </div>
        <div>
          <a class="example7" href="/editionviewer/default.aspx?Edition=1ca546d2-2e81-486c-b199-a3d056d157a2" target="_self">
               <img id="Archives1_DataList1_ctl40_Image1" src="https://media.iadsnetwork.com/edition/1964/136061/resized/175_0_1964719d1738-a4a9-46a0-a45e-a1f9aadb7fa7.jpg" style="border-width:0px;">
               </a>
        </div>
      </div>
    </td>
    <td valign="top">
      <div id="Archives1_DataList1_ctl41_div1" class="rlvI">
        <div style="width: 175px; float: left; margin-bottom: 5px;">
          <span id="Archives1_DataList1_ctl41_Label2">January 10, 2018</span>
        </div>
        <div>
          <a class="example7" href="/editionviewer/default.aspx?Edition=cd43c968-1e66-4919-9f97-fc0fe69d749f" target="_self">
               <img id="Archives1_DataList1_ctl41_Image1" src="https://media.iadsnetwork.com/edition/1964/135726/resized/175_0_19644b88f108-6e80-46d6-b7fb-d22f4cebac54.jpg" style="border-width:0px;">
               </a>
        </div>
      </div>
    </td>
    <td valign="top">
      <div id="Archives1_DataList1_ctl42_div1" class="rlvI">
        <div style="width: 175px; float: left; margin-bottom: 5px;">
          <span id="Archives1_DataList1_ctl42_Label2">January 3, 2018</span>
        </div>
        <div>
          <a class="example7" href="/editionviewer/default.aspx?Edition=fd6fb6f4-6b86-4489-a65f-eeb41d64eade" target="_self">
               <img id="Archives1_DataList1_ctl42_Image1" src="https://media.iadsnetwork.com/edition/1964/135385/resized/175_0_1964a8b1cc88-08f4-49f0-ace1-ca84b8a26d55.jpg" style="border-width:0px;">
               </a>
        </div>
      </div>
    </td>
    <td></td>
    <td></td>
  </tr>
</table>

1 Ответ

0 голосов
/ 25 октября 2018

!! Object.getOwnPropertyNames ({}). Length => false

!! Object.getOwnPropertyNames ({a: 'abc'}). Length => true

==================================================

Объект.getOwnPropertyNames ({}). length => 0

Object.getOwnPropertyNames ({a: 'abc'}). length => 1

...