初始JavaScript

typora-copy-images-to: media

基本语法

JavaScript的历史：

在95年以前，就有很多上网的用户了，当时的带宽只有28.8kb/s，用户要进行表单的验证时，点击提交按钮，直接就将数据发送到服务器了，受限于带宽的关系，浏览器和服务器的通信很慢，大概一次通信需要30s的时间。

这样，问题就出现了，我们平常注册一个用户，需要填写很多信息，当我们将所有信息填写好，点击提交按钮后，等待30s以后，提示我们用户名被占用了，修改，提交，等待30s，提示用户名不符合规范，修改，提交，等待30s，密码不符合规范，修改，等待。。。这样的用户体验感很差，给网民造成很大的烦恼。随着上网的用户越来越多，问题越来越严重。

这时候，网景公司（Netscape ，这是一家浏览器公司）下定决心要解决这个问题，并将这个问题交给布兰登·艾奇（Brendan Eich，1964年～，当时在网景公司工作的一个程序员）来解决，他用了10个工作日的时间，设计了一个门语言，叫做LiveScript，专门用来解决客户端上的问题。网景公司和Sun公司合作，在发布的时候，改名为Javascript，目的是为了利用 Java 这个因特网时髦词汇。JavaScript 从此变成了因特网的必备组件。

因为 JavaScript 1.0 如此成功，微软推出了JScript脚本语言，后来陆续有好几家公司都创建了自己的客户端脚本语言。

此时，JavaScript 并没有一个标准来统一其语法或特性，随着互联网的发展，分久必合的趋势越来越有必要，最终，1997年，ECMA（欧洲计算机制造商协会）邀请了Netscape、Sun、微软、Borland等公司的一些程序员组成了TC39，定义了标准，名为ECMAScript。

ECMAScript是一个标准，而javascript是语言。

js概念

概念：支持面向对象的跨平台脚本语言。

理解：

1. 脚本语言：依赖别的语言才能运行
   html必须在浏览器中才能运行，js嵌套在html中才能运行
2. 跨平台：可以在不同的平台上运行
   windows、linux、安卓。。。
3. 支持面向对象
   使用面向对象的思想编程

应用场景：

1. 表单验证：规范用户输入数据，和后台数据进行交互
2. 网页特效：给页面内容加行为，让页面动起来
3. 游戏开发：飞机大战、打砖块
4. 物联网：https://zhuanlan.zhihu.com/p/45509947

JS和H5的关系

我们现在所说的H5，其实指的是大前端，主要技术包含：html+css+html5+css3+javascript+前端框架(vue+react+angular)+app+小程序+......

html5是html的下一个版本，就目前而言，我们知道的h5只是一些标签，并不能完美的展示出他的强大之处，有很多高端功能需要使用js来激活，例如：多媒体标签自定义控制多媒体的各种场景；canvas标签用js来绘制图形等。

随着h5应用越来越多，js的使用方式和各种框架及插件也越来越多，甚至已经从前端语言可以实现后台服务器的功能。js的发展已经成为一种潮流。

js的组成

ECMAScript：语法标准

BOM：操作浏览器的标准

DOM：操作html文档的标准

JS在html中

js的书写位置

js的不能独立运行，需要依赖html，html是由标签组成的，所以js在html中就体现为一个script双标签。js的代码就写在这个标签中。

这个标签可以放在html文档的任意位置，但在不同的位置，对于代码的执行有一定的影响，对于初学者，建议将script标签放在body结束之后。

当浏览器在执行html代码的时候，就会解析其中的script标签，并运行js代码。

js的注释

注释代码不会被执行，仅仅起到一个提示的作用。注释可以对复杂的代码进行解释，方便后期的维护和开发。

单行注释：

// js的单行注释是双斜杠

多行注释：

/*
js的多行注释：
开头是斜杠星号
结尾是星号斜杠
*/

js的输出

所谓输出，其实就是将内容显示在网页中，和html不同，js代码不会主动显示在网页中，要显示指定的内容，需要特殊方法指定才能显示在网页中，这个指定显示的过程就叫做输出。

1. 以弹窗的形式显示

alert(11);

这种输出通常适用于给用户做提示，例如：登录成功；删除失败；用户名被占用等......

1. 以文本的形式显示

document.write(123456);

这种输出方式通常用于动态改变或增加body标签中的内容，有些网页，我们在查看源代码的时候发现body中是没有代码的，但是在网页中会显示出很多内容，其实就是用js显示上的。这个中输出方式，显示的内容会自动添加到body标签中。

1. 可输入内容的弹窗

prompt(12345)

这种弹窗通常在项目使用较少，项目中要提示用户输入内容的时候通常都会使用表单。

1. 询问用户是否确认操作的弹窗

confirm(12345)

这种弹窗通常在项目中用户进行某些敏感操作时，提示用户是否继续进行下去，例如：用户点击了删除按钮之后，用户点击了退出按钮之后，需要让用户确认是否继续操作，可以取消。

1. 浏览器控制台输出

console.log(123);

这种输出方式在开发过程中很常用，通常用于调试代码时，在浏览器的控制台查看调试结果，不会影响到整体项目的逻辑和效果。

注意：在js代码中，每行结束可以加分号，也可以不加分号，但是建议加上。

变量

在实际项目中，很多情况下，需要在一个初始数据的基础上进行多次累加操作，例如：

// 第一次输出数字1
console.log(1)
// 第二次需要在第一次的结果基础上添加2
console.log(1+2)
// 第三次需要在第二次的结果基础上添加3
console.log(1+2+3)
// 如果有100次累加，我们就需要在后面写100个加，可想而知其中的繁琐

解决方案：我们可以将初始数据放在一个容器中，第二次累加的时候，就将第二个数据放在容器中，输出容器中的内容，第三次累加的时候，就将第三个数据继续放在容器中，继续输出容器中的内容，......

这样，我们只需要每次将数据放在容器中，容器中的数据随着每次放入，会逐渐增多。

这种容器，在js中就是变量。

也就是说，变量其实就是内存中存放数据的容器。

当这个容器不会自动出现在内存中，需要手动进行创建，也就是变量，不会自动产生，需要定义。

定义变量

语法：

var 变量名;

var是一个关键字，也就是js内部指定有特殊作用的单词。

变量名的规则

变量名由字母、数字、下划线、美元符号组成，不能用数字开头

m
m2
mp3
3m
user_id
_start
2_m

不能使用关键字作为变量名，关键字指的就是js内部有特殊作用所使用的单词，如下：

此外，尽量不要使用name，start等单词作为变量名。

变量定义的过程

定义多个变量的时候，可以使用一个简短的表达式，一次性定义多个变量：

var 变量1,变量2;

赋值

定义好变量就是在内存开辟好了空间，但空间中什么也没有，是一个空的空间。但正常情况下我们是要给其中放入数据的，给变量中放数据的过程，我们称之为赋值。

赋值需要用到一个符号叫赋值符：=

这个符号在编程中，不代表相等的意思，他有自己的使用特点：

• 赋值符左边的一定是一个变量，准备接收数据
• 赋值符右边的一定是一个值或者能得到值的一个表达式
• 赋值符的唯一作用就是将右边得到的值放在左边的变量容器中

例：

var a;
a = 10;
var b;
b = 20;
var c;
c = a + b;

定义变量，给变量赋值的两行代码，可以合并为一行：

var a = 10;
var b = 20;
var c = a + b;

定义多个变量，也可以在定义的时候赋值，每个变量之间使用逗号隔开：

var a = 10,b = 20;
var a,b = 20;
var a = 10,b;

数据类型

思考：如何输出一句话？

// 在页面上显示：你的头发还好吗
document.write(123456)
document.write(你的头发还好吗)

此时浏览器会报错：

这个报错表达的意思是说，将你的头发还好吗识别为了一个变量，但是这个变量没有定义过。

也就是说变量在定义的时候，变量的名字还可以使用中文：

var 我 = 123;
console.log(我);

这样也是可以的，但是建议不要使用中文汉字作为变量名。

那怎样才能输出上面的中文汉字一段话呢？我们需要给这段话加引号：

console.log("你的头发还好吗");

从上面的示例中，可以看到，输出数字不需要加引号，但是输出一段话就需要加引号，也就是说，数据有时候不需要加引号，但有时候就需要加引号，这是因为数据的类型不一致造成的。

js中可以输出数字，输出一段带引号的话，还可以输出哪些数据？

数字、带引号的数据、没有赋值的变量、true、false、[]数据、{}数据、null

根据他们的用途和特性，可以将数据分为以下几类：

使用typeof(被检测的内容)可以得出一个内容的类型。

console.log(typeof(-123456)); // 数字型
console.log(typeof("明天会更好")); // 字符串型
console.log(typeof(true)); // 布尔型
console.log(typeof(x)); // 布尔型
console.log(typeof([1,2,3])); // 对象
console.log(typeof({name:"张三",age:12})); // 对象
console.log(typeof(null)); // 对象

结果如下图：

多学一招：typeof(x) 可以写成 typeof x 。使用小括号和空格都可以。

数字类型

在结果中可以看到使用number来代表数字类型。

了解内容

不同进制的数字

我们一般使用使用的数字是十进制的，但是在js中我们还可以使用八进制和十六进制。

var a = 010; // 8进制
var b = 0xA; // 16进制
var c = 0xb; // 小写字母和大写字母都可以
console.log(a); // 8
console.log(b); // 10
console.log(c); // 11

结果：

科学计数法

数字的表达当中，有一种叫科学记数法，js中的数字也可以使用科学记数法来表示

//当一次数字很大的时候，可以用科学计数法来表示
var num = 3e+5;  //3乘以10的5次方
var num = 5e-3;//5乘以10的-3次方

数值范围

内存大和小有什么区别呢？存储的数据多和少的区别。那计算机存储数据是没有限制的吗？不是，计算机能表达的数字也有极限值：

最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity    1/0
无穷小：-Infinity

需要掌握的内容

NaN

var a = "abc";
var b = 2;
var c = a - b;
console.log(c); // NaN

结果：

NaN: not a number, 表示一个非数字

在js中，NaN用来表示一个非数字的特殊值，当发现无法进行运算时，js不会报错，而是会返回一个NaN

NaN的注意事项：

• NaN的类型是number类型的，表示一个非数字
• NaN不等于任何值，包括NaN本身
• 通过isNaN()可以判断是否是一个数字，返回false的时候，表示是一个数字。

var a = 123;
var b = "abc";
console.log(isNaN(a)); // false
console.log(isNaN(b)); // true

结果：

小数

计算机中的小数在进行运算的时候，有时会碰到小数点精度不准确的现象

//在进行浮点数运算的时候，可能会出现精度丢失的问题
0.1 + 0.2 = 0.30000000000000004;
0.2 + 0.2 = 0.4;

原因：

计算机内部所能识别的数据只有二进制，当我们进行10进制数字运算的时候，在计算机内部需要先将数据转为2进制，然后运算，再将结果转为10进制给出来。10进制的小数进行2进制转换的时候，根据转换规则，有些小数会进行无限死循环，最终在后面数字太多的时候只能四舍五入，所以其实最终并没有很精确的转为2进制，所以只能给出一个大概的值。有时候会有两个大概的值相加，在转换10进制的时候正好能转换了，也会计算的比较精准。

consoloe.log(0.2 + 0.2) // 0.4

也不绝对，如果小数是2的n次方分支m的话，计算机内部存储的就比较准确。

console.log(0.125 + 0.5) // 0.625

解决办法：

// 解决办法 : 
// 1.根据小数点后面的位数量 乘以对应的整数;
0.1 + 0.2  ==> (0.1*10+0.2*10) / 10 = 0.3
// 2.使用toFixed工具强制保留小数点后位数
var a = 0.1 + 0.2
console.log(a.toFixed(3)) // 0.300

字符串类型

字符串所使用的引号，在js中，单引号和双引号是没有区别的，使用哪个都一样。

字符串中的字符是任意字符，即只要在键盘上能输入的字符都是可以的。

单引号和双引号也是字符串的字符：

var str = '"' // 一个双引号字符的字符串
var str1 = "'" // 一个单引号字符的字符串

引号问题

但是双引号中不能包含双引号，单引号中不能包含双引号，因为引号对于字符串来讲是有特殊含义的，就是给字符串做边界，双引号定义的字符串，在字符串中碰到第一个双引号，就认为将前面的双引号结束了，单引号同理。

但在某些特殊情况下，双引号就需要嵌套双引号，单引号就需要嵌套单引号：

var str = '爷爷正在的给孙子讲<<西游记>>的故事，爷爷说:"唐僧害怕被孙悟空打死，所以对孙悟空说:'你回花果山吧'"';
console.log(str)

这个字符串在输出的时候是会报错的，因为，浏览器是这样解析这个字符串：

'爷爷正在的给孙子讲<<西游记>>的故事，爷爷说:"唐僧害怕被孙悟空打死，所以对孙悟空说:'    你回花果山吧   '"';

中间的汉字和两边的字符串之间并没有拼接，不符合js的语法，所以报错。

此时，关键的原因就是单引号字符串中碰到了第一个单引号，就将前面的单引号结束了，因为引号对于字符串是有特殊含义的。

解决方案：

给字符串中的引号转义，也就是将引号对于字符串的特殊含义去掉，就剩下普通字符的含义即可。转义是给引号前加反引号\。

var str = '爷爷正在的给孙子讲<<西游记>>的故事，爷爷说:"唐僧害怕被孙悟空打死，所以对孙悟空说:\'你回花果山吧\'"';
console.log(str)

js输出标签

js可以输出标签，让页面中的元素具备标签的特性，但是在输出标签的时候一定要将标签当做字符串输出。

输出标签可以看出，每次输出，其实就是在body内容原本的基础上直接追加了，也就是说，一个标签可以分多次输出，结果和输出一次是一样的。

字符串的拼接

用变量代替每一次的输出：

var a = '<i>';
var b = '文字倾斜';
var c = '</i>';
document.write(a)
document.write(b)
document.write(c)

如果我们在此时希望能一次输出的话，就需要将多个变量连接在一起，组成一个更大的字符串才行，字符串之间的连接使用拼接符：+

var a = '<i>';
var b = '文字倾斜';
var c = '</i>';
document.write(a + b + c)

也就是说，字符串和字符串之间的 + 是可以将两个字符串连接在一起组成大字符串的。

对象类型

object类型，在js中有3种表现形式，分别是：

• null
• 用[]定义的数据
• 用{}定义的数据

undefined类型

当一个变量定义好了，但是没有给这个变量赋值，也就是没有给这个容器中放入数据，这个变量的默认值就是undefined，类型也是undefined。

运算符

算术运算

求余运算，通常用于判断一个数字是奇数或偶数。因为所有奇数对2求余的结果都是1，所有偶数对2求余的结果都是0。

关系运算（比较运算）

关系运算最后的结果只有两种，一种是真，一种是假，也就是布尔型的true和false

console.log(2>3); // false
var a = 2>1;
console.log(a); // true

结果

等于和全等于

var a = 123;
var b = "123";
console.log(a==b); // true
console.log(a===b); // false

结果

引号只能代表数据的类型不同，字符串在内存中存储的时候不会将引号存进去的，所以字符串在内存中的真是存储其实是不带引号的，所以a变量和b变量在内存中存的内容也一样，所以是相等的

但类型不一样，所以不全等。

赋值运算

代码：

var a = 1;
a += 2; // 将a先加2，得到结果3，再将3赋值给a
console.log(a); // 3

要理解上面的代码，首先理解给变量重新赋值。

var a = 1; // 先声明，给a赋值为1
a = 3; // 给变量a重新赋值为3
console.log(a); // 3

然后理解自己运算后再赋值给自己（回想一下：赋值符左边是变量，右边是值）

var a = 1;
a = a + 2; // 自己加2后再赋值给自己
console.log(a); // 3

练习：最后的a变量是多少？

var a = 5;
a %= 3;
console.log(a); // 2

逻辑运算

逻辑运算一般用于判断多个关系运算，得出最后结果。

逻辑运算最后得出的结果也是布尔型。

例题：

模特的要求：年龄在18岁以上，30岁以下。小红今年20岁，看看小红是否满足条件。

var age = 20; // 小红的年龄
var result = age > 18 && age < 30;
console.log(result); // true    说明小红满足条件了

如果小红今年31岁呢？

var age = 20; // 小红的年龄
var result = age > 18 && age < 30;
console.log(result); // false    说明小红不满足条件

小红嫁人：小红想嫁给小明。小明说：除非你身高160cm以上，或者你有50000元的嫁妆。小红身高155cm，做模特攒了100000元。看看小红是否满足小明的条件。

var height = 155; // 小红的身高
var money = 100000; // 小红的钱
var result = height > 160 || money > 50000;
console.log(result); // true 说明小红满足了小明的条件

如果小红只攒了30000元呢？

var height = 155; // 小红的身高
var money = 30000; // 小红的钱
var result = height > 160 || money > 50000;
console.log(result); // false 说明小红不满足小明的条件

双重否定等于肯定。

年龄小于18或年龄大于30都不满足小红嫁人的条件。

var age = 20; // 小红的年龄
var result = !(age < 18 || age > 30); // 不满足条件，再取反就满足了
console.log(result); // true   说明这种表达方式也是可以的

小红身高小于160cm，并且钱财小于50000元，就不满足小明的条件。

var height = 155; // 小红的身高
var money = 100000; // 小红的钱财
var result = !(height < 160 && money < 50000); // 不满足条件再取反表达满足
console.log(result); // true 说明小红还是满足条件的

自增自减运算

符号：++ 表示让一个数字递增1

var a = 1;
a++
console.log(a); // 2

++可以放在后面，也可以放到前面，表示的意思是一样的

var a = 1;
++a;
console.log(a); // 2

当递增运算碰到赋值或者输出的时候，++放在前面和后就有了区别：

放在后面

var a = 1;
console.log(a++); // 1
console.log(a); // 2
var b = 1;
var c = b++;
console.log(c); // 1
console.log(b); // 2

当++放在后面的时候，就最后进行递增运算，先进行输出或者赋值。

放在前面

var a = 1;
console.log(++a); // 2
console.log(a); // 2
var b = 1;
var c = ++b;
console.log(c); // 2
console.log(b); // 2

当++放在前面的时候，就先进行递增运算， 后进行输出或赋值。

符号：-- 表示让一个数字递减1

使用方法和注意事项与递增一样。

递增递减运算需要使用变量，不能使用具体数字

类型转换

强制转换

1. 转换为布尔型

语法：
	Boolean(arg)

• 非0数字转换为布尔型为true，0转换为布尔型为false
• 非空字符串转换为布尔型为true，空字符串转换为布尔型为false
• undefined转换为布尔型为false
• null转换为布尔型为false

1. 转换为字符串

语法：
	String(arg)

• true转换为字符串仍为 true，false转换为字符串仍为false
• null转换为字符串扔为null
• undefined转换为字符串仍为undefined

1. 转换为数字

语法：
	Number(str)

• NaN代表不是数字，但是他是数字类型（没有意义的数字）
• 非数字字符串转换后都是NaN（NaN是一个不是数字的数字类型）
• true转为数字为1，false转为数字为0
• undefined转换为数字为NaN
• null转化为数字为0

1. 使用函数强制转换为数字

语法：
	parseInt(arg) # 强制转换为整数
	parseFloat(arg) # 强制转换为小数

• 小数转换为整数只取整数，向下取整
• 首位非数字的字符串强转为整数为NaN，首位是数字的字符串强转为整数是首位的数字
• 布尔型强转为数字为NaN
• undefined强转为数字为NaN
• null强转为数字为NaN

1. 使用toString()方法强制转换为字符串，转换结果和String()函数一样

var a = 123456;
b = true;
var c = a.toString();
var d = b.toString();
console.log(c);
console.log(typeof c);
console.log(d);
console.log(typeof d);

注意：这个方法不能给undefined和null使用

隐形转换

数学运算时转换为数字型，例：

var str = "100"
var a = str%10; // 乘和除以及求余都行
var b = true + 1
console.log(a);
console.log(b);

比较运算时发生隐形转换，例：

• 如果两个值都是字符串，则进行比较编码值
• 如果有一个值为数字或布尔型，则转换为数字进行比较
• 字符串进行比较的时候首字符进行比较，相等再进行后面的字符比较。参照阿斯克码表。

拼接运算时发生字符串转换，例：

var a = "1";
console.log(a+12); // 112

扩展

进制介绍

我们平常使用的数字是十进制的，由0~9这10个数字组成，没有一个单独的数字代表10，要表示10，需要向前进一位，所以是10进制。

计算机内部还会使用二进制、八进制和十六进制。

二进制由0和1两个数字组成，没有一个数字表示2，要表示2，需要向前进一位。

同理八进制由0~7这8个数字组成。表示8的时候要向前进一位。

十六进制由0_9和af这16个数字组成，使用f来表示15，表示1要向前进一位。

进制转换：

转成10进制：以进制为底，幂从右往左依次为0次方，1次方，2次方…，乘以当前当前数字在10进制中的结果，所有乘积相加