JavaScript学习笔记

< 1. null 和 undefined的区别：
null 表示一个值被定义了，定义为“空值”，空对象指针；undefined 表示未声明或声明了未初始化值。所以设置一个值为 null 是合理的，如 objA.valueA = null; 但设置一个值为 undefined 是没必要的，如objA.valueA = undefined。这样判断一个值是否存在，就可以用 objA.valueA === undefined，不应使用 null 因为 undefined == null，而 null 表示该值定义为空值。


2. for in循环
for in循环用来迭代对象的属性或数组的每个元素，for (x in person)中，x是字符串，而不是数字。它包含当前属性的名称或当前数组元素的索引，所以用person[x]，而非person.x 。（对象元素：person.age or person[“age”]）。见 for in循环陷阱


3. break,continue的label应用




4. html anchor



5. var a = 5 || null || 0; 返回结果为5. var a = 10 || 5 || undefined; 返回结果为10. var a = 10 && 1 && 3; 返回结果为3. ||返回的结果为从左到右第一个真值或最后遇到的一个假值；&&返回的结果为从左到右第一个假值或最后遇到的一个真值。


6. 正则表达式
useful links: 帮助理解正则表达式结构
正则表达式调试工具


7.1 ul的childNotes属性：
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<script>
var lt = document.getElementsByTagName("ul")[0].childNodes;
alert(lt.length); //ul的childNotes个数为7，**4个空节点和3个元素节点**</script>
去掉空格写成一行：
<ul><li>list1</li><li>list2</li><li>list3</li></ul>
<script>
var lt = document.getElementsByTagName("ul")[0].childNodes;
alert(lt.length); //结果变为**3**. 3个元素节点
</script>
若在ul中加入text：

alert为7. document.write()结果为：app bana oran pear
关于nodename-nodetype
7.2 制作水平导航栏时，若设置li为display:inline时，每个li框之间有空格（空节点），见下图：（可以像7.1中所述，把ul去掉空格写成一行）




8. 如果用户输入的text是datalist的option里面所没有的，添加进去：
<script>
function addOption(){
var dl = document.getElementById("assets");
var text = document.getElementById("tid");
var tv = text.value;
var oplist = dl.options;
for(var i = 0; i<oplist.length;i++){
var b = oplist[i].value;
if(b && tv!==b){
if(i==oplist.length-1){
var a = document.createElement("OPTION");
a.setAttribute("value",tv);
dl.appendChild(a);
}else{
continue;
}
}else{
break;
}
}
alert(oplist.length + " options total");
}
</script>


9. checkbox的indeterminate属性要通过js来设置，在标签中设置无效。
hobbies: <input type="checkbox" name="fishing" indeterminate id="cid" /> I like fishing
<script>
var cb = document.getElementById("cid");
cid.indeterminate = true;
</script>
直接在input标签中写indeterminate=”true”无效。。表现效果：既不是选中也不是不选中，选中状态不确定



10. JS中string转number的方法： .valueAsNumber, parseInt(), parseFloat(), Number().

用valueAsNumber时，注意input里面的type应该为number，若为text，返回的不是数值，而是NaN。

11. 为a以外的元素使用:hover伪类

12. Array的sort方法里面的参数：

13. JS的惰性函数
Ajax XHR
惰性函数的定义
惰性载入表示函数执行的分支只会在函数第一次掉用的时候执行，在第一次调用过程中，该函数会被覆盖为另一个按照合适方式执行的函数，这样任何对原函数的调用就不用再经过执行的分支了。

重写了createXHR方法，当浏览器为非IE5,6且浏览器或环境一直不变时，会一直用红框内的xhr，不会再进行判断从而去找到底return的哪个了。
14. 数组的迭代和归并方法
5种迭代：

eg:

2种归并：reduce()和reduceRight()。 reduce()从第一项到最后一项遍历，reduceRight()从最后一项到第一项方向遍历。


15. this指针

结果（alert先后）： 100 1000
方框中的(obj.test())() 相当于 var t = obj.test(); t(); （这里的t相当于window.t，所以alert结果为1000.）

结果为 My Object (that引用着object，不像this会变）

16. 当用构造函数和prototype同时定义对象中的属性时，取构造函数里面的值。（在构造函数中定义的属性，每个实例都有一个副本，互不影响；但是在prototype上定义的属性，在所有的实例中共享同一个属性，对属性的改变会影响到所有的实例）

17. js中的call 和 apply的区别：
apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])
同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入。


18. jquery中，onload函数和ready的区别：http://www.jb51.net/article/36178.htm

19. Javascript**获取select下拉框选中的option的值** 可参见js参考手册（关于HTML Dom部分）

20. js中innerHTML与innerText的用法与区别

21. js加减乘除丢失精度问题解决方法
var r1 = 0, r2 = 0, m = 0, r1 = 0, r2 = 0, t1 = 0, t2 = 0, s1 = 0, s2 = 0; //num1和num2为string，下面的r1/r2/t1/t2中必须加toString()
try{ r1 = num1.toString().split(".")[1].length } catch(e){}
try{ r2 = num2.toString().split(".")[1].length } catch(e){}
t1 = Number(num1.toString().replace(".",""));
t2 = Number(num2.toString().replace(".",""));
s1 = Number(num1);
s2 = Number(num2);
m = Math.pow(10,Math.max(r1,r2));
n = (r1 >= r2) ? r1 : r2;
switch (sign) {
case "+":
return (s1 * m + s2 * m) / m;
case "-":
return ((s1 * m - s2 * m) / m).toFixed(n);
case "*":
return t1 * t2 / Math.pow(10,r1+r2);
case "/":
return (s2 != 0) ? (t1 / t2 * Math.pow(10,r2-r1)) : NaN;
case "%":
return s1 % s2;
}


22. JavaScript中清空数组的三种方式

23. js双循环break与continue分析

24. 添加dom2级事件处理程序时，btn.addEventListener(“click”,shList); 前面的click加引号，后面的函数不用加括号。

25. 国内网站常用的一些 CDN 公共库加速服务

26. JS操作JSON总结
{
“employees”: [
{ “firstName”:”Bill” , “lastName”:”Gates” },
{ “firstName”:”George” , “lastName”:”Bush” },
{ “firstName”:”Thomas” , “lastName”:”Carter” }
]
}


27.1 One of the biggest problems with declaring variables with the var keyword is that you can overwrite variable declarations without an error.unlike var, when using let, a variable with the same name can only be declared once.let camper = ‘James’; let camper = ‘David’; // throws an error
27.2. let有块作用域（When you declare a variable with the let keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression）
var printNumTwo;
for (var i = 0; i < 3; i++) {
if(i === 2){
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo()); // returns 3
As you can see, printNumTwo() prints 3 and not 2. This is because the value assigned to i was updated and the printNumTwo() returns the global i and not the value i had when the function was created in the for loop. The let keyword does not follow this behavior:
'use strict';
let printNumTwo;
for (let i = 0; i < 3; i++) {
if (i === 2) {
printNumTwo = function() {
return i;
};
}
}
console.log(printNumTwo());// returns 2
console.log(i);// returns "i is not defined"
i is not defined because it was not declared in the global scope. It is only declared within the for loop statement. printNumTwo() returned the correct value because three different i variables with unique values (0, 1, and 2) were created by the let keyword within the loop statement.
28.