我乃前端小白一個。這里記錄了一個人開發中撞破頭的趣事。
有一天，我在做數據可視化的頁面，用百度出品的echarts庫。做成大概就是表格顯示x行y列數據，用折線圖表示，表頭有按鈕可以開關對應的折線。
看著簡單吧，但對我這個沒啥前端經驗的小白，真是窗戶紙一層層捅破啊。
2016.08.26 關于js的for循環之一
我向按鈕們綁定事件。
我：
for(var i=0; i<xx.length; i++) {
...
}
for(var i=0; i<yy.length; i++) {
//調用
//獲取表格數據
var y = yFunc(i);
...
}
//code
//往了上個周五咋寫的了，反正變量一片混亂
- （臥槽，我明明）
- 有bug！
- 打開chrome F12！
- 臥槽！
- 函數的參數i怎么都102了！好大！
- 什么鬼！
。。。 - 由于我一個人苦逼搞前端，沒人可問，于是在google眾里尋他千百度~
。。。 - 媽蛋！
- 原來那個i的作用域不是在{}里面！
- 而js以function為單位一級一級延伸作用域!
- 媽蛋，到底該咋辦！
- 逼我！我去看看電腦里有的js庫是咋寫的！
- 先來看看jQuery-2.1.1
關于全局變量
var class2type = {};
var toString = class2type.toString;
var hasOwn = class2type.hasOwnProperty;
關于簡單的for循環
var i = 0;
for( ; i < length; i++){
//code
}
- 不能隨便聲明全局變量啊！
- 反正以后我全局變量都放在一個Object里。。。
- 反正以后for循環像上面那樣~
2016.08.29 js關于等等和等等等與方括號和點
- 咦！
- 打開jquery-2.1.1之后
- 我的atom的JSHint居然警告！
get: function( num ) {
return num != null ?
// Return just the one element from the set
( num < 0 ? this[ num + this.length ] : this[ num ] ) :
// Return all the elements in a clean array
slice.call( this );
}
//tWarningW041 - Use '!==' to compare with 'null'.at line 111 col 20
- 天吶！jquery都會欸警告！到底用'!='還是'!=='！
- 還有！
inArray: function( elem, arr, i ) {
return arr == null ? -1 : indexOf.call( arr, elem, i );
},
//WarningW041 - Use '===' to compare with 'null'.at line 421 col 20
- 看來是'='和'=='之間的戰爭了！
- 還有！
delete Expr.find["ID"];
//W069 - ['ID'] is better written in dot notation.at line 1105 col 25
- 是方括號還是點！
- 我來stackoverflow一番！
- 找到了！Which equals operator (== vs ===) should be used in JavaScript comparisons?
- accepted答案：
The identity (===) operator behaves identically to the equality (==) operator except no type conversion is done, and the types must be the same to be considered equal.
Reference: [Javascript Tutorial: Comparison Operators](http://www.c-point.com/javascript_tutorial/jsgrpComparison.htm)
The ==operator will compare for equality *after doing any necessary type conversions*. The ===operator will **not** do the conversion, so if two values are not the same type ===
will simply return false
. Both are equally quick.
To quote Douglas Crockford's excellent [JavaScript: The Good Parts](http://rads.stackoverflow.com/amzn/click/0596517742),
- 我慢慢翻譯~
- 來看這個！
'' == '0' // false
0 == '' // true
0 == '0' // true
false == 'false' // false
false == '0' // true
false == undefined // false
false == null // false
null == undefined // true
' \t\r\n ' == 0 // true
- WTF!
- '=='
- 看第二的答案！
Using the ==operator (*Equality*)
true == 1; //true, because 'true' is converted to 1 and then compared
"2" == 2; //true, because "2" is converted to 2 and then compared
Using the ===operator (*Identity*)
true === 1; //false
"2" === 2; //false
This is because the **equality operator ==
does type coercion**, meaning that the interpreter implicitly tries to convert the values before comparing.
On the other hand, the **identity operator ===
does not do type coercion**, and thus does not convert the values when comparing.
- SOGA!
- 那么方括號和點呢？
- 一個博客：https://medium.com/@prufrock123/js-dot-notation-vs-bracket-notation-797c4e34f01d#.kgi1drgd3
- 找到了MDN的文檔：Property accessors！
符號表示法
get = object.property;
object.property = set;
以上代碼中，屬性名必須是一個有效的JavaScript標識符，例如，一串字母數字字符，也包括下劃線及美元符號，但不能以數字作為開頭。比如，
object.$1是合法的，而object.1是無效不合法的。
document.createElement('pre');
在上述代碼塊中，對象document中存在一個名為"createElement"的方法并且被調用了。
括號表示法
get=object[property_name];
object[property_name] = set;
property_name是一個字符串。該字符串不一定是一個合法的標識符；它可以是任意值，例如，"1foo"，"!bar!"， 甚至是一個空格。
document['createElement']('pre');
這里的代碼的功能跟上一個列子的作用是相同的。
- 看來兩者的命名規則是主要區別之一
- 所以為了規范，用點好；某些時候為了隨性的命名，頁可以用方括號
- 以上是我猜的！
- 不要認真！我是幾天經驗的小白！
