javascript
文章平均质量分 55
JavaScript 是属于 HTML 和 Web 的编程语言。
在路上`
这个作者很懒,什么都没留下…
展开
-
js之零碎工具(四)
对于每个对象,我们先获取它的所有属性名,然后对属性名进行排序,然后使用 Array.prototype.reduce 创建一个新的对象,这个新的对象的属性是按照排序后的顺序添加的。(ps: 如果你的数组中包含对象,那么这种方法可能无法正确地去重,因为 Set 使用的是严格相等性检查 (===),所以 {} 和 {} 是不相等的。在这种情况下,你可能需要使用其他方法来去重。如果数组中包含的对象,属性的顺序不同,但是属性值一样,我们仍然认为它们是相同的,那么我们可以先对对象的属性进行排序,然后再进行去重。原创 2023-12-20 17:51:35 · 540 阅读 · 0 评论 -
js之零碎工具(三)
【代码】js之零碎工具(三)原创 2023-07-22 17:27:48 · 129 阅读 · 0 评论 -
js之零碎工具(二)
Es6 零碎工具原创 2023-01-30 16:12:01 · 107 阅读 · 0 评论 -
react-前端封装导入导出方法
react-js导入导出原创 2022-04-18 16:04:38 · 1488 阅读 · 0 评论 -
props的基本使用
案例原创 2021-12-02 16:13:42 · 356 阅读 · 0 评论 -
table时间格式转换
使用element-table的时候,工作中遇到后台给的表格数据里时间是一个13位的时间戳,需要转换成时间显示在表格里,可以用element-ui表格自带的:formatter函数,来格式化表格内容:新建一个js文件用来转换时间戳jsexport function timeFormat(data) { // 返回年月日时分秒if (data) { const date = new Date(data) const year = date.getFullYear.原创 2021-08-23 14:47:51 · 682 阅读 · 0 评论 -
递归无限极目录树的多种实现方式
一、for循环多层嵌套二、递归的妙用原创 2021-06-29 10:59:21 · 277 阅读 · 0 评论 -
js的解析过程
例1例2參考 JS的解析与执行过程原创 2021-03-15 11:30:08 · 136 阅读 · 0 评论 -
图片懒加载
一、实现原理二、简单的jq方法实现懒加载三、滚动处理懒加载原理: 滚动条与顶部高度+可见区域的高度>页面实际高度示例代码htmljs原创 2021-03-12 11:13:09 · 83 阅读 · 0 评论 -
读懂this
一、this是什么?this不是指向自身!this 就是一个指针,指向调用函数的对象。二、this的绑定规则有哪些?默认绑定隐式绑定硬绑定new绑定1. 默认绑定默认绑定,在不能应用其它绑定规则时使用的默认规则,通常是独立函数调用。function sayHi(){ console.log('Hello,', this.name);}var name = 'YvetteLau';sayHi(); // undefined在调用Hi()时,应用了默认绑定,thi原创 2021-03-04 16:09:52 · 110 阅读 · 1 评论 -
js轮询
一、案例效果使得数据实时变化,可以随时暂停和播放二、代码案例html<button id="button">暂停</button>jslet timerId = 1 // 模拟计时器id,唯一性 let timerObj = {} // 计时器存储器 function getData() { return new Promise((resolve,reject) => { setTimeout(() => {原创 2021-03-02 16:27:46 · 1811 阅读 · 0 评论 -
webpack常问问题
一、前端自动化构建工具【grunt、gulp、webpack】认识Grunt和Gulp属于任务流工具Tast Runner , 而 webpack属于模块打包工具 Bundler优缺点Grunt是js任务管理工具(自动化构建工具)优势:出来早,社区成熟 插件全缺点:配置复杂 效率低(cpu占用率高)Gulp是基于流的自动化构建工具优点:配置简单 效率高 流式工作(一个任务的输出作为另外一个任务的输入)优点正好是grunt的缺点。 【可以进行压缩 打包合并起服务】缺点:出现晚 插件少We原创 2021-02-26 15:31:13 · 124 阅读 · 0 评论 -
解决跨域的常用方案
一、 什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源二、什么是同源策略?同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。三、跨域解决方案1、 通过jsonp跨域2、 document.domain + iframe跨域3、 lo原创 2021-02-24 15:26:44 · 167 阅读 · 0 评论 -
解决异步编程的方案--重点promise
一、什么是promise?简单来说主要用于异步计算.二、先来谈谈解决异步编程的方案1.回调函数ajax(url, () => { // 处理逻辑 ajax(url1, () => { // 处理逻辑 ajax(url2, () => { // 处理逻辑 }) })})回调函数的优点是简单、容易理解和实现,缺点是易造成回调地狱,不利于代码的阅读和维护,各个部分之间高度耦合,使得程原创 2021-02-23 15:28:24 · 226 阅读 · 0 评论 -
实现保存图片到本地的功能
一、案例效果图二、代码实现解决图片不同源下载问题 downloadIamge(imgsrc, name) {//下载图片地址和图片名 var image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { var canvas = document.createElement("canva原创 2020-12-22 11:35:46 · 1001 阅读 · 0 评论 -
JavaScript 中 call()、apply()、bind() 的用法
一、call()、apply()、bind() 都是用来重定义 this 这个对象的预热状态:例1:var name="张三",age=18;var obj = { name:"李四", oldAge:this.age, myFn:function(){ console.log( this.name+"年龄"+this.age ) }}obj.oldAge; // 18obj.myFn(); // 李四年龄undefined例2:var name原创 2020-11-23 15:46:53 · 103 阅读 · 0 评论 -
vue中的watch监听数据变化
ps:今天get到一个新的监听方法 --》immediate(用于在最初绑定值的时候也执行函数)一、watch使用的几种方法(1)通过watch监听data数据的变化,数据发生变化时,就会打印当前的值,但这种方法有时监听不到watch: { data(val, newval) { console.log(val) console.log(newval) }} (2)通过watch监听docData数据的变化,数据发生变化时,this.change原创 2020-11-05 17:13:17 · 1534 阅读 · 0 评论 -
动态渲染多个重复的Highcharts图表
需求:实现多个动态图表示例准备工作需要提前引入所需要的css,js等插件文件,可参考Highcharts官网实例/**boardBuildingInCommunityMap为接口返回的数据* buildFeeArr[i] = [] 为重要步骤,清空每个图表中重复的数组* buildFeeArr[i].push(buildFeeObj) 给每条数据假如不同的动态数据* buildFee(buildFeeArr, boardBuildingInCommunityMap, feeItemId原创 2020-10-22 11:13:36 · 745 阅读 · 0 评论 -
时间格式转换
时间戳转换为时间秒function add0(m){return m<10?'0'+m:m } //时间戳转化成时间格式 function timeFormat(timestamp){ //timestamp是整数,否则要parseInt转换,不会出现少个0的情况 var time = new Date(timestamp); var year = time.getFullYear(); var month = time.getMonth()+原创 2020-10-09 17:00:07 · 232 阅读 · 0 评论 -
js之零碎工具(一)
1、字符串超出8字显示 “…”(三目){{ scope.row.projectName?(scope.row.projectName.length>8?(scope.row.projectName.substring(0,8))+"...":scope.row.projectName):""}}原创 2020-08-20 09:28:42 · 116 阅读 · 0 评论 -
前端常见题汇总(六)
一、判断数组的三个方法Object.prototype.toString.call()每一个继承 Object 的对象都有toString方法,如果toString方法没有重写的话,会返回[Object type],其中 type 为对象的类型。但当除了 Object 类型的对象外,其他类型直接使用toString方法时,会直接返回都是内容的字符串,所以我们需要使用call或者apply...原创 2020-05-07 14:25:17 · 163 阅读 · 0 评论 -
前端常见题汇总(五)
一、var、let、const 的区别及实现原理var声明的变量会挂载在window上,而let和const声明的变量不会var a = 100;console.log(a,window.a); // 100 100 let b = 10;console.log(b,window.b); // 10 undefinedconst c = 1;console.log(c,wi...原创 2020-04-28 10:51:29 · 227 阅读 · 0 评论 -
前端常见题汇总(四)
一、数组扁平化并去重排序例: var arr=[ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];方法 一Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{ return a-b})方法二function flatten(ar...原创 2020-04-13 17:55:07 · 137 阅读 · 0 评论 -
前端常见题汇总(二)
一、箭头函数与普通函数(function)的区别是什么?构造函数(function)可以使用 new 生成实例,那么箭头函数可以吗?为什么?箭头函数是普通函数的简写,可以更优雅的定义一个函数,和普通函数相比,有以下几点差异:1、函数体内的 this 对象,就是定义时所在的作用域中的 this 值,而不是使用时所在的对象。this 相当于一个普通变量会向作用域链中查询结果,同时定义时所在对象...原创 2020-04-09 16:13:59 · 191 阅读 · 0 评论 -
前端常见题汇总(一)
一、JS找字符串中出现最多的字符例如:求字符串’nininihaoa’中出现次数最多字符方法1var str = "nininihaoa"; var o = {}; for (var i = 0, length = str.length; i < length; i++) { var char = str.charAt(i); if (o...原创 2020-04-07 17:33:02 · 301 阅读 · 0 评论 -
js常用的循环遍历方法
一、for in 循环for in 循环主要用于遍历普通对象,i 代表对象的 key 值,obj[i] 代表对应的 value但是遍历数组时候,要注意,因为 i 输出为字符串形式,而不是数组需要的数字下标,这意味着在某些情况下,会发生字符串运算,导致数据错误,比如:‘52’+0 = ‘520’ 而不是我们需要的 52。另外 for in 循环的时候,不仅遍历自身的属性,还会找到 protot...原创 2020-03-27 15:35:06 · 204 阅读 · 0 评论 -
数组和对象的使用
// 先定义按顺序的横轴var xArr=['01',"02","03","04","05","06"];var obj=[ { pkey:'01', value:18 },{ pkey:'03', value:33 },{ pkey:'06', value:23 },]// 先处理数组let temp={}for(var key in obj){t...原创 2020-03-18 14:19:09 · 59 阅读 · 0 评论 -
js获取当前年月日【包含不满10 补 0 】
js获取年月日var date = new Date();date .getYear(); //获取当前年份(2位)date .getFullYear(); //获取完整的年份(4位)date .getMonth(); //获取当前月份(0-11,0代表1月)date .getDate(); //获取当前日(1-31)date .getDay(); //获取当前星期X(0-6...转载 2020-02-12 15:23:32 · 2831 阅读 · 0 评论 -
ES6/ES7/ES8常用特性和新特性
这里写自定义目录标题ES6/ES7/ES8常用特性和新特性>ES6变量的改变,添加了块级作用域的概念字符串新增方法函数可以像C/C++那样设置默认参数值,增加数据容错能力· 对象· Promise对象· Set>ES7· 简便性· 精确性· 使用场景>ES8async、await异步解决方案·Object.entries()·Object.values()·字符串填充padSta...原创 2020-01-15 17:11:00 · 956 阅读 · 0 评论