必须掌握的JavaScript基本知识

做为一个前端工做者，应该了解一些javascript的发展历史，javascript实现及版本等。基本概念包括语法、关键字、变量、数据类型、操做符、语句控制及函数等，它们和咱们学习的其它语言C/C++、java、C#等基本上相似，只是存在细微的差异。具体区别及基本学习内容参考JavaScript高级编程相关章节。 

1、基本内容中应该注意的几个地方

1）关于script标签

咱们最经常使用的写法以下：

<script type="text/javascript">

    function(){

        console.log("hello world!");

    }

</script>

 

那么下边这些用法呢？

 

<script type="text/javascript" >

    //<![CDATA[ function(){

        console.log("hello world!");

    }

//]]>

</script>

        在xhtml中，像一些特殊的符号，<> 等等会默认断定为标签，标签后边是不能跟空格的。所以xhtml下要想实现一样的效果，应该转义&lt;，可是这样的代码谁都不想看到。那么能够用CDATA包起来。可是有个特殊的浏览器不支持CDATA怎么办，那就加上//

 

<script type="text/javascript" >

   <!--function(){

        console.log("hello world!");

    }

//-->

</script>

        以上代码是防止一些浏览器不支持javascript（这个顾虑如今基本能够打消了，另外还有个特殊的标签<noscript><p>支持并开启js的浏览器能够看到我</p></noscript>），用html注释的方式包起来，支持js的浏览器会执行。最后一个//防止js执行到-->认为是语法错误

 

<script type="text/javascript"  defer="defer">

    function(){

        console.log("hello world!");

    }

</script>

通常用于外部浏览器，defer表示该脚本的执行延迟到整个页面解析完成后再运行，用8个归纳就是 当即下载 延迟执行

 

<script type="text/javascript"  async>

    function(){

        console.log("hello world!");

    }

</script>

通常用于外部浏览器，顾名思义，不让页面等待脚本的下载，页面的其它部分就能够加载了。

 

        还有建议css代码放到head中，而js代码放到body中的底部。由于html加载是从上往下，若是在body加载以前有不少的脚本须要加载，那么咱们用户看到页面空白的时间就会很长。相反，页面展现在用户面前时，用户也不关心还有什么东西没有加载完。这样给用户一个错觉，咱们的页面比别人的"快"。那有人就说为了快，怎么不把css文件放到下边？那若是这样作的话，若是页面比较大，样式比较多一开始显示给用户的将会很丑。

 

        在js代码中最好少写 </script>，非要写能够这样 <\/script>，由于当字符中出现</script>，那么html会判断为<script>的结束，后边的代码就不能执行了。

 

在加载js过程当中（尤为是js在head中，这样会阻塞UI的加载），不建议动态修改Dom元素，这一点你们可想而知。

 

2）松散型变量和typeof

松散变量的含义就是，变量比较“随意”，能够保存任意的类型。不过咱们平时使用时不建议这么用

如：var number=10;

       namber="十";

这样不会报错，可是最好别这样用。

因为变量的这样随意性，所以咱们最好经过方法判断该变量当前的类型，typeof很好的解决了这个问题

console.log(typeof "hi jack");//String

console.log(typeof 10);//number

console.log(typeof null);//Object

console.log(typeof message);//undefined

var message="hello jack li";

console.log(typeof message);//hello jack li

3）数据类型中的特殊状况

 

undefied为Undefied类型的值，它只有这一个值。当申明一个值但没有初始化就使用就会报undefined以下：
var message;//其实这里至关于 var message=undefined;
console.log(message);//undefined

若是这样呢？

//var error;

console.log(error);//这里会报错，不能执行

更离谱的是若是这样呢？

console.log(typeof error);//undefined 是否是晕了？

总之typeof 能够避免不少无谓的错误。原本上边两种用法都不太推荐。使用变量前 经过typeof判断是个好的习惯，我的理解。

 

Null类型也是只有一个值 null，它是空的对象的指针，所以 typeof null 为Object，一样使用过程当中也推荐先判断非空

undefined是派生自null的。所以

console.log(null==undefined);//true

 

Boolean类型也是比较特殊的一个类型

        它只有两个字面量值 true和false，区分大小写，这个在其它语言中也是如此，判断一个变量尤为是前端用户勾选的一些radio或者下拉框中的某个值 和 后台查询出来的值比较，必须 toLowerCase()，统一转化为小写或者大写再比较。
        任何类型的变量均可以转化为Boolean值。利用方法 Boolean()，转换表以下。

类型	转换为true的值	转换为false的值
Boolean	true	false
String	任何非空字符串	""空字符串''也是false 注意没有空格
Number	任何非0的数字	0 NaN
Object	任何对象	null
Undefined	n/a	undefined

数值类型和NaN

        整数 浮点数须要注意浮点数的判断 好比 if(0.1+0.2==0.3)//永远是false 特定的浮点数计算，最好不要去比较结果，浮点是精度为17

NaN全称是Not a Number。它和任何数的操做结果都是NaN。 number/0的结果为NaN。还有一个判断是否为NaN的函数isNaN()

isNaN(100)//false

isNaN(NaN)//true

isNaN("100")//false

isNaN(true)//false

isNaN("message")//true

 

数值转换的一些特殊结果，您掌握多少呢？

Number("Hello jack li");//NaN

 

Number(true);//1

 

Number("000123");//123

通常更经常使用的是parseInt() parseFloat()

parseInt("123ignore")//123

parseInt("");//NaN

parseInt("0xA");//10

为了消除parseInt("070")//这种转换，咱们最好 指定第二个参数，明确指出是针对多少进制的转换 parseInt("070",8);//  

parseFloat("123.123.123");//123.123

 

String类型 单引号双引号的含义差很少，但不能交叉嵌套使用

 

var message=null;

var error;

console.log(String(message));//null

console.log(String(error));//undefined

 

Object类型，这个类型比较复杂须要之后单独讲

 

3）操做符

算数操做符， 位操做符，关系操做符， 相等操做符

 

~按位非
&按位与
|按位或
>>右移 前面保留符号位
<<左移
>>>无符号右移   前面补0

 

相等的特殊状况
null==undefined//true

NaN=="NaN"//false

123==NaN //false
NaN==NaN//false

false==0//true

undefined==0//false

1 23=="123"//true

 

全等 ===    !==

对比上边的就能够看出===要求更高一些，转换后值相等也不全等。

123==="123"//false

null===undefined//false

 

4)语句控制

须要注意里边的for in 语法就能够了，基本的程序流程控制语句都相似。