这篇文章会分享一些鲜为人知但却很强大的JavaScript技巧, 各个级别的JavaScript开发者都会从中受益.

 
1. 用数组的length属性清空数组
 
我们知道在JS中对象类型是按引用传递的, 有时候我们却会被这个规则所制约. 比如下面的例子:
 

var arr1 = arr2 = [1, 2, 3];   

//Change arr1
arr1 = []; // arr2 will still be [1,2,3]

arr1和arr2在初始化的时候指向同一个数组 [1, 2, 3] , 之后arr1重新指向 [] , arr2的引用并没有变化, 仍然指向 [1, 2, 3]. 但是如果我们想让arr1和arr2都指向 [] 该怎么做呢? 我们可以使用数组的 length 属性. 当我们设置 arr1.lenget = 0 , 数组arr1中的元素被清空. 然而引用关系并没有变化, 所以 arr1 和 arr2 现在都指向了空数组 [] .
 
2. 用push方法合并数组
 
我们习惯用 concat() 方法来合并2个数组, 比如:
var arr1=[1,2,3];
var arr2=[4,5,6];
var arr3=arr1.concat(arr2);
arr3;
[1, 2, 3, 4, 5, 6]
我们同样可以用 push() 方法来实现:
var arr1=[1,2,3];
var arr2=[4,5,6];
Array.prototype.push.apply(arr1,arr2);
arr1
[1, 2, 3, 4, 5, 6]
(译者注: 关于两者速度的比拼, 我在Firefox和Chrome下得到了不同的结果, 请看 http://jsperf.com/javascript-array-concat-vs-push 更全的测试用例: http://jsperf.com/array-concat-vs-push-2/14 )
 
3. 特征检测
 
许多API里我们都能见到特征检测的代码, 查看浏览器是否支持某个属性或方法为了有更好的浏览器兼容性. 比如:

if(window.opera){
console.log("OPERA");
}else{
console.log("NOT OPERA");
}
这段代码是正确的, 但是可能不够效率. 它会在浏览器中初始化一些资源, 更效率的做法是检查对象中是否有这个key.

if("opera" in window){
console.log("OPERA");
}else{
console.log("NOT OPERA");
}
4. 检验一个对象是否是数组
 
在JavaScript里, 可以用 typeof 来检查变量类型. typeof 可以返回: number , booleanstringobjectfunction 和 undefined. 并没有 array . 实际上数组是object类型. 那么怎么来验证对象是否是数组呢? 在最新的ECMAScript 5中, 可以用 Array.isArray(object) 来检验. 但是ECMAScript 5还没有推广开.
 
我们可以用下面的方法:

var obj=[];
Object.prototype.toString.call(obj)=="[object Array]";
true
 

[译] 新手和老手都将受益的JavaScript小技巧的更多相关文章

  1. PCB设计中新手和老手都适用的七个基本技巧和策略

    本文将讨论新手和老手都适用的七个基本(而且重要的)技巧和策略.只要在设计过程中对这些技巧多加注意,就能减少设计回炉次数.设计时间和总体诊断难点. 技巧一:注重研究制造方法和代工厂化学处理过程 在这个无 ...

  2. 【译】前端开发者都应知道的 jQuery 小技巧

    回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: // Back to top $('a.top').click(f ...

  3. (译)关于使用Eclipse Memory Analyzer的10点小技巧

    作者 Rave_Tian 2016.02.01 17:56* 字数 2988 阅读 520评论 0喜欢 0 分析和理解应用的内存使用情况是开发过程中一项不小的挑战.一个微小的逻辑错误可能会导致监听器没 ...

  4. ( 译、持续更新 ) JavaScript 上分小技巧(二)

    考虑到文章过长,不便于阅读,这里分出第二篇,如有后续,每15个知识点分为一篇... 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第三篇地址:( 译.持续更新 ) Java ...

  5. ( 译、持续更新 ) JavaScript 上分小技巧(四)

    后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址: 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第二篇地址:( 译.持续更新 ) JavaScr ...

  6. ( 译、持续更新 ) JavaScript 上分小技巧(三)

    最近家里杂事较多,自学时间实在少的可怜,所以都在空闲时间看看老外写的内容,学习之外顺便翻译分享~等学习的时间充足些再写写自己的一些学习内容和知识点分析(最近有在接触的:复习(C#,SQL).(学习)T ...

  7. ( 译、持续更新 ) JavaScript 上分小技巧(一)

    感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅 ...

  8. 漫谈程序员(十一)老鸟程序员知道而新手不知道的小技巧之Web 前端篇

    老鸟程序员知道而新手不知道的小技巧 Web 前端篇 常充电!程序员只有一种死法:土死的. 函数不要超过50行. 不要一次性写太多来不及测的代码,而是要写一段调试一段. UI和编码要同步做. 多写注释方 ...

  9. Vim新手节省时间的10多个小技巧

    Vim新手节省时间的10多个小技巧 Vim 是很多开发者的首选编辑器,通过设置正确的命令和快捷方式,它可以帮你更快的完成工作.这篇文章我们为 Vim 新手提供一些快捷键等方面的小技巧,帮你提升工作效率 ...

随机推荐

  1. Android开发系列之button事件的4种写法

    经过前两篇blog的铺垫,我们今天热身一下,做个简单的样例. 文件夹结构还是引用上篇blog的截图. 详细实现代码: public class MainActivity extends Activit ...

  2. Java虚拟机内存区域堆(heap)的管理

    在上一节中Java 出现内存溢出的定位以及解决方案 中对于Java虚拟机栈以及方法区的内存出现的异常以及处理方式进行了解析,由于Java虚拟机对于堆的管理十分复杂,并且Java虚拟机中最基本的内存区域 ...

  3. 小学生之深入C#

    一.深入C#数据类型 值类型传递和引用类型传递 方法的参数是值类型和引用类型 注意:值传递和引用传递判定依据是有没有ref 01.如果方法的参数类型本身就是引用类型,那么对参数值的修改会永久保存 例如 ...

  4. [php基础]PHP.INI配置:Session配置详细说明教程

    网上有很多PHP.INI文件配置的中文说明,但是对于PHP初学者来说在进行PHP运行环境搭建配置时还是容易一头雾水,今天换一种角度来分享如何进行php.ini配置,以求达到解决实际问题的效果,开篇以P ...

  5. Lesson 5: Typography in Product Design

    Lesson 5: Typography in Product Design Article 1: Interactive Guide to Blog Typography 布局(Layout) 用空 ...

  6. Maven 打包可运行 jar

    为配合自动化部署hudson,最近研究了如何将eclipse maven工程打包成可运行的jar函数及对应的资源文件.      由于我们工程中包含了多个可运行的任务,在打包成jar时需要分别导出,p ...

  7. 自定义分页标签,并使分页标签能获得url中的参数

    如题,要实现一个分页功能,其次,要让分页标签“智能一点”,在分页时能自动带上url后面的参数 <tag> <description>分页标签</description&g ...

  8. 如何实现一个通用的IHttpHandler 万能的IHttpHandler HttpWebRequest文件上传

    昨天遇到一个比较奇怪的需求,大致是需要在服务器上部署一个http服务,但是服务的具体功能不知道,以后在客服端实现.这里介绍一下系统背景,有一个系统运(部署在美国)行了很多年了,给系统产生了很多文件,现 ...

  9. image控件读取数据库二进制图片

    DataGridShowImage.aspx   <%@ Page language="c#" debug="true" Codebehind=" ...

  10. 【回忆1314】抽奖之Flash大转盘

    1.搭建JS与Flash互通的环境 function thisMovie(movieName){ if (window.document[movieName]) { return window.doc ...