我乃前端小白一个。这里记录了一个人开发中撞破头的趣事。
有一天，我在做数据可视化的页面，用百度出品的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');
这里的代码的功能跟上一个列子的作用是相同的。
- 看来两者的命名规则是主要区别之一
- 所以为了规范，用点好；某些时候为了随性的命名，页可以用方括号
- 以上是我猜的！
- 不要认真！我是几天经验的小白！
