转战JS(1) 初探与变量类型、运算符、常用函数与转换

2022-09-21 22:04:23

转战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=”文件路径” type=”text/javascript” ></script>的方式使用。这种方式便于重用和统一管理，修改一个地方，所有使用相同JS代码段的地方的效果随之改变。

　　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一起讨论、学习

转战JS(1) 初探与变量类型、运算符、常用函数与转换,布布扣,bubuko.com