2012-10-31 103 views
2

我最近看了關於CSS的瀏覽器功能檢測的教程......最終的產品是這樣的......foo in bar - 'in'operator javascript?

var prefix = ['Moz', 'webkit', 'O', 'ms', 'Khtml'], 
    test_style = document.createElement('div').style; 

var css_check = function(prop) { 
    if (prop in test_style) { 
     return true; 
    } 
    for (var i = 0; i < prefix.length; i++) { 
     if (prefix[i] + prop in test_style) { 
      return true; 
     } 
    } 
    return false; 
}; 

css_check('whatev_css_property'); 

我不明白的部分是這個...

if (prop in test_style)if (foo in bar)

從我讀的if (foo in bar)是用來檢查一個值是否在一個數組中,但我可能在這裏是錯誤的,我還沒有找到這方面的文檔。此外,如果這是用來檢查數組中的值如何是test_style = document.createElement('div').style數組?沒有意義...

我很可怕的困惑。任何澄清將不勝感激。

+2

我不會建議使用'foo in bar'來檢查數組中是否存在值 - 您應該使用'indexOf'(http://stackoverflow.com/questions/237104/array-containsobj-in- javascript)。在你的情況下,'test_style'是一個對象字面值,在這種情況下'foo in bar'對於檢查密鑰的存在是正確的。在bar中使用'foo'檢查數組中是否存在索引(索引與對象的鍵相同) – Ian

回答

2

in運算符用於檢查數組或對象中是否存在

3 in [1, 2, 3] // false, since the array indices only go up to 2 
2 in [1, 2, 3] // true 
'x' in { x: 5 } // true 
'toString' in Object.prototype // true 

style屬性有一種CSSStyleDeclaration一個實例,其包含用於在活動的瀏覽器支持的每個風格屬性的屬性。

您在文章中給出的代碼片段檢查查看瀏覽器是否支持該樣式的某些版本(官方版本或多種常見供應商前綴之一)。

+0

感謝您的示例。現在更有意義。 – Terry

1
document.createElement('div').style 

將返回一個具有CSS屬性的對象。您可以使用key in來檢查對象中是否存在特定屬性。

3

聲明if (foo in bar)測試對象是否bar有一個名爲foo財產。它不測試值爲foo的屬性。

即:

var bar = {"a" : "x", "b" : "y"}; 
alert("a" in bar); // true 
alert("x" in bar); // false 

,因爲他們是一個類型的對象,您可以使用數組此語法。如果bar是一個數組,則foo in bar將爲真,如果foo是具有值的數組的數字索引或者foo是某個其他屬性或方法名稱。

此外,如果這是用來檢查數組中的值如何是test_style = document.createElement('div').style數組?

test_style是一個對象,而不是一個數組。

+0

感謝您的澄清! – Terry

+0

我認爲'hasOwnProperty'也適用於此。如果你只想檢查一個索引是否存在,你可以在數組&& array.hasOwnProperty(「1」))中使用if(「1」) - 如果被檢查的內容是動態的而不是硬編碼爲「」 1" '。這樣,它會忽略任何本地方法。對?只是想知道 – Ian

+0

@ianpgall - 如果你使用'.hasOwnProperty()'(我可能應該在我的答案中提到),你也不需要'in'運算符。 – nnnnnn

1

if (foo in bar)用於檢查名爲foo的值是否爲對象bar的屬性。由於數組只是特殊處理的對象,所以假設它可以用於檢查數組中的值是正確的。

test_style = document.createElement('div').style返回具有屬性的對象;既然是這樣,你可以使用foo in bar語法來檢查它。

+0

_「假設它可以用於檢查數組中的值是正確的。」_ - 它不檢查_value,_它檢查屬性_name_(或者,在數組中,是否爲具體_index_有一個值)。 – nnnnnn

+0

在數組中使用'foo in bar'將不起作用。你是對的,它就像一個對象,但在一個數組中,它的「鍵」將是索引。因此,在'bar中使用'foo將檢查現有的索引。 – Ian

相關問題