JavaScript

文章目录

JavaScript

JavaScript初探

JavaScript发展历史

1994年，网景公司(Netscape)发布了Navigator浏览器0.9版，这是世界上第一款比较成熟的网络浏览器，轰动一时。但是这是一款名副其实的浏览器–只能浏览页面，浏览器无法与用户互动,当时解决这个问题有两个办法，一个是采用现有的语言,许它们直接嵌入网页。另一个是发明一种全新的语言。

liveScript ==> javaScript ==> ECMAscript
1995年Sun公司将Oak语言改名为Java，正式向市场推出。Sun公司大肆宣传，许诺这种语言可以"一次编写，到处运行"(Write Once, Run Anywhere)，它看上去很可能成为未来的主宰。
1995年4月，程序员Brendan Eich设计出JavaScript。

JavaScript组成

JS就是通过固定的语法去操作浏览器和标签结构来实现网页上的各种效果。

在这里插入图片描述

ECMAScript：定义了JavaScript的语法规范，描述了语言的基本语法和数据类型
BOM (Browser Object Model): 浏览器对象模型。有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如：弹出框、浏览器跳转、获取分辨率等
DOM (Document Object Model): 文档对象模型。有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。比如：增加个 div，减少个 div，给 div 换个位置等

JavaScript的作用

常见的网页效果【表单验证，轮播图…】
与H5配合实现游戏【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】
实现应用级别的程序【http://naotu.baidu.com】
实现图表统计效果【https://echarts.apache.org/examples/zh/】
人工智能【面部识别】
后端开发，app开发，桌面端开发…

JavaScript代码书写位置

和CSS相同，js也有多种书写方式，分为行内式、内嵌式和外链式。

行内式：（不推荐）写在标签上的js代码需要依靠事件（行为）来触发。

<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('我是一个弹出层');">点击一下试试</a>

<!-- 写在其他元素上 -->
<div onclick="alert('我是一个弹出层')">点一下试试看</div>

<!--注：onclick 是一个事件（点击事件），当点击元素的时候执行后面的 js 代码-->

内嵌式：内嵌式的js代码会在页面打开时直接触发。

<!-- 在 html 页面书写一个 script 标签，标签内部书写 js 代码 -->
<script type="text/javascript">
	alert('我是一个弹出层')
</script>

<!--注：script 标签可以放在 head 里面也可以放在 body 里面-->

外链式：（推荐）外链式js代码只要引入了html页面，就会在页面打开时直接触发。新建一个 .js 后缀的文件，在文件内书写 js 代码，把写好的 js 文件引入 html 页面。

// index.js 文件
alert('我是一个弹出层')

<!-- html 文件 -->

<!-- 通过 script 标签的 src 属性，把写好的 js 文件引入页面 -->
<script src="index.js"></script>

<!-- 一个页面可以引入多个 js 文件 -->
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>

JavaScript注释

单行注释：一般用来描述下面一行代码的作用，可以直接写两个 / ，也可以按 ctrl + /。
多行注释：一般用来写一大段话，或者注释一段代码。可以直接写 /**/ 然后在两个星号中间写注释

变量

语法： var 变量名 = 值

// 定义一个变量
var num;

// 给一个变量赋值
num = 100;

// 定义一个变量的同时给其赋值
var num2 = 200;

注意：

一个变量名只能存储一个值
变量名称区分大小写（JS 严格区分大小写）

变量命名规则和规范

规则：必须遵守

一个变量名称可以由数字、字母、英文下划线（_）、美元符号（$） 组成

严格区分大小写

不能由数字开头

不能是 保留字 或者 关键字

不要出现空格

规范：建议遵守（开发者默认）

变量名尽量有意义（语义化）

遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写

不要使用中文

数据类型

通常分为两大类 基本数据类型 和 复杂数据类型

基本数据类型：

数值类型（number）：一切数字都是数值类型（包括二进制，十进制，十六进制等）
- NaN（not a number），一个非数字
字符串类型（string）：被引号包裹的所有内容（可以是单引号也可以是双引号）
布尔类型（boolean）：只有两个（true 或者 false）
null类型（null）：只有一个，就是 null，表示空的意思
undefined类型（undefined）：只有一个，就是 undefined，表示没有值的意思

判断数据类型

要知道存储的数据是一个什么类型的数据，可以使用 typeof 关键字来进行判断。

// 第一种使用方式
var n1 = 100;
console.log(typeof n1);

// 第二种使用方式
var s1 = 'abcdefg';
console.log(typeof(s1));

数据类型转换

其它数据类型转换为数值：
- Number(变量)：可以把一个变量强制转换成数值类型，也可以转换小数，会保留小数，也可以转换布尔值。遇到不可转换的都会返回 NaN。
- parseInt(变量)：从第一位开始检查，是数字就转换，直到一个不是数字的内容。如果开头就不是数字，那么直接返回 NaN。只能保留整数。
- parseFloat(变量)：从第一位开始检查，是数字就转换，直到一个不是数字的内容。如果开头就不是数字，那么直接返回 NaN。认识一次小数点。
- 除了加法以外的数学运算：必须运算符两边都是可运算数字才行。如果运算符任何一遍不是一个可运算数字，那么就会返回 NaN。加法不可以用。
其它数据类型转换为字符串：
- 变量.toString()：有一些数据类型不能使用 toString() 方法，比如 undefined 和 null。
- String(变量)：所有数据类型都可使用。
- 使用加法运算：JS 里面，+ 有两个含义
  
  字符串拼接：只要 + 任意一边是字符串，就会进行字符串拼接
  
  加法运算：只有 + 两边都是数字的时候，才会进行数学运算
其它数据类型转成布尔型
- Boolean(变量)：在 js 中，只有 ''、0、null、undefined、NaN，这些是 false，其余都是 true。

运算符

在代码中进行运算时需要使用的符号，不只是数学运算符。

数学运算符

+：只有符号两边都是数字的时候才会进行加法运算，只要符号任意一边是字符串类型，就会进行字符串拼接。
-：会执行减法运算，会自动把两边都转换成数字进行运算。
*：会执行乘法运算，会自动把两边都转换成数字进行运算。
/：会执行除法运算，会自动把两边都转换成数字进行运算。
%：会执行取余运算，会自动把两边都转换成数字进行运算。

赋值运算符

=：就是把 = 右边的赋值给等号左边的变量名。var num = 100就是把 100 赋值给 num 变量，那么 num 变量的值就是 100。

+=：a += 10 等价于 a = a + 10

var a = 10;
a += 10;
console.log(a); //=> 20

-=：a -= 10 等价于 a = a - 10

var a = 10;
a -= 10;
console.log(a); //=> 0

*=：a *= 10等价于a = a * 10`

var a = 10;
a *= 10;
console.log(a); //=> 100

/=：a /= 10 等价于 a = a / 10

var a = 10;
a /= 10;
console.log(a); //=> 1

%=：a %= 10 等价于 a = a % 10

var a = 10;
a %= 10;
console.log(a); //=> 0

比较运算符

==：比较符号两边的值是否相等，不管数据类型。如：1 == '1'两个的值是一样的，所以得到 true。
===：比较符号两边的值和数据类型是否都相等。如：1 === '1'两个值虽然一样，但是因为数据类型不一样，所以得到 false。
!=：比较符号两边的值是否不等。如：1 != '1'因为两边的值是相等的，所以比较他们不等的时候得到 false。
!==：比较符号两边的数据类型和值是否不等。如：1 !== '1'因为两边的数据类型确实不一样，所以得到 true
>=：比较左边的值是否 大于或等于 右边的值。
>：比较左边的值是否大于右边的值。
<=：比较左边的值是否 小于或等于 右边的值。
<：比较左边的值是否小于右边的值

逻辑运算符

&&、||、!。

自增自减运算符

++、--。

三元运算符

用 两个符号 组成一个语句。语法： 条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行

例如：

var age = 18;
age >= 18 ? alert('已经成年') : alert('没有成年')

分支结构

js 代码都是顺序执行的（从上到下）。逻辑分支就是根据我们设定好的条件来决定要不要执行某些代码。

if语句

通过一个 if 语句来决定代码是否执行。语法： if (条件) { 要执行的代码 }。通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行。

// 条件为 true 的时候执行 {} 里面的代码
if (true) {
    
    
  alert('因为条件是 true，我会执行')
}

// 条件为 false 的时候不执行 {} 里面的代码
if (false) {
    
    
	alert('因为条件是 false，我不会执行')    
}

if else 语句

通过 if 条件来决定，执行哪一个 {} 里面的代码。语法： if (条件) { 条件为 true 的时候执行 } else { 条件为 false 的时候执行 }。两个 {} 内的代码一定有一个会执行

// 条件为 true 的时候，会执行 if 后面的 {} 
if (true) {
    
    
  alert('因为条件是 true，我会执行')
} else {
    
    
  alert('因为条件是 true，我不会执行')
}

// 条件为 false 的时候，会执行 else 后面的 {}
if (false) {
    
    
  alert('因为条件为 false，我不会执行')
} else {
    
    
  alert('因为条件为 false，我会执行')
}

可以通过 if 和 else if 来设置多个条件进行判断

语法：if (条件1) { 条件1为 true 的时候执行 } else if (条件2) { 条件2为 true 的时候执行 }
会从头开始依次判断条件
- 如果第一个条件为 true 了，那么就会执行后面的 {} 里面的内容
- 如果第一个条件为 false，那么就会判断第二个条件，依次类推
多个 {} ，只会有一个被执行，一旦有一个条件为 true 了，后面的就不在判断了

// 第一个条件为 false，第二个条件为 true，最终会打印 “我是代码段2”
// 只有前一个条件为 false 的时候才会继续向后判断
if (false) {
    
    
  	alert('我是代码段1')
} else if (true) {
    
    
  	alert('我是代码段2')
}

// 第一个条件为 false，第二个条件为 false，最终会打印 “我是代码段3”
// 只有前面所有的条件都不满足的时候会执行 else 后面的 {} 里面的代码
// 只要前面有一个条件满足了，那么后面的就都不会执行了
if (false) {
    
    
  	alert('我是代码段1')
} else if (false) {
    
    
  	alert('我是代码段2')
} else {
    
    
  	alert('我是代码段3')
}

SWITCH条件分支结构

条件判断语句的一种，是对于某一个变量的判断

语法：

switch (要判断的变量) {
      
      
  case 情况1:
    情况1要执行的代码
    break
  case 情况2:
    情况2要执行的代码
    break
  case 情况3:
    情况3要执行的代码
    break
  default:
    上述情况都不满足的时候执行的代码
}

要判断某一个变量等于某一个值的时候使用

循环结构

循环结构，就是根据某些给出的条件，重复的执行同一段代码
循环必须要有某些固定的内容组成
1. 初始化
2. 条件判断
3. 要执行的代码
4. 自身改变

while循环

当条件满足时就执行代码，一旦不满足了就不执行了。

语法 while (条件) { 满足条件就执行 }一定要设定一个边界值，不然就会一直循环下去。

// 1. 初始化条件
var num = 0;
// 2. 条件判断
while (num < 10) {
    
    
  // 3. 要执行的代码
  console.log('当前的 num 的值是 ' + num)
  // 4. 自身改变
  num = num + 1
}

do while循环

while 会先进行条件判断，满足就执行，不满足直接就不执行了。但是 do while 循环是先不管条件，先执行一回，然后再开始进行条件判断。

语法： do { 要执行的代码 } while (条件)

// 把初始化，条件判断，自身改变，写在了一起
for (var i = 1; i <= 10; i++) {
    
    
  // 这里写的是要执行的代码
  console.log(i)
}
// 控制台会依次输出 1 ~ 10

for循环

语法： for (var i = 0; i < 10; i++) { 要执行的代码 }

// 把初始化，条件判断，自身改变，写在了一起
for (var i = 1; i <= 10; i++) {
    
    
  // 这里写的是要执行的代码
  console.log(i)
}
// 控制台会依次输出 1 ~ 10

break终止循环

在循环没有进行完毕的时候，因为设置的条件满足，提前终止循环。可以直接使用 break 关键字。

for (var i = 1; i <= 5; i++) {
    
    
  // 没循环一次，吃一个包子
  console.log('我吃了一个包子')
  // 当 i 的值为 3 的时候，条件为 true，执行 {} 里面的代码终止循环
  // 循环就不会继续向下执行了，也就没有 4 和 5 了
  if (i === 3) {
    
    
    break
  }
}

continue

在循环中，把循环的本次跳过去，继续执行后续的循环。可以使用 continue 关键字。

for (var i = 1; i <= 5; i++) {
    
    
  // 当 i 的值为 3 的时候，执行 {} 里面的代码
  // {} 里面有 continue，那么本次循环后面的代码就都不执行了
  // 自动算作 i 为 3 的这一次结束了，去继续执行 i = 4 的那次循环了
  if (i === 3) {
    
    
    console.log('这个是第三个包子，掉地下了，我不吃了')
    continue
  }
  console.log('我吃了一个包子')
}

函数

函数的定义阶段

书写函数时有两种定义方式：

声明式：使用 function 这个关键字来声明一个函数。

function fn() {
    
    
  // 一段代码
}
// function: 声明函数的关键字，表示接下来是一个函数了
// fn: 函数的名字，我们自己定义的（遵循变量名的命名规则和命名规范）
// (): 必须写，是用来放参数的位置
// {}: 就是我们用来放一段代码的位置

赋值式：首先使用 var 定义一个变量，把一个函数当作值直接赋值给这个变量。

var fn = function () {
    
    
  // 一段代码
}
// 不需要在 function 后面书写函数的名字了，因为在前面已经有了

函数的调用阶段

让函数执行，两种定义方式对应的调用函数方式都是一样的。

// 声明式函数
function fn() {
    
    
  console.log('我是 fn 函数')
}

// 调用函数
fn()

// 赋值式函数
var fn2 = function () {
    
    
  console.log('我是 fn2 函数')
}

// 调用函数
fn()

注意： 定义完一个函数以后，如果没有函数调用，那么写在 {} 里面的代码没有意义，只有调用以后才会执行

声明式函数：调用可以在 定义之前或者定义之后

// 可以调用
fn()

// 声明式函数
function fn() {
    
    
  console.log('我是 fn 函数')
}

// 可以调用
fn()

赋值式函数：调用只能在 定义之后

// 会报错
fn()

// 赋值式函数
var fn = function () {
    
    
  console.log('我是 fn 函数')
}

// 可以调用
fn()

函数的参数

分为形参和实参。

形参：在函数内部可以使用的变量，在函数外部不能使用。每写一个单词，就相当于在函数内部定义了一个可以使用的变量（遵循变量名的命名规则和命名规范）。多个单词之间以 , 分隔。

// 书写一个参数
function fn(num) {
      
      
  // 在函数内部就可以使用 num 这个变量
}

var fn1 = function (num) {
      
      
	// 在函数内部就可以使用 num 这个变量
}

// 书写两个参数
function fun(num1, num2) {
      
      
  // 在函数内部就可以使用 num1 和 num2 这两个变量
}

var fun1 = function (num1, num2) {
      
      
  // 在函数内部就可以使用 num1 和 num2 这两个变量
}

形参的值是在函数调用的时候由实参决定的

实参：在函数调用时给形参赋值的。也就是说，在调用的时候是给一个实际的内容的。

function fn(num) {
      
      
  // 函数内部可以使用 num 
}

// 这个函数的本次调用，书写的实参是 100
// 那么本次调用的时候函数内部的 num 就是 100
fn(100) 

// 这个函数的本次调用，书写的实参是 200
// 那么本次调用的时候函数内部的 num 就是 200
fn(200)

函数内部的行参的值，由函数调用的时候传递的实参决定
多个参数的时候，是按照顺序一一对应的

function fn(num1, num2) {
      
      
  // 函数内部可以使用 num1 和 num2
}

// 函数本次调用的时候，书写的参数是 100 和 200
// 那么本次调用的时候，函数内部的 num1 就是 100，num2 就是 200
fn(100, 200)

如果形参比实参多，多出来的形参就是没有值的，为undefined。

函数的return

return是返回的意思，就是给函数一个返回值和中断函数。

返回值：函数调用本身也是一个表达式，应该有一个值出现。return关键字就是给函数执行完毕一个结果。

function fn() {
    
    
  // 执行代码
  return 100
}

// 此时，fn() 这个表达式执行完毕之后就有结果出现了
console.log(fn()) // 100

可以在函数内部使用 return 关键字把任何内容当作这个函数运行后的结果。

中断函数：开始执行函数后，函数内部代码会从上到下依次执行，必须等函数内部代码执行完毕，而 return关键字就是在函数中间的位置停止，让后面的代码不再执行。

function fn() {
    
    
  console.log(1)
  console.log(2)
  console.log(3)
  
  // 写了 return 以后，后面的 4 和 5 就不会继续执行了
  return
  console.log(4)
  console.log(5)
}

// 函数调用
fn()

预解析

js是一种解释性语言，在代码执行之前，先对代码进行通读和解释，然后再执行代码。也就是说，js代码在运行的时候，会经历两个环节解释代码和执行代码。

解释代码：在所有代码执行之前进行解释，即预解析（预解释）。

需要解释的内容有：
1. 声明式函数：在内存中先声明有一个变量名是函数名，并且这个名字代表的内容是一个函数。
2. var关键字：在内存中先声明有一个变量名。
如：
```
fn()
console.log(num)

function fn() {
      
      
  console.log('我是 fn 函数')
}

var num = 100
```
经过预解析之后可以变形为：

function fn() {
    
    
  console.log('我是 fn 函数')
}
var num

fn()
console.log(num)
num = 100

赋值式函数会按照 var关键字的规则进行预解析。

作用域

作用域就是一个变量可以生效的范围。

全局作用域

全局作用域是最大的作用域。在全局作用域中定义的变量可以在任何地方使用。页面打开时，浏览器会自动生成一个全局作用域 window，这个作用域一直存在，直到页面关闭才销毁。

// 下面两个变量都是存在在全局作用域下面的，都是可以在任意地方使用的
var num = 100
var num2 = 200

局部作用域

局部作用域是在全局作用域下面开辟出来的一个相对小一些的作用域。局部作用域中定义的变量只能在这个局部作用域内部使用。在 JS 中只有函数能生成一个局部作用域，别的都不行。而每一个函数，都是一个局部作用域。

// 这个 num 是一个全局作用域下的变量 在任何地方都可以使用
var num = 100

function fn() {
    
    
  // 下面这个变量就是一个 fn 局部作用域内部的变量
  // 只能在 fn 函数内部使用
  var num2 = 200
}

fn()

变量使用规则

变量使用规则分为两种，访问规则和赋值规则。

访问规则

访问即获取一个变量的值：

首先，在自己的作用域内部查找，如果有，就直接拿来使用
如果没有，就去上一级作用域查找，如果有，就拿来使用
如果没有，就继续去上一级作用域查找，依次类推

如果一直到全局作用域都没有这个变量，那么就会直接报错（该变量 is not defined）

var num = 100

function fn() {
      
      
  var num2 = 200
  
  function fun() {
      
      
    var num3 = 300
    
    console.log(num3) // 自己作用域内有，拿过来用
    console.log(num2) // 自己作用域内没有，就去上一级，就是 fn 的作用域里面找，发现有，拿过来用
    console.log(num) // 自己这没有，去上一级 fn 那里也没有，再上一级到全局作用域，发现有，直接用
    console.log(a) // 自己没有，一级一级找上去到全局都没有，就会报错
  }
  
  fun()
}

fn()

变量的访问规则（也叫作用域的查找机制）是只能向上找，不能向下找。

function fn() {
      
      
  var num = 100
}
fn()

console.log(num) // 发现自己作用域没有，自己就是全局作用域，没有再上一级了，直接报错

赋值规则

变量赋值规则：

先在自己作用域内部查找，有就直接赋值
没有就去上一级作用域内部查找，有就直接赋值
还没有再去上一级作用域查找，有就直接赋值
如果一直找到全局作用域都没有，那么就把这个变量定义为全局变量，再给他赋值

function fn() {
    
    
  num = 100
}
fn()

// fn 调用以后，要给 num 赋值
// 查看自己的作用域内部没有 num 变量
// 就会向上一级查找
// 上一级就是全局作用域，发现依旧没有
// 那么就会把 num 定义为全局的变量，并为其赋值
// 所以 fn() 以后，全局就有了一个变量叫做 num 并且值是 100
console.log(num) // 100

对象

对象是存储了一些基本数据类型的一个集合。

var obj = {
    
    
  num: 100,
  str: 'hello world',
  boo: true
}

对象本质上就是一个键值对的集合。{}里面的每一个键都是一个成员。

创建对象

字面量的方式创建一个对象

// 创建一个空对象
var obj = {
      
      }

// 像对象中添加成员
obj.name = 'Jack'
obj.age = 18

内置构造函数的方式创建对象

// 创建一个空对象
var obj = new Object()

// 向对象中添加成员
obj.name = 'Rose'
obj.age = 20

Object 是 js 内置的构造函数，用于创建一个对象使用的。

数据类型之间的存储区别

基本数据类型和复杂数据类型之间最大的区别就是在存储上的区别。存储空间分为两种：栈和堆。

栈主要存储基本数据类型的内容。堆主要存储复杂数据类型的内容。

基本数据类型存储：例如 var num=100，直接在栈空间内存储一个数据。
复杂数据类型存储：

这个对象的存储：
```
var obj = {
      
      
  name: 'Jack',
  age: 18,
  gender: '男'
}
```
1. 在堆里面开辟一个存储空间
2. 把数据存储到存储空间内
3. 把存储空间的地址赋值给栈里面的变量
数据类型之间的比较：

基本数据类型是值之间的比较。
```
var num = 1
var str = '1'

console.log(num == str) // true
```
复杂数据类型是地址之间的比较。
```
var obj = {
      
       name: 'Jack' }
var obj2 = {
      
       name: 'Jack' }

console.log(obj == obj2) // false
```
因为我们创建了两个对象，那么就会在堆空间里面开辟两个存储空间存储数据（两个地址）。虽然存储的内容是一样的，但也是两个存储空间，两个地址。复杂数据类型之间就是地址的比较，所以 obj 和 obj2 两个变量的地址不一样。因此我们得到的就是 false。

数组

数组是一个数据的集合。如：

[1, 2, 3, 'hello', true, false]

数组也是复杂数据类型的一种。

创建数组

字面量创建一个数组：直接使用 []的方式创建一个数组。

// 创建一个空数组
var arr1 = []

// 创建一个有内容的数组
var arr2 = [1, 2, 3]

内置构造函数创建数组

使用 js的内置构造函数 Array创建一个数组。

// 创建一个空数组
var arr1 = new Array()

// 创建一个长度为 10 的数组
var arr2 = new Array(10)

// 创建一个有内容的数组
var arr3 = new Array(1, 2, 3)

数组长度

length用来表示数组的长度。

// 创建一个数组
var arr = [1, 2, 3]

console.log(arr.length) // 3

数组的索引

索引，也叫下标，指一个数据在数组里排第几个位置。

注意：在所有的语言里面，索引都是从 0 开始的，js也一样。

// 创建一个数组
var arr = ['hello', 'world']

这个数组中，第 0 个 数据就是字符串 hello，第 1 个 数据就是字符串 world。

想获取数组中的第几个就使用 数组[索引] 来获取：

var arr = ['hello', 'world']

console.log(arr[0]) // hello
console.log(arr[1]) // world

数组的排序

就是让乱序的数组经过处理变成有序的数组。

冒泡排序：
选择排序：

数组常用方法

push：作用是在数组末尾追加一个元素。

var arr = [1, 2, 3]

// 使用 push 方法追加一个元素在末尾
arr.push(4)

console.log(arr) // [1, 2, 3, 4]

pop：作用是删除数组末尾的一个元素。

var arr = [1, 2, 3]

// 使用 pop 方法删除末尾的一个元素
arr.pop()

console.log(arr) // [1, 2]

unshift：作用是在数组的最前面添加一个元素。

var arr = [1, 2, 3]

// 使用 unshift 方法想数组的最前面添加一个元素
arr.unshift(4)

console.log(arr) // [4, 1, 2, 3]

shift:作用是删除数组最前面的一个元素。

var arr = [1, 2, 3]

// 使用 shift 方法删除数组最前面的一个元素
arr.shift()

console.log(arr) // [2, 3]

splice：截取数组中的某些内容，按照数组的索引来截取。

语法： splice(从哪一个索引位置开始，截取多少个，替换的新元素) （第三个参数可以不写）
```
var arr = [1, 2, 3, 4, 5]

// 使用 splice 方法截取数组
arr.splice(1, 2)

console.log(arr) // [1, 4, 5]
```
arr.splice(1, 2) 表示从索引 1 开始截取 2 个内容。第三个参数没有写，就是没有新内容替换掉截取位置。
```
var arr = [1, 2, 3, 4, 5]

// 使用 splice 方法截取数组
arr.splice(1, 2, '我是新内容')

console.log(arr) // [1, '我是新内容', 4, 5]
```
arr.splice(1, 2, '我是新内容') 表示从索引 1 开始截取 2 个内容，然后用第三个参数把截取完空出来的位置填充。

reverse：反转数组。

var arr = [1, 2, 3]

// 使用 reverse 方法来反转数组
arr.reverse()

console.log(arr) // [3, 2, 1]

sort：给数组排序。

var arr = [2, 3, 1]

// 使用 sort 方法给数组排序
arr.sort()

console.log(arr) // [1, 2, 3]

concat：把多个数组进行拼接。concat 不会改变原始数组，而是返回一个新的数组。

var arr = [1, 2, 3]

// 使用 concat 方法拼接数组
var newArr = arr.concat([4, 5, 6])

console.log(arr) // [1, 2, 3]
console.log(newArr) // [1, 2, 3, 4, 5, 6]

join：把数组里面的每一项内容链接起来，变成一个字符串。

可以自己定义每一项之间链接的内容：join(要以什么内容链接)

不会改变原始数组，而是把链接好的字符串返回。
```
var arr = [1, 2, 3]

// 使用 join 链接数组
var str = arr.join('-')

console.log(arr) // [1, 2, 3]
console.log(str) // 1-2-3
```
注意： join 方法不会改变原始数组，而是返回链接好的字符串。

indexOf：用来找到数组中某一项的索引。

语法： indexOf(你要找的数组中的项)

var arr = [1, 2, 3, 4, 5]

// 使用 indexOf 超找数组中的某一项
var index = arr.indexOf(3)

console.log(index) // 2

返回的就是值为 3 的那一项在该数组中的索引。

如果你要找的内容在数组中没有，那么就会返回 -1：

var arr = [1, 2, 3, 4, 5]

// 使用 indexOf 超找数组中的某一项
var index = arr.indexOf(10)

console.log(index) // -1

forEach：和 for 循环一个作用，就是用来遍历数组的。

语法：arr.forEach(function (item, index, arr) {})

var arr = [1, 2, 3]

// 使用 forEach 遍历数组
arr.forEach(function (item, index, arr) {
      
      
  // item 就是数组中的每一项
  // index 就是数组的索引
  // arr 就是原始数组
  console.log('数组的第 ' + index + ' 项的值是 ' + item + '，原始数组是', arr)
})

forEach() 的时候传递的那个函数，会根据数组的长度执行。数组的长度是多少，这个函数就会执行多少回

map：和 forEach 类似，只不过可以对数组中的每一项进行操作，返回一个新的数组。

var arr = [1, 2, 3]

// 使用 map 遍历数组
var newArr = arr.map(function (item, index, arr) {
      
      
  // item 就是数组中的每一项
  // index 就是数组的索引
  // arr 就是原始数组
  return item + 10
})

console.log(newArr) // [11, 12, 13]

filter：和 map的使用方式类似，按照条件来筛选数组。把原始数组中满足条件的筛选出来，组成一个新的数组返回。

var arr = [1, 2, 3]

// 使用 filter 过滤数组
var newArr = arr.filter(function (item, index, arr) {
      
      
  // item 就是数组中的每一项
  // index 就是数组的索引
  // arr 就是原始数组
  return item > 1
})

console.log(newArr) // [2, 3]

返回的新数组就会是原始数组中所有 > 1 的项。

字符串

创建字符串

字面量：
```
var str = 'hello'
```
构造函数创建：
```
var str = new String('hello')
```

字符集

ASCII字符集

计算机只能存储 0101010 这样的二进制数字。那么我们的 a ~ z / A ~ Z / $ / @ /… 之类的内容也是由二进制数字组成的

我们可以简单的理解为， a ~ z / A ~ Z / $ / @ /… 之类的内容都有一个自己的编号，然后在计算机存储的时候，是存储的这些编号，我们看的时候，也是通过这些编号再解析成我们要看到的内容。

在这里插入图片描述

unicode 编码

ASCII 只有这 128 个字符的编码结构，但是因为 ASCII 出现的比较早，而且是美国发明的，早先时候这些内容就够用了，但对于这个世界来说肯定是不够用的。因为我们的汉字没有办法存储，包括一些其他国家的语言也没有办法存储。

所以就出现了 unicode 编码，也叫（万国码，统一码）。unicode对照表就是一个和 ASCII 一样的对照表，只不过变得很大很大，因为存储的内容特别的多。而且包含了世界上大部分国家的文字，所以我们的文字和字符现在在存储的时候，都是按照 unicode 编码转换成数字进行存储。

UTF-8 就是一种 8 位的 unicode 字符集。

字符串常用方法

字符串和数组一样，也是按照索引来排列的。

charAt

charAt(索引) 是找到字符串中指定索引位置的内容返回
```
var str = 'Jack'

// 使用 charAt 找到字符串中的某一个内容
var index = str.charAt(2)

console.log(index) // c
```
- 因为字符串也是按照索引进行排列的，也是同样从 0 开始
- 所以索引 2 的位置就是 c
如果没有对应的索引，那么就会返回空字符串
```
var str = 'Jack'

// 使用 charAt 找到字符串中的某一个内容
var index = str.charAt(10)

console.log(index) // ''
```
- 这个字符串根本没有索引 10 的位置
- 所以就会返回一个空字符串 ''

charCodeAt

charCodeAt(索引) 就是返回对应索引位置的 unicode 编码

var str = 'Jack'

// 使用 charAt 找到字符串中的某一个内容
var index = str.charCodeAt(0)

console.log(index) // 74

因为 J 在 unicode 对照表里面存储的是 74，所以就会返回 74

indexOf

indexOf 就是按照字符找到对应的索引

var str = 'Jack'

// 使用 indexOf 找到对应的索引
var index = str.indexOf('J')

console.log(index) // 0

因为字符 J 在字符串 Jack 中的索引位置是 0
所以会返回 0

substring

substring 是用来截取字符串使用的
语法： substring(从哪个索引开始，到哪个索引截止)，包含开始索引，不包含结束索引
```
var str = 'hello'
//         01234

// 使用 substring 截取字符串
var newStr = str.substring(1, 3)

console.log(newStr) // el
```
- 从索引 1 开始，到索引 3 截止，包含前面的索引不包含后面的索引
- 所以返回的是 el

substr

substr 也是用来截取字符串的
语法：substr(从哪个索引开始，截取多少个)
```
var str = 'hello'
//         01234

// 使用 substr 截取字符串
var newStr = str.substr(1, 3)

console.log(newStr) // ell
```
- 这个方法和 substring 不一样的是，第二个参数是截取多少个
- 从索引 1 开始，截取 3 个，所以得到的是 ell

toLowerCase 和 toUpperCase

这两个方法分别使用用来给字符串转成 小写字母 和 大写字母 的

var str = hello

// 使用 toUpperCase 转换成大写
var upper = str.toUpperCase()

console.log(upper) // HELLO

// 使用 toLowerCase 转换成小写
var lower = upper.toLowerCase()

console.log(lower) // hello

Math

Math是js的一个内置对象，提供了一些方法帮助我们操作数字。

random

Math.random()方法用来生成一个0~1之间的随机数。每次执行生成的数字都不一样，但是一定是 0 ~ 1 之间的（包含 0 ，但是不包含 1）。

var num = Math.random()
console.log(num) // 得到一个随机数

round

Math.round()是将一个小数四舍五入变成一个整数。

var num = 10.1
console.log(Math.round(num)) // 10

var num2 = 10.6
console.log(Math.round(num2)) // 11

abs

Math.abs() 是返回一个数字的 绝对值。

var num = -10
console.log(math.abs(num)) // 10

ceil

Math.ceil() 是将一个小数 向上取整 得到的整数。

var num = 10.1
console.log(Math.ceil(num)) // 11

var num2 = 10.9
console.log(Math.ceil(num2)) // 11

floor

Math.floor() 是将一个小数 向下取整 的到的整数

var num = 10.1
console.log(Math.floor(num)) // 10

var num2 = 10.9
console.log(Math.floor(num2)) // 10

max

Math.max() 得到的是你传入的几个数字之中最大的那个数字

console.log(Math.max(1, 2, 3, 4, 5)) // 5

min

Math.min() 得到的是你传入的几个数字之中最小的那个数字

console.log(Math.min(1, 2, 3, 4, 5)) // 1

PI

Math.PI 得到的是 π 的值，也就是 3.1415926...

console.log(Math.PI) // 3.141592653589793

因为计算机的计算精度问题，只能得到小数点后 15 位
使用 Math.PI 的时候，是不需要加 () 的

Date

js提供内置的构造函数，专门用来获取时间

new Date()

在不传递参数的情况下默认返回当前时间

var time = new Date()
console.log(time) // 当前时间 Fri Mar 01 2019 13:11:23 GMT+0800 (中国标准时间)

new Date() 在传入参数的时候，可以获取到一个你传递进去的时间

var time = new Date('2019-03-03 13:11:11')
console.log(time) // Sun Mar 03 2019 13:11:11 GMT+0800 (中国标准时间)

new Date() 传递的参数有多种情况

传递两个数字，第一个表示年，第二个表示月份

var time = new Date(2019, 00) // 月份从 0 开始计数，0 表示 1月，11 表示 12月
console.log(time) // Tue Jan 01 2019 00:00:00 GMT+0800 (中国标准时间)

传递三个数字，前两个不变，第三个表示该月份的第几天，从 1 到 31

var time = new Date(2019, 00, 05) 
console.log(time) // Sat Jan 05 2019 00:00:00 GMT+0800 (中国标准时间)

传递四个数字，前三个不变，第四个表示当天的几点，从 0 到 23

var time = new Date(2019, 00, 05, 22) 
console.log(time) // Sat Jan 05 2019 22:00:00 GMT+0800 (中国标准时间)

传递五个数字，前四个不变，第五个表示的是该小时的多少分钟，从 0 到 59

var time = new Date(2019, 00, 05, 22, 33) 
console.log(time) // Sat Jan 05 2019 22:33:00 GMT+0800 (中国标准时间)

传递六个数字，前五个不变，第六个表示该分钟的多少秒，从 0 到 59

var time = new Date(2019, 00, 05, 22, 33, 55) 
console.log(time) // Sat Jan 05 2019 22:33:55 GMT+0800 (中国标准时间)

传入字符串的形式

console.log(new Date('2019')) 
// Tue Jan 01 2019 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02')) 
// Fri Feb 01 2019 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03')) 
// Sun Feb 03 2019 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03 13:')) 
// Sun Feb 03 2019 13:00:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03 13:13:')) 
// Sun Feb 03 2019 13:13:00 GMT+0800 (中国标准时间)
console.log(new Date('2019-02-03 13:13:13')) 
// Sun Feb 03 2019 13:13:13 GMT+0800 (中国标准时间)

将日期字符串格式化

例如得到时间字符串为：Sun Feb 03 2019 13:13:13 GMT+0800 (中国标准时间)，我需要得到的信息是这个日期中的年份可以靠截取字符串的形式得到。但 js为我们提供了一系列方法来得到里面的指定内容。

getFullYear()：得到指定字符串中的年份。

var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getFullYear()) // 2019

getMonth() ：是得到指定字符串中的月份
```
var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getMonth()) // 3
```
- 注意：月份是从 0 开始数的，0 表示 1月，1 表示 2月，依此类推

getDate() ：得到指定字符串中的日期

var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getDate()) // 3

getHours() ：得到指定字符串中的小时

var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getHours()) // 8

getMinutes() ：得到指定字符串中的分钟

var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getMinutes()) // 0

getSeconds() ：得到指定字符串中的秒钟

var time = new Date(2019, 03, 03, 08, 00, 22)
console.log(time.getSeconds()) // 22

getDay() ：得到指定字符串当前日期是一周中的第几天（周日是 0，周六是 6）
```
var time = new Date(2019, 03, 08, 08, 00, 22)
console.log(time.getDay()) // 1
```

getTime() ：得到执行时间到 格林威治时间 的毫秒数

var time = new Date(2019, 03, 08, 08, 00, 22)
console.log(time.getTime()) // 1554681622000

获取时间差

js中时间无法直接做减法。1970年01月01日00时00分00秒叫做 格林威治时间。它的数字为0。从 格林威治时间 开始，每经过1毫秒，数字就会 + 1。所以我们可以获取到任意一个时间节点到 格林威治时间 的毫秒数，然后在用两个毫秒数相减，就能得到两个时间点之间相差的毫秒数，再通过这个毫秒数得到准确的时间。

定时器

在 js中，有两种定时器，倒计时定时器和间隔定时器。

倒计时定时器

倒计时多少时间以后执行函数。会在你设定的时间以后，执行函数。

语法： setTimeout(要执行的函数，多长时间以后执行)

var timerId = setTimeout(function () {
      
      
  console.log('我执行了')
}, 1000)
console.log(timerId) // 1

时间是按照毫秒进行计算的，1000 毫秒就是 1秒钟。所以会在页面打开 1 秒钟以后执行函数。
只执行一次，就不在执行了
返回值是当前这个定时器是页面中的第几个定时器

间隔定时器

每间隔多少时间就执行一次函数
语法： setInterval(要执行的函数，间隔多少时间)

var timerId = setInterval(function () {
    
    
  console.log('我执行了')
}, 1000)

时间和刚才一样，是按照毫秒进行计算的。每间隔 1 秒钟执行一次函数。
只要不关闭，会一直执行
返回值是，当前这个定时器是页面中的第几个定时器

定时器的返回值

设置定时器的时候，它的返回值是一个数字，指代当前定时器是页面中第几个定时器。

var timerId = setTimeout(function () {
    
    
  console.log('倒计时定时器')
}, 1000)

var timerId2 = setInterval(function () {
    
    
  console.log('间隔定时器')
}, 1000)

console.log(timerId) // 1
console.log(timerId2) // 2

关闭定时器

利用上述所说的 timerId来关闭定时器。有两个办法：clearTimeout 和 clearInterval。

var timerId = setTimeout(function () {
    
    
  console.log('倒计时定时器')
}, 1000)
clearTimeout(timerId)

var timerId2 = setInterval(function () {
    
    
  console.log('间隔定时器')
}, 1000)
coearInterval(timerId2)

关闭后定时器就不会再执行。

原则上是clearTimeout 关闭 setTimeout，clearInterval 关闭 setInterval。
但实际上可以通用（混用）：

var timerId = setTimeout(function () {
    
    
  console.log('倒计时定时器')
}, 1000)
// 关闭倒计时定时器
clearInterval(timerId)

var timerId2 = setInterval(function () {
    
    
  console.log('间隔定时器')
}, 1000)
// 关闭间隔定时器
clearTimeout(timerId2)

JavaScript学习之解密基础语法