这篇文章会分享一些鲜为人知但却很强大的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. win8.1 Dism 应用实例

    使用win8.1安装镜像制作wimboot启动 制作wim启动映像文件 Dism /Export-Image /WIMBoot/SourceImageFile:z:\sources\install.w ...

  2. [AngularJS] ngPluralize

    ngPluralize is a directive that displays messages according to en-US localization rules. <script& ...

  3. VSS Get Latest Version 没有提示recursive的对话框解决

    今天按照VSS使用时,当“Get Latest version”时,不小心勾选了 “Only show this dialog when the Shift key is down”,因此当我再“Ge ...

  4. .NET简单的语句

    获取当前时间的代码: Response.Write(DateTime.Now); 第一次加载页面的语句: if (!IsPostBack) { Response.Write("这是第一次加载 ...

  5. StarUML中时序图添加小人

    转载于 http://blog.csdn.net/longyuhome/article/details/9011629 在看时序图的例子的时候,发现有些的时序图上有小人的图标,可是一些UML工具却没有 ...

  6. Nginx优化—配置优化

    完整配置如下所示: user nginx; #运行的用户 pid /var/run/nginx.pid; worker_processes auto; #定义了nginx对外提供web服务时的word ...

  7. MySQL安装与测试

    工作室老师要求我们把MySQL装出来 今天折腾了下,本来不难的,不知道为什么用最新5.6.24的msi安装包,安装的时候选完路径后就没有后续了..蛋疼的我试了好几次,用cmd命令测试一直是 2003- ...

  8. Hyper-V虚拟机和主机的网络配置

    Hyper-V虚拟机和主机的网络配置 方式1.共享式 这种方式是将Hyper-V内部的虚拟网络与外部网络共享.使得内部是一个私有的网络.属于NAT的类型.(不知道这么说对不对) 优点: 相对来说属于私 ...

  9. mssql SUBSTRING和charindex的用法

    在工作中用到的例子: select * FROM [CSGDC.DataETLDB].[dbo].[StrategiesList] where strategy_name like '%基建系统%' ...

  10. 装饰(Decorator)模式

    1.装饰(Decorator)模式    动态给一个对象添加一些额外的职责.就增加功能来说,装饰模式比生成子类更为灵活.Component是定义一个对象接口.可以给这些对象动态地添加职责.Concre ...