JavaScript 本质上是种简单的语言,在其之上发展出了一些智能、灵活的模式,我们将这些模式融入了 JavaScript 框架中,来帮助 Web 应用的开发。但是许多刚入门的开发者太依赖框架,忽视了一些非常有用的 JavaScript 技巧,以下就列出其中的 7 个,用这些技巧来处理一些基本任务非常合适:
1.String.prototype.replace: /g 和 /i 标志
许多 JavaScript 新手都搞不懂字符串的 replace
方法,它不替换所有匹配的子字符串,而是只替换了第一个。当然,有经验的人会知道应该在这里用一个正则表达式并加上全局标志(/g
):
// 错误 var 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.prototype.slice
数组的 slice
方法主要是用来从一个数组中截取片段,而许多人没有注意到它也可以用来将类似数组的对象比如 arguments
,NodeList
对象等转换为真正的数组:
var nodesArr = Array.prototype.slice.call(document.querySelectorAll("div")); // 所有 DIV 元素组成的数组 var argsArr = Array.prototype.slice.call(arguments); // 把 arguments 对象转换为真正的数组 // 注:这个技巧不适合 IE8 以及之前的版本,会报错,因为它们的 NodeList 对象是利用 COM 实现的,不是真正的 JavaScript 对象
你也可以调用 slice
来克隆一个对象:
var clone = myArray.slice(0);
Array.prototype.slice
在 JavaScript 的世界里是一个不折不扣的好东东,甚至有些老手也并不熟悉它。
3.Array.prototype.sort
很多人也没有充分利用数组的 sort
方法,它的用途其实比想象中的要多。许多开发者以为sort
方法只是用来干这个的:
[1, 3, 9, 2].sort(); // 返回 [1, 2, 3, 9]
不过它也有更强大的用法,像下面这样:
[ { name: "Robin Van PurseStrings", age: 30 }, { name: "Theo Walcott", age: 24 }, { name: "Bacary Sagna", age: 28 } ].sort(function(obj1, obj2) { // 升序排列 return obj1.age - obj2.age; }); // 返回值: // [ // { name: "Theo Walcott", age: 24 }, // { name: "Bacary Sagna", age: 28 }, // { name: "Robin Van PurseStrings", age: 30 } // ]
你可以根据某个属性来将一组对象排序,而不单单是对一些简单值。如果在某个项目中,服务器返回一组 JSON
数据并且你需要对其中的对象排序,记得试试这个方法!
4.用 length 属性来截断数组
JavaScript 中的对象是引用传递,许多人在这上面都犯过错误。有些人想要清空一个数组,经常就新建一个:
var myArray = yourArray = [1, 2, 3]; // myArray = []; // "yourArray" 仍然是 [1, 2, 3] // 正确方法 myArray.length = 0; // "yourArray" 和 "myArray" 都是 []
对象是通过引用来传递的,所以当 myArray 被设为 []
时其实是创建了一个新数组,但其他变量还保持着对原数组的引用,这是一个 big mistake!
5.用 push 方法合并数组
在第 2 条中讲过,数组的 slice
配合 apply
用起来非常酷,其实数组的别的方法也不赖,这次我们用 push
来合并数组:
var mergeTo = [4,5,6], var mergeFrom = [7,8,9]; Array.prototype.push.apply(mergeTo, mergeFrom); mergeTo; // [4, 5, 6, 7, 8, 9]
一个简单的方法完成数组合并,很少有人知道。
6.高效的特性检测 / 对象属性检测
常常有人用下面的方法来探测浏览器特性:
if(navigator.geolocation) { // Do some stuff }
这种方法尽管可以,但有时并不高效,因为相当于访问了对象的该属性,所以浏览器可能进行一些初始化工作。在一些老的浏览器中还会引发内存泄漏。所以更有效的办法是检查对象中的键是否存在:
if("geolocation" in navigator) { // Do some stuff }
7.事件的 preventDefault 和 stopPropagation
我们常常要在某个链接被点击以后触发一些功能,而不需要浏览器跳转到该链接,一般我们会用 JS 库中的 Event.stop
等类似方法:
$("a.trigger").on("click", function(e) { e.stop(); // Do more stuff });
这种懒人方法有一个问题,就是它不仅阻止默认行为,同时也会阻止事件冒泡,这意味着上层的监听器不会接收到事件,更不会触发相应的动作。所以最好还是乖乖地使用preventDefault
方法。
JavaScript 老手们看了可能会说,“这些我都知道”,但偶尔也还会在这些地方栽跟头。所以还是时刻注意小细节吧,毕竟它们也会惹出大问题。
原文地址:http://pandacafe.net/blog/513