[译] 新手和老手都将受益的JavaScript小技巧

时间:2022-05-22 04:10:25
这篇文章会分享一些鲜为人知但却很强大的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. (转) Xcode 7 Bitcode

    Xcode 7 Bitcode的工作流程及安全性评估 2015-12-18 06:13 编辑: suiling 分类:iOS开发 来源:FreeBuf黑客与极客 简介 随着 Xcode 7 的发布,苹 ...

  2. 技术博客(初用markdown)

    技术博客 菜鸟教程在这个网站我学到许多有趣的东西,并且弥补了我之前的一些不足之处. 以下为我学习到的内容. 1 如果想输出多个多位数的时候,可以尝试用多个if语句.如果需要输出3为数的时候,设置三个变 ...

  3. Qt消息机制和事件(一)

    一,事件 事件(event)是由系统或者 Qt 本身在不同的时刻发出的.当用户按下鼠标.敲下键盘,或者是窗口需要重新绘制的时候,都会发出一个相应的事件.一些事件在对用户操作做出响应时发出,如键盘事件等 ...

  4. 关于Calendar中设置月份比实际小1的问题

    有如下程序,转化两个字符串数字为date类型,并判断是历史上的星期几,是否同为星期一 代码如下: public static void main(String[] args) throws Parse ...

  5. python部署galery集群

    galery.py文件内容 import pexpect import os import configparser HOSTNAME_DB1='db1' HOSTNAME_DB2='db2' HOS ...

  6. Freeradius服务器的搭建流程

    Freeradius服务器的搭建流程 一.服务器方面的配置 1 .安装radius服务器,数据库扩展插件 预先安装mysql数据库,然后安装freeradius,以及freeradius的数据库扩展插 ...

  7. BZOJ1058: [ZJOI2007]报表统计(set)

    Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 4190  Solved: 1420[Submit][Status][Discuss] Descript ...

  8. M100 (0)开发

    [SDCC 2015现场]大疆Paul Yang:多旋翼飞行器的未来就是机器人的未来 http://www.csdn.net/article/2015-11-19/2826268 开发官网 https ...

  9. GitHub安装教程

    第一步是安装两个软件 安装 git for windows这个是一个git的windows系统的命令行版本https://git-scm.com/downloads或者https://pan.baid ...

  10. Python3.x:抓取百事糗科段子

    Python3.x:抓取百事糗科段子 实现代码: #Python3.6 获取糗事百科的段子 import urllib.request #导入各类要用到的包 import urllib import ...