关键词：
在本文中列出了21个值得收藏的Javascript技巧,在实际工作中,如果能适当运用,则大大提高工作效率。
1? Javascript数组转换为CSV格式
首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件。则我们可以使用如下的小技巧，代码如下：
`var` `fruits = [``'apple'``,` `'peaches'``,` `'oranges'``,` `'mangoes'``];`
`var` `str = fruits.valueOf();`输出：apple,peaches,oranges,mangoes
其中，valueOf()方法会将Javascript数组转变为逗号隔开的字符串。要注意的是，如果想不使用逗号分割，比如用｜号分割，则请使用join方法，如下：
`var` `fruits = [``'apple'``,` `'peaches'``,` `'oranges'``,` `'mangoes'``];`
`var` `str = fruits.join(``"|"``);`
输出： apple|peaches|oranges|mangoes
2 将CSV格式重新转换回Javscript数组
那么如何将一个CSV格式的字符串转变回Javascript数组呢？可以使用split()方法，就可以使用任何指定的字符去分隔，代码如下：
`var` `str =` `"apple, peaches, oranges, mangoes"``;`
`var` `fruitsArray = str.split(``","``);`
输出 fruitsArray[0]: apple
3 根据索引移除数组中的某个元素
假如需要从Javascript数组中移除某个元素，可以使用splice方法，该方法将根据传入参数n，移除数组中移除第n个元素(Javascript数组中从第0位开始计算)。
`function` `removeByIndex(arr, index) `
`arr.splice(index, 1);`
``
`test =` `new` `Array();`
`test[0] =` `'Apple'``;`
`test[1] =` `'Ball'``;`
`test[2] =` `'Cat'``;`
`test[3] =` `'Dog'``;`
`alert(``"Array before removing elements: "``+test);`
`removeByIndex(test, 2);`
`alert(``"Array after removing elements: "``+test);`则最后输出的为Apple,Ball,Dog
4 根据元素的值移除数组元素中的值
下面这个技巧是很实用的，是根据给定的值去删除数组中的元素，代码如下：
`function` `removeByValue(arr, val) `
`for``(``var` `i=0; i<arr.length; i++) `
`if``(arr[i] == val) `
`arr.splice(i, 1);`
`break``;`
``
``
``
`var` `somearray = [``"mon"``,` `"tue"``,` `"wed"``,` `"thur"``]`
`removeByValue(somearray,` `"tue"``);`
`//somearray 将会有的元素是 "mon", "wed", "thur"`
当然，更好的方式是使用prototype的方法去实现，如下代码：
`Array.prototype.removeByValue =` `function``(val) `
`for``(``var` `i=0; i<``this``.length; i++) `
`if``(``this``[i] == val) `
`this``.splice(i, 1);`
`break``;`
``
``
``
`//..`
`var` `somearray = [``"mon"``,` `"tue"``,` `"wed"``,` `"thur"``]`
`somearray.removeByValue(``"tue"``);`
5 通过字符串指定的方式动态调用某个方法
有的时候，需要在运行时，动态调用某个已经存在的方法，并为其传入参数。这个如何实现呢？下面的代码可以：
`var` `strFun =` `"someFunction"``;` `//someFunction 为已经定义的方法名`
`var` `strParam =` `"this is the parameter"``;` `//要传入方法的参数`
`var` `fn = window[strFun];`
`//调用方法传入参数`
`fn(strParam);`
6 产生1到N的随机数
`var` `random = Math.floor(Math.random() * N + 1);`
`//产生1到10之间的随机数`
`var` `random = Math.floor(Math.random() * 10 + 1);`
`//产生1到100之间的随机数`
`var` `random = Math.floor(Math.random() * 100 + 1);`
7 捕捉浏览器关闭的事件
我们经常希望在用户关闭浏览器的时候，提示用户要保存尚未保存的东西，则下面的这个Javascript技巧是十分有用的，代码如下：
`<script language=``"javascript"``>`
`function` `fnUnloadHandler() `
`alert(``"Unload event.. Do something to invalidate users session.."``);`
``
`</script>`
`<body onbeforeunload=``"fnUnloadHandler()"``>`
`………`
`</body>`
就是编写onbeforeunload()事件的代码即可
8 ?检查是否按了回退键
同样，可以检查用户是否按了回退键，代码如下：
`window.onbeforeunload =` `function``() `
`return` `"You work will be lost."``;`
`;`
9? 检查表单数据是否改变
有的时候，需要检查用户是否修改了一个表单中的内容，则可以使用下面的技巧，其中如果修改了表单的内容则返回true，没修改表单的内容则返回false。代码如下：
`function` `formIsDirty(form) `
`for` `(``var` `i = 0; i < form.elements.length; i++) `
`var` `element = form.elements[i];`
`var` `type = element.type;`
`if` `(type ==` `"checkbox"` `|| type ==` `"radio"``) `
`if` `(element.checked != element.defaultChecked) `
`return` `true``;`
``
``
`else` `if` `(type ==` `"hidden"` `|| type ==` `"password"` `||`
`type ==` `"text"` `|| type ==` `"textarea"``) `
`if` `(element.value != element.defaultValue) `
`return` `true``;`
``
``
`else` `if` `(type ==` `"select-one"` `|| type ==` `"select-multiple"``) `
`for` `(``var` `j = 0; j < element.options.length; j++) `
`if` `(element.options[j].selected !=`
`element.options[j].defaultSelected) `
`return` `true``;`
``
``
``
``
`return` `false``;`
``
`window.onbeforeunload =` `function``(e) `
`e = e || window.event;?`
`if` `(formIsDirty(document.forms[``"someForm"``])) `
`// IE 和 Firefox`
`if` `(e) `
`e.returnValue =` `"You have unsaved changes."``;`
``
`// Safari 浏览器`
`return` `"You have unsaved changes."``;`
``
`;`
10? 完全禁止使用后退键
下面的技巧放在页面中，则可以防止用户点后退键，这在一些情况下是需要的。代码如下：
`<SCRIPT type=``"text/javascript"``>`
`window.history.forward();`
`function` `noBack() window.history.forward(); `
`</SCRIPT>`
`</HEAD>`
`<BODY onload=``"noBack();"`
`onpageshow=``"if (event.persisted) noBack();"` `onunload=``""``>`
11 删除用户多选框中选择的项目
下面提供的技巧，是当用户在下拉框多选项目的时候，当点删除的时候，可以一次删除它们，代码如下：
`function` `selectBoxRemove(sourceID) `
`//获得listbox的id`
`var` `src = document.getElementById(sourceID);`
`//循环listbox`
`for``(``var` `count= src.options.length-1; count >= 0; count--) `
`//如果找到要删除的选项，则删除`
`if``(src.options[count].selected ==` `true``) `
`try` ``
`src.remove(count,` `null``);`
`` `catch``(error) `
`src.remove(count);`
``
``
``
``12? Listbox中的全选和非全选
如果对于指定的listbox，下面的方法可以根据用户的需要，传入true或false,分别代表是全选listbox中的所有项目还是非全选所有项目，代码如下：
`function` `listboxSelectDeselect(listID, isSelect) `
`var` `listbox = document.getElementById(listID);`
`for``(``var` `count=0; count < listbox.options.length; count++) `
`listbox.options[count].selected = isSelect;`
``
`?`
13 在Listbox中项目的上下移动
下面的代码，给出了在一个listbox中如何上下移动项目
`function` `listbox_move(listID, direction) `
`var` `listbox = document.getElementById(listID);`
`var` `selIndex = listbox.selectedIndex;`
`if``(-1 == selIndex) `
`alert(``"Please select an option to move."``);`
`return``;`
``
`var` `increment = -1;`
`if``(direction ==` `'up'``)`
`increment = -1;`
`else`
`increment = 1;`
`if``((selIndex + increment) < 0 ||`
`(selIndex + increment) > (listbox.options.length-1)) `
`return``;`
``
`var` `selValue = listbox.options[selIndex].value;`
`var` `selText = listbox.options[selIndex].text;`
`listbox.options[selIndex].value = listbox.options[selIndex + increment].value`
`listbox.options[selIndex].text = listbox.options[selIndex + increment].text`
`listbox.options[selIndex + increment].value = selValue;`
`listbox.options[selIndex + increment].text = selText;`
`listbox.selectedIndex = selIndex + increment;`
``
`//..`
`//..`
`listbox_move(``'countryList'``,` `'up'``);` `//move up the selected option`
`listbox_move(``'countryList'``,` `'down'``);` `//move down the selected option`14 在两个不同的Listbox中移动项目
如果在两个不同的Listbox中，经常需要在左边的一个Listbox中移动项目到另外一个Listbox中去，下面是相关代码：
`function` `listbox_moveacross(sourceID, destID) `
`var` `src = document.getElementById(sourceID);`
`var` `dest = document.getElementById(destID);`
`for``(``var` `count=0; count < src.options.length; count++) `
`if``(src.options[count].selected ==` `true``) `
`var` `option = src.options[count];`
`var` `newOption = document.createElement(``"option"``);`
`newOption.value = option.value;`
`newOption.text = option.text;`
`newOption.selected =` `true``;`
`try` ``
`dest.add(newOption,` `null``);` `//Standard`
`src.remove(count,` `null``);`
```catch``(error) `
`dest.add(newOption);` `// IE only`
`src.remove(count);`
``
`count--;`
``
``
``
`//..`
`//..`
`listbox_moveacross(``'countryList'``,` `'selectedCountryList'``);`15 快速初始化Javscript数组
下面的方法，给出了一种快速初始化Javscript数组的方法，代码如下：
`var` `numbers = [];`
`for``(``var` `i=1; numbers.push(i++)<100;);`
`//numbers = [0,1,2,3 ... 100]`
使用的是数组的push方法
16 截取指定位数的小数
如果要截取小数后的指定位数，可以使用toFixed方法，比如：
`var num = 2.443242342;`
`alert(num.toFixed(2));`
而使用toPrecision(x)则提供指定位数的精度，这里的x是全部的位数，如：
`num = 500.2349;`
`result = num.toPrecision(4);` `//输出500.2`
17 检查字符串中是否包含其他字符串
下面的代码中，可以实现检查某个字符串中是否包含其他字符串。代码如下：
`if` `(!Array.prototype.indexOf) `
`Array.prototype.indexOf =` `function``(obj, start) `
`for` `(``var` `i = (start || 0), j =` `this``.length; i < j; i++) `
`if` `(``this``[i] === obj) ` `return` `i; `
``
`return` `-1;`
``
``
`if` `(!String.prototype.contains) `
`String.prototype.contains =` `function` `(arg) `
`return` `!!~``this``.indexOf(arg);`
`;`
``
在上面的代码中重写了indexOf方法并定义了contains方法，使用的方法如下：
`var` `hay =` `"a quick brown fox jumps over lazy dog"``;`
`var` `needle =` `"jumps"``;`
`alert(hay.contains(needle));`
18? 去掉Javscript数组中的重复元素
下面的代码可以去掉Javascript数组中的重复元素，如下：
`function` `removeDuplicates(arr) `
`var` `temp = ;`
`for` `(``var` `i = 0; i < arr.length; i++)`
`temp[arr[i]] =` `true``;`
`var` `r = [];`
`for` `(``var` `k` `in` `temp)`
`r.push(k);`
`return` `r;`
``
`//用法`
`var` `fruits = [``'apple'``,` `'orange'``,` `'peach'``,` `'apple'``,` `'strawberry'``,` `'orange'``];`
`var` `uniquefruits = removeDuplicates(fruits);`
`//输出 uniquefruits ['apple', 'orange', 'peach', 'strawberry'];`
19? 去掉String中的多余空格
下面的代码会为String增加一个trim()方法，代码如下：
`if` `(!String.prototype.trim) `
`String.prototype.trim=``function``() `
`return` `this``.replace(/^s+|s+$/g,` `''``);`
`;`
``
`//用法`
`var` `str =` `"? some string??? "``;`
`str.trim();`
`//输出 str = "some string"`20 Javascript中的重定向
在Javascript中，可以实现重定向，方法如下：
`window.location.href = <a href=``"[http://viralpatel.net](http://viralpatel.net/)"``>[http://viralpatel.net](http://viralpatel.net/)</a>;`21 对URL进行编码
有的时候，需要对URL中的传递的进行编码，方法如下：
`var` `myOtherUrl =`
`"[http://example.com/index.html?url=](http://example.com/index.html?url=)"` `+ encodeURIComponent(myUrl);`原文链接：https://www.jianshu.com/p/937...
10个值得收藏的chatgpt辅助编程技巧(代码片段)
在我们开始之前，你必须先了解编程语言，然后才能相信ChatGPT抛给你的任何东西。我必须明确这一点，因为许多误入歧途的绵羊被告知ChatGPT是新的圣杯，开发人员将被淘汰。推荐：用NSDT场景设计器快速搭建3D... 查看详情
开挂了！这5个word技巧真的是超级实用，值得收藏！
在实际工作中，一些小技巧往往是提高我们工作效率的重要因素，今天给大家分享5个实用的Word技巧，让你的工作效率翻倍。 1、快速选中图形如何快速删除文档中的图形呢？点击开始——编辑——选择——选择对象，之后再... 查看详情
javascript之爆肝汇总万字长文❤值得收藏(代码片段)
目录一、JavaScript简单入门1.1.一门客户端脚本语言1.2.JavaScript发展史1.3.JavaScript优势1.4.JavaScript引用1.5.JavaScript输出的几种方式1.6.JavaScript有哪些关键字1.7.JavaScript注释1.8.JavaScript常见标识符有哪些1.9.JavaScript常见HTML事件有哪些1.10.Jav... 查看详情
收藏喜+1！值得使用的100个python小技巧
目前Python可以说是非常流行，在目前的编程语言中，Python的抽象程度是最高的，是最接近自然语言的，很容易上手。你可以用它来完成很多任务，比如数据科学、机器学习、Web开发、脚本编写、自动化等。下... 查看详情
java8stream的这些开发技巧，你值得好好收藏(代码片段)
????????关注后回复 “进群” ，拉你进程序员交流群????????作者丨因为热爱所以坚持ing来源丨苏三说技术如果有些朋友以前没有使用过java8stream这种链式编程方式做开发，想学习一下。如果有些朋友只学习了一部分用法... 查看详情
15个pythonic的代码示例(值得收藏)(代码片段)
01.变量交换Badtmp=aa=bb=tmpPythonica,b=b,a02.列表推导Badmy_list=[]foriinrange(10):my_list.append(i*2)Pythonicmy_list=[i*2foriinrange(10)]03.单行表达式虽然列表推导式由于其简洁性及表达性，被广受推崇。但是有许多可以写成单行的表达式，并不是好的... 查看详情
速度收藏20个常用的python技巧，太赞啦(代码片段)
Python的可读性和简单性是其广受欢迎的两大原因，本文介绍20个常用的Python技巧来提高代码的可读性，并能帮助你节省大量时间，下面的技巧将在你的日常编码练习中非常实用。1.字符串反转使用Python切片反转字符串&#... 查看详情
推荐3个特别实用的python模块，值得收藏(代码片段)
大家好，今天给大家介绍3个特别好用的Python模块，知道的人可能不多，但是特别的好用。PsutilPendulumPyfigletPsutilPython当中的Psutil模块是个跨平台库，它能够轻松获取系统运行的进程和系统利用率，包括CPU、内存... 查看详情
阿里的35个java代码优化细节，值得收藏！(代码片段)
点击上方关注“终端研发部”设为“星标”，和你一起掌握更多数据库知识转自：程序员追风 www.jianshu.com/p/6e472304b5ac前言代码优化，一个很重要的课题。可能有些人觉得没用，一些细小的地方有什么好修改的ÿ... 查看详情
作为python开发者，这21个linux命令值得去学习(代码片段)
作为Python程序开发人员，因工作的需求，有时我们也需要学习一下Linux命令，掌握这些命令，工作上会事半功倍，提供工作效率。内容较多，建议收藏、关注、喜欢点赞支持。文末有技术交流群，欢迎... 查看详情
js常用代码片段-127个常用罗列-值得收藏(代码片段)
1、all如果数组所有元素满足函数条件，则返回true。调用时，如果省略第二个参数，则默认传递布尔值。constall=(arr,fn=Boolean)=>arr.every(fn);all([4,2,3],x=>x>1);//trueall([1,2,3]);//true2、allEqual判断数组中的元 查看详情
41个web开发者必须收藏的javascript实用技巧
1.将彻底屏蔽鼠标右键oncontextmenu=”window.event.returnValue=false”<tableborderoncontextmenu=return(false)><td>no</table>可用于Table2.取消选取、防止复制<bodyonselectstart=”returnfalse”>3.JS不允许粘贴onpa 查看详情
值得收藏面试会用到的十个常用的数组方法js实现(代码片段)
【手撕代码系列】之十个常用的数组方法JS实现（一）🚀通俗易懂的实现方式，帮助我们认识相应的方法📚收藏本系列，基础进阶两不误🎉本系列持续更新，欢迎查看线上地址写在前面代码实现系... 查看详情
建议收藏17个xml布局小技巧(代码片段)
前言我们开发时接触最多的就是xml布局了，还记得我们写Android的第一个HelloWorld吗，就是通过activity_main.xml显示出来的。虽然xml写的很多，而且也没有什么技术难度，但是，这也往往是我们最容易忽略的地方... 查看详情
原来java注解只是个标记，没什么本领，一文精通，值得收藏！(代码片段)
前言java里有个神奇的存在，注解，就是那个天天@别人的家伙，它到底是何方神圣啊？请先给二当家的来个一键三连，然后接着耐心的读下去吧，多谢。本文由二当家的白帽子https://le-yi.blog.csdn.net/博客... 查看详情
原来java注解只是个标记，没什么本领，一文精通，值得收藏！(代码片段)
前言java里有个神奇的存在，注解，就是那个天天@别人的家伙，它到底是何方神圣啊？请先给二当家的来个一键三连，然后接着耐心的读下去吧，多谢。本文由二当家的白帽子https://le-yi.blog.csdn.net/博客... 查看详情
这28个值得收藏的shell脚本能让你每天摸鱼近7个小时！(代码片段)
前言：在日常工作中，但凡你要跟服务器打交道，一定离不开的神器便是shell脚本，shell脚本可以极大的提高工程师的工作效率，避免一些认为因素导致的手误。那么今天圈圈就给大家分享28个shell脚本，希... 查看详情
干货5个ps平面设计值得收藏的设计工具技巧
【干货】5个PS平面设计值得收藏的设计工具技巧很多小伙伴从小白学PS学了大半年，恐怕还对这款软件不温不火的，平常的一些操作也是中规中矩，非常的木讷，其实啊，很多时候我们找的素材不是恰如其好，你换个小技巧，没... 查看详情