JavaScript奇淫技巧之遍历数组

た入场券 2022-05-15 05:08 203阅读 0赞

正常的for循环就不提了，直接进入正题。如下：

<table> 
 <tbody> 
  <tr> 
   <td> <code>1</code> </td> 
   <td> <code>//示例1</code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <code>2</code> </td> 
   <td> <code>for</code> <code>(</code> <code>var</code> <code>i=0,a;a=[</code> <code>"jack"</code> <code>,</code> <code>"tom"</code> <code>,</code> <code>"lily"</code> <code>,</code> <code>"andy"</code> <code>][i++];){ </code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <code>3</code> </td> 
   <td> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> <code>console.log(a);</code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <code>4</code> </td> 
   <td> <code>}</code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <code>5</code> </td> 
   <td> <code>//示例2</code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <code>6</code> </td> 
   <td> <code>var</code> <code>ary = [</code> <code>"jack"</code> <code>,</code> <code>"tom"</code> <code>,</code> <code>"lily"</code> <code>,</code> <code>"andy"</code> <code>];</code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <code>7</code> </td> 
   <td> <code>for</code> <code>(</code> <code>var</code> <code>i=0,a;a=ary[i++];){ </code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <code>8</code> </td> 
   <td> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> <code>console.log(a);</code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <code>9</code> </td> 
   <td> <code>}</code> </td> 
  </tr> 
 </tbody> 
</table>

从Firebug控制台能看到依次输出jack ，tom ，lily ，andy。这里有个问题，示例1不知是否会每次都产生一个数组对象实例，如果是，数组很大时可能会有性能问题？。

这个技巧关键是这句  
  
*a = ary\[i++\];*  
  
JS中数组实际上也是一个普通的Object。属于索引数组且并非“连续分配”内存的，因此索引方法并不会带来很高的效率。  
见 索引数组、关联数组和静态数组、动态数组  
  
中括号\[i++\]依然是一个普通对象取属性操作而已，试试看

<table> 
 <tbody> 
  <tr> 
   <td> <code>1</code> </td> 
   <td> <code>var</code> <code>ary = [</code> <code>"jack"</code> <code>,</code> <code>"tom"</code> <code>,</code> <code>"lily"</code> <code>,</code> <code>"andy"</code> <code>];</code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <code>2</code> </td> 
   <td> <code>for</code> <code>(</code> <code>var</code> <code>a </code> <code>in</code> <code>ary) { </code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <code>3</code> </td> 
   <td> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> <code>console.log(a);</code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <code>4</code> </td> 
   <td> <code>}</code> </td> 
  </tr> 
 </tbody> 
</table>

Firebug控制台输出0，1，2，3。证明了0，1，2，3的确是数组ary的属性。  
  
既然是ary的属性，那么是否可以通过点运算符（.）来存取呢？试试看

view source print ?

<table> 
 <tbody> 
  <tr> 
   <td> <code>1</code> </td> 
   <td> <code>for</code> <code>(</code> <code>var</code> <code>j=0;j&lt;ary.length;j++) { </code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <code>2</code> </td> 
   <td> <code>&nbsp;&nbsp;&nbsp;</code> <code>console.log(ary.j);</code> <code>//undefined</code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <code>3</code> </td> 
   <td> <code>}</code> </td> 
  </tr> 
 </tbody> 
</table>

为什么示例1，2中用中括号\[\]存取就可以了呢？因为中括号ary\[0\]，ary\[1\]，ary\[2\]，ary\[3\]里的0，1，2，3是字符串类型的。如下：

<table> 
 <tbody> 
  <tr> 
   <td> <code>1</code> </td> 
   <td> <code>for</code> <code>(</code> <code>var</code> <code>atr </code> <code>in</code> <code>ary) { </code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <code>2</code> </td> 
   <td> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> <code>console.log(atr + </code> <code>":"</code> <code>+ </code> <code>typeof</code> <code>atr);</code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <code>3</code> </td> 
   <td> <code>}</code> </td> 
  </tr> 
 </tbody> 
</table>

输出如下：  
*0:string*   
*1:string*   
*2:string*   
*3:string*

鲜为人知的是用中括号\[\]存取时，JS引擎内部隐式的将数字转成了字符串。 而作为\[\]存取时属性可以不遵循JS标识符规则（纯数字不能作为变量命名）。如

<table> 
 <tbody> 
  <tr> 
   <td> <code>1</code> </td> 
   <td> <code>var</code> <code>obj = {};</code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <code>2</code> </td> 
   <td> <code>obj.11 = 11; </code> <code>// 非法</code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <code>3</code> </td> 
   <td> <code>obj[</code> <code>'11'</code> <code>] = 11; </code> <code>// 合法</code> </td> 
  </tr> 
 </tbody> 
</table>

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读

相关 ToString 奇淫技巧

int和float同样结果 decimal decTemp = 2.1m; Console.WriteLine(decTemp.ToString("0.00"

超、凢脫俗/ 2023年08月17日 17:17/ 0 赞/ 157 阅读

相关 Sql的奇淫技巧

1. case\_when 对数据分类 SELECT CASE WHEN population < 100 THEN '01' W

旧城等待，/ 2022年12月05日 13:57/ 0 赞/ 275 阅读

相关 javascript之遍历数组对象

1.处理json串： var obj = \{ 'one':1, 'two':2, 'three':3\}; 第一：获取value值

刺骨的言语ヽ痛彻心扉/ 2022年08月23日 03:59/ 0 赞/ 215 阅读

相关 CSS布局奇淫技巧之–各种居中

CSS布局奇淫技巧之–各种居中 [css3 ][css3] 浏览数:297 2017-8-21 居中是我们使用css来布局时常遇到的情况。使用css来进行居

﹏ヽ暗。殇╰゛Y/ 2022年06月09日 02:28/ 0 赞/ 317 阅读

相关 JavaScript奇淫技巧之遍历数组

正常的for循环就不提了，直接进入正题。如下： <table> <tbody> <tr> <td> <code>1</code> </td>

た入场券/ 2022年05月15日 05:08/ 0 赞/ 204 阅读

相关 Shiro步步为营--奇淫技巧

目录会话管理启用会话管理自定义SessionDAO 会话验证关于缓存记住我认证VS记住我启用记住我 --------------------

偏执的太偏执、/ 2021年12月14日 09:49/ 0 赞/ 354 阅读

相关 jQuery之遍历数组

var a=[1,2,4,5,6,'jjj'] $(a).each(function(index,obj){ console.log(

港控/mmm°/ 2021年12月09日 03:45/ 0 赞/ 489 阅读

相关 CSS布局奇淫技巧之--各种居中

1. 把margin设为auto 具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位

梦里梦外;/ 2021年11月09日 02:01/ 0 赞/ 418 阅读

相关遍历数组

本文主要内容摘自我在百度百科的账号number1killer的词条贡献， <table> <tbody> <tr> <td> <table>

╰半橙微兮°/ 2021年09月26日 07:24/ 0 赞/ 494 阅读

相关 IDEA奇淫小技巧

IDEA是目前市场上最好用的IDE，我说的！ ![format_png][] 前几年eclipse在市场上非常流行，因此大多数人都习惯了eclipse的一些快捷键。近年来，

墨蓝/ 2021年09月18日 05:22/ 0 赞/ 407 阅读