![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS实例
meichaoWen
前端工程师
展开
-
【JS】生成一组随机数的方法
生成一组随机数的方法原创 2022-10-18 17:27:45 · 229 阅读 · 0 评论 -
【JS】对象数组根据某个属性求和
arrObj = [{ title: '序号', width:60, }, { title: '商品编码', width:80, }] //计算对象数组中某个属性合计 countTotal = (arr, keyName) => { let $total = 0; $total.原创 2021-12-20 16:23:03 · 3642 阅读 · 0 评论 -
【正则】判断上传文件的文件类型
判断文件是否为图片function fileType(fileName) { if (fileName.indexOf(".") !== -1) { let urlArr = fileName.split(".") || []; let strs = urlArr[1] return /(png|jpeg|jpg|gif)$/i.test(strs) }}原创 2021-09-06 17:03:13 · 427 阅读 · 0 评论 -
【decodeURI和decodeURIComponent】编码和解码
decodeURI 解码encodeURI 编码对于编码后的 url 进行解码decodeURIComponent 解码encodeURIComponent 编码原创 2021-09-06 16:18:32 · 228 阅读 · 0 评论 -
【ES6】数组去重 set 方法
普通数组 【1,2,3,4,1,2】let arr = [1,2,3,4,1,2]console.log([...new Set(arr)]) //[1,2,3,4]set对于对象数组并不适用。对象数组 reduce 去重 let person = [ {id: 0, name: "小明"}, {id: 1, name: "小张"}, {id: 2, name: "小李"}, {id: 3, name: "小孙.原创 2021-06-28 19:25:16 · 376 阅读 · 0 评论 -
【ES6】find 和 findIndex 和 filter
find let arr = [ {id: 1, name: 'xiaowen'}, {id: 2, name: 'xiaomei'}, {id: 3, name: 'xiaochao'}, {id: 2, name: 'xiao2'}, ] let arr2 = arr.find((item, index, arr)=>{ con原创 2021-06-18 17:55:19 · 118 阅读 · 0 评论 -
判断数组中元素全部为true
let result = newArr.map(item => { if(item.hasOwnProperty("taxRate") === false) { return false }else{ return true } }) console.log(result) //只有全部符合才会返...原创 2021-06-08 14:33:41 · 5476 阅读 · 0 评论 -
【React】在方法内调用另一个方法报错undefined
错误写法:onOk={ request("~", { method: "POST", }).then((res) => { if (res.status) { message.success("成功"); this.handleSearchList() //报错 } else { message.war原创 2021-05-14 08:52:50 · 672 阅读 · 0 评论 -
【JS】合并多个对象
Object.assign()const obj1 = { a: 1, b: 2 };const obj2 = { b: 4, c: 5 };const newObj = Object.assign(obj1, obj2);console.log(obj1); //{ a: 1, b: 4, c: 5 }console.log(newObj); //{ a: 1, b: 4, c: 5 }如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前原创 2021-05-12 08:56:16 · 565 阅读 · 0 评论 -
【ES6】promise的基本用法
promise:用同步一样的方式,来书写异步代码。原创 2021-03-23 00:46:35 · 158 阅读 · 0 评论 -
【ES6】有关JSON对象和ES6中新特性
JSON标准写法1、只能用 双引号2、所有的 key 必须用双引号包起来示例:let str = {"a": "abc", "b": 12}JSON.stringify 字符串化 let abc = {a: 12, b: 5} alert(abc) //[object Object] let url = 'www.baidu.com?data=' + encodeURIComponent(JSON.stringify(abc)) //enc.原创 2021-03-09 13:10:58 · 232 阅读 · 0 评论 -
【ES6】结合react说一说ES6面向对象的应用
基础<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="react.js"></script> <script src="react-dom.js"&g原创 2021-03-09 09:34:46 · 130 阅读 · 0 评论 -
【ES6】关于es6中面向对象的一些改进
es5中面向对象 function show(name, age){ this.name = name this.age = age } show.prototype.showNane = function(){ alert(this.name) } show.prototype.showAge = function(){ alert(this.age) } var fn = new原创 2021-03-08 23:39:52 · 94 阅读 · 0 评论 -
【JS】map批量修改对象数组的键名
map 实例 let arr = [{ name: 'xiaoWang', number: '01' }, { name: 'xiaoZhao', number: '02' } ] let newArr = arr.map(item => { return { label: item.nam原创 2021-03-04 09:48:18 · 1503 阅读 · 4 评论 -
【ES6】字符串新增的一些内容以及应用
新增两个新方法stratsWith( ) 检测字符串是否以指定的前缀开始endsWith( ) 检测字符串是否以指定的后缀结尾startsWith let str = 'http://www.baidu.com' if(str.startsWith('https://')){ console.log('加密网址') }else if(str.startsWith('http://')){ console.log('普通网址') //原创 2021-02-25 20:17:55 · 82 阅读 · 0 评论 -
【ES6】数组新增的四个方法 map reduce filter forEach
map 映射,一个对一个map( ) 方法按照原始数组元素顺序依次处理元素,返回一个新数组,数组中的元素为原始数组调用函数处理后的值。不改变原始数组。 let arr = [10,20,30,40] let newArr = arr.map((item, index, args) => { //当前元素、位置、原始数组本身 console.log(item, index, args) //会执行 arr.length 次 return i原创 2021-02-23 22:51:44 · 155 阅读 · 0 评论 -
【ES6】关于解构赋值的基本用法
解构赋值1、左右两边结构必须一样(数据类型、个数)2、右边必须是个东西(语法无误)3、声明和赋值不能分开(必须在一句话里完成) let arr = [1,2,3] let a = arr[0] let b = arr[1] let c = arr[2] console.log(a,b,c) //1,2,3解构赋值 let [a,b,c] = [1,3,5] console.log(a,b,c) //1,3,5实例1.原创 2021-02-22 11:36:34 · 259 阅读 · 0 评论 -
【ES6】函数的参数扩展、数组展开、以及默认参数
参数扩展 function show(a, b, ...args){ console.log(a) // 3 console.log(b) // 4 console.log(args) // [5, 7, 8] 是个数组,Rest parameter 剩余参数 } show(3,4,5,7,8)...args 用于收集剩余参数...args 必须放在参数末尾,否则报错:Rest parameter must be last原创 2021-02-22 09:45:26 · 171 阅读 · 0 评论 -
【ES6】箭头函数的基本用法
箭头函数箭头函数和原来相比,只是写法上的改进:1、如果只有一个参数,()可以省2、如果只有一个 return,{ } 可以省 function show(){ } let show = () =>{ }实例1、省略( ) 和 { } let show = function(a){ return 2*a } let show = a => 2 * a //如果只有一个参数,().原创 2021-02-20 14:10:29 · 512 阅读 · 0 评论 -
【ES6】变量 let 以及 const
var的缺点1、可以重复声明 var a = 12 var a = 5 alert(a) //52、无法限制修改(没有常量) var a = 12 a = 5 alert(a) //53、没有块级作用域 if(true){ var a = 5 } alert(a) //5不可重复声明 let、constIdentifier 'a' has already been declared原创 2021-02-19 17:31:22 · 81 阅读 · 0 评论 -
【JavaScript】正则表达式的应用
两种写法 //var re = new RegExp('a') //js风格 var re = /a/ //perl风格 var str = 'abcdef' alert(str.search(re))忽略大小写 ivar re = new RegExp('a', 'i') //js风格var re = /b/i //perl风格实例:挑出字符串里的数字 var str = '33 uu8798 i09 ij--879pp 99' a.原创 2021-02-17 15:52:50 · 91 阅读 · 1 评论 -
【String】关于字符串的一些操作
search 查找 var str = 'abcdefg' alert(str.search('a')) //0 如果存在返回在字符串中的位置 alert(str.search('h')) //-1 如果不存在返回-1substring 字符串截取 var str = 'abcdefg' alert(str.substring(0, 4)) //abcd 不包含结尾 alert(str.substring(1)) //bcdefg 传一原创 2021-02-17 13:13:22 · 137 阅读 · 2 评论 -
【JavaScript】原生js里的Cookie用法
cookie:页面用来保存信息,同一个网站的所有页面共享一套cookie(同一个域名),数量、大小有限,有过期时间。cookie的使用 var oDate = new Date() oDate.setDate(oDate.getDate() + 8) document.cookie = "pass='123'; expires=" + oDate //设置cookie数据和失效日期封装成函数 function setCookie(name, value, .原创 2021-02-15 21:40:18 · 210 阅读 · 0 评论 -
【JavaScript】原生js中BOM的应用
打开、关闭窗口window.open window.onload = function(){ var oBtn = document.getElementById('btn1') var oTxt = document.getElementById('txt1') oBtn.onclick = function(){ var oWin = window.open("about:blank","_blank") //网址、原创 2021-02-13 19:39:44 · 125 阅读 · 0 评论 -
【JavaScript】用JSON方式实现面向对象,以及面向对象中的继承
用json方式实现面向对象 var json = { inin: function(){ this.showAge(), this.showName() }, name: 'wen', age: 28, showName: function(){ alert(this.name) }, showAge: funct原创 2021-02-10 14:50:46 · 223 阅读 · 2 评论 -
【JavaScript】用面向对象来实现选项卡实例
面向过程的实现方式 window.onload = function(){ var oDiv = document.getElementById('div1'); var oBtn = oDiv.getElementsByTagName('input'); var aDiv = oDiv.getElementsByTagName('div'); for(var i = 0; i < oBtn.length; i++){原创 2021-02-09 15:04:17 · 186 阅读 · 0 评论 -
【JavaScript】原生js内容之面向对象工厂模式优化
工厂模式 function createPerson(name, qq) { //构造函数-工厂方式 var obj = new Object() //原料 //加工 obj.name = name obj.qq = qq obj.showName = function () { alert(this.name) } obj.showQQ = function原创 2021-02-08 14:48:01 · 110 阅读 · 0 评论 -
【JavaScript】原生js之如何理解面向对象
面向对象:就是不知道原理是什么,知道如何使用功能特征1、抽象,抽 -> 把主要的特征、跟问题相关的特征抽出来2、封装,看不到里边的内容,用好表面的功能就可以了3、继承,从父类继承方法和属性,子类又有一些自己的特性。继承的目的是最大可能性的重用代码。 多重继承:多个父类;多态:~组成属性。属性和变量的区别:变量是自由的、属性是属于一个对象的方法。方法和函数的区别:函数是自由的、方法是属于一个对象的属性<script> var...原创 2021-02-08 00:59:01 · 126 阅读 · 0 评论 -
【JavaScript】用原生js如何写ajax请求
变量和属性alert(a) //报错 a is not definedalert(window.a) //undefined全局变量是 window 的一个属性未定义的变量,使用会报错未定义的属性,使用时值是 undefinedajax 请求function ajax(url, fnSucc, fnFaild) { //1、创建Ajax对象 if (window.XMLHttpRequest) { var oAjax = new XMLHttpRequest()原创 2021-02-04 01:59:28 · 468 阅读 · 0 评论 -
【JavaScript】ajax的基础知识以及缓存和提交数据的方式
Ajax就是让 JS 可以读取服务器上的数据。字符集编码:gb2312(中文乱码) / utf-8缓存: 缓存的工作原理是通过 URL 来缓存的,同一个地址读取一次。实例1、避免缓存<script> window.onload = function(){ var oBtn = document.getElementById('btn') oBtn.onclick = function(){ ajax('aaa..原创 2021-02-03 00:44:57 · 118 阅读 · 0 评论 -
【JavaScript】原生js实现带框拖拽和自定义滚动条
带框拖拽<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1 {width: 100px; height: 100px; background-color: ye原创 2021-02-01 22:15:56 · 302 阅读 · 0 评论 -
【JavaScript】原生js事件中事件绑定、磁性吸附,以及拖拽选中文字的结决方案
事件绑定<script> window.onload = function () { var oDiv = document.getElementById('btn') if (oDiv.attachEvent) { //低版本的 ie oDiv.attachEvent('onclick', function () { alert(a) }) oD原创 2021-01-28 21:39:55 · 266 阅读 · 0 评论 -
【JavaScript】原生js中默认行为以及拖拽实例的实现原理
默认行为阻止页面上点击右键弹出菜单的默认行为<script> document.oncontextmenu = function(){ return false; //阻止默认事件 }</script>实例1、自定义右键菜单<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i原创 2021-01-27 00:52:33 · 163 阅读 · 0 评论 -
【JavaScript】关于原生js中的事件-Event对象、事件冒泡、鼠标事件、键盘事件
Event对象<script> window.onload = function(){ document.onclick = function(ev){ var oEvent = ev || event //为了兼容低版本的ie和火狐 alert(oEvent.clientX +','+ oEvent.clientY) } }</script>事件冒泡在原创 2021-01-25 22:35:47 · 339 阅读 · 0 评论 -
【JavaScript】用原生js来实现链式运动以及同时执行多种运动
链式运动框架function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name] } else { return getComputedStyle(obj, false)[name] }}function startMove(obj, attr, iTarget, fnEnd) { clearInterval(obj.timer) obj.timer = setInterval(原创 2021-01-19 23:47:37 · 171 阅读 · 0 评论 -
【JavaScript】用原生js实现幻灯片效果
github地址:https://github.com/MeichaoWen/JSInstance<script> function getByClass(oParent, sClass) { aEle = document.getElementsByTagName('*'); var arr = []; for (var i = 0; i < aEle.length; i++) { if (aEle[i].className == sClass) { a原创 2021-01-18 23:29:21 · 482 阅读 · 3 评论 -
【JavaScript】select、radio、checkbox 选中与获取值
判断是否选中<body> <input type="checkbox" id="oCh"> <script> //jQuery $('#oCh').is(':checked') //false、true $('#oCh').prop('checked') //false、true $('#oCh').attr('checked') //jQ版本1.6+返回 undefined、checked原创 2021-01-16 22:27:44 · 166 阅读 · 0 评论 -
【JavaScript】原生js实现多个元素运动、一套运动框架改变任意样式
多个元素运动注意:多个元素,定时器需要多个。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {width: 50px;height: 50px;back原创 2021-01-15 21:26:02 · 287 阅读 · 0 评论 -
【JavaScript】用原生js来实现元素的缓冲运动
缓冲运动缓冲运动是指,运动物体的速度由快到慢,逐渐停止。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1 {width: 200px; height:原创 2021-01-13 23:47:20 · 180 阅读 · 0 评论 -
【JavaScript】用原生js来实现元素的匀速运动
运动基础运动实际上就是改变一个定位元素的 top、left…<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #div1 {width: 200px; heigh原创 2021-01-12 23:47:47 · 434 阅读 · 0 评论