这篇文章会分享一些鲜为人知但却很强大的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. Micosoft.ReportViewer.WebForms v 11.0... 1.0.1

    his dll is required for the use of Microsoft's forms based ReportViewer control. This version is to ...

  2. Flashback Version Query、Flashback Transaction Query快速闪回细粒度数据

    Flashback Version Query 闪回版本查询 使用Flashback Version Query  返回在指定时间间隔或SCN间隔内的所有版本,一次commit命令就会创建一个版本. ...

  3. 数据结构 - 求二叉树中结点的最大距离(C++)

    // ------BTreeMaxNodeLength.cpp------ #include <iostream> using namespace std; template <cl ...

  4. quick-cocos2dx学习笔记

    20140603 下载quick,拉开拉链,跑setup.bat(注意,setup事就是在系统环境变量里加入QUICK_COCOS2DX_ROOT,假设不运行这个的话,启动player时会报找不到fr ...

  5. mysql中判断字段为空

    mysql中判断字段为null或者不为null   在mysql中,查询某字段为空时,切记不可用 = null, 而是 is null,不为空则是 is not null   select nulco ...

  6. Android 快速开发系列 打造万能的ListView GridView 适配器

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38902805 ,本文出自[张鸿洋的博客] 1.概述 相信做Android开发的写 ...

  7. MaterialDialog的用法:

    MaterialDialog的用法:/** * * @author smiling * @date 2016/10 */ Github:https://github.com/drakeet/Mater ...

  8. PullToRefresh下拉刷新 加载更多 详解 +示例

    常用设置 项目地址:https://github.com/chrisbanes/Android-PullToRefresh a. 设置刷新模式 如果Mode设置成Mode.PULL_FROM_STAR ...

  9. 编程小计——消除Graphics图像边缘颜色不纯(抗锯齿)

    在很多时候,我们都要绘制纯色的图片,而用Graphics生成的往往是不纯的,尤其是绘制文字时.比如说绘制纯红色文字,往往R达不到255. C#中默认抗锯齿,给人看起来柔和:但是我们现实中往往用到锯齿. ...

  10. <display>标签的几个属性

    <display>这个标签个人觉得挺强大的,但是用不好的话就会成为个累赘,下面给大家分享一下他的几个属性. none:表示此元素不会被显示. block:此元素将显示为块元素,前后会换行. ...