资讯频道 → 编程语言
阅读更多

19顶
1踩

编程语言

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

2013-08-21 10:16 by 副主编 WnouM 评论(7) 有11545人浏览
JavaScript 前端 经验
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"


另一个基本的逻辑错误就是在大小写不敏感的校验场合（字母可大写可小写）没有忽略大小写，此时 /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 参数列表、节点列表和属性列表）转换成真正的数组：（译注：DOM 元素的属性列表通过 attributes属性获取，比如 document.body.attributes。） 

var nodesArr = Array.prototype.slice.call(document.querySelectorAll("div"));
// "true" array of DIVs
// 得到一个由 div 元素组成的“真正的”数组

var argsArr = Array.prototype.slice.call(arguments);
// changes arguments to "true" array
// 把 arguments 转换成一个“真正的”数组
你还可以使用一次简单的 slice 调用来克隆一个数组：
var clone = myArray.slice(0); // naive clone
                              // 浅克隆


（译注：这里的参数 0 也可以省略，我估计 undefined 被 slice 方法自动转换为 0 了吧。）

Array.prototype.slice 绝对是 JavaScript 世界中的一玫珍宝，但 JavaScript 初学者们显然还没有意识到它的全部潜力。

3. Array.prototype.sort 方法

数组的 sort 方法 远远没有被充分利用，而且可能比开发者们想像的更加强大。很多开发者可能觉得 sort 方法可以用来做这种事情： 

[1, 3, 9, 2].sort();
    // Returns: [1, 2, 3, 9]
// 返回 [1, 2, 3, 9]


……这没错，但它还有更强大的用法，比如这样： 

[
    { 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
    // 实现增序排列：前者的 age 小于后者
    return obj1.age - obj2.age;
});
    // Returns:  
    // [
    //    { 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` is still [1, 2, 3]
              // `yourArray` 仍然是 [1, 2, 3]

// The right way, keeping reference
// 正确的方法是保持引用
myArray.length = 0; // `yourArray` and `myArray` both [ ]
                    // `yourArray` 和 `myArray`（以及其它所有对这个数组的引用）都变成 [ ] 了


坑里的人们终于明白，原来传对象只是在传引用。因此当我把 myArray 重新赋值为 [] 时，确实会创建出一个新的空数组，但其它对老数组的引用仍然没变！大坑啊！还是换用截断的方法吧，少年。

5. 使用 push 来合并数组

在上面的第 2 节里，我展示了数组的 slice 和 apply 方法所能组合出的几个小妙招，所以对于数组方法的其它技巧，你应该已经做好心理准备了吧。这次我们使用 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]


这是一项不为人知的小技巧，简单的原生方法就可以实现数组合并这样的常见任务。（译注：这个方法的巧妙之外不仅在于 push 方法可以接收多个参数，还涉及到 apply 方法的第二个参数的用法。）

6. 高效探测功能特性和对象属性

很多时候开发者们会像下面这样来探测浏览器的某个特性： 

if(navigator.geolocation) {
    // Do some stuff
    // 在这里干点事情
}


当然这可以正常工作，但它并不一定有很好的效率。因为这个对象探测方法会在浏览器中初始化资源。在过去，上面的代码片断可能会在某些浏览器下导致内存泄露。更好、更快的方法是检查对象是否包含某个键名： 

if("geolocation" in navigator) {
    // Do some stuff
    // 在这里干点事情
}


键名检查十分简单，而且可以避免内存泄露。另外请注意，如果这个属性的值是假值，那么前一种探测方式将会得到“否”的结果，并不能真正探测出这个键名是否存在。

7. 事件对象的 preventDefault 和 stopPropagation 方法

很多时候，当一个动作元素（比如链接）被点击时，会触发某个功能。显然我们并不希望点击链接时浏览器顺着这个链接跳转，于是我们会习惯性地使用 JavaScript 类库的 Event.stop 方法： 

$("a.trigger").on("click", function(e) {
    e.stop();

    // Do more stuff
    // 在这里干点事情
});


（译注：不知道哪个类库有这个方法，估计其作用相当于 return false; 吧。语法看起来像 jQuery，但 jQuery 并没有这个方法，而且 jQuery 是支持 e.preventDefault 和 e.stopPropagation 方法的。）

这个懒方法有一个问题，它不仅阻止了浏览器的默认动作，同时也阻止了事件继续冒泡。这意味着元素上绑定的其它事件监听器将不会被触发，因为它们根本就不知道有事件发生。此时不妨使用 preventDefault 吧！

JavaScript 老鸟们看到这篇文章可能会说“我早知道了”，但说不定什么时候，他们就会在某一点上栽跟头。提醒大家留意 JavaScript 中的各种小细节，失之毫厘谬以千里啊！

英文原文：7 JavaScript Basics Many Developers Aren't Using (Properly)
翻译：cssmagic
来自: cssmagic
19
顶
1
踩
评论 共 7 条 请登录后发表评论
7 楼 monica617 2013-09-22 14:01
mark!
6 楼 wzpwap123 2013-08-28 09:14
受教了。。
5 楼 ricoyu 2013-08-26 09:28
e.preventDefault 和 e.stopPropagation如果需要用到， 要放到函数的开头， 这样即使函数体剩余代码发生了js错误， 默认的行为也被阻止了。比较点击链接，你不想执行默认的页面跳转行为，但如果你把e.preventDefault放在代码的后面， 当前面的js代码抛异常， 页面还是会不符你期望地跳转。
4 楼 xumingliang561 2013-08-24 22:01
很实用，好好收藏一下。
3 楼 warrior701 2013-08-21 22:59
andyyang007 写道
第四个使用
myArray.length = 0;
yourArray并没有变成 [ ]


我测试过，是0没错
2 楼 andyyang007 2013-08-21 17:44
第四个使用
myArray.length = 0;
yourArray并没有变成 [ ]
1 楼 kingsfighter 2013-08-21 12:45
确实有很多很有用的细节没有注意到，看来还是太浅，不够深入啊

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • JavaScript_开发者经常忽略或误用的七个基础知识点.

    JavaScript_开发者经常忽略或误用的七个基础知识点.

  • JavaScript 开发者经常忽略或误用的七个基础知识点

    英文原文：7 JavaScript Basics Many Developers Aren't Using (Properly) 　JavaScript 本身可以算是一门简单的语言，但我们也不断用智慧和灵活的模式来改进它。昨天我们将这些模式应用到了 JavaScript 框架中，...

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

    JavaScript 本身可以算是一门简单的语言，但我们也不断用智慧和灵活的模式来改进它。昨天我们将这些模式应用到了 JavaScript 框架中，今天这些框架又驱动了...本文将为你呈献其中7个基础知识点。 　1. 在 String.pro

  • [译] JavaScript 开发者经常忽略或误用的七个基础知识点

    JavaScript 本身可以算是一门简单的语言，但我们也不断用智慧和灵活的模式来改进它。昨天我们将这些模式应用到了 ...很多新手开发者被各种强大的 JavaScript 框架吸引进来，但他们却忽略了框架身后浩如星海的 J...

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

    JavaScript 本身可以算是一门简单的语言，但我们也不断用智慧和灵活的模式来改进它。昨天我们将这些模式应用到了 JavaScript 框架中，今天这些框架又...本文将为你呈献其中7个基础知识点。 　1. 在 String.proto...

  • JavaScript开发者常忽略或误用的七个基础知识点

    JavaScript 本身可以算是一门简单的语言，但我们也不断用智慧和灵活的模式来改进它。昨天我们将这些模式应用到了 JavaScript 框架中，今天这些框架又驱动了...本文将为你呈献其中七个基础知识点： 　1. 在Strin...

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

    JavaScript 本身可以算是一门简单的语言，但我们也不断用智慧和灵活的模式来改进它。昨天我们将这些模式应用到了 JavaScript 框架中，今天这些框架又...本文将为你呈献其中7个基础知识点。 1. 在 String.prototy...

  • 实践ORM，创建基于Grove的.NET应用程序(一)

    实践ORM，创建基于Grove的.NET应用程序(一) 撰稿 林学鹏 cnlxp@msn.com   就目前大多数软件开发项目的数据都存储在关系型数据库中，开发时要求开发人员对SQL语句语法以及规则等必须很熟悉，而很多情况下，开发人员需要手写SQL语句，同时还得考虑事务处理，逻辑分析等等问题，导致整个项目中的SQL语句到处都是，对程序的可读性，可维护性都带来了阻碍，同时，当新项

  • 实践ORM，创建基于Grove的.NET应用程序(三)

    实践ORM，创建基于Grove的.NET应用程序(三) 撰稿 林学鹏 cnlxp@msn.com        9) 在当前项目的Managers下添加CustomerManager类及AddressManager类，Managers层属于商业逻辑层，负责对实体数据库操作的再一次封装。       在商业逻辑层，此处将类构造函数定义成私有，实现Singleton模式。   

  • 实践ORM，创建基于Grove的.NET应用程序(二)

    实践ORM，创建基于Grove的.NET应用程序(二) 撰稿 林学鹏 cnlxp@msn.com 7)在当前项目的EntityDB下添加CustomerDB类，该类负责对Customer的数据库操作，包括添加，删除，修改等操作。       8)重复7，完成AddressDB类。 CustomerDB.cs     using Syste

  • 基于Grove的.NET应用程序开发提示

     基于Grove的.NET应用程序开发提示 1.       尽量避免新增映射实体类，主要表现在关系映射实体。当程序需要查询符合某种条件的记录时，往往需要通过关系映射实体进行查询，当该关系实体在其他调用者使用时，有时又因为缺少某些字段而需要向该关系映射实体新增查询字段或重新建立实体，所以在关系实体建立的时候，应尽量考虑其他调用者的需求，这样可以有效的避免关系映射实体的重复或因关系实体的

  • 实践ORM，创建基于Grove的.NET应用程序(四)

    实践ORM，创建基于Grove的.NET应用程序(四) 撰稿 林学鹏 cnlxp@msn.com        操作该关系映射实体类，简单示例：              IObjectOperator oo=ObjectOperatorFactory.GetObjectOperator();        IObjectQuery oq=oo.NewQuery(typ

  • COMSOL模拟碳酸钙岩石与盐酸反应的随机孔隙酸化路径及布林克曼流动形成的分形结构

    内容概要：本文详细介绍了利用COMSOL软件模拟碳酸钙(CaCO3)在岩石中与盐酸(HCl)反应过程中产生的随机孔隙酸化路径及其形成的布林克曼流动。首先，通过蒙特卡洛方法生成随机孔隙分布，模拟真实岩石内部复杂的孔隙结构。接着，采用布林克曼方程处理多孔介质中的粘性力和渗透流动，并引入化学反应模块，模拟CaCO3与HCl之间的化学反应。随着模拟的进行，酸液流动路径逐渐形成类似雪花状的分形结构，展示了流动与溶解之间的动态博弈。最后，通过自适应网格技术和粒子追踪功能，精确捕捉并可视化这些精美的分形图案。 适合人群：从事地质工程、材料科学、化学工程等领域研究的专业人士，以及对多孔介质传输现象感兴趣的科研工作者。 使用场景及目标：适用于研究多孔介质内的化学反应和流体流动特性，特别是对于优化石油开采中的酸化压裂工艺具有重要指导意义。 其他说明：文中提供了详细的MATLAB和COMSOL代码片段，帮助读者理解和重现模拟过程。此外，强调了随机性和确定性在微观尺度上的相互作用，揭示了自然界深层次的规律。

  • 基于滑模控制的永磁同步电机直接转矩控制仿真建模与实现

    内容概要：本文详细介绍了将滑模控制(SMC)应用于永磁同步电机(PMSM)直接转矩控制(DTC)的技术细节。首先解释了转矩和磁链误差计算方法，接着探讨了滑模面的设计及其对系统抖振的影响。文中还提供了扇区矢量选择的具体实现方式，并深入讨论了磁链观测器的改进措施。此外，文章分析了滑模控制器的设计要点以及仿真过程中需要注意的关键参数配置。通过对比传统PI控制，验证了滑模控制在提高系统鲁棒性和快速响应方面的优势。 适合人群：从事电机控制系统研究的专业人士，尤其是对永磁同步电机直接转矩控制感兴趣的科研工作者和技术人员。 使用场景及目标：适用于希望深入了解并掌握滑模控制理论及其在PMSM-DTC应用中的具体实现方法的研究人员。目标是在实际项目中能够运用滑模控制提升系统的稳定性和性能。 其他说明：文中提供的MATLAB/Simulink代码片段有助于读者更好地理解和复现实验结果。同时提醒读者关注一些常见的陷阱，如参数选择不当可能导致的问题。

  • 北京大学网络安全工作人员管理规定：涵盖人员职责、聘用、转岗离岗、教育培训及第三方管理

    内容概要：本文详细介绍了北京大学针对网络安全工作人员的管理规定，旨在加强网络安全管理和明确不同角色的责任。全文分为九章，涵盖了网络安全工作人员及其职责、聘用管理、转岗和离岗管理、教育培训、第三方人员管理及奖惩措施等方面的内容。重点在于明确各级单位和人员的具体职责，确保网络安全制度的有效执行，并强调了对第三方人员的严格管控和保密要求。 适合人群：适用于高校网络安全管理人员及相关技术人员，尤其是北京大学及其下属单位的网络安全工作者。 使用场景及目标：①帮助高校建立健全网络安全管理体系；②指导网络安全工作人员明确自身职责，提高工作效率；③规范第三方人员的访问和操作，降低安全风险。 其他说明：本文还提供了多个附件，如网络安全承诺书、访问申请表和保密协议模板，便于实际操作和管理。

  • 网络设备市场现状与发展趋势分析（2024-2030年）-技术革新与智能化应用

    内容概要：本文深入探讨了中国网络设备市场的现状及其未来发展潜力。首先介绍了网络设备的基本概念及其作为现代通信网络基础设施的重要地位，随后分析了当前市场面临的挑战和技术进步带来的机遇。文中特别强调了5G、物联网、云计算等新兴技术对网络设备性能和安全性的更高要求，以及由此催生的高带宽、低延迟产品的市场需求。此外，还讨论了软件定义网络(SDN)、网络功能虚拟化(NFV)、边缘计算等新技术的应用前景，指出未来网络设备将更加智能化、自动化，并能更好地支持AI和ML技术。最后，通过对多家领先企业的案例研究，展示了行业内竞争态势及各公司在技术创新方面的努力。 适用人群：从事网络设备相关领域的研究人员、工程师、管理人员，以及关注该领域发展的投资者。 使用场景及目标：帮助读者了解网络设备行业的最新动态和技术趋势，为制定战略决策提供依据；同时为企业和个人投资者提供市场洞察，辅助其做出合理的投资选择。 其他说明：报告基于详实的数据分析和专家意见撰写而成，旨在为专业人士提供有价值的参考资料。

  • 西门子1200 PLC码垛系统的SCL编程详解：涵盖变频器、机器人、视觉系统集成

    内容概要：本文详细介绍了基于西门子1200 PLC的码垛系统的设计与实现，涵盖了多个关键技术点。首先，文章讲解了Modbus TCP通讯的实现方法，展示了如何通过TSEND_C和TRCV_C功能块进行工业相机和机器人之间的数据传输，并提供了具体的报文处理代码。接着，文章深入探讨了SCL编程的优势及其在复杂逻辑处理中的应用，如托盘堆叠算法，该算法能够根据当前层数动态调整机械手的高度，确保堆叠的安全性和稳定性。此外，文章还介绍了机器人控制中的移位寄存器实现的动作队列管理和变频器的速度平滑处理，以及视觉系统的坐标解析和异常处理机制。最后，文章强调了良好的注释规范和异常处理链的重要性，确保程序的可维护性和可靠性。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是熟悉西门子PLC编程和SCL语言的从业者。 使用场景及目标：适用于需要深入了解和掌握西门子1200 PLC在码垛系统中的具体应用的技术人员。目标是帮助读者理解并实现多设备联动的复杂控制系统，提高系统的稳定性和效率。 其他说明：文中提供的代码示例和详细的解释有助于读者更好地理解和应用相关技术，同时也为后续的维护和优化提供了宝贵的参考资料。

Global site tag (gtag.js) - Google Analytics