1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      可能被忽略的一些JavaScript数组方法细节

       更新时间£º2019年02月28日 15:43:05   作者£ºmintsweet   我要评论

      这篇文章主要给大家介绍了一些可能被忽略的JavaScript数组方法细节£¬文中通过示例代码介绍的非常详细£¬对大家的学习或者工作具有一定的参考学习价值£¬需要的朋友们下面来一起学习学习吧

      前言

      自以为还算一个比?#32454;?#20135;的人吧¡«但是感觉好久都没有写点什么没有营养的东西了£¬这一篇本来是打算去年年底?#23478;?#25343;出来说一说的£¬但是年底事情太多了£¬加上我真的变懒了?#31995;较?#22312;才要把这个准备了好久的标题完善一下¡£

      之所以会突然想讲一讲JavaScript中的数组£¬是因为我经历了好多次事后发现很傻的问题£¬所以?#25302;?#35828;还是总结一下£¬这篇相当于总结一样的文章我也不想讲数组的方法是怎么用的£¬毕竟?#36824;?#26159;在哪£¬数组方法的使用都有很多教程了£¬单纯的就来说一?#30340;?#20123;我们可能忽略的细节¡£

      抛砖引玉

      在开始正式讲被我们忽略的一些数组方法之前£¬?#19968;?#26159;想先举一个例子来说说我在其中躺过的一丢丢小坑¡«

      现在我们随便来有一个小小的需求£¬写一个方法£¬有两个参数£¬一个是数组£¬另一个是需要添加到数组里面的元素¡£

      function arrPush(arr, target) {
       return arr.push(target);
      }
      
      var arr_1 = [1, 2, 3];
      
      console.log(arrPush(arr_1, 4));

      上面的代码对你来说应该是很简单的吧£¬我们的需求就?#21069;Ñ[1, 2, 3]变成[1, 2, 3, 4]£¬看起来好像没有错诶¡«大胆的推测一下最后的console.log()结果是什么呢£¬你可以自己试一下?#32431;础?/p>

      好了£¬不卖关子了£¬最后的结果是4£¬诶£¿你可能已经清楚了这个点£¬你也可能完全不知道是怎么回事£¬没关系£¬清楚了你就当在复习一次£¬没清楚的话那你真的应该把这篇应该不长的总结看一下下¡£

      意想不到数组方法

      上面抛砖引玉之后你可能大概加估计应该也知道了我为什么想要做这样一个总结£¬尤其是对JavaScript掌握的不是那么好的同学来说£¬更是特别容易忽略的地方了¡£

      我希望当你看到下面方法名字的时候£¬应该马上出现那个方法的用法£¬而且应该知道你可能没有经常用到的它剩下的参数还有它的返回值¡£

      其实很多时候在MDN上面对一个方法的描述已经非常清楚了£¬但是我们还是会忽略到£¬所以结合例子来看£¬可能对你的?#19988;?#20250;更加有帮助¡£

      array.push

      上面抛砖引玉的原因£¬先来说说这个方法£¬解释一下出现上面情况的原因¡£

      push() 方法将一个或多个元素添加到数组的末尾£¬并返回该数组的新长度

      这一句话其实已经把上面的答案解释了£¬我们在return arr.push(target)的时候£¬返回的是arr.push()函数的返回值£¬这个值是这个数组新的长度£¬所以结果是4£¬来正确的使用一下这个方法¡£

      function arrPush(arr, target) {
       arr.push(target)
       return arr;
      }
      
      var arr_1 = [1, 2, 3];
      
      console.log(arrPush(arr_1, 4));

      这个时候结果才是我们最后想要的[1, 2, 3, 4]£¬顺便就说说push方法可以同时接收多个参数£¬像这样arr.push(1, 2, 3, 4) £¬返回结果?#27604;?#36824;是数组的新长度啦¡£

      array.concat

      接着来说说concat合并多个数组的方法£¬因为想要跟上面的push做一下对比£¬所以选择接着说这个方法£¬来看一下小例子¡£

      function arrConcat(arr, arr2) {
       arr.concat(arr2);
       return arr;
      }
      
      var arr_1 = [1, 2];
      var arr_2 = [3, 4];
      
      console.log(arrConcat(arr_1, arr_2));

      由于上面push方法的原因£¬我们依然选择return arr£¬这样的结果是什么呢£¬还是建议大家动手试一试£¬会发?#20540;?#21040;的是[1, 2]£¬哇哦¡«怎么和push表现不一致呢£¬为什么又返回了[1, 2]¡£

      concat() 方法用于合并两个或多个数组¡£此方法不会更改现有数组£¬而是返回一个新数组

      当你理解了这个方法的时候£¬你就会发现MDN上面的表述真的很棒¡«忍不住想要夸一下它£¬很清楚了吧£¬concat方法不会改变原来的数组£¬也就是当我们return arr的时候£¬arr并没有发生改变£¬所以还是[1, 2]£¬改写一下我们的方法¡£

      function arrConcat(arr, arr2) {
       return arr.concat(arr2);
      }
      
      var arr_1 = [1, 2];
      var arr_2 = [3, 4];
      
      console.log(arrConcat(arr_1, arr_2));

      这时候在看就会得到预期的结果了¡«这个方法其实还有一个神奇的地方£¬就是它可以直接连接一个值£¬并且它也能同时连接多个值或者多个数组£¬或者多个值?#25237;?#20010;数组的组?#24076;?#20687;这样¡£

      var arr = [1, 2];
      arr.concat(3, 4, [5, 6], 7, [8, 9]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

      arrary.map 和 array.forEach

      因为这两个方法有丢丢类似£¬所以同时说一下£¬顺便讲讲它们的区别吧£¬先来?#32431;?#23427;们的基本解释¡£

      map() 方法创建一个新数组£¬其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

      forEach() 方法对数组的每个元素执行一次提供的函数

      从这两句解释来看£¬它们都是迭代数组的每一个元素£¬区别是map方法会返回新的数组£¬而forEach方法不会£¬那它有返回值吗?#30475;?#26696;是有的...

      var arr = [1, 2, 3];
      
      var newArr = arr.map(item => {
       return item + 1; 
      }); // [2, 3, 4];
      
      var newArr2 = arr.forEach(item => {
       return item + 1; 
      }); // undefined
      
      var newArr3 = arr.map(item => {
       console.log(item + 1);
      }); // [undefined, undefined, undefined]
      
      // 2
      // 3
      // 4
      
      var newArr4 = arr.forEach(item => {
       console.log(item + 1); 
      }); // undefined
      
      // 2
      // 3
      // 4

      答案我已经写在上面了£¬map方法必须显示的返回值£¬而forEach只是对数组的每一个元素执?#24515;?#37096;内容¡£这两个方法的参数是一致的£¬回调函数和执行回调函数时使用的this值£¬回调函数中的参数也是一致的£¬分别是数组当前元素¡¢当前元素索引和数组本身¡£

      一般来说我们用的比较多的也就是回调函数和它的两个参数£¬很多人忽略了回调函数的第三个参数£¬其实还蛮好用的£¬先不表¡£最后就是改变this值的参数£¬因为真的很少用£¬也没有?#23548;?#26696;例来说£¬所以就不多说了£¬大家知道还有这么个东西就行£¬如果有?#23548;?#29992;到的情况£¬也可以给我分享一下£¬学习一下¡«

      arrary.filter

      在es5之后的新的数组迭代方法£¬参数几乎都与上述一致¡£

      - 回调函数(数组当前值£¬当前值索引£¬数组本身)

      - 执行回调函数的this值

      filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

      本身这个数组过滤的方法使用很简单£¬我就说一丢丢在使用的时候的小技巧£¬比如数组去重就很好用¡£

      var arr = [1, 2, 3, 4, 4, 5, 6, 6, 7, 8, 9];
      var result = arr.filter((item, index, arr) => {
       return arr.indexOf(item) === index; 
      });
      console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

      arrary.pop 和 arrary.shift

      上面说了很多了¡«大家估计也大概知道我们容易忽略的一个是方法的返回值£¬还有就是没有经常使用的参数£¬所以我这两个方法就直接上说明了¡£

      pop()方法从数组中删除最后一个元素£¬并返回该元素的值¡£此方法更改数组的长度

      shift() 方法从数组中删除第一个元素£¬并返回该元素的值¡£此方法更改数组的长度

      这两个方法用法完全相同£¬区别就是一个弹出的是数组最后的元素£¬一个弹出的是数组最前面的元素£¬弹出这个大家看了上面方法的解释也应该知道我想表达的是方法返回值元素¡«

      var arr = [1, 2, 3];
      
      console.log(arr.pop()); // 3
      console.log(arr.shift()); // 1
      
      console.log(arr.length); // 1

      结语

      我并没有把所有的数组方法的拿出来说一下是觉得上述这些例子已经足以告诉大家平常我们在使用的时候容易忽略的地方£¬也不是什么很难理解的东西£¬所以就说到这里吧¡«剩下的方法就靠大家自己去仔细的使用了¡£

      总结

      以上就是这篇文章的全部内容了£¬希望本文的内容对大家的学习或者工作具有一定的参考学习价值£¬如果有疑问大家可以留言交流£¬谢谢大家对脚本之家的支持¡£

      相关文章

      • js实现页面跳转的几种方法小结

        js实现页面跳转的几种方法小结

        下面小编就为大家带来一篇js实现页面跳转的几种方法小结¡£小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考£¬一起跟随小编过来?#32431;?#21543;
        2016-05-05
      • 鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例

        鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例

        下面小编就为大家带来一篇鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例¡£小编觉得挺不错的£¬现在就分享给大家£¬也给大家做个参考¡£一起跟随小编过来?#32431;?#21543;£¬祝大家游戏愉快哦
        2016-12-12
      • cocos2dx骨骼动画Armature源码剖析(三)

        cocos2dx骨骼动画Armature源码剖析(三)

        本篇文章给大家分享cocos2dx骨骼动画Armature源码剖析(三)£¬代码附有注释£¬介绍的非常详细£¬需要的朋友可以参考下
        2015-09-09
      • 轻松学习Javascript闭包函数

        轻松学习Javascript闭包函数

        这篇文章主要帮助大家轻松学习掌握Javascript闭包函数£¬从闭包的含义出发£¬由浅入深学习Javascript闭包函数£¬感兴趣的小伙伴们可以参考一下
        2015-12-12
      • JavaScript通过元素索引号删除数组中对应元素的方法

        JavaScript通过元素索引号删除数组中对应元素的方法

        这篇文章主要介绍了JavaScript通过元素索引号删除数组中对应元素的方法,涉及javascript操作数组的技巧,非常具有实用价值,需要的朋友可以参考下
        2015-03-03
      • JavaScript版TAB选项卡效果实例

        JavaScript版TAB选项卡效果实例

        tab选项卡效果就是当我指上或经过?#26412;?#20250;显示这个选项卡下面的内容£¬下面我来给大家介绍一款纯js实现的TAB选项卡效果£¬有需要的朋友可以参考一下
        2013-08-08
      • Javascript实现跑马灯效果的简单实例

        Javascript实现跑马灯效果的简单实例

        下面小编就为大家带来一篇Javascript实现跑马灯效果的简单实例¡£小编觉得挺不错的£¬现在就分享给大家£¬也给大家做个参考¡£一起跟随小编过来?#32431;?#21543;
        2016-05-05
      • javascript 数组操作实用技巧

        javascript 数组操作实用技巧

        数组和字符串类型对象的方法我特容易搞混淆,所以把他列出来£¬免得每次取查¡£
        2009-09-09
      • DWR中各种java方法的调用

        DWR中各种java方法的调用

        DWR是一个框架£¬简单的说就是能够在javascript直接调用java方法£¬而不必去写一大堆的javascript代码¡£它的实?#36136;?#22522;于ajax的£¬可以实现无刷新效果¡£不少DWR的例子£¬但大都只是?#25345;?#26041;法的调用只在使用层面上介绍DWR£¬并不涉更多的技术与设计javascript中是如何调用的¡£
        2016-05-05

      最新评论

      3dÊÔ»úºÅÖвÊÍø

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>