JS 基础学习一

ゝ一世哀愁。 2021-09-03 08:53 379阅读 0赞

> 每一天都学习一点点，每一天都成长一点点，这都将带来与众不同的变化

## 一：为何学习 JavaScript？ ##

JavaScript 是 web 开发者必学的三种语言之一：

*  *HTML* 定义网页的内容
 *  *CSS* 规定网页的布局
 *  *JavaScript* 对网页行为进行编程

## 二：基础知识 ##

### 2.1 显示数据 ###

JavaScript 能够以不同方式“显示”数据：

*  使用 window.alert() 写入警告框
 *  使用 document.write() 写入 HTML 输出
 *  使用 innerHTML 写入 HTML 元素
 *  使用 console.log() 写入浏览器控制台

### 2.2 注释 ###

单行注释以 // 开头。

多行注释以 /\* 开头，以 \*/ 结尾。

### 2.3 变量 ###

#### 2.3.1 命名 ####

*  名称可包含字母、数字、下划线和美元符号
 *  名称必须以字母开头
 *  名称也可以 $ 和 \_ 开头(但是在本教程中我们不会这么做)
 *  名称对大小写敏感(y 和 Y 是不同的变量)
 *  保留字(比如 JavaScript 的关键词)无法用作变量名称

#### 2.3.2 声明变量 ####

使用 var 或者 let 来定义变量，无需在意变量类型。

其中var的作用域为全局，而 let 的作用域只在代码块内。

var x = '3' + 2 
    // 结果是 '32'
    var y = 3 + 2 + '9'
    //结果是 '79'

### 2.4 运算符 ###

#### 2.4.1 算数运算符 ####

‘+ - \* / % ++ – ‘

#### 2.4.2 赋值运算符 ####

‘ = += -= \*= /= %= ‘

#### 2.4.3 字符串运算符 ####

\+ 运算符也可用于对字符串进行相加(concatenate，级联)

#### 2.4.4 比较运算符 ####

<table> 
 <thead> 
  <tr> 
   <th align="left">运算符</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">==</td> 
   <td align="left">等于</td> 
  </tr> 
  <tr> 
   <td align="left">===</td> 
   <td align="left">等值等型</td> 
  </tr> 
  <tr> 
   <td align="left">!=</td> 
   <td align="left">不相等</td> 
  </tr> 
  <tr> 
   <td align="left">!==</td> 
   <td align="left">不等值或不等型</td> 
  </tr> 
  <tr> 
   <td align="left">&gt;</td> 
   <td align="left">大于</td> 
  </tr> 
  <tr> 
   <td align="left">&lt;</td> 
   <td align="left">小于</td> 
  </tr> 
  <tr> 
   <td align="left">&gt;=</td> 
   <td align="left">大于或等于</td> 
  </tr> 
  <tr> 
   <td align="left">&lt;=</td> 
   <td align="left">小于或等于</td> 
  </tr> 
  <tr> 
   <td align="left">?</td> 
   <td align="left">三元运算符</td> 
  </tr> 
 </tbody> 
</table>

#### 2.4.5 逻辑运算符 ####

#### 2.4.6 类型运算符 ####

<table> 
 <thead> 
  <tr> 
   <th align="left">运算符</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">typeof</td> 
   <td align="left">返回变量的类型。</td> 
  </tr> 
  <tr> 
   <td align="left">instanceof</td> 
   <td align="left">返回 true，如果对象是对象类型的实例。</td> 
  </tr> 
 </tbody> 
</table>

### 2.5 函数 ###

JavaScript 函数通过 function 关键词进行定义，其后是*函数名*和括号 ()。

函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。

圆括号可包括由逗号分隔的参数：

(参数 1, 参数 2, ...)

由函数执行的代码被放置在花括号中：*\{\}*

function name(参数 1, 参数 2, 参数 3) { 
     要执行的代码
    }

*函数参数(Function parameters)*是在函数定义中所列的名称。

*函数参数(Function arguments)*是当调用函数时由函数接收的真实的*值*。

### 2.6 事件 ###

HTML 事件可以是浏览器或用户做的某些事情。

下面是 HTML 事件的一些例子：

*  HTML 网页完成加载
 *  HTML 输入字段被修改
 *  HTML 按钮被点击

通常，当事件发生时，用户会希望做某件事。

JavaScript 允许您在事件被侦测到时执行代码。

*通过 JavaScript 代码*，HTML 允许您向 HTML 元素添加事件处理程序。

**常见的 HTML 事件**

下面是一些常见的 HTML 事件：

<table> 
 <thead> 
  <tr> 
   <th align="left">事件</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">onchange</td> 
   <td align="left">HTML 元素已被改变</td> 
  </tr> 
  <tr> 
   <td align="left">onclick</td> 
   <td align="left">用户点击了 HTML 元素</td> 
  </tr> 
  <tr> 
   <td align="left">onmouseover</td> 
   <td align="left">用户把鼠标移动到 HTML 元素上</td> 
  </tr> 
  <tr> 
   <td align="left">onmouseout</td> 
   <td align="left">用户把鼠标移开 HTML 元素</td> 
  </tr> 
  <tr> 
   <td align="left">onkeydown</td> 
   <td align="left">用户按下键盘按键</td> 
  </tr> 
  <tr> 
   <td align="left">onload</td> 
   <td align="left">浏览器已经完成页面加载</td> 
  </tr> 
 </tbody> 
</table>

### 2.7 字符串 ###

通常，JavaScript 字符串是原始值，通过字面方式创建：

var firstName = "Bill"

但是字符串也可通过关键词 new 定义为对象：

var firstName = new String("Bill")

#### 2.7.1 查找字符串中的字符串 ####

indexOf() 方法返回字符串中指定文本*首次*出现的索引(位置)：如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

#### 2.7.2 lastIndexOf() 方法返回指定文本在字符串中*最后*一次出现的索引： ####

#### 2.7.3 slice() 方法 ####

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。

该方法设置两个参数：起始索引(开始位置)，终止索引(结束位置)。

这个例子裁剪字符串中位置 7 到位置 13 的片段：

#### 2.7.4 替换字符串内容 ####

replace() 方法用另一个值替换在字符串中指定的值：

#### 2.7.5 转换大小写 ####

通过 toUpperCase() 把字符串转换为大写：

通过 toLowerCase() 把字符串转换为小写：

#### 2.7.6 连接字符串 ####

concat() 连接两个或多个字符串：

#### 2.7.7 去两边空格 ####

trim() 方法删除字符串两端的空白符：

#### 2.7.8 提取字符 ####

charAt() 方法返回字符串中指定下标(位置)的字符串：

charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：

#### 2.7.9 把字符串转换为数组 ####

可以通过 split() 将字符串转换为数组：

var txt = "a,b,c,d,e"; // 字符串
    txt.split(","); // 用逗号分隔
    txt.split(" "); // 用空格分隔
    txt.split("|"); // 用竖线分隔
    txt.split(""); // 分隔为字符

### 2.8 数字方法 ###

#### 2.8.1 转换字符串为数值 ####

toString() 以字符串返回数值。

#### 2.8.2 转变量为数值 ####

Number() 可用于把 JavaScript 变量转换为数值：

parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字：

parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字：

### 2.9数组方法 ###

#### 2.8.1 数组遍历 ####

遍历数组的最安全方法是使用 “for” 循环：

您也可以使用 Array.foreach() 函数：

#### 2.8.2 添加数组元素 ####

向数组添加新元素的最佳方法是使用 push() 方法：

#### 2.8.3 创建数组 ####

没有必要使用 JavaScript 的内建数组构造器 new Array()。

*请使用 \[\] 取而代之！*

#### 2.8.4 判别数组对象 ####

为了解决这个问题，ECMAScript 5 定义了新方法 Array.`isArray()`：

假如对象由给定的构造器创建，则 *instanceiof* 运算符返回 true：

#### 2.8.5 把数组转换为字符串 ####

JavaScript 方法 toString() 把数组转换为数组值(逗号分隔)的字符串。

join() 方法也可将所有数组元素结合为一个字符串。它的行为类似 toString()，但是您还可以规定分隔符：

#### 2.8.6 删除添加元素 ####

pop() 方法从数组中删除最后一个元素：

push() 方法(在数组结尾处)向数组添加一个新的元素：push() 方法返回新数组的长度：

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。shift() 方法返回被“位移出”的字符串：

unshift() 方法(在开头)向数组添加新元素，并“反向位移”旧元素：unshift() 方法返回新数组的长度。

#### 2.8.7 更改元素 ####

通过使用它们的*索引号*来访问数组元素：length 属性提供了向数组追加新元素的简易方法：

#### 2.8.8 删除元素 ####

既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来*删除*：改为 undefined

#### 2.8.9 拼接数组 ####

splice() 方法可用于向数组添加新项：第一个参数(2)定义了应添加新元素的位置(拼接)。

第二个参数(0)定义应删除多少元素。

其余参数(“Lemon”，“Kiwi”)定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组：

#### 2.8.10 合并数组 ####

concat() 方法通过合并(连接)现有数组来创建一个新数组：

var arr1 = ["Cecilie", "Lone"];
    var arr2 = ["Emil", "Tobias", "Linus"];
    var arr3 = ["Robin", "Morgan"];
    var myChildren = arr1.concat(arr2, arr3);

#### 2.8.11 裁剪数组 ####

slice() 可接受两个参数，比如 (1, 3)。

该方法会从开始参数选取元素，直到结束参数(不包括)为止。

#### 2.8.12 自动 toString() ####

如果需要原始值，则 JavaScript 会自动把数组转换为字符串。

### 2.9 数组排序 ###

#### 2.9.1 sort() ####

sort() 方法以字母顺序对数组进行排序：

#### 2.9.2 反转数组 ####

reverse() 方法反转数组中的元素。

#### 2.9.3 比值函数 ####

比较函数的目的是定义另一种排序顺序。

比较函数应该返回一个负，零或正值，这取决于参数：

function(a, b){return a-b}

当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值(负、零或正值)对这些值进行排序。

#### 2.9.4 查找最高(或最低)的数组值 ####

JavaScript 不提供查找数组中最大或最小数组值的内建函数。

不过，在对数组进行排序之后，您能够使用索引来获得最高或最低值。

var points = [40, 100, 1, 5, 25, 10];
    points.sort(function(a, b){return a - b});
    
    // 现在 points[0] 包含最低值
    // 而 points[points.length-1] 包含最高值

您可以使用 Math.max.apply 来查找数组中的最高值：

您可以使用 Math.min.apply 来查找数组中的最低值：

### 2.10 数组迭代 ###

#### 2.10.1 Array.forEach() ####

forEach() 方法为每个数组元素调用一次函数(回调函数)。

**注释：**该函数接受 3 个参数：

*  项目值
 *  项目索引
 *  数组本身

#### 2.10.2 Array.map() ####

map() 方法通过对每个数组元素执行函数来创建新数组。

请注意，该函数有 3 个参数：

*  项目值
 *  项目索引
 *  数组本身

#### 2.10.3 Array.filter() ####

filter() 方法创建一个包含通过测试的数组元素的新数组。

#### 2.10.4 Array.reduce() ####

reduce() 方法在每个数组元素上运行函数，以生成(减少它)单个值。

#### 2.10.5 Array.reduceRight() ####

reduceRight() 方法在每个数组元素上运行函数，以生成(减少它)单个值。

#### 2.10.6 Array.indexOf() ####

indexOf() 方法在数组中搜索元素值并返回其位置。

**注释：**第一个项目的位置是 0，第二个项目的位置是 1，以此类推。

array.indexOf(item, start)

<table> 
 <thead> 
  <tr> 
   <th><em>item</em></th> 
   <th>必需。要检索的项目。</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><em>start</em></td> 
   <td>可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。</td> 
  </tr> 
 </tbody> 
</table>

如果未找到项目，Array.indexOf() 返回 -1。

如果项目多次出现，则返回第一次出现的位置。

#### 2.10.7 Array.lastIndexOf() ####

Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。

#### 2.11 日期 ####

#### 2.11.1 创建日期 ####

Date 对象由新的 Date() 构造函数创建。

有 4 种方法创建新的日期对象：

*  new Date()
 *  new Date(year, month, day, hours, minutes, seconds, milliseconds)
 *  new Date(milliseconds)
 *  new Date(date string)

#### 2.11.2 输入格式 ####

有四种 JavaScript 日期输入格式：

<table> 
 <thead> 
  <tr> 
   <th align="left">类型</th> 
   <th align="left">实例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">ISO 日期</td> 
   <td align="left">“2018-02-19” (国际标准)</td> 
  </tr> 
  <tr> 
   <td align="left">短日期</td> 
   <td align="left">“02/19/2018” 或者 “2018/02/19”</td> 
  </tr> 
  <tr> 
   <td align="left">长日期</td> 
   <td align="left">“Feb 19 2018” 或者 “19 Feb 2019”</td> 
  </tr> 
  <tr> 
   <td align="left">完整日期</td> 
   <td align="left">“Monday February 25 2015”</td> 
  </tr> 
 </tbody> 
</table>

#### 2.11.3 日期获取方法 ####

获取方法用于获取日期的某个部分(来自日期对象的信息)。下面是最常用的方法(以字母顺序排序)：

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">getDate()</td> 
   <td align="left">以数值返回天(1-31)</td> 
  </tr> 
  <tr> 
   <td align="left">getDay()</td> 
   <td align="left">以数值获取周名(0-6)</td> 
  </tr> 
  <tr> 
   <td align="left">getFullYear()</td> 
   <td align="left">获取四位的年(yyyy)</td> 
  </tr> 
  <tr> 
   <td align="left">getHours()</td> 
   <td align="left">获取小时(0-23)</td> 
  </tr> 
  <tr> 
   <td align="left">getMilliseconds()</td> 
   <td align="left">获取毫秒(0-999)</td> 
  </tr> 
  <tr> 
   <td align="left">getMinutes()</td> 
   <td align="left">获取分(0-59)</td> 
  </tr> 
  <tr> 
   <td align="left">getMonth()</td> 
   <td align="left">获取月(0-11)</td> 
  </tr> 
  <tr> 
   <td align="left">getSeconds()</td> 
   <td align="left">获取秒(0-59)</td> 
  </tr> 
  <tr> 
   <td align="left">getTime()</td> 
   <td align="left">获取时间(从 1970 年 1 月 1 日至今)</td> 
  </tr> 
 </tbody> 
</table>

#### 2.11.4 日期设置方法 ####

设置方法用于设置日期的某个部分。下面是最常用的方法(按照字母顺序排序)：

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">setDate()</td> 
   <td align="left">以数值(1-31)设置日</td> 
  </tr> 
  <tr> 
   <td align="left">setFullYear()</td> 
   <td align="left">设置年(可选月和日)</td> 
  </tr> 
  <tr> 
   <td align="left">setHours()</td> 
   <td align="left">设置小时(0-23)</td> 
  </tr> 
  <tr> 
   <td align="left">setMilliseconds()</td> 
   <td align="left">设置毫秒(0-999)</td> 
  </tr> 
  <tr> 
   <td align="left">setMinutes()</td> 
   <td align="left">设置分(0-59)</td> 
  </tr> 
  <tr> 
   <td align="left">setMonth()</td> 
   <td align="left">设置月(0-11)</td> 
  </tr> 
  <tr> 
   <td align="left">setSeconds()</td> 
   <td align="left">设置秒(0-59)</td> 
  </tr> 
  <tr> 
   <td align="left">setTime()</td> 
   <td align="left">设置时间(从 1970 年 1 月 1 日至今的毫秒数)</td> 
  </tr> 
 </tbody> 
</table>

### 2.12 Math方法 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">abs(x)</td> 
   <td align="left">返回 x 的绝对值</td> 
  </tr> 
  <tr> 
   <td align="left">acos(x)</td> 
   <td align="left">返回 x 的反余弦值，以弧度计</td> 
  </tr> 
  <tr> 
   <td align="left">asin(x)</td> 
   <td align="left">返回 x 的反正弦值，以弧度计</td> 
  </tr> 
  <tr> 
   <td align="left">atan(x)</td> 
   <td align="left">以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。</td> 
  </tr> 
  <tr> 
   <td align="left">atan2(y,x)</td> 
   <td align="left">返回从 x 轴到点 (x,y) 的角度</td> 
  </tr> 
  <tr> 
   <td align="left">ceil(x)</td> 
   <td align="left">对 x 进行上舍入</td> 
  </tr> 
  <tr> 
   <td align="left">cos(x)</td> 
   <td align="left">返回 x 的余弦</td> 
  </tr> 
  <tr> 
   <td align="left">exp(x)</td> 
   <td align="left">返回 Ex 的值</td> 
  </tr> 
  <tr> 
   <td align="left">floor(x)</td> 
   <td align="left">对 x 进行下舍入</td> 
  </tr> 
  <tr> 
   <td align="left">log(x)</td> 
   <td align="left">返回 x 的自然对数(底为e)</td> 
  </tr> 
  <tr> 
   <td align="left">max(x,y,z,…,n)</td> 
   <td align="left">返回最高值</td> 
  </tr> 
  <tr> 
   <td align="left">min(x,y,z,…,n)</td> 
   <td align="left">返回最低值</td> 
  </tr> 
  <tr> 
   <td align="left">pow(x,y)</td> 
   <td align="left">返回 x 的 y 次幂</td> 
  </tr> 
  <tr> 
   <td align="left">random()</td> 
   <td align="left">返回 0 ~ 1 之间的随机数</td> 
  </tr> 
  <tr> 
   <td align="left">round(x)</td> 
   <td align="left">把 x 四舍五入为最接近的整数</td> 
  </tr> 
  <tr> 
   <td align="left">sin(x)</td> 
   <td align="left">返回 x(x 以角度计)的正弦</td> 
  </tr> 
  <tr> 
   <td align="left">sqrt(x)</td> 
   <td align="left">返回 x 的平方根</td> 
  </tr> 
  <tr> 
   <td align="left">tan(x)</td> 
   <td align="left">返回角的正切</td> 
  </tr> 
 </tbody> 
</table>

### 2.13 循环 ###

JavaScript 支持不同类型的循环：

*  for - 多次遍历代码块
 *  for/in - 遍历对象属性
 *  while - 当指定条件为 true 时循环一段代码块
 *  do/while - 当指定条件为 true 时循环一段代码块

### 2.14 类型转换 ###

JavaScript 中有五种可包含值的数据类型：

*  字符串(string)
 *  数字(number)
 *  布尔(boolean)
 *  对象(object)
 *  函数(function)

有三种对象类型：

*  对象(Object)
 *  日期(Date)
 *  数组(Array)

同时有两种不能包含值的数据类型：

*  null
 *  undefined

如果 JavaScript 尝试操作一种“错误”的数据类型，它会试图将该值转换为“正确”的类型。

结果并不总是你所期望的：

5 + null // 返回 5 因为 null 被转换为 0
    "5" + null // 返回 "5null" 因为 null 被转换为 "null"
    "5" + 2 // 返回 52 因为 2 被转换为 "2"
    "5" - 2 // 返回 3 因为 "5" 被转换为 5
    "5" * "2" // 返回 10 因为 "5" 和 "2" 被转换为 5 和 2

### 2.15 正则表达式 ###

**语法**

/pattern/modifiers;

**使用字符串方法**

在 JavaScript 中，正则表达式常用于两个*字符串方法*：search() 和 replace()。

search() 方法使用表达式来搜索匹配，然后返回匹配的位置。

replace() 方法返回模式被替换处修改后的字符串。在 JavaScript 中，正则表达式常用于两个*字符串方法*：search() 和 replace()。

search() 方法使用表达式来搜索匹配，然后返回匹配的位置。

replace() 方法返回模式被替换处修改后的字符串。

### 2.16 错误处理 ###

try 语句使您能够测试代码块中的错误。

catch 语句允许您处理错误。