七个开法者经常忽略或误用的JavaScript基本知识
七个开法者经常忽略或误用的JavaScript基本知识
翻译自 http://tech.pro/tutorial/1453/7-javascript-basics-many-developers-aren-t-using-properly ,我觉得4、5、6条还是蛮有用的哈。
1. String.prototype.replace: /g and /i 标识
让很多新手疑惑的是,JavaScript里的字符串的replace方法不会替换所有匹配的字符,而是只替换第一次匹配的字符。当然熟悉JavaScript的老手知道我们需要一个正则表达式和一个/g标识。
// 错误的用法
str ="David is an Arsenal fan, which means David is great";
str.replace("David","Darren");// "Darren is an Arsenal fan, which means David is great"
// 想要的效果
str.replace(/David/g,"Darren");// "Darren is an Arsenal fan, which means Darren is great"
另一种常犯的错误是当字符串大小写不敏感时不使用 /i 标志来匹配
str.replace(/david/gi,"Darren")// "Darren will always be an Arsenal fan, which means Darren will always be great"
每一个JavaScript开发者都被每一个标志坑过,所以要保证在适合的时候使用这些标志。
2. Array-Like Objects 和 Array.prototype.slice
Array的slice方法主要用来提取数组中的一部分,很多开发者不知道slice方法可以将类数组的对象转换成真正的数组,比如 arguments,NodeLists。
var nodesArr =Array.prototype.slice.call(document.querySelectorAll("div"));// "true" array of DIVs var argsArr =Array.prototype.slice.call(arguments);// changes arguments to "true" array
你甚至可以用slice克隆一个数组:
var clone = myArray.slice(0);// naive clone
Array.prototype.slice
绝对是JavaScript世界中的精华,即时JS熟手也不一定知道它全部的威力。
3. Array.prototype.sort
Array sort
方法被广泛使用,很多开发者以为sort方法做这样的事情:
[1,3,9,2].sort();// Returns: [1, 2, 3, 9]
这样是对的,但是sort有更强大的用法,像这样:
[
{ name: "Robin Van PurseStrings", age: 30 },
{ name: "Theo Walcott", age: 24 },
{ name: "Bacary Sagna", age: 28 }
].sort(function(obj1, obj2) {
// Ascending: first age less than the previous
return obj1.age - obj2.age;
});
// Returns:
// [
// { name: "Theo Walcott", age: 24 },
// { name: "Bacary Sagna", age: 28 },
// { name: "Robin Van PurseStrings", age: 30 }
// ]
4. Array 长度截断
没有一个开发者没被JavaScript的传递对象引用的特性坑过,常常这样来清空一个数组,但却错误的创建了一个新的数组。
var myArray = yourArray =[1,2,3];// :(
myArray =[];// "yourArray" 还是 [1, 2, 3]
// 正确的方法,保持引用
myArray.length =0;// "yourArray" and "myArray" 都变成了 []
5. push方法来合并数组
我在第二条展示了Array的slice方法的强大能力,所以push方法有这样的能力你也不会见怪了。这次我们用push方法来合并数组
var mergeTo =[4,5,6];
var mergeFrom =[7,8,9];
Array.prototype.push.apply(mergeTo, mergeFrom);
mergeTo;// is: [4, 5, 6, 7, 8, 9]
6. 高效的特性检测或者属性检测
我们常常这样来检测一个浏览器的特性:
if(navigator.geolocation){
// Do some stuff
}
当然,这能正常工作,但它不是很高效。因为对象的方法检测在浏览器中可能会导致分配资源,上面的代码在某些浏览器曾导致内存泄漏。更好的方法检测对象的key:
if("geolocation"in navigator){
// Do some stuff
}
这样的key检测使用简单并且避免了很多问题,比如一个属性的值是false,那么你的检测会失败,即使key存在。
7. Event preventDefault 和 stopPropagation
当元素被点击时(比如链接),我们经常触发自己的函数。显然,我们不希望浏览器继续访问这个链接,所以我们使用JavaScript库的Event.stop方法:
$("a.trigger").on("click",function(e){
e.stop();
// Do more stuff
});
这个方法的问题在于它不仅阻止了浏览器的默认行为,而且阻止了事件冒泡。也就是说,其他的事件监听器不会监听到这个事件。
所以最好是直接使用preventDefault方法。
一些开发者可能会说:“我知道这些!”,但是他们也常常犯这样的错误,所以不要忽略这些小的细节,它们可能造成大的差异。
附:preventDefault与return false 的区别 http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false
七个开法者经常忽略或误用的JavaScript基本知识的更多相关文章
- FreeSql (七)插入数据时忽略列
var connstr = "Data Source=127.0.0.1;Port=3306;User ID=root;Password=root;" + "Initia ...
- JavaScript开发者常忽略或误用的七个基础知识点
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
- JavaScript 开发者经常忽略或误用的七个基础知识点(转)
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
- JavaScript 开发者经常忽略或误用的七个基础知识点
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
- (转)JavaScript 开发者经常忽略或误用的七个基础知识点
英文原文:7 JavaScript Basics Many Developers Aren't Using (Properly) JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和 ...
- 七牛开发文档php
http://developer.qiniu.com/docs/v6/sdk/php-sdk.html#overview http://developer.qiniu.com/docs/v6/sdk/ ...
- javaScript 基础知识汇总(七)
1.数组 特点:数组是可以存储有序集合的对象. 声明: let arr = new Array(); let arr=[]; 大多数情况下我们使用第二种. let fruits = [" ...
- Laravel-admin 七牛云上传文件到七牛云出现卡顿失败情况
由于所做项目需要管理后台众多,所以选择了Laravel-admin后台框架进行开发.节省了权限控制以及页面处理等问题的时间 Laravel-admin文档地址 http://laravel-admin ...
- 阿里云CentOS自动备份MySql 8.0并上传至七牛云
本文主要介绍一下阿里云CentOS7下如何对MySql 8.0数据库进行自动备份,并使用.NET Core 将备份文件上传至七牛云存储上,并对整个过程所踩的坑加以记录. 环境.工具.准备工作 服务器: ...
随机推荐
- MSSQL发现第五到数据的第十
第二十数据查询数据库,第十条数据,两起案件: 1,ID是连接的,当然这样的情况比較好查.直接SELECT就能够了.取ID大于5小于10就能够了, 这样的情况比較少. 2.ID不是连接的.假设要取第五条 ...
- CSS3+HTML5特效3 - 纵向无缝滚动
老惯例,先看例子. This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. ...
- E: 无法获取锁 /var/lib/apt/lists/lock - open (11: Resource temporarily unavailable)解决方法
/********************************************************************* * Author : Samson * Date ...
- 关于WebBrowser(浏览器)控件的调用
原文:关于WebBrowser(浏览器)控件的调用 在VS.NET2002和2003中,要应用WebBrowser(浏览器)控件,得用InterOp,刚开始用的时候很正常,后来不知道为什么窗口一打开就 ...
- Java笔试题集锦
Java笔试题集锦 1.MVC的各个部分都有那些技术来实现?怎样实现? 答:MVC是Model-View-Controller的简写."Model" 代表的是应用的业务逻辑(通过J ...
- ftk学习记录(IME文章)
[声明:版权全部,欢迎转载.请勿用于商业用途. 联系信箱:feixiaoxing @163.com] 前面说的是全屏设置,还是请大家看一下效果图. watermark/2/text/aHR0cDovL ...
- phpStorm+XDebug+chrome 配置
运行环境: phpStorm 10.0.1 PHP 5.6.24 VC11 x86 Thread Safe Xdebug 2.4.1(PHP 5.6 VC11 TS (32 bit) 1. PHP安装 ...
- MAC中在eclipse luna上搭建移动平台自动化测试框架(UIAutomator/Appium/Robotium/MonkeyRunner)关键点记录
这几天因为原来在用的hp laptop的电池坏掉了,机器一不小心就断电,所以只能花时间在自己的macbook pro上重新搭建整套环境,大家都知道搭建环境是个很琐碎需要耐心的事情,特别是当你搭建的安卓 ...
- 轻型ORM--Dapper
分享一个轻型ORM--Dapper选用理由 推荐理由:Dapper只有一个代码文件,完全开源,你可以放在项目里的任何位置,来实现数据到对象的ORM操作,体积小速度快:) Google Code下载地址 ...
- Tomcat集群+Nginx+Redis服务搭建
由于公司新业务突然上来了,单个Tomcat实例已经不能满足业务发展的需要了,只能通过搭建集群来解决问题了.所以就出现了下面的内容: 1.Redis保存Session信息 为了保存Session信息在集 ...