学习 JavaScript

1.JavaScript的使用

1.1、标签引用

在HTML中在script标签中就可以编写JavaScript代码，以下是一个简单演示。

<script>
   alert("Hello,World!");
</script>

1.2、文件引用

在一个单独的js文件中也可以编写JavaScript代码，然后在HTML文件中使用script标签进行引用，以下是一个简单演示。

main.html

<script src="main.js"></script>
main.js

alert("Hello,World!");

JavaScript的输出
页面输出
如何使用JavaScript向页面输出一句话，请参考以下代码。

<script>
    document.write("Hello,World!");
</script>

1.3控制台输出

如何使用JavaScript向控制台输出一句话，请参考以下代码。

注意：页面按F12弹出控制台

<script>
    console.log("输出一条日志");//最常用
    console.info("输出一条信息");
    console.warn("输出一条警告");
    console.error("输出一条错误");
</script>

1.4、弹出窗口输出

如何使用JavaScript向弹出窗口输出一句话，请参考以下代码。

<script>
    alert("Hello,World!");
</script>

1.5、JavaScript的注释

注释中的内容不会被解析器解析执行，但是会在源码中显示，我们一般会使用注释对程序中的内容进行解释。

JS中的注释和Java的的一致，分为两种：

单行注释：// 注释内容
多行注释：/* 注释内容 */

1.6、单行注释

<script>
    // 这是注释内容
    console.log("Hello,World!");
</script>

1.6.1、多行注释

<script>
    /**
     * 这是注释内容
     */
    console.log("Hello,World!");
</script>

2.JavaScript基础语法

2.1、标识符

所谓标识符，就是指给变量、函数、属性或函数的参数起名字。

标识符可以是按照下列格式规则组合起来的一或多个字符：

第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。
其它字符可以是字母、下划线、美元符号或数字。
按照惯例，ECMAScript 标识符采用驼峰命名法。
标识符不能是关键字和保留字符。
关键字：

保留字符：

其它不建议使用的标识符：

单个单词的标识符举例：

name、age、gender、hobby

多个单词的标识符举例：

studentName、studentAge、studentGender、studentHobby

2.2、字面量和变量

2.2.1、字面量

字面量实际上就是一些固定的值，比如：1、2 、3、true、false、null、NaN、“hello”，字面量都是不可以改变的，由于字面量不是很方便使用，所以在JavaScript中很少直接使用字面量，使用的而是变量。

2.2.2、变量

变量的作用是给某一个值或对象标注名称。比如我们的程序中有一个值123，这个值我们是需要反复使用的，这个时候 我们最好将123这个值赋值给一个变量，然后通过变量去使用123这个值。

变量的声明： 使用var关键字声明一个变量。

var a;

变量的赋值： 使用=为变量赋值。

a = 123;

声明和赋值同时进行：

var a = 123;

2.3、数据类型

2.3.1、类型分类

数据类型决定了一个数据的特征，比如：123和”123”，直观上看这两个数据都是123，但实际上前者是一个数字，而后者是一个字符串。

对于不同的数据类型我们在进行操作时会有很大的不同。

JavaScript中一共有5种基本数据类型：

字符串型（String）
数值型（Number）
布尔型（Boolean）
undefined型（Undefined）
null型（Null）
这5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型。

2.3.2、typeof运算符

使用typeof操作符可以用来检查一个变量的数据类型。

使用方式：

typeof 数据

示例代码：

console.log(typeof 123);
console.log(typeof "Hello,World!");
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);

运行结果：

2.3.3、String

String用于表示一个字符序列，即字符串。字符串需要使用 单引号 或 双引号 括起来。

转义字符：

注意：使用typeof运算符检查字符串时，会返回"string"。

2.3.4、Number

Number 类型用来表示整数和浮点数，最常用的功能就是用来表示10进制的整数和浮点数。

Number表示的数字大小是有限的，如果超过了这个范围，则会返回 ±Infinity。

最大值：+1.7976931348623157e+308
最小值：-1.7976931348623157e+308
0以上的最小值：5e-324
特殊的数字：

Infinity：正无穷
-Infinity：负无穷
NaN：非法数字（Not A Number）
其它的进制：

二进制：0b 开头表示二进制，但是，并不是所有的浏览器都支持
八进制：0 开头表示八进制
十六进制：0x 开头表示十六进制
注意：使用typeof检查一个Number类型的数据时（包括NaN 和 Infinity），会返回"number"。

2.3.5、Boolean

布尔型也被称为逻辑值类型或者真假值类型。

布尔型只能够取真（true）和假（false）两种数值。除此以外， 其它的值都不被支持。

2.3.6、Undefined

Undefined 类型只有一个值，即特殊的 undefined。

在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined。

注意：使用typeof对没有初始化和没有声明的变量，会返回“undefined”。

2.3.7、Null

Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。

undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true。

注意：从语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object。

3.使用字面量创建

语法格式：

var 变量名 = /正则表达式/匹配模式;
1
匹配模式：

i：忽略大小写
g：全局匹配模式
m：执行多行匹配
注意：可以为一个正则表达式设置多个匹配模式，且顺序无所谓

案例演示：

// 这个正则表达式可以来检查一个字符串中是否含有a
var reg = /a/i;
var str = "Abc";
var result = reg.test(str);
console.log(result);

3.1正则进阶

需求信息：创建一个正则表达式，检查一个字符串中是否有a或b

语法格式：使用 | 表示或者的意思

// 这个正则表达式可以来检查一个字符串中是否含有a
var reg = /a|b|c/;
var str = "Abc";
var result = reg.test(str);
console.log(result);

试想一下，如果我们现在要是想要检查一个字符串是否含有小写字母，那我们是不是可以reg = /a|b|c|d|e|f|g ... /;这么写，但是你会发现，好啰嗦啊，怎么这么麻烦呢，有没有一种更简单的方式，答案是肯定的。

需求信息：创建一个正则表达式，检查一个字符串中是否有字母

语法格式：[ ] 里的内容也是或的关系

// 这个正则表达式可以来检查一个字符串中是否含有字母
var reg = /[A-z]/;
var str = "Abc";
var result = reg.test(str);
console.log(result);

3.1.1常见组合：

[a-z]：任意小写字母
[A-Z]：任意大写字母
[A-z]：任意字母
[0-9]：任意数字
需求信息：创建一个正则表达式，检查一个字符串中是否含有 abc 或 adc 或 aec

// 这个正则表达式可以来检查一个字符串中是否含有abc或adc或aec
var reg = /a[bde]c/;
var str = "abc123";
var result = reg.test(str);
console.log(result);

那现在我们已经学会了判断是否包含，那要是判断除了某些字符序列该咋整，只需要这么写[^字符序列]

3.1.2常见组合：

[^a-z]：除了任意小写字母
[^A-Z]：除了任意大写字母
[^A-z]：除了任意字母
[^0-9]：除了任意数字
需求信息：创建一个正则表达式，检查一个字符串中是否除了数字还有其它字母

// 这个正则表达式可以来检查一个字符串中是否除了数字还有其它字母
var reg = /[^0-9]/;
var str = "0123456789";
var result = reg.test(str);
console.log(result);

3.2正则方法

这些正则方法其实都是字符串的方法，但是它的参数需要传递正则表达式，在这里，我就先称为正则方法。

split()方法演示：该方法可以将一个字符串拆分为一个数组，方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串，这个方法即使不指定全局匹配，也会全都插分

var str = "1a2b3c4d5e6f7";
var result = str.split(/[A-z]/);
console.log(result);
 

search()方法演示：该方法可以搜索字符串中是否含有指定内容，如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1，它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串，serach()只会查找第一个，即使设置全局匹配也没用

var str = "hello abc hello aec afc";
var result = str.search(/a[bef]c/);
console.log(result);
 

match()方法演示：该方法可以根据正则表达式，从一个字符串中将符合条件的内容提取出来，默认情况下我们的match()只会找到第一个符合要求的内容，找到以后就停止检索，我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容，可以为一个正则表达式设置多个匹配模式，且顺序无所谓，match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果

var str = "1a2a3a4a5e6f7A8B9C";
var result = str.match(/[a-z]/ig);
console.log(result);

replace()方法演示：该方法可以将字符串中指定内容替换为新的内容，默认只会替换第一个，但是可以设置全局匹配替换全部

3.2.1参数：

第一个参数：被替换的内容，可以接受一个正则表达式作为参数
第二个参数：新的内容

var str = "1a2a3a4a5e6f7A8B9C";
var result = str.replace(/[a-z]/gi, "@_@");
console.log(result);
 

3.3正则量词

通过量词可以设置一个内容出现的次数，量词只对它前边的一个内容起作用，如果有多个内容可以使用 () 括起来，常见量词如下：

{n} ：正好出现n次
{m,} ：出现m次及以上
{m,n} ：出现m-n次
+ ：至少一个，相当于{1,}
* ：0个或多个，相当于{0,}
? ：0个或1个，相当于{0,1}
var str = "abbc";

reg = /(ab){3}/;
console.log(reg.test(str));
console.log("===============");
reg = /b{3}/;
console.log(reg.test(str));
console.log("===============");
reg = /ab{1,3}c/;
console.log(reg.test(str));
console.log("===============");
reg = /ab{3,}c/;
console.log(reg.test(str));
console.log("===============");
reg = /ab+c/;
console.log(reg.test(str));
console.log("===============");
reg = /ab*c/;
console.log(reg.test(str));
console.log("===============");
reg = /ab?c/;
console.log(reg.test(str));
console.log("===============");

3.4、正则高阶

如果我们要检查或者说判断是否以某个字符或者字符序列开头或者结尾就会使用^和$。

^ ：表示开头，注意它在[^字符序列]表达的意思不一样
$ ：表示结尾
需求描述：检查一个字符串中是否以a开头

var str = "abcabca";
var reg = /^a/;
console.log(reg.test(str));
 

需求描述：检查一个字符串中是否以a结尾

var str = "abcabca";
var reg = /a$/;
console.log(reg.test(str));
 

那如果我们想要检查一个字符串中是否含有.和\就会使用转义字符

\. ：表示.
\\ ：表示\
注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，如果要使用\则需要使用\\来代替