JS新手问题解决

Dear 丶 2022-03-06 11:20 130阅读 0赞

若是我想获取P里值，但却把JS代码写在了P标签前面，如下图

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>简单运算输出</title>
    	</head>
    	<body>
    		<script src="../js/day1.js" type="text/javascript"></script>
    		<p id="date3">2232</p>
    	</body>
    </html>

就会出现如下问题：  
![在这里插入图片描述][20190318202855780.png]大致意思是由于JS提前加载，无法获取相应后加载的标签，导致的错误。

另一种问题

var date3=document.getElementById("date3");
    document.write(date3);

![在这里插入图片描述][20190318203029443.png]  
此图意思为，

object HTMLParagraphElement 对象 HTML段落元素，  
其获取到的是元素，这个元素也就是对象，获取到的对象不会显示里面的值，所以显示object HTMLParagraphElement，若想要抽取出里面的值，还需用使用 innerHTML 。  
注意此方法，获取的是  双标签 之间的内容。如p标签之间的内容。如果要获取表单控件的值，需要用到id.value的方法。

类型转换问题  
先来分析下在ES5中的六种数据类型：数值（Number），字符串（String），布尔型（Boolean），  
Null（特殊），undefined（特殊），对象（Object）  
其中，六种数据类型一般只有四种转换（null，undefined只往出转换），且不会报错（在语法正确的情况下），在对应的规则下，只会有对应的转换逻辑值，因此清楚对应的转换规则（尤其是特殊的规则，要把精力放在特殊的转换上面），并且对规则提炼出固定的转换思路。

1.  字符串转数值：把握住 空 为 零，其余皆为 NaN的规则。
2.  字符串转布尔型：把握住 空 为 零，零为false的规则。
3.  数值转布尔型：把握0与-0为false，其余值皆为true的规则。
4.  布尔型转数值只有两种情况：true为1，false为0。
5.  两个特殊类型转为数值和布尔型的对比：  
    null转数字为0，但是defined数字为NaN。  
    其中从空类型的角度去理解，即null对应于数值中的0，特殊类型中的空。  
    两者转布尔型均为false，即0为false，不为数字为false。
6.  任何转字符串：只是在原样上加上引号。

这里，稍微总结并强调一点：  
对于所有的数值类型的 '零’或 ‘空’ ，要格外小心与记忆，其在转换过程中往往会成为一个标志点，  标志着转换结果的不相同的源头  。

若在if语句中写入赋值语句，则会根据所赋的值转为对应的布尔类型值。

var a=null;
    if(a="")
      { 
    	console.log("判断为true");
      }
    else
    { 
    	console.log("判断为false");
    }

此时判断为false  
//对于字符串转布尔型，对于直接判断true或false还是不太熟练，应从字符转布尔型的转换规则，不能再其中间插入一步转为数字型，这样是不对的。比如下面这段代码：

var a=null;
    if(a="0")
      { 
    	console.log("判断为true");
      }
    else
    { 
    	console.log("判断为false");
    }

输出结果为true，如果是转为数字，再转布尔则为false（0），但这种想法不可取，要及时摒弃。

for循环比较高端的写法：

for(i=50;i--;){ 
    	console.log(i);
    }

刚开始看的时候我也很疑惑，怎么能这么写？语句2放的是循环条件，i–是什么判断条件。其实不然，在语句2中，如果返回true循环会继续执行。在js中0,null,undefined,false,’’,””作为条件判断时，其结果为false，也就说当i–到0的时候就是false，循环就终止了。  
其中总结一句话就是： i后跟的值为你要 循环的次数 即可，与i++殊途同归，但是形式上更简洁些。  
对于for循环的三个参数的理解：  
![在这里插入图片描述][20190320203054345.png]  
其中test条件语句的布尔值决定了循环是否结束。  
在for循环 i++ 与 ++i 作用 相同。  
与不加参与表达式运算的时候相同：  
如 i++；i–；  
但是如若i参与赋值时呢 比如a=i++；a=++i；时在for循环条件中的a值会如何表现？

var a = 0;
     for(var i=0;i<2;a = i++)
     { 
     	 console.log(a);
     }

此时a只打印出0

var a = 0;
     for(var i=0;i<2;a = ++i)
     { 
     	 console.log(a);
     }

此时a打印出0 1

检测电话号码（只检测是否为纯数字）

if(praseInt(phone)!=Number(phone));

此处利用了 NAN！= NAN 的性质。（只是说理解知识点，最强大的还是正则表达式。）

若是想在网页中的标签内，如

标签等，打印数组或者多个数据，则可以利用一个字符串等式连接起来，来实现多个数据的同时输出，而不必担心通过.innerHtml不断进行覆盖。  
其基本原理为：

var str="";
    			str = str+想拼接的内容;
    			str=str + "<br>"; //在各个数据前加上空格。

[20190318202855780.png]: /images/20220303/5c77f2af41804657807aff01353daf60.png
[20190318203029443.png]: /images/20220303/2190b80dbd974aa49380c595dfb4ff41.png
[20190320203054345.png]: /images/20220303/e1328f86373c470d9780e5d3c68dcf23.png