.parent 放在带有 ! 的变量之后意味着什么？（例如（！myVariable.parent）

Question

我在 javascript 和一般的前端编码方面还比较陌生。我正在使用 codepen 并试图理解代码中的所有内容，以便我可以根据需要进行修改。

有一个函数：

function checkTiles() { // function for the check button

  for (var i = 0; i < dragTiles.length; i++) { // iterate through all the draggable tiles (a variable declared earlier)

    var tile = dragTiles[i]; // variable for this iteration

    if (!tile.parent) {
      continue;
    }

//does more stuff..

}

（评论是为了让自己更好的理解）

我正在尝试了解 "if (!tile.parent)" 行的作用。根据我的阅读，"parent" 指的是父 window？那么这条线是不是在说 "if the tile variable (draggable tiles) aren't equal to the parent window"??

这对我来说意义不大。这是我正在处理的代码笔的 link 如果在上下文中看到它会有所帮助 - https://codepen.io/kbeats/pen/eLpawv

请注意我没有写这个codepen，还不是很擅长编码。

非常感谢任何帮助，谢谢！

Answer 1

您可以将 ! 视为否定某事的表达式。 Javascript 具有以下 "falsey" 值 - 假意味着它们在布尔检查中等同于假：

false
undefined
null
NaN
0
"" 或 ''

表达式 if (!tile.parent) 检查 title.parent 是否等于上述错误值之一。如果是这样，请继续。如果不是 - 条件不满足，代码将继续在函数中继续执行。

Answer 2

if (!tile.parent) {
      continue;
   }

检查 ! 意味着您正在检查 tile.parent 是否为假条件。

此处 tile 是一个对象，您正在检查它是否没有名为 parent 的属性。

编辑

我通过笔查看这个 dragTiles 数组包含的内容。所以我们有

var dragTiles = Array.prototype.map.call(dragElements, createDragTile);

并且 dragElements 是

var dragElements = document.querySelectorAll(".drag-tile");

在这里您可以看到 dragElements 只是 dom 个具有 class .drag-title

的节点

但是 dom 元素没有任何属性 parent 。所以您需要检查 createDragTile 定义，即

function createDragTile(element, index) {

  TweenLite.set(element, { 
    left: pad, 
    top: pad + index * (pad + element.offsetHeight) 
  });

  var draggable = new Draggable(element, { 
    bounds: ".board",
    onDragStart: onDragStart,
    onDrag: onDrag,
    onDragEnd: onDragEnd
  });
  // here we are declaring the tile object. with custom property parent
  var tile = { 
    element: element,
    parent: null,  // this is your parent. author is setting it for the tile. its a custom object. not refering to global window or anything.
    value: element.dataset.value 
  };

  function onDragStart() {}

  function onDrag() {
    // here is the info of parent property         
    var parent = tile.parent; // parent variable equals the parent property of tile varaible(which is set to NULL in the variable TILE above) SO, PARENT = NULL if drag tile isn't on a drop tile, if it IS then parent = the DROP TILE DIV

    if (parent) { // so if the parent is NULL, then look for the hit Test (cause the drag tile isn't on anything yet)

      if (this.hitTest(parent.element, threshold)) { // if THIS (the item that iniatied the function, the tile being dragged) overlaps with THE PARENT ELEMENT, so parent = null and element = element ?? 

        // exit the function
        // tile is still hitting parent, so no need to proceed any further.
        return; // exit and END THE FUNCTION HERE IF it is hitting the threshold
      }

      // tile is no longer hitting parent, so clear any references between the two
      parent = tile.parent = parent.child = null;  // if it's not hitting the threshold CLEAR ANY REFERENCES WHAT IS THIS ???????
    }

    for (var i = 0; i < dropTiles.length; i++) { // iterate through all the drop tiles

      var dropTile = dropTiles[i]; // variable for above iteration

      if (dropTile.child) { // child is NULL until a drag tile is on Top of if, so if the dropTile IS NULL then continue, if it doesn't have anything on it. 

        // continue to next loop iteration
        // drop tile already has a child, so no need to proceed any further
        continue;
      }

      if (this.hitTest(dropTile.element, threshold)) { // if the draggable hits a drop tile threshold

        // we hit an empty drop tile, so link the two together and exit the function
        tile.parent = dropTile; // here we are assigning the tile.parent to be DROP TILE 
        dropTile.child = tile; // here we are assigning the dropTile child to be TILE
        element.classList.add("hitting"); // add the class HITTING
        return;
      }
    }

    // if we made it this far, we're not hitting an empty drop tile
    element.classList.remove("hitting");
  }

  function onDragEnd() {

我从这个函数中了解到，如果.parent这个数据结构中的自定义属性是null表示元素没有被拖放到该位置。它仍然在原来的位置。如果图块处于放置位置，则其 .parent 成为放置图块。它不引用任何全局对象或 window。它只是简单地持有你可以放置一个项目的图块的引用，它可以是 null 或 dom node reference

.parent 放在带有 ! 的变量之后意味着什么？（例如（！myVariable.parent）

What does .parent mean when placed after a variable with an ! (ex. (!myVariable.parent)

javascript

variables

parent

codepen

.parent 放在带有 ! 的变量之后意味着什么？ （例如（！myVariable.parent）

What does .parent mean when placed after a variable with an ! (ex. (!myVariable.parent)

javascript

variables

parent

codepen

.parent 放在带有 ! 的变量之后意味着什么？（例如（！myVariable.parent）