JSFiddle - React, Tailwind, and code Playground

by Justineo

HTML

<table>
  <tr>
    <td>
      null
    </td>
  </tr>
  <tr>
    <td>
      undefined
    </td>
  </tr>
  <tr>
    <td>
      true
    </td>
  </tr>  <tr>
    <td>
      false
    </td>
  </tr>
  <tr>
    <td>
      []
    </td>
  </tr>
  <tr>
    <td>
      [1,2,3]
    </td>
  </tr>
  <tr>
    <td>
      {}
    </td>
  </tr>
  <tr>
    <td>
      {'id':1}
    </td>
  </tr>
  <tr>
    <td>
      0
    </td>
  </tr>
  <tr>
    <td>
      1
    </td>
  </tr>
  <tr>
    <td>
      NaN
    </td>
  </tr>
  <tr>
    <td>
      Infinity
    </td>
  </tr>
  <tr>
    <td>
      ''
    </td>
  </tr>
  <tr>
    <td>
      '    '
    </td>
  </tr>
  <tr>
    <td>
      'hello'
    </td>
  </tr>
  <tr>
    <td>
      new String('')
    </td>
  </tr>
  <tr>
    <td>
      new String('hello')
    </td>
  </tr>
  <tr>
    <td>
      /hello/
    </td>
  </tr>
  <tr>
    <td>
      new Date()
    </td>
  </tr>
  <tr>
    <td>
      function() {}
    </td>
  </tr>
  <tr>
    <td>
      document.body
    </td>
  </tr>
  <tr>
    <td>
      alert
    </td>
  </tr>
  <tr>
    <td>
      window
    </td>
  </tr>
</table>

CSS

body {
    font-size:11px;
    font-family:Verdana;
    line-height:20px;
}

table {
    border-collapse:collapse;
}

td, th {
    border:1px solid #666;
    padding:0 10px;
}

th {
    background-color:#ccc;
    font-weight:700;
}

.true {
    background-color:#CCFFCC;
}

.false {
    background-color:#FFCCCC;
}

JavaScript

var instances = [null, undefined, true, false, [], [1, 2, 3], {}, {'id': 1}, 0, 1, NaN, Infinity, '', '    ', 'hello', new String(''), new String('hello'), /hello/, new Date(), function() {}, document.body, alert, window];

var isEmptyValue = function(value) {
    var type;
    if(value == null) { // 等同于 value === undefined || value === null
        return true;
    }
    type = Object.prototype.toString.call(value).slice(8, -1);
    switch(type) {
        case 'String':
            return !$.trim(value);
        case 'Array':
            return !value.length;
        case 'Object':
            return $.isEmptyObject(value); // 普通对象使用 for...in 判断，有 key 即为 false
        default:
            return false; // 其他对象均视作非空
    }
};

for (var i = 0, j = instances.length; i < j; i++) {
  var s = Object.prototype.toString.call(instances[i]),
      row = $('tr').eq(i),
      item = instances[i],
      isEmptyVal = isEmptyValue(item);
  $('<td>' + s + '</td>').appendTo(row);
  $('<td>' + typeof item + '</td>').appendTo(row);
  $('<td>' + isEmptyVal + '</td>').appendTo(row).addClass(isEmptyVal.toString());
}


$('table').prepend('<tr><th>value</th><th>Object.prototype.toString</th><th>typeof</th><th>isEmptyValue</th></tr>');