后端上手学习JavaScript基础知识

前言

javacript脚本语言对于处理逻辑问题，很多语法上有很多java大差不差。所以使用它上手没有那么麻烦。

类型

数值类型 number

数字类型，包含整数或者小数.

• 不同于java ： Java中整数用的是int/long 类型，浮点型用的是float,double
• 注意： 在javaScript 内部，所有数字都是以64位浮点数形式储存 ， 所以会遇到1和1.0是相等
• 数值范围： -(2^{53}-1)到2^{53}-1，即-9007199254740991到9007199254740991
• 异常场景： 出现 NAN的情况， 字符串解析成数字时候或者是数字运算有问题的时候
• 转换： 通常使用 parseInt/parseFloat/Number等方法转换

let i = 1
let i = 1.0
let i = parseInt(1)
let i = parseFloat(1.0)
let i = Number(1.0)

字符串类型 string

单个或者多个字符拼接在一起，用单引号或者多引号

• 不同于java ： java中字符串得用多引号标识才行
• 注意 ： 某种意义上字符串也是数组，可以使用数组的方括号通过位置获取到指定字符
• 常用的属性 ： length 获取长度,注意js里面这个是属性，不是方法

let s = 'sss'
let s = "sss"
let s1 = s[0]
let len = s.length

对象类型 object

相信大家对对象应该很熟悉，就是键值对构建成的，也类似于java中的Map结构。

注意：js的灵活性，可以直接通过大括号定义键值对即为对象，赋值取值也极为方便
键名 ： 可以是加引号，也可以不加引号（符合命名条件）
键值： 可以是任何类型，也可以是函数方法
判断是否为空 ： Object.keys(b).length 判断是否为空

在实际应用中，对象使用的地方比较广，所以需要清晰的应用对应的方法

// 定义对象
var obj = {
    name: 'gjc',
    age: 1
};

var obj = {
    s:function(num){num+1}
}

// 获取属性
obj['name']
obj.name

// 设置属性(新增或者修改)
obj.name = 'xxx'
obj['score'] = 100

// 删除属性
delete obj['name']

// 清空属性
obj={}
obj=null

// 遍历属性
for(let i in obj){
    i // 对应的key
    obj[i] // 对应的值
}

// 判断是否存在对应的属性
'name' in obj

数组类型 array

一组数据值按照次序排列，每个值有着自己的编号位置。 类似于java中的数组

常用的属性： length 获取数组的长度，但是这个值可以随意更改，数组随之内容也随之增减
判断键名是否存在 ： 通过in来判断，适用于上述的对象，同时也适用这个数组 数组的判断是否为空数组 ： 通过length长度判断

var arr = [1,2,3] // 定义数组
arr.length // 获取长度
2 in arr  // 判断键名是否存在
for(var j in arr){} // 遍历循环
arr.forEach(function(res){}) // 遍历循环


arr.pop()// 删除数组最后一个
var shift_data = arr.shift() // 删除数组的第一个对象,并返回删除的那个对象
var length = arr.unshift(4) // 开头添加，返回新的长度
arr.push(5)// 末尾添加
arr.concat([6,7,8]) // 两个数组拼接
arr[1] // 获取指定位置数组的值

注意使用slice和splice来提取数组内容的区别

• slice： 提取选定的元素（不改变原来数组） ，返回位置间的数据
  • 第一个参数：起始位置
  • 第二个参数：结束点位置（不含）
• splice： 对原数组有影响 ，返回删除的内容
  • 第一个参数：起始位置
  • 第二个参数：要删除的个数
  • 最后的参数：要添加的参数

arr.slice(1,arr.length) // 返回出第2项 到 最后一项arr.length-1的位置
arr.splice(0,2,"add")// 从第一项开始删除2个，添加一项add值 ，返回删除的两个的数组

标准库对象

转换类型： 使用Number() 转换为数字类型 , String() 转换为字符串类型 , Boolean()转换为布尔类型

• Array对象 ：数组 , 一些类似于java8特性的stream方法

  • join ：用分割符号将数组以字符串形式返回
  • map：对每一项进行包装操作生成新的数组
  • filter: 对每一项判断boolean值，过滤返回符合的数组
  • forEach ： 遍历循环
  • some,every : 判断成员是否存在满足/所有满足的boolean返回
  • concat : 连接数组合并
  • sort : 数组的排序 升序
  • reverse : 数组的排序 降序

• Object对象 ： 对象

  • keys : 返回对象中的所有key的数组
  • values: 返回对象中的所有value的数组

• Number对象 ： 数字

  • toFix ： 保留指定位数的小数， 返回以字符串形式
  • toExponential: :保留指定位数的小数 ,科学计数法

• String对象 ： 字符串

  • concat： 连接字符串
  • subString: 截取字符串
  • trim : 去除两段空格
  • splice和slice : 提取数组内容 ，上述内容提到过

• Math对象 ： 数学计算

  • Math.abs()：绝对值
  • Math.ceil()：向上取整
  • Math.floor()：向下取整
  • Math.max()：最大值
  • Math.min()：最小值
  • Math.sqrt()：平方根
  • Math.round()：四舍五入
  • Math.random()：随机数

• JSON对象 ： json ， 注意：json的格式有要求字符串要双引号,按照正常的json格式来

  • JSON.stringify : json对象转字符串
  • JSON.parse ： 字符串转json对象

// 数组相关方法
let a =[1,2,3]
let res = a.join(",") // 返回 '1,2,3'
let res = a.map(res=>res+1) //返回 [2,3,4]
let res = a.filter(res=>res%2==0) //返回 2
a.forEach(res=>console.log(res)) // 输出每一项
let flag = a.some(res=>res==1) // true
let flag = a.every(res=>res==1) // true
let res = a.concat([7,8,9]) // [1,2,3,7,8,9]
let res = a.sort() // [1,2,3]
let res = a.reverse() // [3,2,1]

// 对象相关方法
let obj = {"name":"gjc","age":12}
let res = Object.keys(obj) // ['name', 'age'] 
let res = Object.values(obj) // ['gjc', 12]
let res = JSON.stringify(obj) // '{"name":"gjc","age":12}'
let res = JSON.parse('{"name":"gjc","age":12}') // {name: 'gjc', age: 12}

// 数字相关方法
let number = 1.4
let res = number.toFixed(2) // '1.40'
let res = number.toExponential(2) // `1.40e+0`

// 字符串
let s = "stringContent "
let res = s.concat("sss") // 'stringContent sss'
let res = s.subString(1,2) // 't
let res = s.trim() // 'stringContent'

// Math操作数字
let res = Math.abs(-1) // 1
let res = Math.max(2,4) // 4
let res = Math.min(2,4) // 2
let res = Math.sqrt(2.5) // 1.5811388300841898
let res = Math.random() // 0.38617210525975243
let res = Math.ceil(1.46) //2
let res = Math.floor(1.56) // 1

运算符

算数运算符

• +,-,*,/ ：除了对于数字的一些基本常规运算，对字符串同样也会额外效果
  • + : 会进行重载，判断实现字符串拼接/数字逻辑计算
  • -,*,/: 不会进行重载，只会进行数字逻辑计算
• % : 获取余数
• ** : 指数运算符，前一个运算子是底数，后一个运算子是指数
• ++,-- : 自增和自减

比较运算符

• >,<,>=,<= : 比较大小的运算符, 虽然给出了很多类型的比较形式，但是还是习惯用常规的数字比较
• ==,===,!=,!== : 比较是否相等或者不相等
  • == : 比较两个值是否相等
  • ===: 严格意义上比较两个值，不仅比较值是否相等，同时比较是否同一个类型，一般我们可以使用这个比较保险稳定些。

布尔运算符

注意：undefined , null , false, 0 , NaN ,'' , 这些都是在布尔值上的意义都是false, 除了这些都是true

• && : 且运算符，在java中我们都是两个boolean值进行判断，但是在js依靠短路特性实现可以替代if逻辑，i && do逻辑 , 即i存在false，就不会实现do逻辑
• || ： 或运算符， 同等于上述场景，也可使用短路逻辑来替代if逻辑，i || do逻辑 , 即i存在true，就不会实现do逻辑
• 三元(?:) : 判断表达式逻辑，执行前面逻辑或是后面逻辑

二进制运算符

基本类似于java中的位运算 , &,|,~,^,<<,>>

函数

函数就是方法，可以实现通过传参来调用执行逻辑的的方法体

使用： 定义函数使用，使用function关键词
注意： 参数不是必传的，可以省略，对应省略的参数值就变成undefined, 普通基本类型传递方式是值传递，但对于（对象，数组，其他函数）就是传址传递

// 定义
function f(x){
    return x + 1
}

f(1) // 调用

异步

javaScript用的是只在一个线程上运行，避免多线程对网页dom的修改加锁操作，主线程执行同步任务，同步任务执行完后运行队列中的异步任务，同时使用事件循环去轮训挂起的异步任务的回调结果。

回调函数

在多个函数执行下，保证同步方法运行在异步方法之下，通过使用回调函数在异步方法上执行

function f1(){
    console.log('1')
}
// 定义f2使用延时来模拟异步的操作
function f2(){
    setTimeout(function(){
        console.log(2)
    },1000)
}
function f3(){
    console.log('3')
}

f1()
f2()
f3()

此时场景运行的 1,3,2 ,那我们怎么保证f2的结果在f3之前呢，就是通过回调函数来实现

function f2(callback){
    setTimeout(function(){
        console.log(2)
        callback()
    },1000)
}
f1()
f2(f3)

这样运行就保证了结果就为 1,2,3,我们让f3的函数在f2函数后面执行。

定时器

主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务

相同点：接收两个参数第一个参数func函数方法/逻辑代码，第二参数是延迟的毫秒数 不同点：setInterval()每隔一段时间的执行一次，会无限执行下去

fucntion f1(){
    console.log('1')
}
let timeId = setTimeout(f1,1000) // 1s后执行f1函数
let timeId = setInterval(f1,1000) // 每隔1s后执行f1函数，无限执行

针对如何清除定时器 ，我们获取到上述的timeId，然后执行 clearTimeout 和 clearInterval

clearTimeout(timeId)
clearInterval(timeId)

Promise 对象

便于操作异步的实现，避免回调地狱的现象的产生，使用方式通过对回调函数的包装成Promise对象

改进回调地狱的效果如何呢， 还是前面那个例子，保证后面的那个同步方法在异步方法执行之后

// 定义f2使用延时来模拟异步的操作
function f2(){
    setTimeout(function(){
        console.log(2)
    },1000)
}
function f3(){
    console.log('3')
}

var p1 = new Promise(f2)
p1.then(f3) // 保证执行完f2的异步后再执行f3

这样书写很方便的改变了之前回调地狱的写法,在语义上也更为清晰

对于Promise的对象有几种对象，用于对异步方法进行控制

• peding 初始状态
• Fulfilled 成功，定义者通过resolve函数返回 ，接受时候then(value=>{})
• Rejected 失败， 定义者通过reject函数返回， 接受时候catch(error=>{})

var p = new Promise(function (resolve, reject) {
     if (flag){// 异步操作成功
        resolve('成功');
      } else { // 异步操作失败
        reject(new Error('失败'));
      }
}
p.then(vaule=>{}).catch(error=>{})

DOM

DOM 是 JavaScript 操作网页的接口 ， 用于将网页转成js对象，进行脚本操作

节点分为七种类型：

1. Document：整个文档树的顶层节点
2. DocumentType：doctype标签（比如<!DOCTYPE html>）
3. Element：网页的各种HTML标签（比如<body>等）
4. Attr：网页元素的属性（比如class"）
5. Text：标签之间或标签包含的文本
6. Comment：注释
7. DocumentFragment：文档的片段

Node 接口

Dom节点对象集成Node接口，含有一些共有的属性

• nodeName ： 节点名称
• nodeValue ： 节点文本值
• textContent ： 返回当前节点和它的所有后代节点的文本内容
• childNodes : 包括当前节点的所有子节点的数组对象
• parentElement ： 父亲节点
• firstChild,lastChild : 当前的第一个/最后一个子节点

// 示例标签 ： <div id="divId">hello</div>
var divId = document.getElementById('divId');
divId.nodeName // DIV
divId.nodeValue // null 
divId.firstChild.nodeValue // hello
divId.textContent // hello 
divId.childNodes // 获取到nodeList类型
divId.parentElement // 获取到一整个父标签内容

含有的一些公共的方法

• removeChild() : 用于从当前节点移除该子节点
• appendChild(): 用于从当前节点添加该子节点
• insertBefore() : 将某个节点插入父节点内部的指定位置

// 示例标签 ： 
<div id="divId">
    <div id="testId1">test1</div>
    <div id="testId2">test2</div>
</div>


let p = document.getElementById("divId")
p.removeChild(document.getElementById("testId1")) // 移除掉了testId1的标签
p.appendChild(document.createElement("div"))  // 增加div标签
p.insertBefore(
  document.createElement("div"),
  document.getElementById("testId1")
);  // testId1的标签前面增加一个div标签

NodeList 接口

用于包含多个Node的集合数组，能遍历 forEach，获取长度length等方法

获取方式： 通过 childNodes方法和 document.querySelectorAll() 获取到批量的node对象形成的数组

// 示例标签 ： 
<div id="divId">
    <div id="testId1">test1</div>
    <div id="testId2">test2</div>
</div>

var divNodes = document.querySelectorAll("div") // 
divNodes.length  // 3
divNodes.forEach(item=>{item.nodeName}) // DIV3个
divNodes.keys() // 0,1,2
divNodes.values() // <div id="divId"> , <div id="testId1">test1</div> , <div id="testId2">test2</div>
divNodes.entries() // 键值对

ParentNode , ChildNode 接口

针对Node接口的公共属性和方法，对于其是父节点还有ParentNode的方法，对于其是子节点则含有ChildNode方法

对于 ParentNode 接口

• children ： 当前元素的子节点
• firstElementChild ： 第一个子节点
• lastElementChild ： 最后一个子节点
• append()，prepend() ： 最后面/前面添加一个子节点

对于 ChildNode 接口

• remove() ： 移除当前节点
• before()，after() ： 在当前节点前/后插入节点

Document 节点

代表了整个对象，每个网页都有属于他自己的document对象

• querySelector() ： 通过css样式选择器选择
• getElementsByTagName() ： 通过标签名字选择
• getElementsByClassName() ： 通过class类名来选择
• getElementById() ： 通过id来选择
• createElement() ： 创建节点
• createTextNode() : 创建文本节点
• createAttribute() ： 创建属性
• addEventListener() ： 创建监听事件

// 示例标签 ： 
<div id="divId" class="divClass">
    <div id="testId1">test1</div>
    <div id="testId2">test2</div>
</div>

let p = document.querySelector("#divId")
let p = document.querySelectorAll("div")
let p = document.getElementsByTagName("div")
let p = document.getElementsByClassName(".divClass")
let p = document.getElementById("#divId")
let p = document.createElement("div")

// createTextNode
let newContent = document.createTextNode('Hello World')
p.appendChild(newContent)

// createAttribute , 或者直接使用setAttribute(key,value)
let styleName = document.createAttribute("style")
styleName.value = "valueNum"
p.setAttributeNode(styleName)

// "load" 字符串的监听事件，listener的回调函数 ，冒泡阶段false
document.addEventListener('load', listener, false);

Element节点

Element节点对象对应网页的 HTML 元素，也是集成了node接口

相关属性

• id ： 返回标签的id
• tagName： 返回标签的名称
• hidden ： 返回元素是否可见
• attributes ： 返回属性的数组
• className： 返回标签的class属性
• innerHtml ： 返回该标签的所有Html字符串内容
• outerHtml： 返回该标签的所有Html字符串内容（包含他自己）
• clientHeight/clientWidth /clientLeft / clientTop： 元素节点的 CSS 可视高度/宽度左边框/顶部（单位像素）
• scrollHeight / scrollWidth /scrollLeft / scrollTop： 当前元素的实际含滚动总高度/总宽度/向右侧滚动量/向底部滚动量（单位像素）
• offsetHeight / offsetWidth / offsetLeft / offsetTop ： 元素的 CSS 垂直高度/水平宽度/左上角偏移/右上角偏移（单位像素）

注意： scroll属性主要用于处理和获取元素内容的滚动情况和完整尺寸；client属性关注元素内部用于显示内容的实际可视区域大小；offset属性则侧重于元素在页面布局中实际占据的空间大小以及相对于定位祖先元素的位置信息

相关的方法

• 获取节点方法与之前document相似 ： querySelector()/getElementByxxx()
• 对属性的操作
  • getAttribute() ： 获取指定属性值
  • getAttributeNames() ：获取所有属性的名称列表
  • setAttribute() ： 设置属性
  • hasAttribute() : 是否有某个属性
  • hasAttributes() ： 判断是否属性
  • removeAttribute() : 移除属性

// 示例标签 ： 
<div id="divId" class="divClass">
    <div id="testId1">test1</div>
    <div id="testId2">test2</div>
</div>
let e = document.getElementById("#divId")

e.id // divId
e.tagName // DIV
e.attributes[0].name // id
e.attributes[0].value // divId
e.className // divClass
e.innerHtml // <div id="testId1">test1</div>
            // <div id="testId2">test2</div>
e.outerHtml  // <div id="divId" class="divClass">
             //   <div id="testId1">test1</div>
             //   <div id="testId2">test2</div>
             // </div>
e.getAttribute("id") // divId
e.getAttributeNames() // "['id','class']"
e.setAttribute("id","divUpdateId")
e.hasAttribute("id1") // false
e.hasAttributes() // true
e.removeAttribute("class")

对css操作

可以通过获取节点，然后直接对其style属性设置指定的css属性值

// 示例标签
<div id="testId1">test1</div>
let p = document.getElementById("testId1")
p.style.backgroundColor = 'red'
p.style.width = '100px'
p.style.height = '100px'

事件

DOM 的事件操作（监听和触发），都定义在EventTarget接口

DOM的事件操作

• addEventListener ： 添加监听，其中具体参数有type，listener，useCapture
  • type： 事件名称
  • listener ： 监听函数
  • useCapture: 监听函数的触发阶段，false（只在冒泡阶段）
• removeEventListener ： 移除监听
• dispatchEvent ： 触发事件

<button id="btn">按钮</button>
let btn = document.getElementById('btn');
btn.addEventListener('click',()=>alert('test'),false) // 添加事件
var event = new Event('click')
para.dispatchEvent(event) // 触发点击事件
btn.removeEventListener('click',()=>alert('test'),false) // 移除点击事件

绑定事件三种形式

1. 通过html的onXx属性来绑定事件 ，只会在冒泡阶段
2. 通过标签节点直接指定on方法的执行逻辑，只会在冒泡阶段
3. 通过上述说的事件绑定方法 addEventListener ，可以自己指定阶段

<div onclick="console.log('触发事件')">

div.onclick = function (e) {
  console.log('触发事件');
};

div.addEventListener('click',()=>console.log('触发事件'),false) // 添加事件

Event对象

事件发生以后，会产生一个事件对象，作为参数传给监听函数。

function method(event){
    event.bubbles;
}

Event属性

• bubbles : 是否冒泡 ,false为冒泡
• eventPhase ： 是否目前所处阶段
  • 0 ： 当前没有发生
  • 1 ： 捕获阶段
  • 2： 目标阶段
  • 3： 冒泡阶段
• cancelable : 事件是否可以取消 ，然后可以配合 preventDefault 实现取消
• currentTarget : 事件当前正在通过的节点，随着传播会变
• target: 事件最初发生的节点,固定不变

Event的方法

• preventDefault() : 取消事件的默认行为
• stopPropagation() : 阻止事件的传播
• stopImmediatePropagation : 阻止事件的传播,包括当前节点的其他监听函数

注意：事件在DOM中传播，如何区分在不同阶段？

• 冒泡阶段 ： 目标元素开始触发，向外层节点蔓延触发，自下而上
• 捕获阶段 ： 从最外层的祖先节点开始触发，传递到目标元素，自上而下
• 目标阶段： 标识当前事件已经到达目标元素

浏览器相关

嵌入js代码

使用声明

1. 添加js脚本代码，属性type可以不写，可以声明text/javascript这个
2. 加载js外部脚本代码，添加属性src

<script>
    console.log("test")
</script>

<script type="text/javascript">
    console.log("test")
</script>

<script src="/xx/yy.js"/>
<script src="https://xxxx.yy.js"/>

注意： 建议将<script>标签都放在页面底部在body标签内部的最后，而不是头部

windows对象

指的是当前的浏览器窗口，最高层顶级对象

相关属性

• screenX/screenY ： 返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素），只读
• innerHeight/innerWidth : 网页在当前窗口中可见部分的高度和宽度
• outerHeight/outerWidth : 返回浏览器窗口的高度和宽度
• scrollX/scrollY :返回页面的水平/垂直滚动距离

相关方法

• moveTo()/moveBy() ：移动浏览器窗口到指定/相对位置
• resizeTo()/resizeBy() : 缩放窗口到/了指定大小
• scrollTo()/scrollBy() : 文档滚动到/了指定位置

相关事件

• onload ： 在文档在浏览器窗口加载完毕时，触发的回调
• onerror :浏览器脚本发生错误时 ,触发的回调

window.onload = function (){}
window.onerror = function (message, filename, lineno, colno, error){}

Cookie

是服务器保存在浏览器的一小段文本信息，一般大小不能超过4KB

cookie中包含的信息有

• 名称 name
• 对应的设置的值 value
• 到期时间 ，expires
• 所属域名（默认当前），domain
• 所属地址（默认当前），Path
• 指定浏览器只有在加密协议 HTTPS 下才发送， Secure
• 无法js脚本获取，只有通过浏览器发送请求才会，HttpOnly

cookie的前后端的交互

1. 服务端设置cookie，就是在响应头上增加Set-Cookie
2. 浏览器发送请求时会携带上满足域名，地址等条件的cookie的值，请求头上携带Cookie

前端获取和调整cookie

• 通过document直接获取cookie
• 直接通过写入cookie ，一次性写入一个，是添加不是覆盖
• 删除cookie ，只能通过赋值过去的expires时间

document.cookie // "foo=bar;baz=bar" 获取结果
document.cookie = 'test1=hello'; // 简单添加
document.cookie = "foo=bar; expires=Fri, 31 Dec 2020 23:59:59 GMT"; // 添加的同时增加属性
document.cookie = 'fontSize=;expires=Thu, 01-Jan-1970 00:00:01 GMT'; //删除

Storage

Storage 接口用于脚本在浏览器保存数据 , 包含一个sessionStorage 和 localStorage

• sessionStorage ： 适用于一次浏览器会话中，关闭窗口，数据清空
• localStorage ： 保存的数据长期存在

具体使用的方法

• setItem() : 存入对应的数据
• getItem() ： 获取对应的数据
• removeItem() ： 移除对应的数据
• clear() ： 清空数据
• key() ： 获取对应位置的键值

window.sessionStorage.setItem("key","value")
window.sessionStorage.getItem("key") // value
window.sessionStorage.removeItem("key")
window.sessionStorage.clear()
window.sessionStorage.key(0) //key

History

表示当前窗口的浏览历史

对应的方法

• back() : 后退到上一个网页
• forward() ： 前进到下一个网页
• go() ： 指定到具体的网页

history.back();
history.forward();
history.go(2);

Location

提供 当前文档的URL 相关的信息和操作方法

相应的属性

• href：整个 URL。
• protocol：当前 URL 的协议，包括冒号（:）。
• host：主机。如果端口不是协议默认的80和433，则还会包括冒号（:）和端口。
• hostname：主机名，不包括端口。
• port：端口号。
• pathname：URL 的路径部分，从根路径/开始。
• search：查询字符串部分，从问号?开始。
• hash：片段字符串部分，从#开始。
• origin：URL 的协议、主机名和端口。

相应的方法

• assign() ： 浏览器立刻跳转到新的 URL
• replace() : 浏览器立刻跳转到新的 URL , 且History会删除当前网址
• reload() : 重新加载当前网址，相当于刷新

URL编码解码

• encodeURI() ： 编码不符合URL的合法字符的那些，整个地址为参数
• encodeURIComponent() : 编码指定内容
• decodeURI() ： 解码不符合URL的合法字符的那些，整个地址为参数
• decodeURIComponent() : 解码指定内容

encodeURI("http://www.baidu.com?param=我") // http://www.baidu.com?param=%E6%88%91
encodeURIComponent("我") // %E6%88%91
decodeURI("http://www.baidu.com?param=%E6%88%91") // www.baidu.com?param=我
decodeURIComponent("%E6%88%91") // 我

URL

用来构造，解析编码的url的对象

// 构造，第一个是相对路径，第二个相对路径
var url = new URL('index.html', 'http://example.com');
var url = new URL('http://example.com/index.html');

url.href // http://example.com/index.html

URL对应的属性和 Location基本一致

• search：返回查询字符串，以问号?开头 ，可以构造URLSearchParams对象
• searchParams：返回一个URLSearchParams实例，该属性是Location对象没有的，获取到URLSearchParams可以进行一些参数的修改和增加

URLSearchParams

用于构建解析处理Url路径上的参数信息

// 构造
var params = new URLSearchParams('?param1=1&param2=2');
var params = new URLSearchParams([['param1', 1], ['param2', 2]])
var params = new URLSearchParams({'param1' : 1 , 'param2' : 2});

// 通过URL对象获取
var url = new URL('http://example.com/index.html?name=value');
url.searchParams 

// 增加
params.append('param3', 3);
params.set('param3', 3);

// 获取
params.get('param3') //3 

//删除
params.delete('param3');

Blob对象

一个二进制文件的数据内容 ， 用于操作二进制文件

// 构造保存json/html数据 ，接受字符串数组[]和类型type的对象
var blobResult = new Blob[JSON.stringify({name:'gjc'})],{type : 'application/json'}]
var myBlob = new Blob(['<div></div>'], {type : 'text/html'});

主要方法：

slice 方法有三个参数，都是可选的

• 起始的字节位置（默认为0）
• 结束的字节位置（默认为size属性的值，该位置本身将不包含在拷贝的数据之中）
• 新实例的数据类型（默认为空字符串）

File和FileList

1. File 对象代表一个文件，用来读写文件信息
   主要用途： input组件用户选中后的文件进行操作
   相关方法：除了blob有的size和type ，还增加了name 名称和lastModified 最后修改时间

2. FileList 对象一组选中的文件，就是File的数组形式

FileReader

用于读取 File 对象或 Blob 对象所包含的文件内容

对应的属性

• error：读取文件时产生的错误对象
• readyState：整数，表示读取文件时的当前状态。一共有三种可能的状态，0表示尚未加载任何数据，1表示数据正在加载，2表示加载完成。
• result：读取完成后的文件内容，有可能是字符串，也可能是一个 ArrayBuffer 实例。

对应的事件

• onabort：abort事件（用户终止读取操作）的监听函数。
• onerror：error事件（读取错误）的监听函数。
• onload：load事件（读取操作完成）的监听函数，通常在这个函数里面使用result属性，拿到文件内容。
• onloadstart：loadstart事件（读取操作开始）的监听函数。
• onloadend：loadend事件（读取操作结束）的监听函数。
• onprogress：progress事件（读取操作进行中）的监听函数。

<input type="file" onchange="onChange(event)">
<script>
  function onChange(event) {
    // 获取到文件
    var file = event.target.files[0];
    var reader = new FileReader();
    reader.onload = function (event) {
      // 读取操作后的回调，获取内容result
      console.log(event.target.result);
    };
    // 开始读取操作
    reader.readAsText(file);
  }
</script>

对应的实例的方法

• abort()：终止读取操作，readyState属性将变成2。
• readAsArrayBuffer()：以 ArrayBuffer 的格式读取文件，读取完成后result属性将返回一个 ArrayBuffer 实例。
• readAsBinaryString()：读取完成后，result属性将返回原始的二进制字符串。
• readAsDataURL()：读取完成后，result属性将返回一个 Data URL 格式（Base64 编码）的字符串，代表文件内容。
• readAsText()：读取完成后，result属性将返回文件内容的文本字符串。

XMLHttpRequest

用于浏览器与服务器之间的通信，发送各种格式的数据

使用open方法来实现初始化请求 ，如请求方式，请求地址，请求是否异步信息

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.baidu.com', true);

通过onreadystatechange来监听事件的结果

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) { // 标识请求完成
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        } else {
            console.error('请求出错，状态码：' + xhr.status);
        }
    }
};

最后通过send方法来发送请求

总结

js在基础语法上和java大致很像，不过他多了和浏览器交互的等额外操作。