JavaScript

JavaScript 是 ECMAScript+BOM+DOM

ECMAScript: 客户端脚本语言的标准 脚本语言：不需要编译，就可以被浏览器解析解析执行

引入方式

• 在 html 内部 由 <script> 标签引入
• 外部引入 由 <script src="js路径"> 标签引入

注释

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

注意一: script 元素不能写成单标签

• 在外联式引用 js 文件时，script 标签中不可以写 JavaScript 代码，并且 script 标签不能写成单标签；
• 即不能写成 <script src="index.js"/>；

注意二：省略 type 属性

• 在以前的代码中，<script> 标签中会使用 type=“text/javascript”；
• 现在可不写这个代码了，因为 JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言；

注意三：加载顺序

• 作为 HTML 文档内容的一部分，JavaScript 默认遵循 HTML 文档的加载顺序，即自上而下的加载顺序；
• 推荐将 JavaScript 代码和编写位置放在 body 子元素的最后一行；

注意四: JavaScript 代码严格区分大小写

• HTML 元素和 CSS 属性不区分大小写，但是在 JavaScript 中严格区分大小写；

输入输出语句

• 输入框 prompt ("提示内容")
• 弹出警告框 alert ("提示内容")
• 控制台输出 console.log ("显示内容")
• 页面内容输出 document.write ("显示内容")
• 弹出确认框 确认返 ture 取消返 false confirm ("提示内容")

变量和常量

JavaScript 属于弱类型语言，定义变量时不区分具体的数据类型

一个变量可以在前一刻是个字符串，下一刻就存储一个数字；允许这种操作的编程语言，例如 JavaScript，被称为 “动态类型”（dynamically typed）的编程语言；

• 定义局部变量 let 变量名 = 值
• 定义全局变量 变量名 = 值
• 定义常量 const 常量名 = 值

原始数据类型

• boolean 布尔类型
• null 声明 null 值的特殊关键字
• undefined 代表变量未定义
• numbner 整数或者浮点数
• string 字符串
• Object
• bigint 大整数 如: let num =10n
• Symbol

typeof 方法

因为 ECMAScript 的类型系统是松散的，所以需要一种手段来确定任意变量的数据类型。

tpyeof () 用于判断变量的数据类型

• "undefined" 表示值未定义；
• "boolean" 表示值为布尔值；
• "string" 表示值为字符串；
• "number" 表示值为数值；
• "object" 表示值为对象 (而不是函数) 或 null;
• "function" 表示值为函数；
• “symbol” 表示值为符号；

Number

number 类型代表整数和浮点数。

数字 number 可以有很多操作，比如，乘法 *、除法 /、加法 +、减法 - 等等。

除了常规的数字，还包括所谓的 “特殊数值（“special numeric values”）” 也属于 Number 类型（了解）

• Infinity：代表数学概念中的 无穷大 ∞，也可以表示 - Infinity；
• NaN：NaN 代表一个计算错误，它是一个错误的操作所得到的结果；

十进制（掌握）、十六进制、二进制、八进制

• 最小正数值：Number.MIN_VALUE，这个值为： 5e-324，小于这个的数字会被转化为 0
• 最大正数值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
• isNaN：用于判断是否不是一个数字。不是数字返回 true，是数字返回 false。
• toString (base)，将数字转成字符串，并且按照 base 进制进行转化， base 的范围可以从 2 到 36，默认情况下是 10；
• toFixed (digits)，格式化一个数字，保留 digits 位的小数
• parseInt (string [, radix])，将字符串解析成整数，也有对应的全局方法 parseInt；
• parseFloat (string)，将字符串解析成浮点数，也有对应的全局方法 parseFloat；

String

JavaScript 中的字符串必须被括在引号里，有三种包含字符串的方式。

• 双引号："Hello"
• 单引号：'Hello’
• 反引号：`Hello`

Undefined

Undefined 类型只有一个值，就是特殊值 undefined。 如果我们声明一个变量，但是没有对其进行初始化时，它默认就是 undefined；

注意一：最好在变量定义的时候进行初始化，而不只是声明一个变量； 注意二：不要显示的将一个变量赋值为 undefined

Object

Object 类型是一个特殊的类型，我们通常把它称为引用类型或者复杂类型；

• 其他的数据类型我们通常称之为 “原始类型”，因为它们的值质保函一个单独的内容（字符串、数字或者其他）；
• Object 往往可以表示一组数据，是其他数据的一个集合；
• 在 JavaScript 中我们可以使用 花括号 {} 的方式来表示一个对象；

Null

Null 类型同样只有一个值，即特殊值 null。null 类型通常用来表示一个对象为空，所以通常我们在给一个对象进行初始化时，会赋值为 null；

null 和 undefined 的关系：

• undefined 通常只有在一个变量声明但是未初始化时，它的默认值是 undefined 才会用到；
• 并且我们不推荐直接给一个变量赋值为 undefined，所以很少主动来使用；
• null 值非常常用，当一个变量准备保存一个对象，但是这个对象不确定时，我们可以先赋值为 null；

算数运算符

与 JAVA 没有太大差别 多个全等于 ===

字符串 做 + 运算时 都是拼接

而与数字做 - * % 等运算时会自动转换类型

流程控制和循环语句

• if 语句

  • 数字 0、空字符串 “”、null、undefined 和 NaN 都会被转换成 false。其他值被转换为 true，所以它们被称为 “真值（truthy）”；
  • if.. else..
  • if.. else if.. else..
  • 三元运算符；var result = condition ? value1 : value2;

• switch 语句

• for 循环

• while 循环

  • do..while

数组

与 java 数组基本一致，但数组类型和长度都没有限制

• let 数组名 =[元素 1 , 元素 2, ...]
• 索引 从 0 开始 最大到数组长度 - 1 没有索引越界 而且长度没有限制 可以直接越界赋值
• 数组长度 数组名.length
• 数组高级运算符 ...
  • 数组复制 let arr2=[...arr]
  • 合并数组 let arr4 =[...arr2,...arr3]
  • 字符串转数组 let arr5=[..."hello"]

函数

类似于方法

• function 方法名 (参数) { return 返回值}
• 可变参数 function 方法名 (... 参数名) { return 返回值}
• 匿名函数 function (参数列表) {方法体 }

如果函数中没有使用 return 语句 ，那么函数有默认的返回值：undefined；如果函数使用 return 语句，但是 return 后面没有任何值，那么函数的返回值也是：undefined；

arguments

事实上在函数有一个特别的对象：arguments 对象

• 默认情况下，arguments 对象是所有（非箭头）函数中都可用的局部变量；
• 该对象中存放着所有的调用者传入的参数，从 0 位置开始，依次存放；
• arguments 变量的类型是一个 object 类型（ array-like ），不是一个数组，但是和数组的用法看起来很相似；
• 如果调用者传入的参数多余函数接收的参数，可以通过 arguments 去获取所有的参数；

局部变量和外部变量

在 JavaScript（ES5 之前）中没有块级作用域的概念，但是函数可以定义自己的作用域。

• 作用域（Scope）表示一些标识符的作用有效范围（所以也有被翻译为有效范围的）；
• 函数的作用域表示在函数内部定义的变量，只有在函数内部可以被访问到；

外部变量和局部变量的概念：

• 定义在函数内部的变量，被称之为局部变量（Local Variables）。
• 定义在函数外部的变量，被称之为外部变量（Outer Variables）。

什么是全局变量？

• 在函数之外声明的变量（在 script 中声明的），称之为全局变量。
• 全局变量在任何函数中都是可见的。
• 通过 var 声明的全局变量会在 window 对象上添加一个属性；

函数表达式

函数表达式：在一个表达式中或另一个语法结构中创建的函数。

函数表达式允许省略函数名，函数表达式是在代码执行到达时被创建，并且仅从那一刻起可用。

var foo = function(){
    console.log(123)
}

头等函数

头等函数（first-class function；第一级函数）是指在程序设计语言中，函数被当作头等公民。

这意味着，函数可以作为别的函数的参数、函数的返回值，赋值给变量或存储在数据结构中；包括支持匿名函数

var foo = function(){
    console.log(123)
}

var bar = foo
bar()

回调函数

既然函数可以作为一个值相互赋值，那么也可以传递给另外一个函数。

function foo(fn){
    fn()
}

function bar(){
    console.log(123)
}

foo(bar)

foo 这种函数我们也可以称之为高阶函数（Higher-order function）；

高阶函数必须至少满足两个条件之一：

• 接受一个或多个函数作为输入；
• 输出一个函数；

匿名（anonymous）函数的：如果在传入一个函数时，我们没有指定这个函数的名词或者通过函数表达式指定函数对应的变量，那么这个函数称之为匿名函数。

立即执行函数

Immediately-Invoked Function Expression（IIFE 立即调用函数表达式）

表达的含义是一个函数定义完后被立即执行；第一部分是定义了一个匿名函数，这个函数有自己独立的作用域。第二部分是后面的（），表示这个函数被执行了

(function(){
    console.log(123)
})()

立即执行函数会创建一个独立的执行上下文环境，可以避免外界访问或修改内部的变量，也避免了对内部变量的修改

对象

对象类型是一种存储键值对（key-value）的更复杂的数据类型；

对象类型可以使用 {…} 来创建的复杂类型，里面包含的是键值对（“key: value”）；

键值对可以是属性和方法（在对象中的函数称之为方法）；

• 其中 key 是字符串（也叫做属性名 property name ，ES6 之后也可以是 Symbol 类型）；
• 其中 value 可以是任意类型，包括基本数据类型、函数类型、对象类型等；

对象的创建方法有很多，包括三种：

• 对象字面量（Object Literal）：通过 {}
• new Object + 动态添加属性；
• new 其他类；

var info = {
    "name": "lihua",
    "age": "18"
} 

// 修改属性
info.name = "kobe"
info.age = 20

// 添加属性
info.height = 1.98

// 删除属性
delete info.age

对象的遍历（迭代）：表示获取对象中所有的属性和方法。Object.keys () 方法会返回一个由一个给定对象的自身可枚举属性组成的数组；

var info = {
  name: 'lihua',
  age: '18',
}

var infoKeys = Object.keys(info)
for (let i = 0; i < infoKeys.length; i++) {
  var key = infoKeys[i]
  var value = info[key]
  console.log(`key: ${key},value:${value}`)
}

for(var key in info){
    var value = info[key]
    console.log(`key: ${key},value:${value}`)
}

this

目前掌握两个 this 的判断方法：

• 在全局环境下面，this 指向 window；
• 通过对象调用，this 指向调用的对象；

function foo() {
  console.log(tihs) // window
}
foo()

var obj = {
  bar: function () {
    console.log(this) // obj
  },
}
obj.bar()

DOM

DOM (document object model) 文档对象模型

将 html 文档的各个组成方法，封装成对象。借助这些东西，可以对 html 文档进行增删改查的动态操作

• Document 文档对象
• Element 元素对象
• Attribute 属性对象
• Text 文本对象

document 对象

Document 节点表示的整个载入的网页，它的实例是全局的 document 对象

• html 元素：<html> = document.documentElement
• body 元素：<body> = document.body
• head 元素：<head> = document.head
• 文档声明：<!DOCTYPE html> = document.doctype

dom 之间的导航

节点（Node）之间的导航（navigator）

如果我们获取到一个节点（Node）后，可以根据这个节点去获取其他的节点，我们称之为节点之间的导航。

• 父节点：parentNode
• 前兄弟节点：previousSibling
• 后兄弟节点：nextSibling
• 子节点：childNodes
• 第一个子节点：firstChild
• 第二个子节点：lastChild

元素（Element）之间的导航（navigator）

如果我们获取到一个元素（Element）后，可以根据这个元素去获取其他的元素，我们称之为元素之间的导航。

• 父元素：parentElement
• 前兄弟节点：previousElementSibling
• 后兄弟节点：nextElementSibling
• 子节点：children
• 第一个子节点：firstElementChild
• 第二个子节点：lastElementChild

表格（table）元素的导航（navigator）

• <table> 元素支持 (除了上面给出的，之外) 以下这些属性：
• table.rows — <tr> 元素的集合；
• table.caption/tHead/tFoot — 引用元素 <caption>，<thead>，<tfoot>；
• table.tBodies — <tbody> 元素的集合；
• <thead>，<tfoot>，<tbody> 元素提供了 rows 属性：
• tbody.rows — 表格内部 <tr> 元素的集合；
• <tr>：
• tr.cells — 在给定 <tr> 中的 <td> 和 <th> 单元格的集合；
• tr.sectionRowIndex — 给定的 <tr> 在封闭的 <thead>/<tbody>/<tfoot> 中的位置（索引）；
• tr.rowIndex — 在整个表格中 <tr> 的编号（包括表格的所有行）；
• <td> 和 <th>：
• td.cellIndex — 在封闭的 <tr> 中单元格的编号

Element 元素操作

获取元素

目前最常用的是 querySelector 和 querySelectAll；

• getELmentByid (id 属性值) 根据 id 获取一个元素
• getELmentByTagName (标签名称) 标签标签名称获取多个元素
• getELmentByName (name 属性值) 根据 name 属性获取多个元素
• getELmentByClassName (class 属性值) 根据 class 属性获取多个元素
• 子元素对象.parentElemnet 属性 获取当前元素的父元素

节点的属性

• nodeName：获取 node 节点的名字；
• tagName：获取元素的标签名词；
• innerHTML 属性，将元素中的 HTML 获取为字符串形式； 设置元素中的内容；将其 “作为 HTML” 插入，带有所有 HTML 标签。
• outerHTML 属性，包含了元素的完整 HTML
• textContent 属性，仅仅获取元素中的文本内容；将其 “作为文本” 插入，所有符号（symbol）均按字面意义处理。
• nodeValue/data：用于获取非元素节点的文本内容
• hidden 属性：也是一个全局属性，可以用于设置元素隐藏。
• value：如 <input>，<select> 和 <textarea > 的 value。
• href：a 标签的 href
• id：所有元素（HTMLElement）的 “id” 特性（attribute）的值。

操作元素

• createElemnt (标签名) 创建一个标签 创建后需要配合添加使用
• appendChild (子元素对象) 将指定子元素添加到父元素中
• insertBefore (node, nextSibling) 在 parentElem 的 nextSibling 前面插入一个子元素；
• removeChild (子元素对象) 用父元素删除指定子元素
• replaceChild (新元素对象，旧元素对象) 用新元素替换旧元素

node

• node.append (...nodes or strings) —— 在 node 末尾 插入节点或字符串，
• node.prepend (...nodes or strings) —— 在 node 开头 插入节点或字符串，
• node.before (...nodes or strings) —— 在 node 前面 插入节点或字符串，
• node.after (...nodes or strings) —— 在 node 后面 插入节点或字符串，
• node.replaceWith (...nodes or strings) —— 将 node 替换为给定的节点或字符串。

Attribute 属性的操作

标准的 attribute：某些 attribute 属性是标准的，比如 id、class、href、type、value 等；

非标准的 attribute：某些 attribute 属性是自定义的，比如 abc、age、height 等；

• setAttribute (属性名，属性值) 设置属性
• getAttribute (属性名) 根据属性名获取属性值
• removeAttribute (属性名) 根据筛选名移除指定的属性
• style 属性 为元素添加样式 如: div.style.color = "red"
• className 属性 添加指定样式 (其实是为元素添加 class 属性) 如: div.className = "div"
• hasAttribute (name) — 检查特性是否存在。
• attributes：attr 对象的集合，具有 name、value 属性；

Text 文本操作

• innerText 只添加文本内容，不解析标签
• innerHTML 添加文本内容，并解析标签 如 <a> 解析为标签而不是文本

大小、滚动

• clientWidth：contentWith+padding（不包含滚动条）
• clientHeight：contentHeight+padding
• clientTop：border-top 的宽度
• clientLeft：border-left 的宽度
• offsetWidth：元素完整的宽度
• offsetHeight：元素完整的高度
• offsetLeft：距离父元素的 x
• offsetHeight：距离父元素的 y
• scrollHeight：整个可滚动的区域高度
• scrollTop：滚动部分的高度

window

• innerWidth、innerHeight：获取 window 窗口的宽度和高度（包含滚动条）
• outerWidth、outerHeight：获取 window 窗口的整个宽度和高度（包括调试工具、工具栏）
• documentElement.clientHeight、documentElement.clientWidth：获取 html 的宽度和高度（不包含滚条）
• scrollX：X 轴滚动的位置（别名 pageXOffset）
• scrollY：Y 轴滚动的位置（别名 pageYOffset）
• 方法 scrollBy (x,y) ：将页面滚动至 相对于当前位置的 (x, y) 位置；
• 方法 scrollTo (pageX,pageY) 将页面滚动至 绝对坐标；

事件

Web 页面需要经常和用户之间进行交互，而交互的过程中我们可能想要捕捉这个交互的过程；当某个事件发生时，让 JavaScript 可以相应（执行某个函数），所以我们需要针对事件编写处理程序（handler）；

事件指当某些组件执行了某些操作后，会触发某些代码的执行

• onload 某个页面或者图像被完成加载
• onsubmit 当表单提交时触发
• onclick 鼠标点击事件
• ondblclick 鼠标双击双击
• onblur 元素失去焦点
• onfocus 元素获得焦点
• onchange 用户改变域的内容

---

• onkeydown 某个键盘的键被按下
• onkeypress 某个键盘的键被按下或者按住
• onkeyup 某个键盘的键被松开
• onmouserdown 某个鼠标按键被按下
• onmouseup 某个鼠标按键被松开
• onmouseover 鼠标被移到某元素之上
• onmouserout 鼠标从某元素移开

常见的鼠标事件：

表单（form）元素事件：

• submit —— 当访问者提交了一个 <form> 时。
• focus —— 当访问者聚焦于一个元素时，例如聚焦于一个 <input>。

Document 事件：

• DOMContentLoaded —— 当 HTML 的加载和处理均完成，DOM 被完全构建完成时。

CSS 事件：

• transitionend —— 当一个 CSS 动画完成时。

绑定事件

• 通过标签中事件属性绑定

  • <button id="up" onclick="up()"></button>
    

• 通过 DOM 元素属性绑定

  • document.getElementById("down").onclick = function(){
            let img =  document.getElementById("img")
            img.setAttribute("src","../../品优购/img/arrow-prev.png")
        }
    

• 通过 EventTarget 中的 addEventListener 来监听

  let img =  document.getElementById("img")
  img.addEventListener("click", function(){
      console.log(123)
  })
  

事件流

我们可以想到一个问题：当我们在浏览器上对着一个元素点击时，你点击的不仅仅是这个元素本身；因为我们的 HTML 元素是存在父子元素叠加层级的；

比如一个 span 元素是放在 div 元素上的，div 元素是放在 body 元素上的，body 元素是放在 html 元素上的；

事件冒泡和事件捕获

我们会发现默认情况下事件是从最内层的 span 向外依次传递的顺序，这个顺序我们称之为事件冒泡（Event Bubble）;

事实上，还有另外一种监听事件流的方式就是从外层到内层（body -> span），这种称之为事件捕获（Event Capture）；

为什么会产生两种不同的处理流呢？

• 这是因为早期浏览器开发时，不管是 IE 还是 Netscape 公司都发现了这个问题；
• 但是他们采用了完全相反的事件流来对事件进行了传递；
• IE 采用了事件冒泡的方式，Netscape 采用了事件捕获的方式；

如果我们都监听，那么会按照如下顺序来执行：

• 捕获阶段（Capturing phase）：事件（从 Window）向下走近元素。
• 目标阶段（Target phase）：事件到达目标元素。
• 冒泡阶段（Bubbling phase）：事件从元素上开始冒泡。

事实上，我们可以通过 event 对象来获取当前的阶段：eventPhase

事件对象

当一个事件发生时，就会有和这个事件相关的很多信息，那么这些信息会被封装到一个 Event 对象中，这个对象由浏览器创建，称之为 event 对象；

event 对象会在传入的事件处理（event handler）函数回调时，被系统传入；我们可以在回调函数中拿到这个 event 对象；

document.getElementById("down").onclick = function(event){
    console.log(event)
}

let img =  document.getElementById("img")
img.addEventListener("click", function(event){
    console.log(event)
})

常见的属性：

• type：事件的类型；
• target：当前事件发生的元素；
• currentTarget：当前处理事件的元素；
• eventPhase：事件所处的阶段；
• offsetX、offsetY：事件发生在元素内的位置；
• clientX、clientY：事件发生在客户端内的位置；
• pageX、pageY：事件发生在客户端相对于 document 的位置；
• screenX、screenY：事件发生相对于屏幕的位置；

常见的方法：

• preventDefault：取消事件的默认行为；
• stopPropagation：阻止事件的进一步传递（冒泡或者捕获都可以阻止）；

事件处理中的 this

let img =  document.getElementById("img")
img.addEventListener("click", function(event){
    console.log(this === event.target) // ture
})

这是因为在浏览器内部，调用 event handler 是绑定到当前的 target 上的

EventTarget 类

所有的节点、元素都继承自 EventTarget，事实上 Window 也继承自 EventTarget；

EventTarget 是一个 DOM 接口，主要用于添加、删除、派发 Event 事件；

EventTarget 常见的方法：

• addEventListener：注册某个事件类型以及事件处理函数；
• removeEventListener：移除某个事件类型以及事件处理函数；
• dispatchEvent：派发某个事件类型到 EventTarget 上；

事件委托

事件冒泡在某种情况下可以帮助我们实现强大的事件处理模式 – 事件委托模式（也是一种设计模式）

• 因为当子元素被点击时，父元素可以通过冒泡可以监听到子元素的点击；
• 并且可以通过 event.target 获取到当前监听的元素；

某些事件委托可能需要对具体的子组件进行区分，这个时候我们可以使用 data-* 对其进行标记：

    <div class="btn-list">
        <button data-action="new">new</button>
        <button data-action="hot">hot</button>
    </div>

<script>
    document.querySelector('.btn-list').addEventListener('click', function(event) {
        var action = event.target.dataset.action;
        switch(action){
            case 'new':
                console.log('new');
                break;
            case 'hot':
                console.log('hot');
                break;
            default:
                console.log('default');
        }
    })
</script>

文档加载事件

• DOMContentLoaded：浏览器已完全加载 HTML，并构建了 DOM 树，但像 \ 和样式表之类的外部资源可能尚未加载完成。
• load：浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。

  <script>
    window.addEventListener("DOMContentLoaded", function() {
      var imgEl = document.querySelector("img")
      console.log("页面内容加载完毕", imgEl.offsetWidth, imgEl.offsetHeight)
    })
    window.addEventListener("load", function() {
      var imgEl = document.querySelector("img")
      console.log("页面所有内容加载完毕", imgEl.offsetWidth, imgEl.offsetHeight)
    })
  </script>

面向对象

定义和使用

class 类名{
    //构造方法
    constructor(变量列表){
        变量赋值
    }

    方法名(参数列表){
        方法体
        return 返回值
    }
}

//使用
let 对象名 = new 类名(实际变量值)
对象名.方法名()


class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  show(){
    document.write(this.name + " " + this.age)
  }
}

let P = new Person("ZZ",19)
P.show()

继承

extends 关键字 顶级父类 object

class worker extends Person {
  constructor(name, age, salary) {
    super(name, age)
    this.salary = salary
  }

  show() {
    document.write(this.name + ' ' + this.age + ' ' + this.salary)
  }
}

let w =new worker("qq",22,33)
w.show()

构造函数

构造函数也称之为构造器（constructor），通常是我们在创建对象时会调用的函数；JavaScript 中的构造函数有点不太一样，构造函数扮演了其他语言中类的角色；

在 JavaScript 中，构造函数其实就是类的扮演者：

• 比如系统默认给我们提供的 Date 就是一个构造函数，也可以看成是一个类；
• 在 ES5 之前，我们都是通过 function 来声明一个构造函数（类）的，之后通过 new 关键字来对其进行调用；
• 在 ES6 之后，JavaScript 可以像别的语言一样，通过 class 来声明一个类

构造函数也是一个普通的函数，从表现形式来说，和千千万万个普通的函数没有任何区别；那么如果这么一个普通的函数被使用 new 操作符来调用了，那么这个函数就称之为是一个构造函数；

如果一个函数被使用 new 操作符调用了，那么它会执行如下操作：

1. 在内存中创建一个新的对象（空对象）；
2. 这个对象内部的 [[prototype]] 属性会被赋值为该构造函数的 prototype 属性；（后面详细讲）；
3. 构造函数内部的 this，会指向创建出来的新对象；
4. 执行函数的内部代码（函数体代码）；
5. 如果构造函数没有返回非空对象，则返回创建出来的新对象；

内置类

默认情况，当我们调用一个原始类型的属性或者方法时，会进行如下操作：

• 根据原始值，创建一个原始类型对应的包装类型对象；
• 调用对应的属性或者方法，返回一个新的值；
• 创建的包装类对象被销毁；
• 通常 JavaScript 引擎会进行很多的优化，它可以跳过创建包装类的过程在内部直接完成属性的获取或者方法的调用。

Number

• parseFloat () 将传入的字符串浮点数转为浮点数
• parseInt () 将传入的字符串整数转为整数 从左到右转化 一直转换到有非数字字符停止 如 200a13bc 则转为 200 后面的忽略
• toFixed (digits)，格式化一个数字，保留 digits 位的小数；digits 的范围是 0 到 20（包含）之间；
• toString (base)，将数字转成字符串，并且按照 base 进制进行转化

Math

在除了 Number 类可以对数字进行处理之外，JavaScript 还提供了一个 Math 对象。

Math 是一个内置对象（不是一个构造函数），它拥有一些数学常数属性和数学函数方法；

• ceil (x) 向上取整
• floor (x) 向下取整
• round (x) 四舍五入最接近的整数
• random () 随机数返回 [0.0 , 1.0) 之间的数
• pow (x,y) 幂运算 x 的 y 次方
• PI：圆周率，约等于 3.14159；

Date

• Date () 根据当前时间创建对象
• Date (value) 根据指定毫秒值创建对象
• Date(year,month,[day,hours,minutes,seconds,milliseconds])
  • getFullYear () 获取年
  • getMonth () 获取月 从 0-11
  • getDate () 获取天
  • getHours () 获取小时
  • getMinutes () 获取分钟
  • getSeconds ()：获取秒钟；
  • getMilliseconds ()：获取毫秒；
  • getTime () 返回时间戳 1970 年 1 月 1 日到 now 的毫秒数
  • valueOf ()：返回时间戳
  • now ()：返回当前时间戳
  • toLocaleString () 返回本地日期格式的字符串
  • getDay ()：获取一周中的第几天，从 0（星期日）到 6（星期六）；
  • parse (str) 需要符合 RFC2822 或 ISO 8601 日期格式的字符串；比如 YYYY-MM-DDTHH:mm:ss.sssZ

String

字符串在定义后是不可以修改的

• String (value) 根据指定字符串创建对象
• let s = "字符串" 赋值
• length 属性 长度
• charAt (index) 获取指定索引的字符
• indexOf (value) 查找指定字符的索引 没有为 - 1
• substring (start,end) 截取字符串 (含头不含尾)
• split (value) 切割字符串 返回数组
• substr (start, length)：从 start 开始获取长为 length 的字符串 ，允许 start 为负数
• replace (old,new) 字符串替换
• toLowerCase ()：将所有的字符转成小写；
• toUpperCase () ：将所有的字符转成大写；
• includes ()：是否包含字符串

RegExp

正则表达式

• RegExp (规则) 根据规则创建对象
• let reg = /^ 规则 $/ 赋值
  • test (匹配的字符串) 根据指定规则验证字符串是否符合 返回布尔值
• 

Array

• push (元素) 添加元素到末尾

• pop () 删除末尾的元素

• shift () 删除数组最前面的元素，整个数组元素向前前移动；

• unshift 在首端添加元素，整个其他数组元素向后移动；

• includes (元素) 判断数组是否包含此元素

• reverse () 反转数组

• sort () 排序数组

• splice () ：是处理数组的利器，它可以做所有事情：添加，删除和替换元素。

• slice 方法：用于对数组进行截取（类似于字符串的 slice 方法）。

• concat 方法：创建一个新数组，其中包含来自于其他数组和其他项的值。

• join 方法： 将一个数组的所有元素连接成一个字符串并返回这个字符串。

• indexOf 方法： 查找某个元素的索引

• includes 方法：判断数组是否包含某个元素

• find 和 findIndex 直接查找元素或者元素的索引（ES6 之后新增的语法）

• sort 方法也是一个高阶函数，用于对数组进行排序，并且生成一个排序后的新数组

  • 如果 compareFunction (a, b) 小于 0 ，那么 a 会被排列到 b 前面；
  • 如果 compareFunction (a, b) 大于 0 ， b 会被排列到 a 前面；

• reverse () 方法将数组中元素的位置颠倒，并返回该数组。

• forEach 遍历数组，并且让数组中每一个元素都执行一次对应的方法；

• map () 方法创建一个新数组；这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成；

• filter () 方法创建一个新数组；新数组中只包含每个元素调用函数返回为 true 的元素；

• reduce () 用于计算数组中所有元素的总和；对数组中的每个元素按序执行一个由您提供的 reducer 函数；每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值；

Set

元素唯一 存取顺序一致

• Set () 创建 set 对象
  • add (元素) 添加元素
  • size 顺序 获取长度
  • keys () 获取迭代器对象
    • next ().value 获取迭代器元素
  • delete (元素) 删除指定元素

Map

存取顺序一致

• Map () 创建 Map 对象
  • set (key,value) 添加元素
  • size 属性 获取长度
  • get (key) 根据 key 获取 value
  • entries () 获取迭代器对象
    • next ().value 获取迭代器元素 键值对
  • delete (key) 根据 key 删除键值对

JSON

JavaScript Object Notation)

• stringify (对象) 将指定对象转为 json 字符串

• parse (字符串) 将 JSON 字符串 转为 js 对象

• decodeURIComponent (string s) 将 url 字符转为 UTF-8

BOM

BOM (Browser Object Model) 浏览器对象模型 将浏览器的各个组成部分封装成不同的对象

• window：包括全局属性、方法，控制浏览器窗口相关的属性、方法；
• location：浏览器连接到的对象的位置（URL）；
• history：操作浏览器的历史；
• navigator：用户代理（浏览器）的状态和标识（很少用到）；
• screen：屏幕窗口信息（很少用到）；

---

• Windows 窗口对象

  • 定时器
    • setTimeout (功能，毫秒值) 设置一次性定时器 返回一个唯一标识
    • clearTimeout (标识) 取消一次性定时器
    • setInterval (功能，毫秒值) 设置循环定时器 返回一个唯一标识
    • clearInterval (标识) 取消循环定时器
  • 加载事件
    • window.onload 在页面加载完毕后触发此事件

• Location 地址栏对象

  • href 属性 设置新的 URL 使浏览器读取并显示新的 URL
  • protocol: 当前的协议；
  • host: 主机地址；
  • hostname: 主机地址 (不带端口)；
  • port: 端口；
  • pathname: 路径；
  • search: 查询字符串；
  • hash: 哈希值；
  • username：URL 中的 username（很多浏览器已经禁用）；
  • password：URL 中的 password（很多浏览器已经禁用）；
  • assign ()：赋值一个新的 URL，并且跳转到该 URL 中；
  • replace ()：打开一个新的 URL，并且跳转到该 URL 中（不同的是不会在浏览记录中留下之前的记录）；
  • reload ()：重新加载页面，可以传入一个 Boolean 类型；

• History 历史记录对象

• Navigator 浏览器对象

• Screen 显示器屏幕对象

URLSearchParams

URLSearchParams 定义了一些实用的方法来处理 URL 的查询字符串。 可以将一个字符串转化 URLSearchParams 类型；

• get：获取搜索参数的值；
• set：设置一个搜索参数和值；
• append：追加一个搜索参数和值；
• has：判断是否有某个搜索参数；

中文会使用 encodeURIComponent 和 decodeURIComponent 进行编码和解码

History

history 对象允许我们访问浏览器曾经的会话历史记录。

有两个属性：

• length：会话中的记录条数；
• state：当前保留的状态值；

有五个方法：

• back ()：返回上一页，等价于 history.go (-1)；
• forward ()：前进下一页，等价于 history.go (1)；
• go ()：加载历史中的某一页；
• pushState ()：打开一个指定的地址；
• replaceState ()：打开一个新的地址，并且使用 replace；

navigator

navigator 对象表示用户代理的状态和标识等信息。

screen

screen 主要记录的是浏览器窗口外面的客户端显示器的信息

JSON

某些情况下我们希望将 JavaScript 中的复杂类型转化成 JSON 格式的字符串，这样方便对其进行处理，但是如果我们直接存放一个对象，这个对象会被转化成 [object Object] 格式的字符串，并不是我们想要的结果；

• stringify 方法：将 JavaScript 类型转成对应的 JSON 字符串；
  • 如果指定了一个 replacer 函数，则可以选择性地替换值；
  • 如果指定的 replacer 是数组，则可选择性地仅包含数组指定的属性；
• parse 方法：解析 JSON 字符串，转回对应的 JavaScript 类型；
• 如果对象本身包含 toJSON 方法，那么会直接使用 toJSON 方法的结果：

Storage

WebStorage 主要提供了一种机制，可以让浏览器提供一种比 cookie 更直观的 key、value 存储方式：

• localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；
• sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；

属性：

• Storage.length：只读属性，返回一个整数，表示存储在 Storage 对象中的数据项数量；

方法：

• Storage.key ()：该方法接受一个数值 n 作为参数，返回存储中的第 n 个 key 名称；
• Storage.getItem ()：该方法接受一个 key 作为参数，并且返回 key 对应的 value；
• Storage.setItem ()：该方法接受一个 key 和 value，并且将会把 key 和 value 添加到存储中。如果 key 存储，则更新其对应的值；
• Storage.removeItem ()：该方法接受一个 key 作为参数，并把该 key 从存储中删除；
• Storage.clear ()：该方法的作用是清空存储中的所有 key；

this 指向

1. 函数在调用时，JavaScript 会默认给 this 绑定一个值；
2. this 的绑定和定义的位置（编写的位置）没有关系；
3. this 的绑定和调用方式以及调用的位置有关系；
4. this 是在运行时被绑定的；

默认绑定

默认绑定为独立函数调用。独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用；

隐式绑定

通过某个对象进行调用，也就是它的调用位置中，是通过某个对象发起的函数调用。

显式绑定

如果我们不希望在 对象内部 包含这个函数的引用，同时又希望在这个对象上进行强制调用

JavaScript 所有的函数都可以使用 call 和 apply 方法。

通过 call 或者 apply 绑定 this 对象

显示绑定后，this 就会明确的指向绑定的对象

我们希望一个函数总是显示的绑定到一个对象上，可以使用 bind 方法，bind () 方法创建一个新的绑定函数（bound function，BF）；

绑定函数是一个 exotic function object（怪异函数对象，ECMAScript 2015 中的术语），在 bind () 被调用时，这个新函数的 this 被指定为 bind () 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

new 绑定

JavaScript 中的函数可以当做一个类的构造函数来使用，也就是使用 new 关键字。

使用 new 关键字来调用函数是，会执行如下的操作：

1. 创建一个全新的对象；
2. 这个新对象会被执行 prototype 连接；
3. 这个新对象会绑定到函数调用的 this 上（this 的绑定在这个步骤完成）；
4. 如果函数没有返回其他对象，表达式会返回这个新对象；

规则优先级

1. 默认规则的优先级最低
2. 显示绑定优先级高于隐式绑定
3. new 绑定优先级高于隐式绑定
4. new 绑定优先级高于 bind

忽略显示绑定

如果在显示绑定中，我们传入一个 null 或者 undefined，那么这个显示绑定会被忽略，使用默认规则：

创建一个函数的 间接引用，这种情况使用默认绑定规则。

箭头函数

箭头函数是 ES6 之后增加的一种编写函数的方法，并且它比函数表达式要更加简洁：

• 箭头函数不会绑定 this、arguments 属性；
• 箭头函数不能作为构造函数来使用（不能和 new 一起来使用，会抛出错误）；

// 如果只有一个参数()可以省略
nums.forEach(item => {})

//  如果函数执行体中只有一行代码, 那么可以省略大括号
nums.forEach(item => console.log(itme))

// 如果函数执行体只有返回一个对象, 那么需要给这个对象加上()
var fn = () => ({name: "abc"}) 

箭头函数不使用 this 的四种标准规则（也就是不绑定 this），而是根据外层作用域来决定 this。

jQuery

jQuery 对象

• $(JS 的 DOM 对象) JS 对象和 jQuery 对象转换
• jQuery 对象 [索引] jQuery 对象转为 js 对象
• jQuery 对象.get (索引) jQuery 对象转为 js 对象

事件

去掉 js 中.on 的语句 如: onclick ===> click jQuery 对象.click (功能) click 是 on 的简写。它们重复监听，不会出现覆盖情况，都支持事件委托，底层用的是 addEventListener。 on 函数可以接受一个 selector 参数，用于筛选 可触发事件 的后代元素。

• 绑定事件 jQuery 对象.on (事件名称，执行的功能)
• 解绑事件 jQuery 对象.off (事件名称) 如果不指定事件名称，则会将此对象所有事件都解绑

事件切换

需要给同一个对象绑定多个事件，并且多个事件有先后顺序关系

• 单独定义
  $(元素). 事件方法名 1 (功能) $(元素). 事件方法名 2 (功能)
• 链式定义 $(元素). 事件方法名 1 (功能). 事件方法名 2 (功能)

遍历

• for 循环

• 对象.each (function (index,ele)) 方法 index 为索引 ele 为元素

• $.each (容器对象，function (index,ele){}) 方法 先 $(元素) 获取容器对象后使用

• for (ele of 容器对象){} 方法 增强 for 先 $(元素) 获取容器对象后使用

选择器

• 基本选择器

  • $("元素名称") 根据元素获取元素对象数组
  • $("#id 的属性值") 根据 id 获取元素对象
  • $(".class 的属性值") 根据 class 获取元素对象数组

• 层级选择器

  • $("A B") 后代选择器 A 元素下面所有的 B 元素 (包含 B 的子元素)
  • $("A> B") 子代选择器 A 下的所有 B (不包含 B 的子级)
  • $("A + B") 兄弟选择器 A 下相邻最近的 B
  • $("A ~ B") 兄弟选择器 A 相邻的所有 B

• 属性选择器

  • $("A [属性名]") 属性选择器 根据指定属性名获取元素对象数组
  • $("A [属性名]= 属性值") 根据指定属性名和值获取元素数组

• 过滤器选择器

  • 

• 表单属性选择器

  • $("A:enabled") 获取可用元素
  • $("A:disable") 获取不可用元素
  • $("A:checked") 获取单选 / 复选框被选中的元素
  • $("A:selected") 获取下拉框选中的元素

过滤器

• eq (index): 从匹配元素的集合中，取索引处的元素， eq 全称 (equal 等于)，返回 jQuery 对象。
• first () : 从匹配元素的集合中，取第一个元素，返回 jQuery 对象。
• last (): 从匹配元素的集合中，取最后一个元素，返回 jQuery 对象。
• not (selector): 从匹配元素的集合中，删除匹配的元素，返回 jQuery 对象。
• filter (selector): 从匹配元素的集合中，过滤出匹配的元素，返回 jQuery 对象。
• find (selector): 从匹配元素集合中，找到匹配的后代元素，返回 jQuery 对象。
• is (selector|element| .): 根据选择器、元素等检查当前匹配到元素的集合。集合中至少有一个与给定参数匹配则返回 true。
• odd () : 将匹配到元素的集合减少为集合中的奇数，从零开始编号，返回 jQuery 对象。
• even ()：将匹配到元素的集合减少到集合中的偶数，从零开始编号，返回 jQuery 对象。
• 支持链式调用

DOM

操作文本

• html () 获取标签的文本
• html (value) 设置标签的文本内容，解析标签
• .text ()、.text (text)：获取匹配到元素集合中每个元素组合的文本内容，包括它们的后代，或设置匹配到元素的文本内容
• .val ()、.val (value)：获取匹配到元素集合中第一个元素的当前值 或 设置每个匹配到元素的值。该.val () 方法主要用于获取 input,select 和等表单元素的值。

操作对象

• $("元素") 创建指定元素 如不存在则创建 如存在是获取元素

  • let span = $("<span>文本</span>")
    

• append (element) 添加为最后一个子元素 添加对象为 element

• appendTo (element) 添加为最后一个子元素 添加对象为 调用对象

• prepend (element) 添加为第一个子元素 添加对象为 element

• prependTo (element) 添加为第一个子元素 添加对象为 调用对象

• before (element) 添加到当前元素的前面 由添加对象调用 兄弟关系

• after (element) 添加到当前元素的后面 兄弟关系

• remove () 删除指定元素 可自己删自己

• .replaceAll (target): 用匹配到的元素集替换每个目标元素。

• .replaceWidth (newContent)、.replaceWidth ( function )：用新内容替换匹配元素集中的每个元素，并返回被移除的元素集。

• empty () 清空指定元素的所有子元素 但调用对象还是存在的

• .clone ()、.clone ( withDataAndEvents)：对匹配的元素集执行深度复制，底层是调用了 elem.cloneNode ( true ) 来复制元素。

• .insertAfter (target)： 在目标元素之后，插入匹配元素集中的每个元素。

• .insertBefore (target)：在目标元素之前，插入匹配元素集中的每个元素。

操作样式

• .width ()、.width (value)：获取匹配到元素集合中第一个元素的宽度或设置每个匹配到元素的宽度。
• .height ()、height (value)：获取匹配到元素集合中第一个元素的高度或设置每个匹配到元素的高度。
• css (name) 根据样式名称获取 css 样式
• css (name,value) 设置 css 样式
• addClass (value) 添加类名
• .hasClass (className)：是否给任意匹配到的元素分配了该类
• removeClass (value) 移除类名
• toggleClass (value) 如没有指定类名则添加 如有则删除
• hide () 隐藏元素
• show () 显示元素

操作属性

• attr (name,[value]) 获取 / 设置属性的值 如只传 name 则为获取
• .removeAttr (attributeName)：在匹配到元素的集中，给每个元素删除一个属性。
• prop (name,[value]) 获取 / 设置属性的值 (checked,selected)
• removeProp (propertyName)： 删除匹配元素集的属性，( 只能删除用户自定义添加的 prop，不能删除元素本身的属性 )。

data-xx

• .data ()、.data (key)： 获取匹配元素集中第一个元素的自定义属性的值
• .data (key, value) 、.data (obj)：为每个匹配元素设置一个或多个自定义属性
• .removeData ([name])：会删除 data () 函数给匹配元素属性添加的数据 和 data () 函数绑定的自定义属性。

BOM

• $(function (){}) 页面加载事件

  • $(windows) 获取当前窗口对象

    • scroll () 鼠标滚动事件
    • height () 当前窗口的高度
    • scrollTop () 滚动条上下滚动的距离

• $(document).height () 当前文档的高度

​

动画函数

animate ()： 执行一组 CSS 属性的自定义动画，允许支持数字的 CSS 属性上创建动画。

• .animate( properties [, duration ] [, easing ] [, complete ] )
• .animate( properties, options )
• propertys 参数的支持
  • 数值：number 、string
  • 关键字：'show'、'hide' 和 'toggle'
  • 相对值：+= 、 -=
  • 支持 em 、% 单位（可能会进行单位转换）。

显示和隐藏匹配的元素

• .hide () 、.hide ( [duration] [, complete ] )、.hide ( options ) - 隐藏元素
• .show () 、.show ( [duration] [, complete ] )、.show ( options ) - 显示元素
• .toggle () 、.toggle ( [duration] [, complete ] )、.toggle ( options ) - 显示或者隐藏元素

淡入淡出

• .fadeIn ()、.fadeIn ( [duration] [, complete ] )、.fadeIn ( options ) - 淡入动画
• .fadeOut ()、.fadeOut ( [duration] [, complete ] )、.fadeOut ( options ) - 淡出动画
• .fadeToggle ()、.fadeToggle ( [duration] [, complete ] )、.fadeToggle ( options ) - 淡入淡出的切换
• .fadeTo (duration, opacity [, complete] ) - 渐变到

jQuery 匹配元素中的 animate 和 delay 动画是通过一个动画队列 (queue) 来维护的。

• .queue ()：查看当前选中元素中的动画队列。
• .stop ([clearQueue] [, jumpToEnd ] )：停止匹配元素上当前正在运行的动画。
• clearQueue ：一个布尔值，指示是否也删除排队中的动画。默认为 false
• jumpToEnd ：一个布尔值，指示是否立即完成当前动画。默认为 false

AJAX

AJAX (Asynchronous JavaScript And XML) 异步的 JavaScript 和 XML 是多个技术综合 用于快速创建动态网页的技术

JS 实现 AJAX

//创建 XMLHttpRequest核心对象
let xmlHttp = new XMLHttpRequest()

//打开链接     请求方式   url        是否异步
xmlHttp.open('GET', 'userServlet', true)

//发送请求
xmlHttp.send()

//处理响应
xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
        //判断请求和响应是否成功
    }
}

• XMLHttpRequest 核心对象 用于在后台和服务器交换数据 可以在不重新加载整个网页的情况下，对网页的某部分进行更新
  • open (method,url,async) 打开链接
    • method 请求的类型 GET 或者 POST
    • url 请求资源的路径
    • async true 为异步 false 为同步
  • send (String params) 发送请求
    • params 请求的参数 (POST 请求专用)
  • onreadystatechange 处理响应
  • readyState
    • 0 - 请求未初始化 1 - 服务器连接已建立 2 - 请求已接受 3 - 请求处理中 4 - 请求已完成，且响应已经就绪
  • status
    • 200 - 响应已经全部 OK
  • responseText 获取字符串形式的响应数据
  • responseXML 获取 XML 形式的响应数据

jQuery 实现 AJAX

GET 方式

• $.get(url,[data],[callback],[type])
  • url 请求的资源路径
  • data 发送给服务器端的请求参数 可以是键值对 或 js 对象
  • callback 当请求成功后的回调函数 一般写逻辑代码
    • data 代表返回的内容，可以是 XML 文档，JSON 文件，HTML 片段等
    • textstatus 代表请求状态，其值可能为: succuss, error, notmodify, timeout 4 种.
  • type 预期的返回数据的类型 xml,html,js,json,text 等

    $('#username').blur(function () {
      $.get(
        'url',
        'username=' + username,
        function (data, textstatus) {
                        //data为服务端传回来的数据
          document.write(data)
        },
        'text'
      )
    })

POST 方法

• $.post(url,[data],[callback],[type])
  • url 请求的资源路径
  • method /type - 用于指定请求的类型 (e.g. "POST", "GET", "PUT")，默认为 GET
  • data 发送给服务器端的请求参数 可以是键值对 或 js 对象
  • processData：当 data 是一个对象时，jQuery 从对象的键 / 值对生成数据字符串，除非该 processData 选项设置为 false. 例如，{a: "bc", d: "e,f"} 被转换为字符串 "a=bc&d=e%2Cf"，默认为 true。
  • header - 请求头的内容（PlainObject）
  • contentType - 默认值：application/x-www-form-urlencoded; charset=UTF-8，向服务器发送数据时指定内容类型。
  • dataType - 期望服务器端发回的数据类型（json、xml、text...），默认会根据响应的类型来自动推断类型。
  • timeout - 请求超时时间。它以毫秒为单位。
  • beforeSend - 这是一个在发送请求之前运行的函数，返回 false 会取消网路请求。
  • success - 请求成功回调的函数
  • error - 请求失败回调的函数

通用方式

• $.ajax({name:value,name:value,...})
  • url 请求的资源路径
  • async 是否异步请求 默认为 ture 异步
  • data 发送到服务器的数据
  • type 请求方式 post 或 get 默认为 get
  • dataType 返回数据的类型
  • success 请求成功的回调函数
  • error 请求失败时的回调函数

$.ajax({
  url: 'url地址',
  async: true,
  data: 'username=' + username,
  type: 'get',
  dataType: 'text',
  success: function (data) {
    print(data)
  },
  error: function () {
    console.error()
  },
})