日期:2014-05-16  浏览次数:20358 次

JavaScript 开发者经常忽略或误用的 7 个基础知识点 (转)

JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它。昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序。很多新手开发者被各种强大的 JavaScript 框架吸引进来,但他们却忽略了框架身后浩如星海的 JavaScript 实用技巧。本文将为你呈献其中7个基础知识点。

1. 在 String.prototype.replace 方法中使用 /g 和 /i标志位

令很多 JavaScript 初学者意外的是,字符串的 replace 方法并不会 替换所有匹配的子串——而仅仅替换第一次匹配。当然 JavaScript 老手们都知道这里可以使用正则表达式,并且需要加上一个全局标志位(/g):

Javascript代码 复制代码
  1. // Mistake
  2. // 踩到坑了
  3. var str = "David is an Arsenal fan, which means David is great";
  4. str.replace("David", "Darren"); // "Darren is an Arsenal fan, which means David is great"
  5. // Desired
  6. // 符合预期
  7. str.replace(/David/g, "Darren"); // "Darren is an Arsenal fan, which means Darren is great"
// Mistake
// 踩到坑了
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"

// Desired
// 符合预期
str.replace(/David/g, "Darren"); // "Darren is an Arsenal fan, which means Darren is great"



另一个基本的逻辑错误就是在大小写不敏感的校验场合(字母可大写可小写)没有忽略大小写,此时 /i 标志位就很实用:

Javascript代码 复制代码
  1. str.replace(/david/gi, "Darren"); // "Darren will always be an Arsenal fan, which means Darren will always be great"
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 参数列表、节点列表和属性列表)转换成真正的数组:(译注:DOM 元素的属性列表通过 attributes属性获取,比如 document.body.attributes。)

Javascript代码 复制代码
  1. var nodesArr = Array.prototype.slice.call(document.querySelectorAll("div"));
  2. // "true" array of DIVs
  3. // 得到一个由 div 元素组成的“真正的”数组<