JavaScript
大佬,咋整啊
我也头圆顶天,足方履地,一般有九窍四肢,五脏六腑,何以比人不同?
展开
-
Vue:多文件上传并预览
多文件上传预览基本思路1、获取所上传的文件,input发生change事件时获取 e.target.files,这个变量就是文件列表2、文件上传用的时FormData格式,这里我循环遍历了文件列表,并把文件append到FormData对象里3、提交时把FormData对象提交到服务器即可4、预览功能我用的FileReader的readAsDataURL方法将上传图片转为base64,再将base64这串字符赋给img元素的src,即可显示预览5、读取操作是异步读取,这里用了Promise,读取原创 2021-07-07 16:35:14 · 1861 阅读 · 0 评论 -
JS:函数声明与函数表达式
定义一个函数有两种方法一、函数声明二、函数表达式一、函数声明函数声明的function关键字放在最前面函数声明的函数会整体提升到顶部console.log(a) // function a () {/*code*/}function a () {/*code*/}预编译时实际顺序如下:function a () {/*code*/}console.log(a)二、函数表达式在函数表达式中可省略函数名称从而创建匿名函数函数表达式没有提升,使用var关键字时变量提升,而let不进行原创 2021-02-27 14:32:28 · 419 阅读 · 0 评论 -
JS:事件委托
事件委托:给父节点绑定事件,根据点击的子节点执行相应的代码注意事项:事件冒泡过程会损耗性能,嵌套结构越深损耗越大,所以并非把事件委托给越高层的父节点就越好 <ul id="clickUl"> <li id="1" data-name='one'>1</li> <li id="2" data-name='two'>2</li> <li id="3" data-name='three'>3<原创 2021-02-27 11:48:35 · 87 阅读 · 0 评论 -
JS:Promise 的 API 作用描述
文章目录Promise创建thencatchfinallyallanyracerejectresolvePromise创建Promise对象是一个构造函数,所以要用new关键字调用const promise = new Promise((resolve, reject) => {});thenthen方法可以为异步操作添加回调函数then()第一个参数是resolved状态的回调函数,第二个参数是rejected状态的回调函数,它们都是可选的get(apiUrl).then((reso原创 2021-02-22 11:33:20 · 410 阅读 · 2 评论 -
JS:Objec 的 API 作用描述
文章目录Object.is —— 比较两个值是否相同Object.assign —— 合并对象Object.entries ,Object.keys,Object.values —— 获取键值对、键名、值Object.is —— 比较两个值是否相同比较两个值是否相同,与严格等于===的不同之处有两个:一是+0不等于-0,二是NaN等于自身Object.is(NaN,NaN) //trueObject.is(+0, -0) //falseObject.assign —— 合并对象Object.a原创 2021-02-21 18:26:14 · 270 阅读 · 0 评论 -
JS:Array 的 API 作用描述
数组APIsortreversejoinconcatfiltermapeverysomeforEachslicespliceindexOfsortsort()可以对当前数组进行排序,它会直接修改数组的位置而不是生成一个新数组功能:自动排序,默认是按Unicode升序排列,sort()函数会接收一个比较函数作为参数let a = [4,3,2,1]let b = a.sort((x,y) => { console.log(`x=${x},y=${y}`) return x-y})原创 2021-02-20 17:16:55 · 104 阅读 · 0 评论 -
JS:策略模式和状态模式
//策略模式基本结构//优化if-else分支过多function tactics(type,a,b) { let t = { add: function (a,b){ return a+b }, minus: function (a,b){ return a-b }, mul: function (a,b) { return a*b }, division: function (a,b){原创 2021-02-19 14:06:12 · 270 阅读 · 0 评论 -
算法:冒泡排序
思路:1、比较相邻的两个数,较大的放到右边(升序排序)2、所以第一遍循环的时候,最大的会放到最后一个,所以第二遍循环时最后一个不需要比较,第 i 遍循环时,第e.length - i个不需要比较function sort (e) { for(let i = 0; i < e.length-1; i++){ for(let j = 0;j <= e.length - i -1; j++){ e[j] > e[j + 1] ? [e[j],[e[j+1]]] =原创 2021-01-23 12:00:52 · 52 阅读 · 0 评论 -
算法:二分查找
对有序数组的查找function search (arr,target) { let start = 0 let end = arr.length - 1 while (start <= end) { let middle = Math.floor((start + end)/2) let maybe = arr[middle] if (maybe == target) { return middle } if (mayb原创 2020-12-12 15:51:50 · 70 阅读 · 0 评论 -
ES6:模板字符串用法
ES6中引入了模板字符串,让我们告别了使用大量'' 和 +来连接字符串了写法。要创造一个模板字符串,只需要使用反引号``将字符串包起来,模板字符串中的变量用${变量名}替代即可var a = 'o,';var b = 'd!'console.log (`Hell${a}worl${b}`);// Hello,world!1、多行字符串在模板字符串内,换行和空格是会保存并展示出来的var a = 'o,';var b = 'd!'console.log(`Hell${a} worl${b原创 2020-11-10 14:39:19 · 518 阅读 · 0 评论 -
JS:对比 for... in ...和 for... of ...
循环类型数组字符串对象for…in…返回下标返回下标返回键名for…of…返回数组元素返回字符报错var arr = ['a','b','c']var obj = {d:'D',f:'F'}var str = 'ghi'一、for… infor… in …遍历数组,返回下标for (let item in arr){ console.log(item) //0,1,2}for… in …遍历字符串,返回下标for (let item in...原创 2020-11-03 14:01:30 · 194 阅读 · 0 评论 -
JS:防抖函数、节流函数实例
防抖和节流限制频繁操作原创 2020-11-03 11:25:04 · 309 阅读 · 0 评论 -
js:简单理解栈内存和堆内存
js的数据类型划分方式为 基本数据类型(Undefined,Null,Boolean,Number、String)和 引用数据类型Object(包含 function、Array、Date)基本数据类型的数据存储在栈内存中,引用数据类型的数据存储在堆内存。变量只是将引用数据类型的数据的地址存储到栈内存,使用的时候根据地址去堆内存中操作数据...原创 2020-10-27 17:55:51 · 246 阅读 · 0 评论 -
js:简单理解闭包、内存泄漏
闭包原创 2020-10-27 17:10:21 · 89 阅读 · 0 评论 -
js:JavaScript的赋值、浅拷贝、深拷贝
赋值:增加了一个指针指向已存在的内存地址浅拷贝:申请了一个新的内存,拷贝第一层对象,不拷贝对象中的子对象深拷贝:申请了一个新的内存,并复制其全部内容原创 2020-10-19 14:53:29 · 350 阅读 · 1 评论 -
js: jquery.lazyload 图片、背景图片加载
图片懒加载<img class="lazyload" data-original="./images/mq10.jpg" width="128" height="24" /> $(function() { $("img.lazyload").lazyload() });背景图片懒加载<div class="lazyload" data-original="img/img.jpg" ></div>$(function() { $("div.原创 2020-10-16 18:37:05 · 550 阅读 · 0 评论 -
js:rem单位中所需的js
先说下实现思路吧:rem 是根据根元素的字号进行调整,所以可以先获取浏览器可视区域的宽度作为参照,将该宽度数值分为N 等份,每份或每份的倍数定义为根元素的字号,再监听这样一个rem 单位的js 就写好了这段代码中1rem 最大为20px:function reFontsize () { const html = document.querySelector("html") let pageWidth = document.body.clientWidth const maxW = 750;原创 2020-10-16 16:18:51 · 183 阅读 · 0 评论 -
JS:swiper异形slide
css:.swiper-container { position: relative; width: 100%; height: 500px; }.swiper-slide { text-align: center; font-size: 18px; background: #eee; display: flex; justify-content: center; align-items: center; tr原创 2020-07-20 22:22:23 · 6979 阅读 · 4 评论 -
js:prototype 原型
原型原创 2020-07-18 13:49:15 · 165 阅读 · 0 评论 -
js:为什么要用 that = this
this是JavaScript中的一个关键字,代表当前操作对象,this的位置不同代表的对象可能也不同var that=this就是将当前的this对象复制一份到that变量中jquery里边有一个特别典型的例子能说明用that的作用$("#btn").click(function(){ var that= this;//这里this和that都代表了"#btn"这个对象 $(".tr").each(function(){ this;//在这里this代表的是每个遍原创 2020-06-12 09:33:13 · 3410 阅读 · 3 评论 -
js:操作html dom节点
1、创建新节点createElement() //创建一个具体的元素createTextNode() //创建一个文本节点2、添加、移除、替换、插入appendChild() //添加removeChild() //移除replaceChild() //替换insertBefore() //插入3、查找getElementsByTagName() //通过标签名称getElementsByName() //通过元素的Name属性的值getElementById() //通过元素Id,唯原创 2020-06-23 14:33:30 · 90 阅读 · 0 评论 -
js:this指向解析
一、全局环境全局环境中,this始终指向window,即全局对象:console.log(this); // windowthis.a = 123;console.log(window.a); //123二、原创 2020-06-30 11:06:05 · 103 阅读 · 0 评论