JavaScript
关注
分享
扫一扫
文章平均质量分 89
JavaScript
furfur-jiang
你若盛开，清风自来
公众号:程序江
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
隐式转换总结
转换规律总结：具体转换实例：对象和字符串进行比较时，对象转换为字符串，然后两者进行比较。[1,2,3] == ‘1,2,3’ // true [1,2,3]转化为’1,2,3’，然后和’1,2,3’，结果为true;字符串和数字进行比较时，字符串转换成数字，二者再比较。‘1’ == 1 // true字符串和布尔值进行比较时，二者全部转换成数值再比较。‘1’ == true; // true对象和数字进行比较时，对象先转换为字符串，然后转换为数字，再和数字进行比较。[1] == 1; /原创 2021-04-07 20:23:44 · 325 阅读 · 0 评论 -
JavaScript高级程序设计第四版第14章DOM阅读笔记
文章目录DOMNode 类型nodeName 与 nodeValue节点关系操纵节点Document 类型文档子节点文档信息定位元素特殊集合文档写入Element 类型HTML 元素DOM文档对象模型（DOM，Document Object Model）是 HTML 和 XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。Node 类型每个节点都有 nodeType 属性，表示该节点的类型。节点类型由定义在 Node 类型上的 12 个数值常原创 2021-04-02 21:33:28 · 187 阅读 · 0 评论 -
面试5 基础内容--Bom、WAI、height:100%不生效、1px边框
BomBom是浏览器对象。(1) location对象location.href-- 返回或设置当前文档的URLlocation.search – 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdulocation.hash – 返回URL#后面的内容，如果没有#，返回空location.host – 返回URL中的域名部分，例如原创 2020-12-01 20:36:24 · 138 阅读 · 0 评论 -
牛客 JavaScript专项练习题+解析 （收藏）
牛客 JavaScript专项练习题+解析 （收藏）单选1 变量提升2 函数优先级3 ES64 正则5 跨域6 angularjs17 页面加载完成前触发事件8 this指向不定1 原生数组函数2 取整3 触发事件4 history单选1 变量提升解析：题目问的是点击按钮后页面上的最终输出结果，所以原来页面上的p标签的1，会被document.write函数输出的内容覆盖。所以没有1。打印a是undefined是因为var a的时候进行了变量提升，但是要执行到那一步才会真的赋值。答案：undef原创 2021-02-01 17:43:31 · 923 阅读 · 0 评论 -
前端图片HTTP请求的各种情况分析
CSS控制前端图片HTTP请求的各种情况示例示例一：隐藏图片示例二：重复图片示例三：重复背景示例四：不存在的元素的背景示例五：隐藏元素的背景示例六：多重背景示例七：hover的背景加载示例八：JS里innerHTML中的图片示例九：图片预加载总结CSS控制前端图片HTTP请求的各种情况示例)示例一：隐藏图片<img src="haorooms.jpg" style="display: none" /> <img src="haorooms2.jpg" style="visibi转载 2021-01-31 21:06:50 · 790 阅读 · 0 评论 -
Js深浅拷贝代码实现
深浅拷贝代码实现深拷贝和浅拷贝概念浅拷贝实现1.Object.assign()2.concat()和slice()深拷贝实现1.JSON.parse(JSON.stringify())2.1.递归实现深拷贝函数2.2.深拷贝函数改进（防止循环递归爆栈）2.3.深拷贝函数最终版3.函数库深拷贝和浅拷贝概念深拷贝和浅拷贝都只针对引用数据类型浅拷贝会对对象逐个成员依次拷贝，但只复制内存地址，而不复制对象本身，新旧对象成员还是共享同一内存；深拷贝会另外创建一个一模一样的对象，新对象跟原对象不共享内存，修改新原创 2021-01-31 16:53:25 · 380 阅读 · 0 评论 -
继承的六种方法的代码实现及优缺点
继承的六种方法的代码实现及优缺点原型链继承构造函数继承组合继承（原型链+构造函数）原型式继承寄生式继承寄生组合式继承原型链继承重点：让新势力的原型等于父类的实例优点：实例可继承的属性有：1、实例的构造函数的属性，2、父类构造函数的属性，3、父类原型的属性（新实例不会继承父类实例的属性）缺点：1、新实例无法向父类构造函数传参；2、继承单一；3、所有新实例都会共享父类的属性（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改）function Person()原创 2020-12-22 21:00:38 · 448 阅读 · 1 评论 -
手动实现promise基础功能代码并测试自己写的promise库是否符合规范
1.下载promises-aplus-testsnpm install -g promises-aplus-tests2.在自定义的promise文件myPromise.js内加入以下代码Promise.defer = Promise.deferred = function (){ let dfd = {} dfd.promie = new Promise((resolve,reject)=>{ dfd.resolve= resolve dfd.r原创 2020-12-16 22:16:46 · 497 阅读 · 0 评论 -
发布订阅模式与观察者模式的简单代码实现及解释
发布订阅模式与观察者模式的代码实例观察者模式观察者模式的实现发布订阅模式发布订阅模式的优点发布订阅模式的缺点发布订阅模式的实现观察者模式VS发布订阅模式观察者模式所谓观察者模式，其实就是为了实现松耦合(loosely coupled)。用《Head First设计模式》里的气象站为例子，每当气象测量数据有更新，changed()方法就会被调用，于是我们可以在changed()方法里面，更新气象仪器上的数据，比如温度、气压等等。但是这样写有个问题，就是如果以后我们想在changed()方法被调用时，更原创 2020-12-04 21:34:52 · 1569 阅读 · 0 评论 -
js和css的加载造成阻塞
总结一些关键点：加载或者执行JS时会阻塞DOM树的解析当DOM被阻塞时（被JS阻止的），若此时刚好有CSS下载执行，那么JS不执行，直到CSS解析完，继续执行JS，解析DOM当DOM未被阻塞时（无JS），不论CSS是否下载执行，直接解析完DOM树。由上得出结论：JS和CSS不同时执行（ps:个人观点，欢迎探讨勘误）JS的加载的并行的，CSS也是DOM的解析是从<html>开始，到</html>结束，所以放在body之后的<script>不会原创 2020-11-15 18:57:36 · 508 阅读 · 0 评论 -
DOM(树)科普学习笔记
DOM(树)全称：Document Object Model常见的DOM类型峰华前端工程师视频：https://www.bilibili.com/video/BV1Ct4y1e7mw原创 2020-11-13 21:02:55 · 240 阅读 · 0 评论 -
将数组不足位数的地方补0（Array.prototype.fill函数实现）
参数用来填充数据：默认0所需长度填充至长度：len起始位置:startfunction fillZero(i,start,len){ if(start>=len) return item.fill(i,start,len)}原创 2020-10-28 19:37:54 · 2824 阅读 · 0 评论 -
立即执行函数的原理
在js中，只有表达式才被执行也就是只要转换成表达式就可以执行(function (){ console.log('0')}())以下代码会报错function fn (){ console.log('0')}()//SyntaxError: Unexpected token )加上一个数学符号就可以将函数声明改成函数表达式+function (){ console.log('0')}()而立即执行函数也就是加上了一对括号()(function (){ console.l原创 2020-10-24 19:18:13 · 203 阅读 · 0 评论 -
Number属性和方法整理（MDN）
NumberJavaScript 的 Number 对象是经过封装的能让你处理数字值的对象。Number 对象由 Number() 构造器创建。JavaScript的Number类型为双精度IEEE 754 64位浮点类型。new Number(value);var a = new Number(‘123’); // a === 123 is falsevar b = Number(‘123’); // b === 123 is truea instanceof Number; // is tru原创 2020-10-18 15:10:41 · 1235 阅读 · 0 评论 -
Math属性和方法整理（MDN）
MathMath 是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。Math 用于 Number 类型。它不支持 BigInt。属性Math.E欧拉常数，也是自然对数的底数，约等于 2.718。Math.LN22 的自然对数，约等于 0.693。Math.LN1010 的自然对数，约等于 2.303。Math.LOG2E以 2 为底的 E 的对数，约等于 1.443。Math.LOG10E以 10 为底的 E 的对数，约等于 0.434。Math.原创 2020-10-18 15:08:48 · 1338 阅读 · 1 评论 -
Map和WeakMap Set和WeakSet详解，属性和方法（MDN）
这里写目录标题MapObjects 和 maps 的比较属性方法WeakMap属性方法Set属性方法WeakSet方法判等MapMap 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。描述：一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个for…of循环在每次迭代后会返回一个形式为[key，value]的数组。键的相等(Key equality)NaN是与 NaN 相等的（虽然 NaN !== NaN），剩下所有其它的值是根据 ==原创 2020-10-18 14:45:42 · 1168 阅读 · 0 评论 -
阻止表单提交默认事件的坑：不能用button标签，要用input标签才能生效
如果想要阻止表单的默认提交事件，有以下几种方法：将<input>标签内按钮类型从type="submit"修改为type=“button”表单内的<button>未指定类型时，默认的类型为submit，可以显式的修改为<button type="button">来阻止表单提交利用preventDefault()方法：function func(event){ event.preventDefault();}<form actio原创 2020-10-17 21:02:47 · 739 阅读 · 0 评论 -
文档对象模型DOM大全 整理(MDN)
DOM概念数据类型Document属性Document 接口继承自 ParentNode 的接口HTMLDocument 的扩展整理编辑暂停于此DocumentOrShadowRoot 包含的属性Event handlersDeprecated propertiesMethodsExtension for HTML documentsMethods included from DocumentOrShadowRootEventsAnimation eventsClipboard eventsDrag &am原创 2020-10-13 21:39:46 · 1445 阅读 · 0 评论 -
Cannot set property ‘dataIndex‘ of undefined 大数据关系图报错，赋予的数据有重复，去重
赋予数据有重复let data = [1,1,1,2,3]//去重data = new Set(data)data = [...data]//[1, 2, 3]参考自：https://blog.youkuaiyun.com/weixin_38098195/article/details/80827926原创 2020-10-06 21:52:11 · 833 阅读 · 0 评论 -
数据处理：变量作为键名（代码）
//待处理数据data = [{houseName: "仲恺路市场", saleCount: 179, longitude: "113.403586328125", latitude: "22.475348549488366"}{houseName: "中南农产品批发市场", saleCount: 67, longitude: "113.35", latitude: "22.35"}{houseName: "佛山市综合批发市场", saleCount: 65, longitude: "113.44",原创 2020-10-06 21:03:19 · 359 阅读 · 0 评论 -
利用全局的fontSize实现适配
var whei = $(window).width() $("html").css({ fontSize: whei / 20 })$(window).resize(function () { var whei = $(window).width() $("html").css({ fontSize: whei / 20 }) });//适配 window.addEventListener(原创 2020-10-06 20:41:24 · 876 阅读 · 0 评论 -
Cannot read property ‘getAttribute‘ of null
报错原因，页面元素还没有渲染出来，就先去获取该元素，所以找不到解决办法，将js的引用写在html之后原创 2020-10-06 19:49:20 · 355 阅读 · 0 评论 -
jq动态添加图片属性，数据
因为类名获取到的是数组，先取第0个元素$('.mag')[0].setAttribute('src',data.url)$('.des')[0].innerText = data[i].summary原创 2020-10-04 13:36:52 · 669 阅读 · 0 评论 -
promise和Event Loop事件循环面试题
版本一：得心应手版考点：eventloop中的执行顺序，宏任务微任务的区别。setTimeout(()=>{ console.log(1) },0)Promise.resolve().then(()=>{ console.log(2) })console.log(3)//3 2 1了解宏任务(marcotask)微任务(microtask)这个是属于Eventloop的问题。main script运行结束后，会有微任务队列和宏任务队列。微任务先执行，之后是宏任务。转载 2020-10-04 11:18:20 · 846 阅读 · 1 评论 -
解决datatables无法改变默认显示页面的坑
$('#tableEquipment').DataTable({"pageLength":5,"lengthMenu": [5,10, 25, 50, 75, 100 ],"lengthChange": true })首先lengthChange设置为true，lengthMenu内放入对应要改变的长度，然后手动进行一次选择，就有效了，然后可以lengthChange设置为false...原创 2020-09-22 21:59:02 · 612 阅读 · 0 评论 -
判断两个数据是否相同，如不同，找出不同点
比较newImageList和originalImageListif( newImageList.sort().toString() !== originalImageList.sort().toString() ){ originalImageList.map(oItem => { let flag = this.newImageList.every(newItem => oItem!==newItem) if(flag){ console.log(oIte原创 2020-09-18 14:33:27 · 641 阅读 · 0 评论 -
js/vue获得用户选择的label和value
value值是可以直接获取，vue通过双向绑定v-model，js或jq事件获取下面获取label的代码，arrUnitList是value和label对应的数组对象数据例子arrUnitList:[{value:'000',label:'ms'},{value:'111',label:'s'}]代码使用说明checkItemName是获取到的value值myUnit = arrUnitList.find(item => item.value === checkItemNam原创 2020-09-17 16:48:26 · 2061 阅读 · 0 评论 -
readOnlyError.js?b1f8:2 Uncaught (in promise) Error: “xxxx“ is read-only
readOnlyError.js?b1f8:2 Uncaught (in promise) Error: “xxxx” is read-only我的出错原因，用const定义了一个要修改的变量，改成let解决原创 2020-09-17 16:27:27 · 4104 阅读 · 0 评论 -
DataTables warning: table id=tableEquipment - Cannot reinitialise DataTable配上代码解决
DataTables warning: table id=tableEquipment - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3一个页面展示多个表格是出现问题加入retrieve: true,配置可以解决tableSell = $('#tableSell').DataTable({ retrieve: true,原创 2020-09-16 21:28:59 · 918 阅读 · 0 评论 -
只使用layui库的时间组件处理
需要引入的j和css可以找到小文件所在位置，就不会占用太多内容原创 2020-09-16 10:49:12 · 143 阅读 · 0 评论 -
百度地图的坑记录
BMapGL和BMap是不同的，BMap更新，需要引入对应文件BMap<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>BMapGL<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥"></scr原创 2020-09-15 19:51:38 · 2592 阅读 · 0 评论 -
给一个ul列表中点击到的li赋予样式，并移除兄弟节点的此样式
<div class="list-group" id="myList"> <a href="#" class="list-group-item list-group-item-action" id = "letActive"> Cras justo odio </a> <a href="#" class="list-group-item list-group-item-action active">Dapibus ac facilisis in</a原创 2020-09-14 22:00:55 · 497 阅读 · 0 评论 -
Cannot set property ‘_DT_CellIndex‘ of undefined
设置属性时候出现越界“aTargets”: [3]，表格没有第四列datatable = $('#tableSell').DataTable({ "aaSorting": [ [0, "desc"] ], //默认第几个排序 "bStateSave": true, //状态保存 "lengthChange": false, "searching": false, "aoColumnDefs": [ //{"bVisibl原创 2020-09-11 18:58:30 · 1902 阅读 · 0 评论 -
计算两个时间之间的差值
function timeAgo(timeA, timeB) { var stamp = new Date(timeA).getTime() - new Date(timeB).getTime(); var time = (stamp / 1000); if(null != time && "" != time) { if(time > 60 && time < 60 * 60) { time = parseInt(time / 60.0)转载 2020-09-08 13:18:58 · 424 阅读 · 0 评论 -
格式化后台传给前台的时间，eg2019-11-24T13:41:03.000+0000，直接可用，vue过滤器
//使用console.log(formatTime('2019-11-24T13:41:03.000+0000'))function formatTime(date){ //date是传入的时间 let d = new Date(date); let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1); let day = d.getDate()<10 ? '原创 2020-08-21 15:43:49 · 298 阅读 · 0 评论 -
ES6模块化导入导出，全部和部分两种方法
全部导入导出法moduleA.js//必须全导出function A1(){}function A2(){ }function A3(){ }//commonjs规范//module.exports = const All = { A1,A2,A3}export default Allmain.js//只能全部导入import All from './module/moduleA'部分导入导出法moduleB.jsexport functio原创 2020-08-01 14:35:19 · 3903 阅读 · 0 评论 -
open with live serve和 open in default brower使用的需要注意路径
open with live serve，是打开本地服务器，所以路径书写的时候./和/是没有区别的open in default brower 是直接本地打开，路径必须是./，否则即/会从根目录下进行读取原创 2020-07-29 21:41:24 · 1517 阅读 · 0 评论 -
解决bug之给input添加回车事件后，内部操作未执行就跳转页面
在form表单里,给input框加回车事件后,本想要获取input框的内容,然后进行跳转,可是并没有跳转而是将input框的内容传到了地址栏当参数,这样就是表单默认提交了。这种问题只出现在form表单里只有一个input框,两个就不默认提交解决办法<input style="display: none;">注意：<input type="hidden">这个写法无效参考自：https://blog.youkuaiyun.com/yc950208/article/details/81原创 2020-07-16 17:43:32 · 286 阅读 · 0 评论 -
对一个列表的内容进行关键字高亮显示
boxArr是对应列表的类名val是关键字function HeightColor(val) { let boxArr = document.getElementsByClassName('title') for (let i = 0; i < boxArr.length; i++) { let arr = boxArr[i].innerHTML.split(val) boxArr[i].innerHTML = arr.join('<span styl原创 2020-07-16 17:19:30 · 350 阅读 · 0 评论 -
Js的次方（幂）表示方法：基数 **指数 或 Math.pow(基数,指数)
Js的次方（幂）表示方法：**或Math.pow()**eg10**3 //10002**3//8Math.pow()egMath.pow(10,3) //1000Math.pow(2,3)//8原创 2020-07-02 21:47:21 · 17237 阅读 · 1 评论