摘要：不同于java： Java中整数用的是int/long 类型，浮点型用的是float,double注意： 在javaScript 内部，所有数字都是以64位浮点数形式储存 ， 所以会遇到1和1.0是相等数值范围： -(2^{53}-1) 到 2^{53}-1
Javacript 脚本语言对于处理逻辑问题，很多语法上有很多 java 大差不差。所以使用它上手没有那么麻烦。
数字类型，包含整数或者小数.
不同于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 = 1let i = 1.0let i = parseInt(1)let i = parseFloat(1.0)let i = Number(1.0)单个或者多个字符拼接在一起，用单引号或者多引号
不同于java ： java中字符串得用多引号标识才行注意 ： 某种意义上字符串也是数组，可以使用数组的方括号通过位置获取到指定字符常用的属性 ： length 获取长度,注意js里面这个是属性，不是方法let s = 'sss'let s = "sss"let s1 = s[0]let len = s.length相信大家对对象应该很熟悉，就是键值对构建成的，也类似于 java 中的 Map 结构。
注意 ：js 的灵活性，可以直接通过大括号定义键值对即为对象，赋值取值也极为方便 键名 ：可以是加引号，也可以不加引号（符合命名条件） 键值 ：可以是任何类型，也可以是函数方法 判断是否为空 ：Object.keys(b).length 判断是否为空
在实际应用中，对象使用的地方比较广，所以需要清晰的应用对应的方法
var obj = { name: 'gjc', age: 1};var obj = { s:function(num){num+1} }obj['name'] obj.nameobj.name = 'xxx' obj['score'] = 100delete obj['name']obj={} obj=nullfor(let i in obj){ i obj[i] }'name' in obj一组数据值按照次序排列，每个值有着自己的编号位置。类似于 java 中的数组
常用的属性 ：length 获取数组的长度，但是这个值可以随意更改，数组随之内容也随之增减 判断键名是否存在 ：通过 in 来判断，适用于上述的对象，同时也适用这个数组 数组的判断是否为空数组 ：通过 length 长度判断
var arr = [1,2,3]arr.length2 in arrfor(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.sortlet res = a.reverselet 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.trimlet 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逻辑三元(?:) : 判断表达式逻辑，执行前面逻辑或是后面逻辑函数函数就是方法，可以实现通过传参来调用执行逻辑的的方法体
使用 ：定义函数使用，使用 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)}f1f2(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 对象
改进回调地狱的效果如何呢，还是前面那个例子，保证后面的那个同步方法在异步方法执行之后
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 是 JavaScript 操作网页的接口 ，用于将网页转成 js 对象，进行脚本操作
节点分为七种类型：
Document ：整个文档树的顶层节点DocumentType ：doctype标签（比如 ）Element ：网页的各种HTML标签（比如 等）Attr ：网页元素的属性（比如 class" ）Text ：标签之间或标签包含的文本Comment ：注释DocumentFragment ：文档的片段Dom 节点对象集成 Node 接口，含有一些共有的属性
nodeName ： 节点名称nodeValue ： 节点文本值textContent ： 返回当前节点和它的所有后代节点的文本内容childNodes : 包括当前节点的所有子节点的数组对象parentElement ： 父亲节点firstChild , lastChild : 当前的第一个/最后一个子节点var divId = document.getElementById('divId');divId.nodeNamedivId.nodeValuedivId.firstChild.nodeValuedivId.textContentdivId.childNodesdivId.parentElement含有的一些公共的方法
removeChild : 用于从当前节点移除该子节点appendChild : 用于从当前节点添加该子节点insertBefore : 将某个节点插入父节点内部的指定位置test1test2let p = document.getElementById("divId") p.removeChild(document.getElementById("testId1")) p.appendChild(document.createElement("div")) p.insertBefore( document.createElement("div"), document.getElementById("testId1") );用于包含多个 Node 的集合数组，能遍历 forEach ，获取长度 length 等方法
获取方式 ：通过 childNodes 方法和 document.querySelectorAll 获取到批量的 node 对象形成的数组
// 示例标签 ：test1test2var divNodes = document.querySelectorAll("div") // divNodes.length // 3 divNodes.forEach(item=>{item.nodeName}) // DIV3个 divNodes.keys // 0,1,2 divNodes.values // , test1 , test2divNodes.entries // 键值对针对 Node 接口的公共属性和方法，对于其是父节点还有 ParentNode 的方法，对于其是子节点则含有 ChildNode 方法
对于 ParentNode 接口
children ： 当前元素的子节点firstElementChild ： 第一个子节点lastElementChild ： 最后一个子节点append，prepend ： 最后面/前面添加一个子节点对于 ChildNode 接口
remove ： 移除当前节点before，after ： 在当前节点前/后插入节点代表了整个对象，每个网页都有属于他自己的 document 对象
querySelector ： 通过css样式选择器选择getElementsByTagName ： 通过标签名字选择getElementsByClassName ： 通过class类名来选择getElementById ： 通过id来选择createElement ： 创建节点createTextNode : 创建文本节点createAttribute ： 创建属性addEventListener ： 创建监听事件// 示例标签 ：test1test2let 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 节点对象对应网页的 HTML 元素，也是集成了 node 接口
相关属性
id ： 返回标签的idtagName ： 返回标签的名称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 : 移除属性// 示例标签 ：test1test2let 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 // test1// test2e.outerHtml // // test1// test2// e.getAttribute("id") // divId e.getAttributeNames // "['id','class']" e.setAttribute("id","divUpdateId") e.hasAttribute("id1") // false e.hasAttributes // true e.removeAttribute("class")C 对css操作可以通过获取节点，然后直接对其 style 属性设置指定的 css 属性值
// 示例标签test1let p = document.getElementById("testId1") p.style.backgroundColor = 'red' p.style.width = '100px' p.style.height = '100px'事件DOM的事件操作addEventListener ： 添加监听，其中具体参数有type，listener，useCapturetype ： 事件名称listener ： 监听函数useCapture : 监听函数的触发阶段，false（只在冒泡阶段）removeEventListener ： 移除监听dispatchEvent ： 触发事件按钮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)绑定事件三种形式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脚本代码，属性 type 可以不写，可以声明 text/javascript 这个加载js外部脚本代码，添加属性 srcconsole.log("test") console.log("test")注意：建议将 标签都放在页面底部在 body 标签内部的最后，而不是头部
指的是当前的浏览器窗口，最高层顶级对象
相关属性
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){}C Cookie是服务器保存在浏览器的一小段文本信息，一般大小不能超过4KB
cookie 中包含的信息有
名称 name对应的设置的值 value到期时间 ， expires所属域名（默认当前）， domain所属地址（默认当前）， Path指定浏览器只有在加密协议 HTTPS 下才发送， Secure无法js脚本获取，只有通过浏览器发送请求才会， HttpOnlycookie 的前后端的交互
服务端设置cookie，就是在响应头上增加 Set-Cookie浏览器发送请求时会携带上满足域名，地址等条件的cookie的值，请求头上携带 Cookie前端获取和调整 cookie
通过document直接获取cookie直接通过写入cookie ，一次性写入一个，是添加不是覆盖删除cookie ，只能通过赋值过去的expires时间document.cookie // "foo=bardocument.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'StorageStorage 接口用于脚本在浏览器保存数据 , 包含一个 sessionStorage 和 localStorage
sessionStorage ： 适用于一次浏览器会话中，关闭窗口，数据清空localStorage ： 保存的数据长期存在具体使用的方法
setItem : 存入对应的数据getItem ： 获取对应的数据removeItem ： 移除对应的数据clear ： 清空数据key ： 获取对应位置的键值window.sessionStorage.setItem("key","value")window.sessionStorage.getItem("key")window.sessionStorage.removeItem("key")window.sessionStorage.clearwindow.sessionStorage.key(0)History表示当前窗口的浏览历史
对应的方法
back : 后退到上一个网页forward ： 前进到下一个网页go ： 指定到具体的网页history.backhistory.forwardhistory.go(2)提供 当前文档的 URL 相关的信息和操作方法
相应的属性
href ：整个 URL。protocol ：当前 URL 的协议，包括冒号（:）。host ：主机。如果端口不是协议默认的80和433，则还会包括冒号（:）和端口。hostname ：主机名，不包括端口。port ：端口号。pathname ：URL 的路径部分，从根路径/开始。search ：查询字符串部分，从问号?开始。hash ：片段字符串部分，从#开始。origin ：URL 的协议、主机名和端口。相应的方法
assign ： 浏览器立刻跳转到新的 URLreplace : 浏览器立刻跳转到新的 URL , 且History会删除当前网址reload : 重新加载当前网址，相当于刷新encodeURI ： 编码不符合URL的合法字符的那些，整个地址为参数encodeURIComponent : 编码指定内容decodeURI ： 解码不符合URL的合法字符的那些，整个地址为参数decodeURIComponent : 解码指定内容encodeURI("http://www.baidu.com?param=我") // http://www.baidu.com?param=我encodeURIComponent("我") // 我decodeURI("http://www.baidu.com?param=我") // www.baidu.com?param=我decodeURIComponent("我") // 我用来构造，解析编码的 url 的对象
var url = new URL('index.html', 'http://example.com');var url = new URL('http://example.com/index.html');url.hrefURL 对应的属性和 Location 基本一致
search ：返回查询字符串，以问号?开头 ，可以构造URLSearchParams对象searchParams ：返回一个URLSearchParams实例，该属性是Location对象没有的，获取到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.searchParamsparams.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([''], {type : 'text/html'});主要方法：
slice 方法有三个参数，都是可选的
用于读取 File 对象或 Blob 对象所包含的文件内容
对应的属性
error ：读取文件时产生的错误对象readyState ：整数，表示读取文件时的当前状态。一共有三种可能的状态，0表示尚未加载任何数据，1表示数据正在加载，2表示加载完成。result ：读取完成后的文件内容，有可能是字符串，也可能是一个 ArrayBuffer 实例。对应的事件
onabort ：abort事件（用户终止读取操作）的监听函数。onerror ：error事件（读取错误）的监听函数。onload ：load事件（读取操作完成）的监听函数，通常在这个函数里面使用result属性，拿到文件内容。onloadstart ：loadstart事件（读取操作开始）的监听函数。onloadend ：loadend事件（读取操作结束）的监听函数。onprogress ：progress事件（读取操作进行中）的监听函数。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); }对应的实例的方法
abort ：终止读取操作，readyState属性将变成2。readAsArrayBuffer ：以 ArrayBuffer 的格式读取文件，读取完成后result属性将返回一个 ArrayBuffer 实例。readAsBinaryString ：读取完成后，result属性将返回原始的二进制字符串。readAsDataURL ：读取完成后，result属性将返回一个 Data URL 格式（Base64 编码）的字符串，代表文件内容。readAsText ：读取完成后，result属性将返回文件内容的文本字符串。用于浏览器与服务器之间的通信，发送各种格式的数据
使用 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) } }}来源：墨码行者
免责声明：本站系转载，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与本站联系，我们将在第一时间删除内容!