前言

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

C 对象类型 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 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)
arr.splice(0,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(",")
let res = a.map(res=>res+1)
let res = a.filter(res=>res%2==0)
a.forEach(res=>console.log(res))
let flag = a.some(res=>res==1)
let flag = a.every(res=>res==1)
let res = a.concat([7,8,9])
let res = a.sort()
let res = a.reverse()

let obj = {"name":"gjc","age":12} let res = Object.keys(obj) let res = Object.values(obj) let res = JSON.stringify(obj) let res = JSON.parse('{"name":"gjc","age":12}')

let number = 1.4 let res = number.toFixed(2) let res = number.toExponential(2)

let s = "stringContent " let res = s.concat("sss") let res = s.subString(1,2) let res = s.trim()

let res = Math.abs(-1) let res = Math.max(2,4) let res = Math.min(2,4) let res = Math.sqrt(2.5) let res = Math.random() let res = Math.ceil(1.46) let res = Math.floor(1.56)

运算符

算数运算符

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

比较运算符

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

布尔运算符

注意：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 +

}

f(1)

异步

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

回调函数

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

function f1(){
    console.log('1')
}

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)
let timeId = setInterval(f1,1000)

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

clearTimeout(timeId)
clearInterval(timeId)

Promise 对象

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

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

function f2(){
    setTimeout(function(){
        console.log(2)
    },1000)
}
function f3(){
    console.log('3')
}

var p1 = new Promise(f2) p1.then(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 对象，进行脚本操作

节点分为七种类型：

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

Node 接口

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

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

var divId = document.getElementById('divId');
divId.nodeName
divId.nodeValue
divId.firstChild.nodeValue
divId.textContent
divId.childNodes
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")) p.appendChild(document.createElement("div")) p.insertBefore( document.createElement("div"), document.getElementById("testId1") );

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() // 键值对

C ParentNode , ChildNode 接口

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

对于 ParentNode 接口

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

对于 ChildNode 接口

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

C 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 接口

C 对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)

绑定事件三种形式

通过html的onXx属性来绑定事件， 只会在冒泡阶段
通过标签节点直接指定on方法的执行逻辑， 只会在冒泡阶段
通过上述说的事件绑定方法 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 中传播，如何区分在不同阶段？

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

浏览器相关

JavaScript 嵌入js代码

使用声明

添加js脚本代码，属性 type 可以不写，可以声明 text/javascript 这个
加载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对象

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

C Cookie

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

cookie 中包含的信息有

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

cookie 的前后端的交互

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

前端获取和调整 cookie

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

document.cookie // "foo=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")
window.sessionStorage.removeItem("key")
window.sessionStorage.clear()
window.sessionStorage.key(0)

History

表明当前窗口的浏览历史

对应的方法

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

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

C 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

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

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

C URLSearchParams

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

var params = new URLSearchParams('?param1=1¶m2=2');
var params = new URLSearchParams([['param1', 1], ['param2', 2]])
var params = new URLSearchParams({'param1' : 1 , 'param2' : 2});

var url = new URL('http://example.com/index.html?name=value'); url.searchParams

params.append('param3', 3); params.set('param3', 3);

params.get('param3')

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

File 对象代表一个文件，用来读写文件信息
主要用途 ： input组件用户选中后的文件进行操作
相关方法 ：除了blob有的 size 和 type ，还增加了 name 名称和 lastModified 最后修改时间
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) { 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属性将返回文件内容的文本字符串。

XML 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)
        }
    }
}