JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它。昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序。很多新手开发者被各种强大的 JavaScript 框架吸引进来,但他们却忽略了框架身后浩如星海的 JavaScript 实用技巧。本文将为你呈献其中7个基础知识点。
1. 在 String.prototype.replace 方法中使用 /g 和 /i标志位
令很多 JavaScript 初学者意外的是,字符串的 replace 方法并不会 替换所有匹配的子串——而仅仅替换第一次匹配。当然 JavaScript 老手们都知道这里可以使用正则表达式,并且需要加上一个全局标志位(/g):
- // 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"
// 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 标志位就很实用:
- 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。)
- var nodesArr = Array.prototype.slice.call(document.querySelectorAll("div"));
- // "true" array of DIVs
- // 得到一个由 div 元素组成的“真正的”数组<