JavaScript编程语言的学习

一、JavaScript介绍

JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。 JavaScript 是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多，只能用来做一些数学和逻辑运算。

1.1 JavaScript与ECMAScript的关系

ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。

1.2 JavaScript标识符

标识符（identifier）指的是用来识别各种值的合法名称。最常见的标识符就是变量名

标识符是由：字母、美元符号($)、下划线(_)和数字组成，其中数字不能开头

1.3 JavaScript保留关键字

JavaScript有一些保留字，不能用作标识符：

arguments、 break、case、catch、class、const、continue、debugger、 default、delete、do、else、enum、eval、export、 extends、false、finally、for、function、if、implements、 import、in、instanceof、interface、let、new、null、 package、private、protected、public、return、static、 super、switch、this、throw、true、try、typeof、var、 void、while、with、yield。

1.4 变量与常量

变量

var num = 10;

num = 20;

常量

使用const定义常量后，常量无法改变

const URL = "http://baidu.com";

二、JavaScript引入到HTML文件中

2.1 嵌入到HTML文件中

2.2 引入本地独立JS文件

type="text/javascript" 表示这个脚本（script）类型是Javascript，可以不写，但是建议写上。

2.3 引入网络来源文件

三、JavaScript注释

源码中注释是不被引擎所解释的，它的作用是对代码进行解释。

Javascript 提供两种注释的写法：一种是单行注释，用//起头；另一种是多行注释，放在/*和*/之间。

四、JavaScript的3种输出方式

五、数据类型

JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。

①数值  (number)

②字符串  (string)

③布尔  (boolean)

④对象（object）

var user = {
    name:"徐晓率",
    age:20,
    learn:true
}

⑤undefind  和 null

null与undefined都可以表示“没有”，含义非常相似。

基本数据类型一般初始化为“没有”时，为undefind

对象数据类型一般初始化为“没有”时，为null

六、运算符

6.1 加法运算符

加法运算符（+）是最常见的运算符，用来求两个数值的和

①数值相加

②非数值相加

③与字符串相加

比较特殊的是，如果是两个字符串相加，这时加法运算符会变成连 接运算符，返回一个新的字符串，将两个原字符串连接在一起。

如果一个运算子是字符串，另一个运算子是非字符串，这时非字符串会转成字符串，再连接在一起。

6.2 算术运算符

加减乘除运算符

加减乘除运算符就是基本的数学运算符效果，其中加法比较特殊

6.3 自增和自减运算符

自增和自减运算符，是一元运算符，只需要一个运算子。它们的作用是将运算子首先转为数值，然后加上1或者减去1。

自增和自减运算符有一个需要注意的地方，就是放在变量之后，会 先返回变量操作前的值，再进行自增/自减操作；放在变量之前，会先进行自增/自减操作，再返回变量操作后的值。

6.4 赋值运算符

6.5 比较运算符

比较运算符用于比较两个值的大小，然后返回一个布尔值，表示是否满足指定的条件。

注意：“==”和“===”的区别

• ==：双等比较值
• ===：三等比较值和类型

6.6 逻辑运算符

①取反运算符（!）

布尔值取反

非布尔值取反

对于非布尔值，取反运算符会将其转为布尔值。可以这样记忆，以下六个值取反后为true，其他值都为false。

②且运算符（&&）

多个条件都要满足

③或运算符（||）

6.7位运算符

位运算符直接处理每一个比特位（bit），是非常底层的运算，好处是速度极快，缺点是很不直观，许多场合不能使用它们，否则会使代码难以理解和查错。

快速计算位移方案

• 左移运算符就是*2的n次方（n代表位移次数）
• 右移运算符就是/2的n次方 (n代表位移次数，不同点，出现小数时要取整）

七、运算优先级

八、类型转换

8.1 自动转换

遇到以下两种情况时，JavaScript 会自动转换数据类型，即转换是自动完成的，用户不可见。

8.2 强制转化(JS中依靠函数进行强制类型转换)

强制转换主要指使用Number( )、String( )和Boolean( )三个函数，手动将各种类型的值，分布转换成数字、字符串或者布尔值。

①Number()

使用Number函数，可以将任意类型的值转化成数值。

②String() 

String()函数可以将任意类型的值转化成字符串，转换规则如下:

③Boolean()

Boolean函数可以将任意类型的值转为布尔值

它的转换规则相对简单：除了以下五个值的转换结果为false，其他的值全部为true。

九、条件语句

if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是 JavaScript 的两个特殊值，true表示真，false表示伪。

9.1 if语句语法规范

9.2 if...else语句

if代码块后面，还可以跟一个else代码块，表示不满足条件时，所要 执行的代码。

多个if...else连接

对同一个变量进行多次判断时，多个if...else语句可以连写在一起。

if...else嵌套

else代码块总是与离自己最近的那个if语句配对。

9.3 switch语句

需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。

switch语句后面的表达式，与case语句后面的表示式比较运行结果时，采用的是严格相等运算符（===），而不是相等运算符（==），这意味着比较时不会发生类型转换。

十、三元运算符

JavaScript还有一个三元运算符（即该运算符需要三个运算子） 也可以用于逻辑判断。

十一、循环语句

11.1 for循环

循环语句用于重复执行某个操作 for 语句就是循环命令，可以指定循环的起点、终点和终止条件。

for语句后面的括号里面，有三个表达式。

• 初始化表达式（initialize）：确定循环变量的初始值，只在循环开始时执行一次。
• 布尔表达式（test）：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。
• 迭代因子（increment）：每轮循环的最后一个操作，通常用来递增循环变量。

11.2 while循环 

While语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。

11.3 do…while循环

do...while循环与while循环类似，唯一的区别就是先运行一次循环体，然后判断循环条件。

11.4 break 语句和 continue 语句 

①break语句

用于跳出代码块或循环

②continue语句

用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环

十二、字符串

字符串就是零个或多个排在一起的字符，放在单引号或双引号之中

单引号字符串的内部，可以使用双引号。

双引号字符串的内部，可以使用单引号。

如果要在单引号字符串的内部，使用单引号，就必须在内部的单引 号前面加上反斜杠，用来转义。双引号字符串内部使用双引号，也是如此。

如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠。

12.1 转义

反斜杠（\）在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转义符。

12.2 length 属性

length属性返回字符串的长度，该属性也是无法改变的

12.3 字符串转码

①Base64转码

所谓 Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、 a-z、+和/这64个字符组成的可打印字符。使用它的主要目的，不是为了加密，而是为了不出现特殊字符，简化程序的处理 JavaScript 原生提供两个 Base64 相关的方法。

如果非要处理中文，需要在增加两个方法

12.4 字符串方法_charAt()

charAt() 方法返回指定位置的字符，参数是从 0 开始编号的

如果参数为负数，或大于等于字符串的长度， charAt() 返回空字符串

12.5 字符串方法_concat()

concat() 方法用于连接两个字符串，返回一个新字符串，不改变原字符串

12.6 字符串方法_slice()

slice() 方法用于从原字符串取出子字符串并返回，不改变原字符串。 它的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（不含该位置）

如果省略第二个参数，则表示子字符串一直到原字符串结束。

如果参数是负值，表示从结尾开始倒数计算的位置，即该负值加上字符串长度。

如果第一个参数大于第二个参数， slice() 方法返回一个空字符串。

12.7 字符串方法_substring()

substring() 方法用于从原字符串取出子字符串并返回，不改变原字符串，跟 slice() 方法很相像。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含该位置）

如果省略第二个参数，则表示子字符串一直到原字符串的结束。

如果第一个参数大于第二个参数， substring() 方法会自动更换两个参数的位置。

如果参数是负数， substring() 方法会自动将负数转为0

由于这些规则违反直觉，因此不建议使用 substring() 方法，应该优先使用 slice()

12.8 字符串方法_substr()

substr() 方法用于从原字符串取出子字符串并返回，不改变原字符串， 跟 slice() 和 substring() 方法的作用相同。

substr() 方法的第一个参数是子字符串的开始位置（从0开始计算）， 第二个参数是子字符串的长度。

如果省略第二个参数，则表示子字符串一直到原字符串的结束。

如果第一个参数是负数，表示倒数计算的字符位置。如果第二个参数是负数，将被自动转为0，因此会返回空字符串。

12.9 字符串方法_indexOf()/lastIndexOf()

indexOf() 方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回 -1 ，就表示不匹配。

indexOf() 方法还可以接受第二个参数，表示从该位置开始向后匹配。

lastIndexOf() 方法的用法跟 indexOf() 方法一致，主要的区别是 lastIndexOf() 从尾部开始匹配， indexOf() 则是从头部开始匹配。

12.10 字符串方法_trim()

trim() 方法用于去除字符串两端的空格，返回一个新字符串，不改变原字符串。

该方法去除的不仅是空格，还包括制表符（ \t 、 \v ）、换行符 （ \n ）和回车符（ \r ）。

12.11 字符串方法_toLowerCase()/toUpperCase()

toLowerCase() 方法用于将一个字符串全部转为小写， toUpperCase() 则是全部 转为大写。它们都返回一个新字符串，不改变原字符串。

将字符串首字母变为大写。

12.12 字符串方法_search()/replace()

search() 方法确定原字符串是否匹配某个子字符串,返回值为匹配的第一个位置。如果没有找到匹配，则返回 -1 。

replace() 方法用于替换匹配的子字符串。

12.13 字符串方法_split()

split() 方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。

如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。

如果省略参数，则返回数组的唯一成员就是原字符串。

split() 方法还可以接受第二个参数，限定返回数组的最大成员数。

十三、数组

数组（array）是按次序排列的一组值。每个值的位置都有编号（从 0开始），整个数组用方括号表示。

两端的方括号是数组的标志。

除了在定义时赋值，数组也可以先定义后赋值。

任何类型的数据，都可以放入数组。

如果数组的元素还是数组，就形成了多维数组。

数组的本质本质上，数组属于一种特殊的对象。typeof运算符会返 回数组的类型是object。

13.1 length 属性

数组的length属性，返回数组的成员数量。

length属性是可写的。如果人为设置一个小于当前成员个数的值， 该数组的成员会自动减少到length设置的值。

清空数组的一个有效方法，就是将length属性设为0

13.2 构造函数

数组的空位

当数组的某个位置是空元素，即两个逗号之间没有任何值，我们称该数组存在空位。

Array 是 JavaScript 的原生对象，同时也是一个构造函数，可以用它生成新的数组。

如果没有使用 new ，运行结果也是一样的。

13.3 数组静态方法_Array.isArray() 

Array.isArray 方法返回一个布尔值，表示参数是否为数组。它可以弥补 typeof 运算符的不足

13.4 数组方法_push()/pop()

push 方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

十四、函数

函数是一段可以反复调用的代码块。

14.1 函数的声明

JavaScript 有三种声明函数的方法

①function 命令：

function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。

②函数表达式

除了用function命令声明函数，还可以采用变量赋值的写法

③Function 构造函数

第三种声明函数的方式是Function构造函数。

注意1：如果同一个函数被多次声明，后面的声明就会覆盖前面的声明

注意2：

JavaScript 引擎将函数名视同变量名，所以采用function命令声明函数时，整个函数会像变量声明一样，被提升到代码头部。

但是，如果采用赋值语句定义函数，JavaScript 就会报错。

不能在条件语句中声明函数

根据 ES5 的规范，不得在非函数的代码块中声明函数，最常见的情 况就是if语句

14.2 函数的属性和方法

①name 属性

函数的name属性返回函数的名字

如果是通过变量赋值定义的函数，那么name属性返回变量名

name属性的一个用处，就是获取参数函数的名字

②length 属性 

函数的length属性返回函数预期传入的参数个数，即函数定义之中的参数个数

③toString()

函数的toString方法返回一个字符串，内容是函数的源码

14.3 立即调用的函数(IIFE) 

在 Javascript 中，圆括号()是一种运算符，跟在函数名之后，表示调用该函数。比如，print()就表示调用print函数。那如何让函数自己执行呢

自执行函数传递参数

 函数体放在小括号中，参数放在函数体后

十五、对象

什么是对象？

对象（object）是 JavaScript 语言的核心概念，也是 最重要的数据类型简单说，对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。

如果键名不符合标识名的条件（比如第一个字符为数字，或者含有空格或运算符），则必须加上引号，否则会报错。

对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用。

如果属性的值还是一个对象，就形成了链式引用

15.1 对象属性

①读取属性

读取对象的属性，有两种方法，一种是使用点运算符，还有一种是使用方括号运算符

15.2 属性的赋值

点运算符和方括号运算符，不仅可以用来读取值，还可以用来赋值

JavaScript 允许属性的“后绑定”，也就是说，你可以在任意时刻新增属性，没必要在定义对象的时候，就定义好属性

15.3 查看所有属性

查看一个对象本身的所有属性，可以使用 Object.keys() 方法

15.4 delete 命令

delete 命令用于删除对象的属性，删除成功后返回 true

只有一种情况， delete 命令会返回 false ，那就是该属性存在，且不得删除(使用率极低)

15.5 for…in 循环

for...in 循环用来遍历一个对象的全部属性

15.6 对象方法

Object 对象的方法分成两类： Object 本身的方法与 Object 的实例方法

①Object 对象本身的方法

所谓”本身的方法“就是直接定义在 Object 对象的方法

②Object 的实例方法

所谓实例方法就是定义在 Object 原型对象 Object.prototype 上的方法。它可以被 Object 实例直接使用。