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

19顶
1踩

编程语言

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

2013-08-21 10:16 by 副主编 WnouM 评论(7) 有11525人浏览
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

  • 级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略：电压电流双闭环PI控制、相间与相内电压均衡管理,级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略：电压电流双闭环PI控制、相间与相内电压均

    级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略：电压电流双闭环PI控制、相间与相内电压均衡管理,级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略：电压电流双闭环PI控制、相间与相内电压均衡管理,不平衡电网下的svg无功补偿，级联H桥svg无功补偿statcom，采用三层控制策略。 （1）第一层采用电压电流双闭环pi控制，电压电流正负序分离，电压外环通过产生基波正序有功电流三相所有H桥模块直流侧平均电压恒定，电流内环采用前馈解耦控制； （2）第二层相间电压均衡控制，注入零序电压，控制通过注入零序电压维持相间电压平衡； （3）第三层相内电压均衡控制，使其所有子模块吸收的有功功率与其损耗补，从而保证所有H桥子模块直流侧电压值等于给定值。 有参考资料。 639,核心关键词： 1. 不平衡电网下的SVG无功补偿 2. 级联H桥SVG无功补偿STATCOM 3. 三层控制策略 4. 电压电流双闭环PI控制 5. 电压电流正负序分离 6. 直流侧平均电压恒定 7. 前馈解耦控制 8. 相间电压均衡控制 9. 零序电压注入 10. 相内电压均衡控制 以上十个关键词用分号分隔的格式为：不

  • GTX 1080 PCB图纸

    GTX 1080 PCB图纸，内含图纸查看软件

  • 深度优化与应用：提升DeepSeek润色指令的有效性和灵活性指南

    内容概要：本文档详细介绍了利用 DeepSeek 进行文本润色和问答交互时提高效果的方法和技巧，涵盖了从明确需求、提供适当上下文到尝试开放式问题以及多轮对话的十个要点。每一部分内容都提供了具体的示范案例，如指定回答格式、分步骤提问等具体实例，旨在指导用户更好地理解和运用 DeepSeek 提升工作效率和交流质量。同时文中还强调了根据不同应用场景调整提示词语气和风格的重要性和方法。 适用人群：适用于希望通过优化提问技巧以获得高质量反馈的企业员工、科研人员以及一般公众。 使用场景及目标：本文针对所有期望提高 DeepSeek 使用效率的人群，帮助他们在日常工作中快速获取精准的答案或信息，特别是在撰写报告、研究材料准备和技术咨询等方面。此外还鼓励用户通过不断尝试不同形式的问题表述来进行有效沟通。 其他说明：该文档不仅关注实际操作指引，同样重视用户思维模式转变——由简单索取答案向引导 AI 辅助创造性解决问题的方向发展。

  • 基于FPGA与W5500实现的TCP网络通信测试平台开发-Zynq扩展口Verilog编程实践,基于FPGA与W5500芯片的TCP网络通信测试及多路Socket实现基于zynq开发平台和Vivad

    基于FPGA与W5500实现的TCP网络通信测试平台开发——Zynq扩展口Verilog编程实践,基于FPGA与W5500芯片的TCP网络通信测试及多路Socket实现基于zynq开发平台和Vivado 2019软件的扩展开发,基于FPGA和W5500的TCP网络通信 测试平台 zynq扩展口开发 软件平台 vivado2019.2，纯Verilog可移植 测试环境 压力测试 cmd命令下ping电脑ip，同时采用上位机进行10ms发包回环测试，不丢包（内部数据回环，需要时间处理） 目前实现单socket功能，多路可支持 ,基于FPGA; W5500; TCP网络通信; Zynq扩展口开发; 纯Verilog可移植; 测试平台; 压力测试; 10ms发包回环测试; 单socket功能; 多路支持。,基于FPGA与W5500的Zynq扩展口TCP通信测试：可移植Verilog实现的高效网络通信

  • Labview液压比例阀伺服阀试验台多功能程序：PLC通讯、液压动画模拟、手动控制与调试、传感器标定、报警及记录、自动实验、数据处理与查询存储，报表生成与打印一体化解决方案 ,Labview液压比例阀

    Labview液压比例阀伺服阀试验台多功能程序：PLC通讯、液压动画模拟、手动控制与调试、传感器标定、报警及记录、自动实验、数据处理与查询存储，报表生成与打印一体化解决方案。,Labview液压比例阀伺服阀试验台多功能程序：PLC通讯、液压动画模拟、手动控制与调试、传感器标定、报警管理及实验自动化,labview液压比例阀伺服阀试验台程序：功能包括，同PLC通讯程序，液压动画，手动控制及调试，传感器标定，报警设置及报警记录，自动实验，数据处理曲线处理，数据库存储及查询，报表自动生成及打印，扫码枪扫码及信号录入等~ ,核心关键词：PLC通讯; 液压动画; 手动控制及调试; 传感器标定; 报警设置及记录; 自动实验; 数据处理及曲线处理; 数据库存储及查询; 报表生成及打印; 扫码枪扫码。,Labview驱动的智能液压阀测试系统：多功能控制与数据处理

  • 华为、腾讯、万科员工职业发展体系建设与实践.pptx

    华为、腾讯、万科员工职业发展体系建设与实践.pptx

Global site tag (gtag.js) - Google Analytics