数组是经常用到的一种数据结构 定义方法 1 2 let a = new Array(3) let b = [1, 2, 3] 如何定义一个只有一个元素的数组？ new Array(n)表示有n个空元素的的数组，利用Array.of(n),可以定义一个只有n元素的数组 类型转换 利用join 可以把数组转成字符串 1 2 3 let a = [1, 2, 3, 4, 5] let b = a.join('') console.log(b); 说明： join 的作用就是将数组中的所有元素用指定的符号连接，成为一个字符串 如何把DOM集合NodeList转换成普通数组形式？ Nodelist形式无法使用.map(),reduce()等方法(能用forEach())，处理不太方便，因此需要转换成普通数组类型 1 2 3 4 5 6 let titles = document.querySelectorAll('h1'); [...titles].map((v, i,titles) => { console....
字符串 1.截取字符串 主要有slice()、substr()、substring() 三种方法 一个参数[i] 都是从i开始截取，返回n及其后面的全部字符串。 第二个参数[i,n] slice(i,n)和substring(i,n)表示从i开始截取到n；substr(i,n)，表示从i开始截取n个 负参数 slice()和substr()将最后一位记为-1，然后依次编号；substring()则会将任何负参数变为0，然后查找 1 2 3 4 5 6 let w = 'fintinger.xyz' let a = w.slice(-4, w.length) let b = w.substring(-1, 2) let c = w.substr(-4, 4) console.log(a, b, c);//.xyz fi .xyz 2.查找字符串 主要有indexof()、includes()、lastIndexof() 三种方法 共同点： 两个参数[searchString,position]，第一个为要检索的字符串，第二个为开始检索位置； 若position < 0，则position = 0 position可以省略 不同之处： lastIndexof()为从右往左找，找到第一个立即返回索引！其他两个都是从左往右 indexof(),lastIndexof()找不到则返回-1，includes()找不到返回false position 省略之后，includes(),indexof()默认值为0，lastIndexof()则为str....
JavaScript中最容易忽视的一些点 let和var 都用来定义变量，但二者之间有些细微的差别 区别1: 是否有块作用域 1 2 3 4 5 6 7 8 var a = 1 { // var a=2 let a = 2 } console.log(a); //output var:a=2 let:a=1 1 2 3 4 5 6 7 8 var i=1 // for (var i = 0; i <3; i++) { for (let i = 0; i <3; i++) { //..do something } console....
++的前置与后置 1 2 3 4 5 6 7 8 9 let a1 = 1 let b1 = 2 let c1 = b1 + a1++ console.log(a1, b1, c1);//2,2,3 let a2 = 1 let b2 = 2 let c2 = b2 + ++a2 console.log(a2, b2, c2);//2,2,4 说明： 后置是先计算再++ 前置是先++再计算 短路运算 1 2 3 4 let a = 0; let b = 1; let c = a || b; console....
Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值。其目的主要是解决以往回调中嵌套回调的"嵌套地狱"问题，使代码可读性更好，更美观! 基本用法 对于一个标准的Prommise，其基本写法为: 1 2 3 4 5 6 7 8 9 10 11 12 13 new Promise(function (resolve, reject) { //do something... //success resolve('success') //fail & reject // reject('rejected') *resolve和reject只能出现一个 }).then( function (value) { //if succeed,do something... }, function (reason) { //if fail & reject,do something... } ) 如果采用ES6的箭头函数写法，则为: 1 2 3 4 5 6 7 new Promise((resolve, reject) => { resolve('success') //reject('rejected') })....
在发送某一次请求时，如果不对请求做去重处理那么，同一个请求有可能会发送很多次，一个个慢慢响应，这会很大程度影响性能以及页面的使用体验 全局变量 1 2 3 4 5 6 7 /** * baseURL 是每次请求的地址 * x 表示XMLHttpRequest实例，初始为null * isSending 是用来判断请求是否处于发送状态的标识 */ const baseURL = "http://127.0.0.1:8000/delay" let x = null, isSending = false 原生请求 1 2 3 4 5 6 7 8 9 10 11 12 13 14 if (isSending) x.abort() x = new XMLHttpRequest() //正处于发送状态，修改标识 isSending = true x.open("GET", baseURL) x.send() x.onreadystatechange = function () { if (x....
JSONP jsonp跨域的实现仅限于GET请求，不可用于POST 说明：实现的基本思路是利用html中script标签本身可跨域的特性，在发送请求时，在页面中创建script标签，追加到页面中。这实际上就像利用script标签引入外部资源 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /*main.js*/ //申明handle函数 function handle(data) { //do something.... } ele.onclick = function () { //1.创建script标签 const script = document.createElement("script") //2.修改script的src属性 script.src = "http://127.0.0.1:8000/jsonP" script.id="tempScript"//添加id方便移除 //3.追加到页面中 document.body.appendChild(script) } 1 2 3 4 5 6 7 8 9 10 11 12 /*server.js*/ app.get('/jsonP', (request, response) => { const data = { exist:1, msg:"用户名已经存在!...
学习地址:https://www.bilibili.com/video/BV1WC4y1b78y，主要通过express的简单功能来搭建本地的服务，进而更好地学习Ajax 发送Ajax请求的方式 原生Ajax 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 //1.创建对象 const xhr = new XMLHttpRequest() //2.初始化 xhr.open([type], [url])//xhr.open("GET","https://www.x.com") //3.发送 xhr.send() //4.处理返回结果 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { //...do something console.log(xhr.status)//状态码 console.log(xhr.statusText)//状态字符串 console.log(xhr.getAllResponseHeaders)//所有请求头信息 console.log(xhr.response)//响应体 } } } 说明：...
Baike Ajax 即“AsynchronousJavascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。—百度百科 请求报文 格式以及参数如下 1 2 3 4 5 6 7 8 行 GET / HTTP/1.1 头 Host: fintinger.xyz Cookie: keyword=xyz Content-type: application/x-www-form-urlencoded User-agent: Chrome 83 空行 (必须有) 体 [GET]:空 [POST]:空/username=admin&password=admin 图示为Chrome浏览器请求报文 响应报文 格式以及参数如下 1 2 3 4 5 6 7 8 9 10 11 12 行 HTTP/1.1 200 Ok 头 Content-Type: text/html; charset=utf-8 Content-Length: 22 Content-encoding: gzip 空行 (必须有) 体 <html> <head> </head> <body> <h1>Hello!...
1. 关于元素显示与隐藏 # v-show="name" 说明： 如果data中name为true就显示，否则该元素display:none # v-if="name" 说明： 如果data中name为true就显示，否则该元素变成一段注释<!---->，就被删掉了! v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 2. 访问data # v-model 说明： 与data中的值绑定，会随着data中的值得改变而改变，如果是input则data中的值会随着input中的值的改变而改变 # v-if **说明：**用于条件性地渲染一块内容 在<template>元素上使用 v-if 条件渲染分组 因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换(隐藏或显示)多个元素呢？此时可以把一个<template>元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含<template>元素。 这样做的好处就是不用再写一个<div>将需要隐藏的元素包裹 # v-show 说明： 条件切换display属性 # v-for 说明： 在data中定义一个数组arr，然后用v-for="val in arr"访问到 3....