javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值 event.returnValue 鼠标位置 event.x…

三元操作符 如果使用if...else语句,那么这是一个很好节省代码的方式. Longhand: const x = 20; let answer; if (x > 10) { answer = 'is greater'; } else { answer = 'is lesser'; } Shorthand: const answer = x > 10 ? 'is greater' : 'is lesser';const big = x > 10 ? " greater 10&…

这篇文章适合任何一位基于JavaScript开发的开发者.我写这篇文章主要涉及JavaScript中一些简写的代码,帮助大家更好理解一些JavaScript的基础.希望这些代码能从不同的角度帮助你更好的理解JavaScript. 三元操作符 如果使用if...else语句,那么这是一个很好节省代码的方式. Longhand: const x = 20; let answer; if (x > 10) { answer = 'is greater'; } else { answer = 'is l…

1 – 使用===,而不是＝＝ ==(或!=)操作符在需要的时候会自动执行类型转换.===(或!==)操作不会执行任何转换.它将比较值和类型,而且在速度上也被认为优于==. 2 – 使用闭包实现私有变量 function fn1(){ var pro1="a"; this.fn2=function(){return pro1;} } 3- 从数组中获取一个随机项 <script> var items = [12, 548 , 'a' , 2 , 5478 , 'foo' ,…

'debugger;' 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断点.你也可以在一些条件控制中插入该调试语句,譬如: if (thisThing) { debugger; } 将Objects以表格形式展示 有时候我们需要看一些复杂的对象的详细信息,最简单的方法就是用console.log然后展示成一个列表状,上下滚动进行浏览.不过似乎用console.table…

记得给师哥师姐測试考试系统的时候,看到他们的考试页面能够实现隐藏左边的考生信息部分,当时认为好高大上.好人性化. 如今学了javascript,我也能实现这个功能了,以下来显摆一下. 1.页面设计: (1).html代码: <title>js分栏</title> <style type="text/css"> .alignment{ text-align: center; } </style> </head> <scri…

1.‘debugger;’ 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断点.你也可以在一些条件控制中插入该调试语句,譬如: if (thisThing) {    debugger; } 2.将Objects以表格形式展示 有时候我们需要看一些复杂的对象的详细信息,最简单的方法就是用console.log然后展示成一个列表状,上下滚动进行浏览.不过似乎用consol…

1.变量转换 看起来很简单,但据我所看到的,使用构造函数,像Array()或者Number()来进行变量转换是常用的做法.始终使用原始数据类型(有时也称为字面量)来转换变量,这种没有任何额外的影响的做法反而效率更高. var myVar = "3.14159", str = ""+ myVar,// to string int = ~~myVar, // to integer float = 1*myVar, // to float bool = !!myVar,…

‘debugger;’ 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者Java里面打断点.你也可以在一些条件控制中插入该调试语句,譬如: if (thisThing) { debugger; } 将Objects以表格形式展示 有时候我们需要看一些复杂的对象的详细信息,最简单的方法就是用console.log然后展示成一个列表状,上下滚动进行浏览.不过似乎用console.table…

1. 将彻底屏蔽鼠标右键 oncontextmenu="window.event.returnValue=false" < table border oncontextmenu=return(false)>< td>no< /table> 可用于 Table 2. 取消选取.防止复制 < body onselectstart="return false"> 3.JS不允许粘贴 onpaste="return…

1.获取访问地址URL的参数 <script type="text/javascript"> var param = ""; var nowUrl = window.location.href; if (nowUrl.lastIndexOf("?") != -1) { param = nowUrl.substring(nowUrl.lastIndexOf("?")); } window.onload = funct…

1.使用var声明变量 如果给一个没有声明的变量赋值,默认会作为一个全局变量(即使在函数内赋值).要尽量避免不必要的全局变量. 2.行尾使用分号 虽然JavaScript允许省略行尾的分号,但是有时不注意的省略,会导致不必要的错误.建议在可用可不用行尾分号的地方加上分号. 3.获取指定范围内的随机数 var getRandom = function(max, min) { min = arguments[1] || 0; return Math.floor(Math.random() * (ma…

原文:45 Useful JavaScript Tips, Tricks and Best Practices作者:Saad Mousliki 在这篇文章里,我将分享一些JavaScript的技巧.秘诀和最佳实践,除了少数几个外,不管是浏览器的JavaScript引擎,还是服务器端JavaScript解释器,均适用. 1.首次为变量赋值时务必使用var关键字变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. 2.使用===取代====和!=操作符会在需要的情况下自动…

20160314知识点的补充:a-1:最原始的操作要比函数调用快 <script type="text/javascript"> var min = Math.min(1,6,9,0,3); alert(min); var arr = ['23',"A",5]; arr[arr.length] = min; // arr.push(min); alert(arr); </script> 1.首次为变量赋值时务必使用var关键字 变量没有声明而…

一.中括号[]里面的特殊字符是不用转义的,例如[/].[.].[*].[?].[+]都是可以直接匹配对应的字符\ . *?+.下面是测试结果: 所以,/[\d.]/这个正则表达式实际上是匹配数字字符或者字符".",作用等同于/[\d\.]/ 二.match().exec()和test()的区别 1. regexp.test() test() 方法执行一个检索,用来查看正则表达式与指定的字符串是否匹配.返回 true 或 false. /in[a-z]/g.test("ing&…

面试神器之数组去重 const a = [...new Set([1, 2, 3, 3])] >> [1, 2, 3] 操作数组担心 falsy 值? const res = myArray.filter(Boolean).map( // todo ) 生成一个真正的空对象 const o = Object.create(null) // o.__proto__ === "undefined" // 对象 o 不再含有任何属性 合并对象 const a = {m: 1, n…

按位取反 ~a 即:返回 -(a+1),会去掉小数点. let a = 3.14; let b = ~a; //b = -(3.14+1) 取整 为-4: let c = ~b; //c = -(-4+1) 为3: 所以,可以直接使用两次按位取反,效果同parseInt(a ) === ~~a; 2.使用ES6的et数据结构来去重数组. Set集和,是一种类数组,且没有重复值. 利用Set没有重复值,且可以和数组之间相互转化. let arr = [1,1,1,2,3,4,5,2,3]; let…

特性检测而非浏览器检测 因为某某特性某浏览器不支持,我们经常的做法是在代码中直接先做浏览器判断如: 1 if(Broswer.isFirfox){ 2     //do something 3 } 其实这样做是不科学的,因为很可以其它浏览器上可以支持你要用的特性,所以,比较好的做法为是直接做特性判断.如: 1 if(window.localStorage){ 2     //使用本地存储功能 3 } 使用方括号来访问属性或方法 这一点到不是强制的,只不过如果使用方括号来访问可以享受一些动态特性带…

总结一些能够提高开发效率的JS技巧 1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的,没有重复的值.结合扩展运算符(...)我们可以创建一个新的数组,达到过滤原数组重复值的功能. const array2 = [1, 2, 3, 3, 5, 5, 1]; const uniqueArray = [...new Set(array2)]; console.log(uniqueArray); // [1, 2, 3, 5] 2.转换Number类型 let test…

日历 创建过去七天的数组,如果将代码中的减号换成加号,你将得到未来7天的数组集合 // 创建过去七天的数组 [...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days)); 生成随机ID 在原型设计时经常使用的创建ID功能.但是我在实际项目中看到有人使用它.其实这并不安全 // 生成长度为11的随机字母数字字符串 Math.random().toString(36).substring(2); // hg7znok…

在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: func…

在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: func…

12个非常实用的JavaScript小技巧 在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之…

任何一门技术在实际中都会有一些属于自己的小技巧.同样的,在使用JavaScript时也有一些自己的小技巧,只不过很多时候有可能容易被大家忽略.而在互联网上,时不时的有很多同行朋友会总结(或收集)一些这方面的小技巧.作为一位JavaScript的菜鸟级的同学,更应该要留意这些小技巧,因为这些小技巧可以在实际业务的开发中帮助我们解决问题,而且会很容易的解决问题.在这篇文章中,会整理一些大家熟悉或不熟悉的有关于JavaScript的小技巧. 数组 先来看使用数组中常用的一些小技巧. 数组去重 ES6提…

---恢复内容开始--- 本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数. 一.串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩的网页.在这一部分里,我们将介绍到如何使用与串对象有关的方法和属性. 1.串对象的length属性 串对象仅有一个属性length,这个属性值表示这个串所包括字符的相对数目.语法为: stringName.length 2.串对象的方法 JavaScript提供了多个串方法以帮助控制显示信息.串方法…

后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址: 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第二篇地址:( 译.持续更新 ) JavaScript 上分小技巧(二) 第三篇地址:( 译.持续更新 ) JavaScript 上分小技巧(三) #59 - ES6,var vs let var关键字定义的变量根据定义的环境用于function内,function外或者全局:而let定义的变量只用于"块"范围. function va…

最近家里杂事较多,自学时间实在少的可怜,所以都在空闲时间看看老外写的内容,学习之外顺便翻译分享~等学习的时间充足些再写写自己的一些学习内容和知识点分析(最近有在接触的:复习(C#,SQL).(学习)TypeScript,(基础操作)MongoDB.TypeScript之后入手AngularJs 2.0) 后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址: 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第二篇地址:( 译.持续更新 ) Java…

考虑到文章过长,不便于阅读,这里分出第二篇,如有后续,每15个知识点分为一篇... 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第三篇地址:( 译.持续更新 ) JavaScript 上分小技巧(三) 第四篇地址:( 译.持续更新 ) JavaScript 上分小技巧(四) #30 - 将true的/false的值转换成boolean类型你可以通过!!操作将为true/为false的值转换为boolean类型. !!"" // false !!0 // f…

感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅.戳这里:原文 能够为大家提供这些简短而实用的JavaScript技巧来提高大家编程能力,这对于我来说是件很开心的事.每天仅花上不到2分钟的时间中,你将可以读遍JavaScript这门可怕的语言所呈现给我们的特性:performance(性能), conventions(协议), hacks(代码h…

JavaScript刷新页面的方法 1    history.go(0) 去指定的某页 2    window.location.reload()刷新当前页面 window.location.reload(true) 在实际应用的时候,重新刷新页面的时候,我们通常使用: location.reload() 或者是 history.go(0) 来做 3    location=location 4    location.assign(location) 加载一个新的文档 5    documen…