JavaScript 学习笔记 02

JavaScript数据类型-数值型

数字（number）是最基本的数据类型。JavaScript和其他程序设计语言（例如C语言或者Java语言）的不同之处在于他并不区分整型数值和浮点数值。在JavaScript中，所有的数字都是浮点型。JavaScript采用64位浮点格式表示数字，这意味着它所表示的数值范围。

当一个数字直接出现在JavaScript程序中时，被称为数值直接量。JavaScript支持的数值直接量有整型数据、十六进制和八进制数据、浮点型数据几种，下面将对这几种进行形式进行详细介绍。

注意：在任何数值直接量前加上负号（-）可以构成它的负数。但是负数是一元求反运算符，不是数值直接量的一部分。

1. 整型数据

在JavaScript程序中，十进制的整数是一个数字序列，例如：

0 6 -8 200

var x=34;

2. 十六进制和八进制

JavaScript不但能够处理十进制的整型数据，还能够识别十六进制的数据。所谓的十六进制数据（基数为16），是以“0X”和“0x”开头，其后跟随十六进制数字串的直接量。十六进制的数字可以是0~9中的某个数字，也可以是a（A）~f（F）中的某个字母，他们用来表示0~15之间（包含0和15）的某个值，下面是十六进制整型数据的例子。例如：

0x8f //8*16+15=143（基数为10）

尽管ECMAScript标准不支持八进制数据，但是JavaScript的某些实现却允许采用八进制格式的整型数据（基数为8）。八进制数据以数字0开头，其后跟随一个数字序列，这个序列中的每个数字都在0~7之间（包括0和7），例如：

0566 //564+68+6=374（基数为10）

注意：由于某些JavaScript实现支持八进制数据，而有些不支持，所以最好不要使用0开头的整型数据，因为不知道某个JavaScript的实现是将其解释为十六进制，还是解释为八进制。

八进制数值字面量，(以 8 为基数)，前导必须是 0，八进制序列(0~7)。

var x = 070; //八进制，56

var x = 079; //无效的八进制，自动解析为 79

var x = 08; //无效的八进制，自动解析为 8

十六进制字面量前面两位必须是 0x，后面是(0~9 及 A~F)。

var x = 0xA; //十六进制，10

var x = 0x1f; //十六进制，31

3. 浮点型数据

浮点类型，就是该数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。

var x = 3.8;

var x = 0.8;

var x = .8; //有效，但不推荐此写法

4. toFixed() 方法

toFixed() 方法可把number四舍五入为指定小数位数的数字，返回值为string类型。

var num = 3.456789; var n=num.toFixed(); //将一个数字，不留任何小数：n 的值为3

var num = 3.456789;

var n=num.toFixed(2); //将一个数字，留2位小数：n 的值为3.46

alert(typeof n); // string

JavaScript数据类型-字符串型

字符串（string）是有Unicode字符、数字、标点符号等组成的序列，它是JavaScript用来表示文本的数据类型。程序中的字符串型数据包含在单引号和双引号中，由单引号定界的字符串中可以包含双引号，由双引号定界的字符串中也可以包含单引号。

例如：单引号括起来的一个或多个字符，代码如下：

‘A’

’ Hello JavaScript！’

例如：双引号括起来的一个或多个字符，代码如下：

“B”

” Hello JavaScript！”

例如：单引号定界的字符串中可以包含双引号，代码如下：

‘pass=”mypass” ‘

例如：双引号定界的字符串中可以包含单引号，代码如下：

“You can call her ‘Rose ‘”

说明：JavaScript与C、Java不同的是，它没有char这样的单字符数据类型。要表示单个字符，必须使用长度为1的字符串。

JavaScript数据类型-布尔型

数值数据类型和字符串数据类型的值都是无穷多个，但布尔数据类型只有两个值，这两个合法的值分别由直接量“true”和“false”表示。它说明某个事物是真还是假。

在JavaScript程序中，布尔值通常用来比较所得的结果，例如：

m==1

这行代码测试了变量m的值是否和数值1相等。如果相等，比较的结果就是布尔值true，否则结果就是false。

布尔值通常用于JavaScript的控制结构。例如，JavaScript的if/else 语句就是在布尔值true时执行一个动作，而在布尔值为false时执行另一个操作。JavaScript在必要的时候将true转化为1，将false转化为0。

JavaScript数据类型-特殊数据类型

JavaScript还包括一些特殊类型的数据，如转义字符、未定义值等。

1. 转义字符

以反杠开头的，不可显示的特殊字符通常称为控制字符，也被称为转义字符。通过转义字符可以在字符串中添加不可以显示的特殊字符，或者避免引号匹配混乱。JavaScript常用的转义字符如表所示。

​ 表 JavaScript常用的转义字符

在document.write( )语句中使用转义字符时，只有将其放在格式化文本标签<pre></pre>中才会起作用。如： document.write(“<pre>努力学习\nJavaScript语言！</pre>”);

2. 未定义值

未定义类型的变量是undefined，表示变量还没有赋值（如var m;），或者赋予一个不存在的属性值（如var m=String.noproperty;）。

此外，JavaScript中还有一种特殊类型的数字常量NaN，即“非数字”。当程序由于某种原因计算错误后，将产生一个没有意义的数字，此时JavaScript返回的数值就是NaN。

3. 空值

JavaScript中的关键字null是一个特殊的值，它表示值为空，用于定义空的或者不存在的引用。这里必须注意的是，null不等同与空字符串（”“）和0。.

由此可见，null和undefined的区别是，null表示一个变量被赋予了一个空值，而undefined则表示该变量尚未被赋值。

4. 复合数据类型:Object类型

值为基本数据类型的组合如：数组，json等，如下：

var person = {
    name: "Bob",
    age: 20,
    tags: ["js", "web", "mobile"],
    city: "Beijing",
    hasCar: !0,
    zipcode: null
};
for (var o in person) alert(o + " " + person[o]);
var json = {
    employees: [{
        firstName: "John",
        lastName: "Doe"
    }, {
        firstName: "Anna",
        lastName: "Smith"
    }, {
        firstName: "Peter",
        lastName: "Jones"
    }]
};
json = json.employees;
for (var i = 0; i < json.length; i++) alert(json[i].firstName + " " + json[i].lastName);   

JavaScript JSON

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

什么是 JSON?

• JSON 英文全称 JavaScript Object Notation
• JSON 是一种轻量级的数据交换格式。
• JSON是独立的语言 *****
• JSON 易于理解。

JSON 格式化后为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

JSON 语法规则

• 数据为 键/值 对。
• 数据由逗号分隔。
• 大括号保存对象
• 方括号保存数组

JSON 数据 - 一个名称对应一个值

JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。

键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：

“name”:”Runoob”

JSON 对象

JSON 对象保存在大括号内。

就像在 JavaScript 中, 对象可以保存多个 键/值 对：

{“name”:”Runoob”, “url”:”www.runoob.com”}

JSON 数组

JSON 数组保存在中括号内。

就像在 JavaScript 中, 数组可以包含对象：

“sites”:[ {“name”:”Runoob”, “url”:”www.runoob.com”}, {“name”:”Google”, “url”:”www.google.com”}, {“name”:”Taobao”, “url”:”www.taobao.com”}]

在以上实例中，对象 “sites” 是一个数组，包含了三个对象。

每个对象为站点的信息（网站名和网站地址）。

JSON 字符串转换为 JavaScript 对象

通常我们从服务器中读取 JSON 数据，并在网页中显示数据。

简单起见，我们网页中直接设置 JSON 字符串 (你还可以阅读我们的 JSON 教程):

首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：

var text = ‘{ “sites” : [’ +’{ “name”:”Runoob” , “url”:”www.runoob.com” },’ +’{ “name”:”Google” , “url”:”www.google.com” },’ +’{ “name”:”Taobao” , “url”:”www.taobao.com” } ]}’;

然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

最后，在你的页面中使用新的 JavaScript 对象：

实例

var text = ‘{ “sites” : [’ + ‘{ “name”:”Runoob” , “url”:”www.runoob.com” },’ + ‘{ “name”:”Google” , “url”:”www.google.com” },’ + ‘{ “name”:”Taobao” , “url”:”www.taobao.com” } ]}’; obj = JSON.parse(text);document.getElementById(“demo”).innerHTML = obj.sites[1].name + “ “ + obj.sites[1].url;

数据类型的自动转换

当JavaScript尝试操作一个”错误”的数据类型时，会自动转换为”正确”的数据类型。以下输出结果不是你所期望的：

5 + null // 返回 5 null 转换为 0

“5” + null // 返回”5null” null 转换为 “null” “5” + 1 // 返回 “51” 1 转换为 “1” “5” - 1 // 返回 4 “5” 转换为 5

“5”* 2 // 返回 10 “5” 转换为 5

“6” / 2 // 返回 3 “6” 转换为 6

总结：当字符串与其它类型用+连接，其它类型会转为字符串，其它的运算符-,*,/,%都会转换成Number类型

typeof的用法

typeof运算符返回其操作数当前的数据类型。这对于判断一个变量是否已被定义特别有用。例如，下面应用typeof运算符返回当前操作数的数据类型，代码如：typeof false

说明：typeof运算符把类型信息用字符串返回。typeof运算符的返回值有6种：“number”、“string”、“boolean”、“object”、“function”和“undefined”。

typeof “John” // 返回 string typeof 3.14 // 返回 number typeof false // 返回 boolean typeof [1,2,3,4] // 返回 object typeof {name:’John’, age:34} // 返回 object

typeof undefined // undefined typeof null // object

typeof是操作符，不是方法，也就是说和加减号一样用，不考虑优先级问题，没必要给操作数加括号，当然加了也没事儿，说实话可读性还挺高

typeof返回值都是小写字符串

null的类型不是null，而是”object”

NaN这个不是数字的类型也是”number”

function明明也是对象，但是typeof却给了”function”类型

其它对象都返回”object”,很没有识别性

具体识别对象类型使用instanceof 操作符，这个记住一点儿就行，对于基本类型，instanceof 永远返回false

1 instanceof Number; //false

new Number(1) instanceof Number; //true

给变量取个名字(变量命名)

我们为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。

我们赶快给变量取个好名字吧!变量名字可以任意取，只不过取名字要遵循一些规则:

1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。如下:

正确:                mysum                 _mychar              $numa1          
错误:   6num  //开头不能用数字   %sum //开头不能用除(_ $)外特殊符号,如(%  + /等)   sum+num //开头中间不能使用除(_ $)外特殊符号，如(%  + /等) 

2.变量名区分大小写，如:A与a是两个不同变量。

3.不允许使用JavaScript关键字和保留字做变量名。

JavaScript-什么是函数

函数是完成某个特定功能的一组语句。如没有函数，完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省重复输入大量代码的麻烦。

如何定义一个函数呢？基本语法如下:

function 函数名() {      函数代码; }

说明:

1. function定义函数的关键字。

2. “函数名”你为函数取的名字。

3. “函数代码”替换为完成特定功能的代码。

我们来编写一个实现两数相加的简单函数,并给函数起个有意义的名字：“add2”，代码如下：

function add2(){    var sum = 3 + 2;    alert(sum); }

函数调用:

函数定义好后，是不能自动执行的，所以需调用它,只需直接在需要的位置写函数就ok

我们完成对两个数求和并显示结果的功能。并给函数起个有意义的名字：“add2”，代码如下：

<script type="text/javascript">   function add2(){     sum = 3 + 2;     alert(sum);   }   add2(); </script>

调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)

当您声明函数时，请把参数作为变量来声明：

function myFunction(var1,var2)
{
这里是要执行的代码
}

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

实例

<button onclick="myFunction('Bill Gates','CEO')">点击这里</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量来分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

这条语句：

carname="Volvo";

将声明一个全局变量 carname，即使它在函数内执行。

保持先后顺序(操作符优先级）

我们都知道，除法、乘法等操作符的优先级比加法和减法高，例如：

var numa=3; var numb=6 jq= numa + 30 / 2 - numb * 3;  // 结果为0

如果我们要改变运算顺序，需添加括号的方法来改变优先级:

var numa=3; var numb=6 jq= ((numa + 30) / (2 - numb)) * 3; //结果是-24.75

操作符之间的优先级（高到低）:

算术操作符 → 比较操作符 → 逻辑操作符 → “=”赋值符号

如果同级的运算是按从左到右次序进行,多层括号由里向外。

var numa=3; var numb=6; jq= numa + 30 >10 && numb * 3<2;  //结果为false

自加一，自减一 ( ++和- -)

算术操作符除了(+、-、*、/)外，还有两个非常常用的操作符，自加一“++”；自减一“--”。首先来看一个例子：

mynum = 10; mynum++; //mynum的值变为11 mynum--; //mynum的值又变回10

上面的例子中，mynum++使mynum值在原基础上增加1，mynum–使mynum在原基础上减去1,其实也可以写成:

mynum = mynum + 1;//等同于mynum++ mynum = mynum - 1;//等同于mynum--

条件运算符

条件运算符是三元运算符，使用该运算符可以方便地由条件逻辑表达式的真假值得到各自对应的取值。或由一个值转换成另外两个值，使用条件运算符嵌套多个值。其格式如下：

操作数？结果1：结果2

如果操作数的值为true，则整个表达式的结果为结果1，否则为结果2。

说明：条件运算符中条件部分若不是逻辑类型，按“非零即真”的原则进行判断。条件运算符嵌套时按“左结合性”计算。在编写语句时用多行表示一条复杂语句，会使语句结构清晰，增强程序的可读性。

做判断（if语句）

if语句是基于条件成立才执行相应代码时使用的语句。

语法:

if(条件) { 条件成立时执行代码}

注意：if小写，大写字母（IF）会出错！

假设你应聘web前端技术开发岗位，如果你会HTML技术，你面试成功，欢迎加入公司。代码表示如下:

<script type="text/javascript">   var mycarrer = "HTML";   if (mycarrer == "HTML")   {     document.write("你面试成功，欢迎加入公司。");   } </script>

二选一 （if…else语句）

if…else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。

语法 :

if(条件) { 条件成立时执行的代码} else {条件不成立时执行的代码}

假设你应聘web前端技术开发岗位，如果你会HTML技术，你面试成功，欢迎加入公司，否则你面试不成功，不能加入公司。

代码表示如下 :

<script type="text/javascript">   var mycarrer = "HTML"; //mycarrer变量存储技能   if (mycarrer == "HTML")     { document.write("你面试成功，欢迎加入公司。");  }   else  //否则，技能不是HTML     { document.write("你面试不成功，不能加入公司。");} </script>

多种选择（Switch语句)

当有很多种选项的时候，switch比if else使用更方便。

语法:

switch(表达式) { case值1:   执行代码块 1   break; case值2:   执行代码块 2   break; ... case值n:   执行代码块 n   break; default:   与 case值1 、 case值2...case值n 不同时执行的代码 }

语法说明:

Switch必须赋初始值，值与每个case值匹配。满足执行该 case 后的所有语句，并用break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句。

假设评价学生的考试成绩，10分满分制，我们按照每一分一个等级将成绩分等，并根据成绩的等级做出不同的评价。

代码如下:

执行结果:

评语: 及格，加油!

注意:记得在case所执行的语句后添加上一个break语句。否则就直接继续执行下面的case中的语句，看以下代码:

执行结果:

评语: 继续努力! 评语: 及格，加油! 评语: 凑合，奋进 评语: 很棒，很棒 评语: 高手，大牛

在上面的代码中，没有break停止语句，如果成绩是4分，则case 5后面的语句将会得到执行，同样，case6、7-10后面的语句都会得到执行。

循环结构

（1）循环结构的三个要素

循环初始化，设置循环变量初值；

循环控制，设置继续循环进行的条件；

循环体，重复执行的语句块。

（2）当循环结构：

当循环结构，while语句格式如下：

while（条件表达式）{

语句块

}

（3）直到循环结构：

直到循环结构，do…while语句格式如下：

do{

语句块

} while（条件表达式）;

（4）计数循环结构:

计数循环结构， for语句格式如下：

for(var i=0;i<length;i++){

语句块

}

现有数组和json对象如下

var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
var demoObj = {
  aaa: 'Javascript',
  bbb: 'Gulp',
  ccc: 'CSS3',
  ddd: 'Grunt',
  eee: 'jQuery',
  fff: 'angular'
}; 
避免使用for(var i=0; i<demo1Arr.length; i++){} 的方式，这样的数组长度每次都被计算，效率低于上面的方式。也可以将变量声明放在for的前面来执行，提高阅读性：
var i = 0, len = demo1Arr.length;
for(; i<len; i++) {}; 
**（5****）枚举循环结构：**
枚举循环结构，for…in语句格式如下：
for(var i=0 in array){        或者    for(i in array){
语句块                    语句块
}                        } 
for(var item in arr|obj){} 可以用于遍历数组和对象
遍历数组时，item表示索引值， arr表示当前索引值对应的元素 arr[item]
遍历对象时，item表示key值，arr表示key值对应的value值 obj[item]

退出循环break

在while、for、do…while、while循环中使用break语句退出当前循环，直接执行后面的代码。

格式如下：

for(初始条件;判断条件;循环后条件值更新) {   if(特殊情况)   {break;}   循环代码 }

当遇到特殊情况的时候，循环就会立即结束。看看下面的例子，输出10个数，如果数值为5，就停止输出。

执行结果:

注:当num=5的时候循环就会结束，不会输出后面循环的内容。

继续循环continue

continue的作用是仅仅跳过本次循环，而整个循环体继续执行。

语句结构：

for(初始条件;判断条件;循环后条件值更新) {   if(特殊情况)   { continue; }  循环代码 }

上面的循环中，当特殊情况发生的时候，本次循环将被跳过，而后续的循环则不会受到影响。好比输出10个数字，如果数字为5就不输出了。

执行结果:

注:上面的代码中，num=5的那次循环将被跳过。

异常处理语句

程序运行过程中难免会出错，出错后的运行结果往往是不正确的，因此运行时，出错的程序通常被强制中止。运行时的错误统称为异常，为了能在错误发生时得到一个处理的机会，JavaScript提供了异常处理语句：try-catch。编码时通常将可能发生错误的语句写入try块的花括号中，并在其后的catch块中处理错误。错误信息包含在一个错误对象里，通过exception的引用可以访问该对象。根据错误对象中的错误信息以确定如果处理。

try{
tryStatements   //必选项。可能发生错误的语句序列。
 }
catch(exception){  //必选项。任何变量名，用于引用错误发生时的错误对象。
 catchStatements  //可选项。错误处理语句，用于处理tryStatements中发生的错误。
}

示例如下：

var txt="";
 function message()
 { try { adddlert("Welcome guest!"); }
 catch(err) 
{ txt="本页有一个错误。\n\n";
 txt+="错误描述：" + err.message + "\n\n";
 txt+="点击确定继续。\n\n"; 
alert(txt);
 }
} 
message();

throw语句允许创建自定义错误，创建或抛出异常（exception）。如果把throw与try和catch一起使用，能够控制程序流，并生成自定义的错误消息。

提示用户：prompt()方法

有时候，不是仅希望用户回答 Yes/No，而是希望得到更特定的响应。在这种情况下，可问一个问题（带默认回答），然后接收回复。

prompt()方法用于显示可提示用户进行输入的对话框。方法返回用户输入的字符串。

语法：prompt(msg,defaultText)

参数msg可选。要在对话框中显示的纯文本（而不是HTML格式的文本）。用于提示。

参数defaultText可选。默认的输入文本。

可以使用对话框询问用户账号并处理回复。

<script> 
var ans = prompt("请输入您的账号?","666"); 
if (ans) {
  alert("您的账号是： " + ans); 
} 
else { 
     alert("您拒绝了回答！"); 
}
</script>