首页 > 代码库 > 转战JS(1) 初探与变量类型、运算符、常用函数与转换
转战JS(1) 初探与变量类型、运算符、常用函数与转换
转战JS(1)初探与变量类型、运算符、常用函数与转换
做为一名.NET后台开发人员，正考滤向Web前端开发转型，之前也写过一代前端代码，可是当再回头看JS，并有转向它的意愿的时候，突然发现：原来JS不是那么简单的。很多的细节部分以前都没有注意到，现在把学习的知识点记录下来，做为学习笔记，好时不时看看。如果有什么错误，还请各位看官多多包涵、多多指正。
JavaScript是一门轻量型的面向Web编程的脚本言语言，常被简称为：JS。广泛应用于PC和各种移动设备中，常和HTML、CSS一起组成网页页面。它也常被一些人和Java相关连起来，然而实质上它们完全是两种不同的编程语言(当我遇到这事后，才相信原来还真有人这么认为)。JavaScript的运行，需要解释器(“引擎”)，为浏览器的一部分。本章的内容为：
1、 JS的引用、注释；
2、 变量与数据类型
3、 运算符与表达式
4、 常用函数对象
5、 类型转换
写在之前：写程序的重要一项工作就是调试，在这个系列中，所有的调试都是用Chrome浏览器。操作方法为：打开浏览器后按”F12”，定位到”Control”选项卡，在输入栏中输入代码即可。如果是HTML页面中JS代码调试，则要定位到”Source”选项卡，在必要的地方打上断点。
一JavaScript的引用与注释
1.1 引用
1） 写在<head />标签之中，通过<script type=”text/javascript”> … <script>的方式使用。这种方式是把所有的JS代码写在名为.html .php .aspx .jsp这类文件当中，方便查看，但通常不能复用(母版除外)。
2） 将名为以.js为后缀的形如<名称>.JS 的js文件写在别处，然后通过<script src=http://www.mamicode.com/”文件路径” >
3） 写在页面文件当中，但在<head />之外。它和第一种方式类似，不同的是加载的时间不同，当运行到这个地方时就会被执行，随DOM结构一起加载；而第一种方式而不随DOM结构加载。
1.2 注释
JS的注释有两种方式，注释不会运行。
1） 单行注释：var sum = 1 + 1;//在双斜杠之后，且在这一行类，的内容都是注释内容。
2） 多行注释：也叫块注释，它的特点是一次能注释多行，以/* 开头，以*/ 结束，在这之间的内容都是注释部分。
1.3 例子
下面这个例子解释了JavaScript的引用方式和注释：
1 <!DOCTYPEhtml> 3 <htmlxmlns="http://www.w3.org/1999/xhtml"> 5 <head> 7 <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/> 9 <title></title> 11 <scriptsrc="../Scripts/jquery-1.7.1.min.js"></script> 13 <!--这是第二种引用方式，它的特点是这个文件里的代码可以很方式的重用--> 15 <scripttype="text/javascript"> 17 //这是第一种引用方式 19 alert(1); 21 </script> 23 </head> 25 <body> 27 <div> 29 <scripttype="text/javascript"> 31 alert(3); 33 /*这是第三种方式*/ 35 </script> 37 </div> 39 </body> 41 </html>
注：
1） 大家注意到的<!-- -->，这也是一种注释方式，但它是属于HTML的。
2） 而alert(内容)，则是js的一种提示形式，保存为.html后用浏览器打开便可看到效果。
3） 每一条语句结束后，以分后做为标识符，表示这一条语句结束。通常情况下，这个分号可以省略，但标准的编程规范和在一些特殊场合(如在写一些函数，插件时)，则要求这个分号不能省略。
二变量与数据类型
2.1 变量
和所有其它的编程语言一样，JavaScript也有变量和与它相对应的变量类型。变量是存储信息的容器，而存储的信息的特征，就叫数据的类型。比如：数字形如：1 2 3，可以进行算术运算。布尔类型形如: true false，可以进行逻辑成立和逻辑否定的标识。做为一门弱类型的语言，JavaScript的变量在定义时，统一采用var 做为关键字。一个完整的变量的定义形式如下：
var sum;
var 是变量的标识关键字。Sum是这个变量的名称。这里只定义了一个变量，可通过下面的形式给这个变量赋一个值。
sum = 5;
也可把这两条语句结合在一起：
var sum = 5;
在定义一个变量的同时，给它赋上一个值的形式，就叫做变量初始化(变量赋初值)。
如果要一次性定义多上变量，可以将多个变量写在一行，中间用逗号分隔，而在前面只写一个变量标识即可：
Var max = 10,min = 1;
2.2强类型与弱类型
先前讲了JavaScrip是一门弱类型类的语言。如果一门语言可以隐式且正确的转换成它的几乎所有变量类型，这样的语言就可简单的称为弱类型(var temp = 123; console.log(temp + "456");)。与此相对的强类型则是大部分的类型都不能隐式转换（C#的int可转为 double）。更准备和详细的解释可baidu。
2.3数据类型
虽然JS变量定义的关键字都是var ，但根据赋给它的值的不同，这个变量就会拥有不同的类型。通过“typeof 变量名” 的方式查看数据类型，如：var t = 1; console.log(typeof t);
常用类型
Boolean类型：var isN = true;console.log(typeof isN); 它只有true 和false 两种值。
Number类型：var Num = 1; console.log(typeof Num); 在JS中整数和小数均为number类型。
String类型： var str = "123"; console.log(typeof str); 表示字符串，单引号和双引号均能正确的表示成string类型。
Object类型： var tim = new Date();console.log(typeof tim); 一系列属性的无序集合。除了日期外，还是数组、对象均为object。
var arr = new Array(1,2,3);console.log(typeof arr);
var obj = {‘zs‘: ‘‘,‘age‘:14};console.log(typeof obj);
null类型：一个空值，唯一的值是null，表示空引用。
undefined类型：没有定义或赋值的变量(JS变量也遵循”变量先定义，后使用”后原则)。
NaN类型：非数字类型。
三运算符与表达式
程序的作用就是展示与运算。有了变量，就有各个变量之间的运算。主要分为以下几种运算符：算术运算符、赋值运算符、
3.1 算术运算符
[加]Var zhi = 1 + 2; //结果：zhi = 3
[减]Var zhi = 2 – 1; //结果：zhi = 1
[乘]Var zhi = 2 * 2; //结果：zhi = 4
[除]Var zhi = 2 / 2; //结果：zhi = 1
[取模(求余)]Var zhi = 4 % 3; //结果：zhi = 1
[自增，自增再赋值]Var t = 5; var zhi = t++; //结果：t = 5; zhi = 5[先把t赋值给 zhi ，然后t再自增1]
[自减，自减再赋值]Var t = 5; var zhi = t--; //结果：t = 4; zhi = 4[先把t赋值给 zhi ，然后t再自减1]
[自增，先赋值再自增]Var t = 5;var zhi = ++t; //结果：t = 5;zhi = 5[t 先自增1，再把t赋值给zhi]
[自减，先自减再赋值]Var t = 5;var zhi = --t;//结果：t = 5;zhi = 5[t 先自减1，再把t赋值给zhi]
3.2 赋值运算符
[简单赋值] var zhi = 5;
[加等] var zhi = 5;zhi += 5; //结果：zhi = 10 相当于zhi = zhi + 5;
[减等] var zhi = 5;zhi -= 5; //结果：zhi = 0 相当于zhi = zhi – 5;
[乘等] var zhi = 5;zhi *=5; //结果: zhi = 25 相当于zhi = zhi * 5;
[除等] var zhi = 5;zhi /=5; //结果：zhi = 1 相当于 zhi = zhi / 5;
[模等] var zhi = 5;zhi %=3; //结果: zhi = 2 相当于zhi = zhi % 3;
3.3 逻辑运算符
逻辑运算符的结果只有true 和 false 两种值。True也叫真,false也叫假。
[逻辑或，有一个为真就为真] var a = true;var b = false;console.log(a||b);结果为:true
[逻辑与，有一个为假就为假] var a = true;var b = false;console.log(a&&b);结果为：false
[逻辑非] var a = true;console.log(!a);结果为：false。如果为真，就返回假；如果为假，就返回真
在这里要注意一个非常有意思的事件：
当：var a = 3,b = 5,c = 7;if(a<b||c++)console.log(c);输出 7 C的结果为7
当：var a = 3,b = 5,c = 7;if(a>b||c++)console.log(c);输出 8 C的结果为8
对于if(…)中的条件，返回的结果都为真，那是因为无论前面的计算结果怎样，C的值转换为逻辑值时始终为真。而造成if(…)的结果都为真，但C 的值不同的情况，是因为：当前面计算结果为真时，忽略后面的运算。
3.4 关系运算符
关系运算符执行的是比较运算，每个关系运算符返回的结果都是一boolen值[true 或false]。
[大于]var a = 2,b = 3;console.log(a>b);返回fasle
[小于] var a = 2,b = 3;console.log(a<b);返回 true
[大于或等于]var a = 2,b = 2;console.log(a>=b);返回true
[小于或等于]var a = 2,b = 2;console.log(a<=b);返回true
3.5 三目运算符(条件运算符)
在C语言里也有这么一个运算符，先入为主，我就叫它“三目运算符”了，在W3School中，叫它“条件运算符”。用一行代符来替代if()…else…，形式如下：
Var zhi = 条件?exp1:exp2;
它表示：如果”条件“返回结果为true(真),那么就执行exp1，否则就执行exp2；常见形式为：
1） var zhi = a > b ? a : b;//它表示，如果 a 大于 b，就把a 的值赋给zhi，否则就把 b 的值赋给 zhi，exp为值
2） var a = 3,b = 8,c = 5;var zhi = a>b?b>c?c:b:a>c?c:a;console.log(zhi);返回三个数的取小值，exp为表达式
3.6 重新赋值时的变与不变
JavaScript中的原始值undefinde 、null 、boolen 、数字和字符串是不能更改的，任何一次看似重新的赋值，实则是返回了一个新的值给变量。
JavaScript的变量和众多的其它编程语言的数据类型一样，也可划分为“值类型”和“引用类型”。当给一个变量赋值的时候，就会在内存中给它分配一存存储空间，用于存储这个值，然后让这个变量去指向它。值类型是指当进行数据的复制时：a = b;是在内存中新建一块存储空间，这个存储空间中存储的就是b的值，然后让a去指向它，这就是“值复制”，复制完成后对a的值的修改不会影响到b。而引用类型则是当执行： a = b;时，是让a 去指向b所指向的内存空间，a和b共用一个存储空间，因此当修改了a的值时，b的值也会发生更改(这么说或许并不严谨，打个比比方：b为了放苹果，找了一个盒子来存放。然后它告诉a说你可以在什么地方去拿，而a觉得不好吃，就换成了西瓜。因为b只能在那个地方去拿，因此它拿到的也就是西瓜了)。
四常用函数对象
注意：在Javascript里，是区分大小写的
数学函数：
随机数： Math.random()生成一个大于等于0小于1.0的伪随机数
[得到介于10的随机数： parseInt(Math.random()*10)]
四舍五入： Math.round(5.62389)//6返回最接近的整数
向上取整(开花板函数)： Math.ceil(5.12313)// 6不论小数点后面大小如何，向上取整
向下取整(地板函数)： Math.floor(5.9555)//5不论小数点后面大小如何，向下取整
绝对值： Math.abs(-5)//5
返回取大值： Math.max(1,5,6);//6
返回取小值： Math.min(1,5,6);//1
算术平方根： Math.sqrt(4)//2
幂运算： Math.pow(2,4); //16
保留指定小数位： 变量.toFixed(保留的小数位数)
在运算中，如果数据溢出，则返回Infinity；操作失败则返回NaN
日期时间函数
创建日期时间: var time = new Date();
结果：Wed Jun 11 2014 15:27:41 GMT+0800 (中国标准时间)
取年份： var time = new Date(); time.getYear();结果 114【当前是2014年】
取完整年份： var time = new Date(); time.getFullYear();结果2014
取月份： var time = new Date(); time.getMonth(); 结果：5【当前是6月】
说明：js取月份是从0开始计数，因此在实际使用中，常为year = time.getMonth()+1
取日： var time = new Date(); time.getDate();结果：11【当前是11号】
取时： var time = new Date(); time.getHours()；
取分： var time = new Date(); time.getMinutes();
取秒： var time = new Date(); time.getSeconds();
取时间戳： var time = new Date(); time.getTime();
星期几： var time = new Date(); console.log(time.getDay());
指定日期： var t = new Date(2016,5,6);console.log(t.getFullYear());
字符串函数
取长度： var str = "123abc中国人";console.log(str.length);由此可见无论是中文、数字还是英文字符，均只占一个长度。
查找指定位字符： var str = "123abc中国人";console.log(str.charAt(6));//中，在指定字符串中查找索引为6的字符，从0开始计位。[查找最后一位字符：str.charAt(str.length-1)]
字符串截取： var str = "123abc中国人";console.log(str.substring(1,3));结果：23。从截取指定索引开始到指定索引结束的字符，当只有一个参数时，表示从指定索引开 始，到后面的整个字符结束
字符串截取： var str = "123abc中国人";console.log(str.substr(1,3));结果：23a。从指定索引开始，共截取多少个字符
字符串截取： var str = "123abc中国人";console.log(str.slice(1,3));和substring()一样
字符串截取(从后数)： var str = "123abc中国人";console.log(str.slice(-1));从后面开始，共截取指定长度字符。
首次出现的索引位置: var str = "123abc中国人";console.log(str.indexOf("a"));//3，未找到时返回 -1
最后一次出现的位置： var str = "123abc中国a人";console.log(str.lastIndexOf("a"));//8
从指定位置开始查找指定字符首次出现的索引位置： var str = "123abca中国a人";console.log(str.indexOf("a",4));//返回6。从索引4开始查找指定字符第一次出现的位置
字符串分割为数组 ：var str = "11@qq.com;22@qq.com";console.log(str.split(";"));//结果为：["11@qq.com", "22@qq.com"]
将数组按指定字符串组合成数组： var array = ["11@qq.com", "22@qq.com"];console.log(array.join(";")); //结果为：”11@qq.com;22@qq.com”
字符串替换： var str = "我爱中国";console.log(str.replace("爱","很爱"));//结果为：我很爱中国。用后面的字符串替换掉前面的字符[后面的替换掉前面的，这一点在JS的很多地方都有体现]
所有英文大写转换为小写： var str = "abcABC中国人"; console.log(str.toLowerCase());//结果为：abcabc中国人
所有英文小写转换为大写： var str = "abcABC中国人"; console.log(str.toUpperCase());//结果为：ABCABC中国人
另外，如果要访问某个字符串中的指定索引的值，还可能像访问数组一样的访问。比如：
var str = "abcderg";console.log(str[2]); //返回结果为：c
但是要注意的是，这种方式并不被IE8之前的浏览器所支持。
数组函数
所有操作，当数组为空时返回undefined。数组索引从0开始
数组： var arr = [1,2,3];
删除第一个索引(下标)值：shift();
var arr = [1,2,3];var t = arr.shift();console.log(t);console.log(arr);
值：t = 1;arr = [2, 3]
将一个或多个值添加到数组最前面：unshift()
var arr = [1,2,3];var t = arr.unshift(-1,0);console.log(t);console.log(arr);
t = 5
arr =[-1, 0, 1, 2, 3]删除最后一个索引值：pop()
var arr = [1,2,3];var t = arr.pop();console.log(t);console.log(arr);
t = 3
arr = [1, 2]将一个或个多个值添加到数组最后：push()
var arr = [1,2,3];var t = arr.push(-1,0);console.log(t);console.log(arr);
t = 5
arr t = [1, 2, 3, -1, 0]移除元素：splice(,)
从指定位置开始，共移除指定长度的值
var arr = [1,2,3,4,5,6];var t = arr.splice(1,2);console.log(t);console.log(arr);
t = [2, 3]
arr = [1, 4, 5, 6]该函数还有一个使用方式就是在删除的位置开始，插入一个或多个元素
var arr = [1,2,3,4,5,6];var t = arr.splice(1,2,7,8,9);console.log(t);console.log(arr);
t= [2, 3]
arr = [1, 7, 8, 9, 4, 5, 6]即:从第三个参数开始，后面以逗号分隔开的，都是要插入的值
反转值函数：reverse()
var arr = [1, 7, 8, 9, 4, 5, 6];var t = arr.reverse();console.log(t);console.log(arr);
t = [6, 5, 4, 9, 8, 7, 1]
arr = [6, 5, 4, 9, 8, 7, 1]排序函数：sort()
var arr = [1, 7, 8, 9, 4, 5, 6];var t = arr.sort();console.log(t);console.log(arr);
t = [1, 4, 5, 6, 7, 8, 9]
arr = [1, 4, 5, 6, 7, 8, 9]字符串连续截取函数：slice(起始索引，结束索引)
注意：结束索引是索引值，从0开始，而不是共要截取的长度
var arr = [1, 7, 8, 9, 4, 5, 6];var t = arr.slice(2,6);console.log(t);console.log(arr);
t = [8, 9, 4, 5]
arr = [1, 7, 8, 9, 4, 5, 6]这里要注意区分splice(,)和slice()两个函数。 Splic(,)是删除数组元素，而slice()是从原数组中返回要截取的值，但原数组内容不变
将字符串转换为数组：split(分隔字符串)
注意：并不是所有的字符串都能转换为数组，在使用splice()时，参数”分隔字符串”一定要正确
var str = "1,2,3,4,5,6";var t = str.split(",");console.log(t);console.log(str);
t = ["1", "2", "3", "4", "5", "6"]
str = “1,2,3,4,5,6 “五类型转换
做为一种弱类型语言，JavaScript的取值类型非常灵活。
提前说：下面说的“变量”，并不一定指变量，也同时代指某种数据类型的直接量[直接量：程序中直接使用的数据值，如整数 1、字符串: “str“等]。
5.1 各种类型的转换方式
转换为字符串：变量.toString()、String(变量)、变量.join(数组)
转换为数值类型：parseInt(变量)、parseFloat(变量)、Number(变量)
转换为日期型：new Date(变量)
转换为布尔型：Boolean(变量)
转换为数组：变量.split(“分隔符”)
上面说的这些转换或许并不严格，有些甚至有些先行条件。如：转换数组那个，首先就要求变量必需是数组。但这些在实际的应用中是非常有效的。
5.2 转换对应表
注：对于不能转换的情况，是指不能直接转换。有的是可以通过间接的方式转换的。
| 变量 | 转换为 | 转换为 | 转换为 | 转换为 | 转换为 |
| var t = “s;t;r” (字符串) | “s;t;r” | NaN | true | / |
str.split(";"); 结果:["s", "t", "r"] （只能以;分割） |
| var t = 1.1; (数值) | “1.1” | parseInt(t) 结果:1 ParseFloot(t) 结果:1.1 Number(t) 结果:1.1 | 非0为true 当为0时，结果为false | / | / |
| var t = true; (布尔值) | true | 为true时，值为1 为false时，值为0 | true | / | / |
| var t = new Date() (日期时间型) | hu Jun 12 2014 10:49:33 GMT+0800 (中国标准时间) | 1402541401307 (得到时间戳) | true | hu Jun 12 2014 10:49:33 GMT+0800 (中国标准时间) | / |
| var t = null; (Null) | null | 0 | false | / | / |
| var t = undefined; （undefined） | undefined | NaN | false | / | / |
| Var t = function (){this.t = 3;}; (函数) | 返回整个函数 function (){this.t = 3;} | NaN | true | / | / |
同时也欢迎大家入群：258387392一起讨论、学习