Javascript新手集中营

时间 2019-11-16

原文原文链接

javascript是世界上最流行的编程语言，也许没有之一，看看github，stackoverflow上面的开源项目和问答就可略知一二。它能够用来开发web app、服务器、或者联合native开发hybird app，等等。或许你感受不到它的存在，但实际上javascript已经无处不在了！！

在学习javascript以前，咱们须要一个开发环境，以便作一些简单的练习，熟话说，工欲善其事，必先利其器。

浏览器，推荐chrome
文本编辑器，推荐sublime text2

你没看错，就是这么简单，一个文本编辑器、一个浏览器足以。

javascript是一种解释性的脚本语言，不一样于java，C，C++必须通过编译才能运行，javascript由javascript引擎（如chrome的V8引擎）解释执行，不须要编译的过程，因此相对于编译型的语言运行速度相对慢一点。

废话很少说，看一个例子：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Getting started！</title>
    <script>
     　　alert('hello world！');
    </script>
</head>
<body>
</body>
</html>

新建一个文本文件，粘贴上面这段文本，保存为begin.html，而后用浏览器打开，咱们就获得了一个javascript版的hello world！以下图，是否是很简单？javascript

这是第一个例子，什么都没作，不过它说明了如何让javascript运行起来：

　　首先，咱们须要一个运行javascript的宿主环境，也就是这个html文件，以便让浏览器知道如何解析，并执行里面的脚本。

　　而后，咱们须要将javascript代码放到script标签中，告诉浏览器这里面的是javascript代码，须要用javascript引擎解释执行。

到这里你应该略微知道如何执行一段javascript代码了，接下来咱们了解下javascript的基本概念。

javascript基本概念：

1. 语法

　　区分大小写

　　标识符：第一个字符必须是字母、_或$。其余字符能够是字母、_、$、或数字。
注释：同C、java同样。

　　　　　　//用于单行注释

　　　　　　* 多行注释

　　语句：由分号结尾，能够省略。

2. 关键字

　　　　　　if else do while for in

　　　　　　break continue

　　　　　　switch case default

　　　　　　try catch fianlly throw

　　　　　　instanceof typeof

　　　　　　function return this

　　　　　 void

　　　　　　var

　　　　　　delete

　　　　　　new

　　　　　　with

3. 保留字

　　　　　　class implements public protected private package super import abstract export interface static extends

　　　　　　int double float const short char byte enum boolean long

　　　　　　final native synchronized transient

　　　　　　throws

　　　　　　goto

　　　　　　debugger

　　　　　　volatile

　　　　　　let yield

4. 变量

　　　　　　javascript的变量是弱类型的，定义方式以下：

　　　　　　　　var name;

　　　　　这样就定义了一个名为name的变量，咱们用var声明一个变量，而不像C、Java使用如int age = 22;这样的方式定义变量。所谓弱类型的意思就是定义了一个变量，而没有显示的说明这个变量的什么类型的，因此咱们能够用这个变量存储任何类型的数据！是否是很酷？

　　　　　　上面定义了变量name，但并无给它赋值，实际上name是一个特殊的值----undefined，这时它尚未任何意义。

　　　　　　　　name = "javascript";

　　　　　　这条语句给变量name赋值为字符串"javascript"，固然也能够这样：

　　　　　　　　name = 1000;　　//这时的name就是整数1000了，虽然变量name的值听起来不该该是1000，但谁让它是弱类型呢！

　　　　　　固然，定义变量的时候赋值看起来更合适：

　　　　　　　　var name = "javascript";

5. 数据类型html

　　弱类型不等于没有数据类型，计算机固然要知道当前处理的数据是什么类型的，不然不知道应用哪一种运算啦！

　　　　　　javascript有5种基本数据类型：

　　　　　　　　String、Number、Boolean、Null、Undefined

　　　　　　和一种复杂数据类型：

　　　　　　　　Object　　（其实它一点都不复杂，就是一些无序的key和value的集合而已）

　　　　　　就这六种数据类型，没了，是否是很惊讶？和C、Java的数据类型比较下：

　　　　　　　　java中有byte、short、int、long、float、double，头大没？只是数而已，要这么多类型？

　　　　　　　　javascript固然不须要，只有一个Number！！

　　1. Undefined　

　　　　　　　　前面有提到var name;此时name的值是undefined，有印象没？

　　　　　　　　Undefined类型只有一个值，就是undefined。

　　　　　　　　　　var name;

　　　　　　　　　　alert(name == undefined); //ture

　　　　　　　　当咱们声明了一个变量，但没有初始化时，它就是undefined。实际上和下面的表达式是等价的：

　　　　　　　　　　var name;

　　　　　　　　　　　　和

　　　　　　　　　　var name = undefined;

　　　　　　　　　　　　等价

　　2. Null

　　　　　　　　和Undefined同样，Null也只有一个值---null。null表示一个空对象指针。因此若是要用一个变量存储一个Object，那么最好给它初始化为null，当使用它时判断值是否等于null，就知道这个变量是否被赋值一个真正的对象了。

　　　　　　　　　　var animal = null;

　　　　　　　　　　　　....

　　　　　　　　　　animal = dog;　　//dog是一只真正的狗

　　　　　　　　　　if(animal != null){

　　　　　　　　　　　　animal.cry();　　//判断animal是否保存了一个真正的对象引用，这里将发出狂吠，由于animal已是一只疯狗了！！

　　　　　　　　　　}

　　　　　　　　有没有感受null和undefined有点像？没错，实际上undefined就是从null派生出来的！因此：

　　　　　　　　　　alert(null == undefined);　　//true

　　　　　　　　 总结一下：

　　　　　　　　　　虽然null和undefined有些联系，但用法彻底不一样。undefined是定义变量时的默认值，因此没有必要显示的定义一个值为undefined的变量，而给一个变量赋值null却能够明确说明这个变量即将用于保存某个对象！因此应该保持一个良好的习惯，即在定义一个Object类型的变量时，应该赋值null，以便和普通数据类型的变量进行区分。

　　3. Boolean

　　　　　　　　Boolean有两个值：true/false。

　　　　　　　　和C不一样，这两个值和0、1彻底不是一回事。

　　　　　　　　　　var name = "javascript"；

　　　　　　　　　　alert(Boolean(name));　　//true　　这条语句强行转换name为Boolean值

　　　　　　　　各个数据类型和Boolean的关系：（隐式转换）

　　　　　　　　　　String: 　　空字符串""转换为false，其余为true

　　　　　　　　　　Number： 0和NaN转换为false，其余为true

　　　　　　　　　　Object:　　除null外，其余都为true

　　　　　　　　　　Undefined：undefined将转发为false，注意Undefined就一个值哦！

　　4. Number　　　　　

　　　　　　　　Number是比较复杂的类型了，由于数不只有整数、小数，还分十进制、八进制、十六进制，甚至还有各类精度，如int，long等等。看下面的代码：

　　　　　　　　　　var intNum = 100; 　　//整数

　　　　　　　　　　var floatNum = 100.55;　　//浮点数

　　　　　　　　　　var floatNum = 1.0055e2;　　//科学计数法也支持

　　　　　　　　　　var octalNum = 0123;　　//这个是以0开头是哦，因此表示8进制数

　　　　　　　　　　var hexNum = 0xa;　　//以0x开头，16进制数

　　　　　　　　　　 8进制和16进制数计算时也是转换为10进制数，因此两个16进制数相加，结果是10进制数。

　　　　　　　　　　和java同样，浮点数的计算也是有偏差的，因此用于判断的表达式不能用==，如：

　　　　　　　　　　　　var a = 342.3;

　　　　　　　　　　　　var b = 972.8;

　　　　　　　　　　　　if(a + b == 1315.1){

　　　　　　　　　　　　　　//do something

　　　　　　　　　　　　}

　　　　　　　　　　千万不要这么作，若是非要判断两个浮点数是否相等，能够用近似方法：

　　　　　　　　　　　　var a = 342.3870;

　　　　　　　　　　　　var b = 342.387;

　　　　　　　　　　　　if(a - b < 1e-10){

　　　　　　　　　　　　　　//do something

　　　　　　　　　　　　}

　　　　　　　 NaN

　　　　　　　　NaN 是Not a Number的缩写，是一个特殊的数值。它用于表示某个指望返回Number的操做返回了非数值。如：

　　　　　　　　　　var a = 20;

　　　　　　　　　　alert(a/0);　　//NaN

　　　　　　　　这条语句在其余语言中会致使运行时错误。而javascript中却不会致使代码中止执行。

　　　　　　　　1. 任何涉及NaN的操做都返回NaN

　　　　　　　　2. NaN不等于任何值，包括它本身

　　　　　　　　那么如何判断一个表达式是否是等于NaN呢？javascript为咱们提供了isNaN函数，这个函数将试着转换参数为数值，若是是数值则返回false，若是是NaN，则返回true，如：

　　　　　　　　　　alert(isNaN(100));　　//false

　　　　　　　　　　alert(isNaN(NaN));　　//true

　　　　　　　　　　alert(isNaN("1234"));　　//false，字符串1234能够转换为整数1234

　　　　　　　　　　alert(isNaN("name"));　　//true，这个实在转换不了哈

　　　　　　　　　　alert(isNaN(true));　　//false，数值1

　　　　　　　　 数值转换

　　　　　　　　　　前面你必定见过Boolean(xxx)这样的强制转换，同你想的同样，Number(xxx)也有一样的效果。

　　　　　　　　　　　　1. 若是xxx是Boolean值，则true、false分别转成一、0。

　　　　　　　　　　　　2. 若是是null，则返回0。

　　　　　　　　　　　　3. 若是是undefined，则返回NaN。

　　　　　　　　　　　　4. 若是是字符串，则：

　　　　　　　　　　　　　　a) 字符串只是数字组成，则转成10进制数，"123"->123，"0123"->123，前面的0会被忽略（能够有多个0）。

　　　　　　　　　　　　　　b) 字符串是有效的浮点数，则转成浮点数，开始的0也会被忽略。

　　　　　　　　　　　　　　c) 空字符串转成0。

　　　　　　　　　　　　　　d) 字符串是有效的16进制格式，若是"0x123"，则转成对应大小的十进制数。

　　　　　　　　　　　　　　e) 其余格式的字符串，转成NaN。

　　　　　　　　　　　　5. 若是是对象，则调用对象的valueOf方法，依照前面的规则返回数值，若是valueOf的返回值是NaN，再调用toString方法，一样依照前面的规则转换toString的返回值。

　　　　　　　　　　例子：

　　　　　　　　　　　　Number("Hello world")　　//这个固然返回NaN啦

　　　　　　　　　　　　Number("0003234")　　//3234，前面的多个0被忽略

　　　　　　　　　　　　Number(true)　　//1

　　　　　　　　　　　　Number("true")　　//注意是字符串哦，因此NaN了

　　　　　　　　　　　　Number("")　　//0

　　　　　　　　　　上面的转换字符串已经很强大了，但最经常使用的确实parseInt、parseFloat函数。

　　　　　　　　　　　　parseInt("123456hello world")　　//123456，是否是很神奇，parseInt会转换字符串前面的n多个数字，直到遇到非数字时结束。

　　　　　　　　　　　　parseInt("")　　//NaN，不一样于Number哦！！

　　　　　　　　　　　　parseInt("0xa")　　//10，16进制数->10进制

　　　　　　　　　　　　parseInt("1234.5")　　//1234，不是四舍五入！

　　　　　　　　　　　　parseInt(1234.5)　　//1234，和上面是同样的

　　　　　　　　　　　　parseInt(011)　　//9，八进制数->10进制

　　　　　　　　　　　　parseInt还能够接受第二个参数，以便指定第一个参数按什么进制转换，如：

　　　　　　　　　　　　　　parseInt("0x11", 16)　　//17

　　　　　　　　　　　　　　parseInt("11", 16)　　//17　将"11"，按16进制转换　

　　　　　　　　　　　　　　parseInt("a")　　//NaN　　　　　

　　　　　　　　　　　　　　parseInt("a", 16)　　//10

　　　　　　　　　　　　　　parseInt("10", 2)　　//2

　　　　　　　　　　parseFloat和pareInt相似：

　　　　　　　　　　　　parseFloat("002347hello world")　　//2347

　　　　　　　　　　　　parseFloat("002347.1234hello world")　　//2347.1234

　　　　　　　　　　　　parseFloat("0xa")　　//0，看看parseInt返回什么？

　　　　　　　　　　　　parseFloat("1234.56.78")　　//1234.56

　　　　　　　　　　总之，这两个方法都是从头解析字符串，遇到一个使返回结果无效的字符为止。

　　5. String　　　　

　　　　　　　　字符串就是由'或"表示的16位Unicode字符。如：

　　　　　　　　　　var str = "hello world";

　　　　　　　　　　　　或

　　　　　　　　　　var str = 'hello world';

　　　　　　　　同C，java同样，字符串是不可变的，一旦建立，值就不能改变。因此只能销毁原来的字符串，再将变量赋值一个新的字符串。

　　　　　　　　 转义字符串：

　　　　　　　　　　String包含一些特殊的字面量，用于表示特殊用途的字符，如非打印字符

　　　　　　　　　　　　\n 　　　　　换行

　　　　　　　　　　　　\t　　　　　　制表

　　　　　　　　　　　　\b　　　　　　空格

　　　　　　　　　　　　\r 　　　　　　回车

　　　　　　　　　　　　\\　　　　　　 \

　　　　　　　　　　　　\'　　　　　 '

　　　　　　　　　　　　\"　　　　　　 "

　　　　　　　　　　　　\xnn　　　　以16进制nn表示一个字符

　　　　　　　　　　　　\unnnn　　　以16进制nnnn表示一个unicode字符

　　　　　　 类型转换

　　　　　　　　　　1. toString()，Number、Boolean、Object、String都有toString方法。

　　　　　　　　　　　　　　var num = 10;

　　　　　　　　　　　　　　alert(num.toString())　　//'10'

　　　　　　　　　　　　toString还能够接受一个参数，指明转换的基数，如：

　　　　　　　　　　　　　　alert(num.toString(2))　　//'1010'，

　　　　　　　　　　　　　　alert(num.toString(16))　　//'a'

　　　　　　　　　　2. 若是是Null和Undefined，则没有toString方法，还记得强制类型转换么？

　　　　　　　　　　　　　　var v = null;

　　　　　　　　　　　　　　var v1;

　　　　　　　　　　　　　　String(v);　　//'null'

　　　　　　　　　　　　　　String(v1);　　//'undefined'

　　　　至此除Object之外的数据类型都介绍完了。

　　6. Object

　　　　coming soon...