<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                &emsp;&emsp;ES6為數組添加了多個新方法,既對它的功能進行了強化,也消除了容易產生歧義的語法。 ## 一、靜態方法 **1)of()** &emsp;&emsp;ES6為Array對象新增的第一個靜態方法是of(),用于創建數組,它能接收任意個參數,返回值是由這些參數組成的新數組。創建數組比較傳統的做法是用構造函數Array(),但當參數是一個正整數時,得到的卻是一個帶指定長度的空數組,而不是包含該參數的數組。Array.of()就不存在這種會產生歧義的行為,它不受參數的數據類型和數量的影響,返回的都是相同的結果,兩種創建方式的對比如下所示。 ~~~ Array.of(2); //[2] Array(2);      //[ , ] ~~~ **2)from()** &emsp;&emsp;第二個新增的靜態方法是from(),可將類數組對象和可迭代對象轉換成數組,它接收3個參數,第一個是待轉換的對象,第二和第三都是可選參數,前者是回調函數,后者是執行回調函數時所綁定的this對象。在下面的代碼中,obj是一個類數組對象,分別用兩種方式對其進行類型轉換,可以看出,Array.from()與傳統方式相比,可讀性與簡潔性更勝一籌。 ~~~ var obj = {0: 1, 1: 2, 2: 3, length: 3}; [].slice.call(obj); //傳統轉換方式 Array.from(obj);      //新的轉換方式 ~~~ &emsp;&emsp;利用回調函數可以完成更加復雜的映射轉換(例如讓每個元素翻倍,如下代碼所示),它的第一個參數是當前元素,第二個參數是元素索引。 ~~~ Array.from(obj, function(value, index) { return value * 2; }); ~~~ ## 二、原型方法 &emsp;&emsp;很多第三方類庫(例如underscore.js、lodash.js等)都會提供數組相關的輔助函數,而ES6將其中的幾個函數納入到了標準中,大大降低了數組的使用難度,新增的原型方法如表6所示。 :-: ![](https://box.kancloud.cn/6e963804b98c27a0938e4ff52638134c_600x494.png) :-: 表6 新的原型方法 **1)fill()和copyWithin()** &emsp;&emsp;fill()和copyWithin()兩個方法都能接收3個參數(如表7所示),表中的復制序列是指需要復制的元素序列,而位置就是數組的索引。 :-: ![](https://img.kancloud.cn/51/36/51361424c9c67e154d8076d5e77e7f97_1300x232.png) :-: 表7 三個參數說明 &emsp;&emsp;在使用這兩個方法時,有五個點需要注意,如下所列: &emsp;&emsp;(1)不僅會修改原始數組,還會覆蓋指定范圍內的元素。 &emsp;&emsp;(2)復制或填充執行的都是淺拷貝。 &emsp;&emsp;(3)當方法中的索引參數為負數時,會先和數組的長度相加,再計算出最終的索引。 &emsp;&emsp;(4)保持數組的長度不變,在數組末尾停止復制或填充。 &emsp;&emsp;(5)end參數的默認值為數組長度,并且該位置上的元素會被忽略。 &emsp;&emsp;在了解過它們使用時的注意事項后,再來理解下面的代碼就會相對簡單很多。 ~~~ var arr1 = [1, 2, 3, 4, 5]; arr1.fill(6, 0, 2);          //[6, 6, 3, 4, 5] arr1.fill(7, 2, -1);          //[6, 6, 7, 7, 5] var arr2 = [1, 2, 3, 4, 5]; arr2.copyWithin(2, 0, 2);       //[1, 2, 1, 2, 5] arr2.copyWithin(2, 0, -2);       //[1, 2, 1, 2, 1] ~~~ **2)find()和findIndex()** &emsp;&emsp;find()和findIndex()是對indexOf()的一種補充,indexOf()只能通過全等匹配(===)來搜索指定的值,而這兩個新方法卻可以自定義匹配條件。在下面的代碼中,通過indexOf()方法只能檢索出數字1的位置,改成字符串“1”后就無法匹配成功。 ~~~ var arr = [1, 2, 3, 4, 5]; arr.indexOf(1);     //0 arr.indexOf("1");    //-1 ~~~ &emsp;&emsp;find()和findIndex()都能接收2個參數,第一個是回調函數,第二個是可選的參數,表示執行回調函數時所綁定的this對象,其中回調函數包含3個參數:當前元素、元素索引和原始數組。當匹配失敗時,find()返回undefined,而findIndex()返回-1。下面用這兩個新方法搜索字符串“1”,可分別獲得匹配元素和其所在的索引。 ~~~ arr.find(function(value, index, array) { //1 return value == "1"; }); arr.findIndex(function(value, index, array) { //0 return value == "1"; }); ~~~ &emsp;&emsp;keys()、values()和entries()是三個迭代器方法,都返回一個可迭代的對象,為了能更直觀的演示它們各自的功能,現在利用擴展運算符將返回值轉換成數組,如下所示。 ~~~ var arr = ["a", "b", "c"]; [...arr.keys()]; //[0, 1, 2] [...arr.values()]; //["a", "b", "c"] [...arr.entries()]; //[[0, "a"], [1, "b"], [2, "c"]] ~~~ ***** > 原文出處: [博客園-ES6躬行記](https://www.cnblogs.com/strick/category/1372951.html) [知乎專欄-ES6躬行記](https://zhuanlan.zhihu.com/pwes6) 已建立一個微信前端交流群,如要進群,請先加微信號freedom20180706或掃描下面的二維碼,請求中需注明“看云加群”,在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily),歡迎瀏覽。 ![](https://box.kancloud.cn/2e1f8ecf9512ecdd2fcaae8250e7d48a_430x430.jpg =200x200) 推薦一款前端監控腳本:[shin-monitor](https://github.com/pwstrick/shin-monitor),不僅能監控前端的錯誤、通信、打印等行為,還能計算各類性能參數,包括 FMP、LCP、FP 等。
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看