前端开发工具 js_初学者易错的知识点

js前端开发工具|前端开发js工程师|网站前端开发

(1)运算符+-*/%的隐式转换
示例:
javascript 代码

console.log(1 + “2” + “2”); //122
console.log(1 + +”2″ + “2”); //32
console.log(“A” – “B” + “2”); //NaN2
console.log(“A” – “B” + 2); //NaN

分析|总结:
a.数字与字符串相加,数字隐式转换成字符串(此时的“+”理解为连接符)。
b.除了“+”,数字与字符串或字符串与字符串进行其他运算,字符串隐式转换成数字。
c.+”2″对字符串进行一元加操作符,字符串”2″会变成数字类型2。

(2)连等定义变量,后者为全局变量
示例:
javascript 代码

(function () {
vara=b=5;
})();
console.log(b); //5
console.log(a); //undefind

分析|总结:
var a = b = 5; 即 var a=5;b=5;所以a为局部变量,b为全局变量,在函数体以外输出a,则a是未定义。

(3)setTimeout的code参数
示例:
javascript 代码

function test() {
alert(“执行setTimeout”);
}
//window.setTimeout(test, 5000); //正确写法,5s后执行
//window.setTimeout(“test()”, 5000); //正确写法,5s后执行
window.setTimeout(test(), 5000); //错误写法,会立即执行

分析|总结:
语法
setTimeout(code,millisec)
参数 描述
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。

(4)对象类型为true
示例:
javascript 代码

var x = new Boolean(false);
if (x) {
console.log(‘Object’);//会显示
}
var y = Boolean(false);
if (y) {
console.log(‘Boolean’);//不会显示
}

分析|总结:
x为object,y为boolean,作为对象,if会直接判断为true。

(5)作用域问题
示例:
html 代码

<ul>
<li>click me</li>
<li>click me</li>
<li>click me</li>
<li>click me</li>
</ul>
<script>
varelements=document.getElementsByTagName(‘li’);
varlength=elements.length;
for (vari=0;i<length;i++) {
elements[i].onclick=function(){
alert(i);//依次弹出4,4,4,4
}
}
</script>

分析|总结:
每个li标签的onclick事件执行时,本身onclick绑定的function的作用域中没有变量i,i为undefined,则解析引擎会寻找父级作用域,发现父级作用域中有i,且for循环绑定事件结束后,i已经赋值为4,所以每个li标签的onclick事件执行时,alert的都是父作用域中的i,也就是4。这是作用域的问题。

拓展:
html 代码

<ul>
<li>click me</li>
<li>click me</li>
<li>click me</li>
<li>click me</li>
</ul>
<script>
varelements=document.getElementsByTagName(‘li’);
varlength=elements.length;
for (vari=0;i<length;i++) {
(function (j) {
elements[i].onclick=function(){
alert(j);//依次弹出0,1,2,3
}
})(i);
}
</script>

(6)for循环与setTimeout
示例:
javascript 代码

var a = [100, 3000, 5000];
for (var i = 0; i < a.length; i++) {
setTimeout(‘console.log(a[i])’,i);
} //undefined undefined undefined

javascript 代码

var a=[100, 3000, 5000];<br />
for(var i=0; i<a.length; i++){<br />
setTimeout(‘console.log(a[i-1])’, i);<br />
}<br />
//5000 5000 5000

分析|总结:
和(5)中作用域的问题类似,并且setTimeout方法执行时,已经完成了i++,那么a[4]就是undefined

(7)闭包
示例:
javascript 代码

function Foo() {
vari=0;
returnfunction(){
console.log(i++);
}
}
var f1 = Foo(),
f2=Foo();
f1();
f1();
f2();

分析|总结:
闭包最大用处有两个:一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
这里的局部变量i,对f1()来说是全局变量,对f2()来说也是全局变量,但是f1()的i跟f2()的i又是相互独立相互不可见的,f1()每执行一次,f1()的i就加1,f2()每次执行一次,f2()的i就加1,但是相互之间不影响,因此结果是010。

(8)js中的一些计算误差
示例1:浮点型计算误差
javascript 代码

//猜猜结果是多少
console.log(1.2 * 3);
console.log(1.2 / 3);

分析|总结:
我们都知道,1.23=3.6;1.2/3=0.4这是很简单的数学计算(除非你的数学是体育老师教的),然而在js中1.23=3.5999999999999996,1.2/3=0.39999999999999997(6)(貌似其他语言也存在这种误差),网上说是与 IEEE 754 浮点 算法规范 有关。
所谓兵来将挡,水来土掩,解决办法也简单,将浮点数乘以10的n次幂化为整数(n为小数位数),再进行计算,之后再除以10的m次幂(m为小数位数之和),就可以得到我们想要的数值。即:1.23 = 123/10 = 3.6。

示例2:IE8及更低版本中出现整型计算误差
javascript 代码

//请复制粘贴到IE8模式下控制台中运行查看结果
console.log(parseInt(“08”) – parseInt(“03”)); //结果为负,改为parseInt(“08”,10)
console.log(parseInt(“09”) – parseInt(“03”)); //结果为负,改为parseInt(“09”,10)

分析|总结:
问题的原因在于前面的”0″,parseInt方法有一个可选参数来表示数字的进制,以”0″作为首字符的字符串会被js识别为八进制数并将没有指定数字进制参数的参数值默认为8,从而以八进制来解析字符串,而”08″和”09″都不是合法的八进制数,所以被解析为0。
实际上,这是个不注意细节引起的问题,显式设置进制参数的parseInt根本不会出现这个问题,parseInt(“08”,10)或parseInt(“09”,10)都能返回正确的数值。另外,parseFloat不会存在这个问题,并且现代浏览器应该是默认为十进制了,因此现代浏览器中不会有此误差

前端开发为什么要学js?|js开发,web前端|js前端开发

» 本文来自:前端开发者 » 《前端开发工具 js_初学者易错的知识点》
» 本文链接地址:https://www.rokub.com/3588.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!