2017-03-28 15 views
0

对不起,可怕的标题 - 我试过了。阵列对象的属性不能测试等于原始值

我试图保留一个与给定类的HTML页面上的元素与一对一对应的对象的引用列表。我可以使用元素作为键和我的自定义对象作为值来做到这一点,但对象已经有一个引用该元素的属性,所以我试图去除数据重复并仅仅对数组进行排序。但是,我认为这是一项简单的任务似乎并不像我预期的那样有效。

我甚至记录了应该比较的对象,它们看起来是相同的。

这里是我最小的,完整的,和可核查的例子:

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
<div id="a-widget" class="widget"></div> 
<div class="widget"></div> 
<script type="text/javascript"> 
    var widgetsArr = new Array(); 
    var widgetsMap = new Map(); 

    function createWidget(element) { 
     var widget = Object.create(null); 
     widget.element = element; 
     return widget; 
    } 

    function initWidgets() { 
     var elements = document.getElementsByClassName('widget'); 
     for (var i=0; i < elements.length; ++i) { 
      widgetsArr.push(createWidget(elements[i])); 
      widgetsMap.set(elements[i], createWidget(elements[i])); 
     } 
    } 

    function getWidgetByElementFromArr(element) { 
     widgetsArr.forEach(function(item, index, array) { 
      if (item.element === element) 
       console.log(item); 
       return item; 
     }); 
    } 

    function getWidgetByElementFromMap(element) { 
     var widget = widgetsMap.get(element); 
     console.log(widget); 
     return widget; 
    } 

    initWidgets(); 
    console.log(widgetsArr[0]); 
    console.log(widgetsArr[0] === getWidgetByElementFromArr(document.getElementById('a-widget'))); 
    console.log(widgetsMap.values().next().value); 
    console.log(widgetsMap.values().next().value === getWidgetByElementFromMap(document.getElementById 
('a-widget'))); 
</script> 
</body> 
</html> 

回答

2

传递给forEach功能不会导致循环终止或像你预期的返回值。它将始终循环遍历整个数组,而不会返回奇异值。使用find代替:

function getWidgetByElementFromArr(element) { 
    return widgetsArr.find(function(item, index, array) { 
    return (item.element === element); 
    }); 
} 

其他问题与功能:它不具备一个return声明。并且在if身体周围缺少{}

注意find不支持无处不在,所以使用填充工具或使用filter(()=>{...})[0],或一些其他的解决方法,你认为合适。