整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript 各種遍歷方式詳解

          JavaScript 各種遍歷方式詳解

          了方便例子講解,現有數組和字面量對象如下

          var demoArr=['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
          var demoObj={
            aaa: 'Javascript',
            bbb: 'Gulp',
            ccc: 'CSS3',
            ddd: 'Grunt',
            eee: 'jQuery',
            fff: 'angular'
          };
          

          for

          可以直接看示例,用得太多了,很簡單

          (function () {
            for (var i=0, len=demoArr.length; i < len; i++) {
              if (i==2) {
                // return;   // 函數執行被終止
                // break;    // 循環被終止
                continue; // 循環被跳過
              };
              console.log('demo1Arr[' + i + ']:' + demo1Arr[i]);
            }
          })();
          

          關于for循環,有以下幾點需要注意

          • for循環中的 i 在循環結束之后任然存在于作用域中,為了避免影響作用域中的其他變量,使用函數自執行的方式將其隔離起來()();
          • 避免使用 for(var i=0; i<demo1Arr.length; i++){} 的方式,這樣的數組長度每次都被計算,效率低于上面的方式。也可以將變量聲明放在for的前面來執行,提高閱讀性
          var i=0, len=demo1Arr.length;
          for(; i<len; i++) {};
          
          • 跳出循環的方式有如下幾種 return 函數執行被終止 break 循環被終止 continue 循環被跳過

          for in

          for(var item in arr|obj){} 可以用于遍歷數組和對象

          • 遍歷數組時,item表示索引值, arr表示當前索引值對應的元素 arr[item]
          • 遍歷對象時,item表示key值,arr表示key值對應的value值 obj[item]
          (function () {
            for (var i in demoArr) {
              if (i==2) {
                return; // 函數執行被終止
                // break;  // 循環被終止
                // continue;  // 循環被跳過
              };
              console.log('demoArr[' + i + ']:' + demoArr[i]);
            }
            console.log('-------------');
          })();
          
          

          for in 本質上遍歷的是對象,之所以能遍歷數組,是因為數組也是一個對象。

          var arr=['react', 'vue', 'angular'];
          
          // 等價于
          
          var arr={
            0: 'react',
            1: 'vue',
            2: 'angular'
          }
          

          關于for in,有以下幾點需要注意:

          • 在 for 循環與 for in 循環中,i 值都會在循環結束之后保留下來。因此使用函數自執行的方式避免。
          • 使用 return,break,continue 跳出循環都與 for 循環一致,不過關于 return 需要注意,在函數體中,return 表示函數執行終止,就算是循環外面的代碼,也不再繼續往下執行。而 break 僅僅只是終止循環,后面的代碼會繼續執行。
          function res() {
            var demoArr=['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular'];
          
            for (var item in demoArr) {
              if (item==2) {
                return;
              };
              console.log(item, demoArr[item]);
            }
            console.log('desc', 'function res'); //不會執行
          }
          

          因為 for in 的目的是為了遍歷對象,因此在遍歷時,會同時搜索該對象構造函數上的屬性以及原型上的屬性,因此 for in 循環相對來說消耗會更大一點。因此,如果有其他更好的選擇,則盡量避免考慮使用 for in 循環來遍歷數據。

          forEach

          demoArr.forEach(function(arg) {})

          參數arg表示數組每一項的元素,實例如下

          demoArr.forEach(function (val, index) {
            if (e=='CSS3') {
              return;  // 循環被跳過
              // break;   // 報錯
              // continue;// 報錯
            };
            console.log(val, index);
          })
          
          

          具體有以下需要注意的地方

          • 回調函數中有2個參數,分別表示值和索引,這一點與 jQuery 中的$.each相反
          • forEach無法遍歷對象
          • forEach無法在IE中使用,firefox和chrome實現了該方法
          • forEach無法使用 break,continue 跳出循環,使用 return 時,效果和在 for 循環中使用 continue 一致

          ES5中新增的幾個數組方法,forEach, map, filter, reduce等,可以理解為依次對數組的每一個子項進行一個處理(回調函數中的操作),他們是對簡單循環的更高一層封裝,因此與單純的循環在本質上有一些不同,所以才會導致 return, continue, break 的不同。

          最重要的一點,可以添加第二參數,為一個數組,而且回調函數中的this會指向這個數組。而如果沒有第二參數,則this會指向window。

          var newArr=[];
          demoArr.forEach(function(val, index) {
            this.push(val); // 這里的this指向newArr
          }, newArr)
          

          雖然在原生中 forEach 循環的局限性很多,但是了解他的必要性在于,很多第三方庫會擴展他的方法,使其能夠應用在很多地方,比如 angular 的工具方法中,也有 forEach 方法,其使用與原生的基本沒有差別,只是沒有了局限性,可以在IE下使用,也可以遍歷對象

          var result=[];
          angular.forEach(demoArr, function(val, index) {
            this.push(val);
          }, result);
          

          do/while

          函數具體的實現方式如下,不過有一點值得注意的是,當使用 continue時,如果你將 i++ 放在了后面,那么 i++ 的值將一直不會改變,最后陷入死循環。因此使用do/while一定要小心謹慎一點。

          // 直接使用while
          (function () {
            var i=0,
              len=demoArr.length;
            while (i < len) {
              if (i==2) {
                // return; // 函數執行被終止
                // break;  // 循環被終止
                // continue;  // 循環將被跳過,因為后邊的代碼無法執行,i的值沒有改變,因此循環會一直卡在這里,慎用!!
              };
              console.log('demoArr[' + i + ']:' + demoArr[i]);
              i++;
            }
            console.log('------------------------');
          })();
          
          // do while
          (function () {
            var i=0,
              len=demo3Arr.length;
            do {
              if (i==2) {
                break; // 循環被終止
              };
              console.log('demo2Arr[' + i + ']:' + demo3Arr[i]);
              i++;
            } while (i < len);
          })();
          

          不建議使用do/while的方式來遍歷數組

          $.each

          $.each(demoArr|demoObj, function(e, ele))
          可以用來遍歷數組和對象,其中e表示索引值或者key值,ele表示value值

          $.each(demoArr, function(e, ele) {
            console.log(e, ele);
          })
          

          輸出為

          0 "Javascript"
          1 "Gulp"
          2 "CSS3"
          3 "Grunt"
          4 "jQuery"
          5 "angular"
          

          這里有很多需要注意的地方

          • 使用return 或者return true為跳過一次循環,繼續執行后面的循環
          • 使用return false為終止循環的執行,但是并不終止函數執行
          • 無法使用break與continue來跳過循環
          • 循環中this值輸出類似如下
          console.log(this);
          //String {0: "C", 1: "S", 2: "S", 3: "3", length: 4, [[PrimitiveValue]]: "CSS3"}
          
          console.log(this==ele);
          // true
          
          • 關于上面的this值,遍歷一下
          $.each(this, function(e, ele) {
            console.log(e, ele);
          })
          
          // 0 c
          // 1 s
          // 2 s
          // 4 3
          

          為什么 length 和 [[PrimitiveValue]]沒有遍歷出來?突然靈光一動,在《javascript高級編程》中找到了答案,大概意思就是javascript的內部屬性中,將對象數據屬性中的 Enumerable 設置為了false

          // 查看length的內部屬性
          console.log(Object.getOwnPropertyDescriptor(this, 'length'));
          // Object {value: 4, writable: false, enumerable: false, configurable: false}
          

          (this)` 與this有所不同,不過遍歷結果卻是一樣,你可以在測試代碼中打印出來看看

          $(selecter).each

          專門用來遍歷DOMList

          $('.list li').each(function (i, ele) {
            console.log(i, ele);
            // console.log(this==ele); // true
            $(this).html(i);
            if ($(this).attr('data-item')=='do') {
              $(this).html('data-item: do');
            };
          })
          
          • i: 序列值 ele: 只當前被遍歷的DOM元素
          • this 當前被遍歷的DOM元素,不能調用jQuery方法
          • (ele) 當前被遍歷元素的jquery對象,可以調用jquery的方法進行dom操作

          使用for in 遍歷 DOMList

          因為domList并非數組,而是一個對象,只是因為其key值為0,1,2... 而感覺與數組類似,但是直接遍歷的結果如下

          var domList=document.getElementsByClassName('its');
          for(var item in domList) {
            console.log(item, ':' + domList[item]);
          }
          // 0: <li></li>
          // 1: <li></li>
          //    ...
          // length: 5
          // item: function item() {}
          // namedItem: function namedItem() {}
          

          因此我們在使用for in 遍歷domList時,需要將domList轉換為數組

          var res=[].slice.call(domList);
          for(var item in res) {}
          

          類似這樣的對象還有函數的屬性 arguments 對象,當然字符串也是可以遍歷的,但是因為字符串其他屬性的 enumerable 被設置成了false,因此遍歷出來的結果跟數組是一樣的,也就不用擔心這個問題了.

          for of

          for of 用于遍歷可迭代對象「Iterator」。在 JS 中,數組 Array,字符串 String, Map,Set 等,都是可迭代對象。

          對象中包含 Symbol.iterator 屬性的,都被稱為可迭代對象。

          var arr=[1, 2, 3];
          arr[Symbol.iterator]
          // ? values() { [native code] }
          

          簡單案例。

          const iterable=['react', 'vue', 'angular'];
           
          for (const value of iterable) {
            console.log(value);
          }
          
          • for of 僅僅針對可迭代對象
          • 跳出循環的方式與 for 循環保持一致

          小補充

          如果你發現有些人寫函數這樣搞,不要驚慌,也不要覺得他高大上鳥不起

          +function(ROOT, Struct, undefined) {
            ... 
          }(window, function() {
              function Person() {}
          })

          ()(), !function() {}() +function() {}() 三種函數自執行的方式

          學習是一個艱苦的過程,當然如果能把技術學成,最后也一定可以獲得高薪工作。掌握一個好的學習方法,跟對一個學習的人非常重要。今后要是大家有啥問題,可以隨時來問我,能幫助別人學習解決問題,對于自己也是一個提升的過程。自己整理了一份2020最全面前端學習資料,從最基礎的HTML+CSS+JS到HTML5的項目實戰的學習資料都有整理web前端學習干貨,各種框架都有整理,送給每一位前端小伙伴,想要獲取的可以關注我的頭條號并在后臺私信我:前端,即可免費獲取

          JavaScript 作為 Web 開發的核心語言之一,在前端領域發揮著至關重要的作用。數組作為 JavaScript 中最常用的數據結構之一,掌握其遍歷方法對于任何前端開發者都是必不可少的技能。本文旨在介紹幾種常見的數組遍歷方式,并通過實例演示它們的應用場景和最佳實踐。

          技術概述

          定義

          數組遍歷是指按照一定的順序訪問數組中的每一個元素的過程。JavaScript 提供了多種方法來遍歷數組,包括傳統的 for 循環、forEach 方法、mapfilter 等高階函數。

          核心特性與優勢

          • 傳統 `for` 循環:
          • 特性: 直接訪問索引。
          • 優勢: 靈活性高,可以控制循環的終止條件。
          • `forEach` 方法:
          • 特性: 自動迭代數組中的每個元素。
          • 優勢: 代碼簡潔,易于理解和維護。
          • `map` 方法:
          • 特性: 創建新數組,對原數組每個元素執行函數并返回新值。
          • 優勢: 方便轉換數據結構。
          • `filter` 方法:
          • 特性: 創建新數組,包含通過測試的所有元素。
          • 優勢: 用于篩選數據。

          示例代碼

          const numbers=[1, 2, 3, 4, 5];
          
          // 使用 for 循環
          for (let i=0; i < numbers.length; i++) {
            console.log(numbers[i]);
          }
          
          // 使用 forEach
          numbers.forEach(function(number) {
            console.log(number);
          });
          
          // 使用 map
          const doubled=numbers.map(function(number) {
            return number * 2;
          });
          console.log(doubled);
          
          // 使用 filter
          const evenNumbers=numbers.filter(function(number) {
            return number % 2===0;
          });
          console.log(evenNumbers);
          

          技術細節

          遍歷原理

          數組遍歷的基本原理是按照一定的順序訪問數組中的每個元素。不同的遍歷方法內部實現有所不同,但最終目的是相同的。

          • `for` 循環:
          • 原理: 通過索引直接訪問數組元素。
          • 注意事項: 索引越界問題。
          • `forEach` 方法:
          • 原理: 內部使用迭代器模式。
          • 注意事項: 無法中斷遍歷過程。
          • `map` 方法:
          • 原理: 對每個元素應用函數并返回新數組。
          • 注意事項: 不改變原數組。
          • `filter` 方法:
          • 原理: 對每個元素應用函數判斷是否保留。
          • 注意事項: 同樣不改變原數組。

          難點

          • 中斷遍歷: forEach 方法不能直接使用 breakreturn 中斷遍歷。
          • 性能考慮: mapfilter 返回新數組,可能導致內存消耗增加。

          實戰應用

          場景與案例

          假設我們需要從一個數組中找出所有的偶數,并計算這些偶數的平方。

          問題與解決方案

          問題: 如何高效地找到所有偶數并計算它們的平方?

          解決方案: 使用 filter 方法篩選出偶數,再使用 map 方法計算平方。

          示例代碼

          const numbers=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
          
          // 使用 filter 和 map
          const evenSquares=numbers
            .filter(number=> number % 2===0)
            .map(number=> number * number);
          
          console.log(evenSquares); // 輸出: [4, 16, 36, 64, 100]
          

          優化與改進

          潛在問題

          • 性能: 在大數據量下使用 mapfilter 可能導致性能下降。
          • 內存: 過多使用高階函數可能會增加內存占用。

          優化建議

          • 減少循環次數: 嘗試合并操作以減少循環次數。
          • 使用緩存: 如果結果不變,可以緩存結果以減少重復計算。

          示例代碼

          // 緩存結果
          const cache={};
          
          function getEvenSquares(numbers) {
            if (cache[numbers]) {
              return cache[numbers];
            }
          
            const result=numbers
              .filter(number=> number % 2===0)
              .map(number=> number * number);
          
            cache[numbers]=result;
          
            return result;
          }
          

          常見問題

          問題及解決

          問題: 如何在 forEach 中中斷循環?

          解決方案: 使用 for 循環或 Array.prototype.some() 方法。

          // 使用 some
          const numbers=[1, 2, 3, 4, 5];
          let found=false;
          
          numbers.some(function(number) {
            if (number > 3) {
              found=true;
              return true; // 終止循環
            }
          });
          
          console.log(found); // 輸出: true
          

          總結與展望

          通過本文的學習,我們了解了 JavaScript 數組遍歷的多種方法及其應用場景。每種方法都有其特點和適用場合,合理選擇可以提高代碼的效率和可讀性。隨著 JavaScript 語言的發展,新的遍歷方法和優化技巧會不斷出現,我們期待未來能有更多實用高效的工具和技術出現,以進一步提升前端開發的效率和質量。

          希望本文能為你在實際開發中遇到的問題提供一些解決方案和思路,同時也鼓勵你不斷學習新的技術和方法,以應對日益復雜的前端開發挑戰。

          、for...in 語句


          1.1 遍歷對象屬性名稱

          for...in 語句常用于遍歷特定對象的屬性,包括字段名稱屬性及函數名稱屬性。在JavaScript語言中,它們均稱為屬性 (property)。

          let obj={
            name: 'obj',
          
            showName() {
              console.log(this.name);
            }
          };
          
          for (const propName in obj) {
            console.log(propName, typeof(obj[propName]));
          }

          顯示:

          name – "string"
          showName – "function"

          利用這一點,可方便地查看特定對象的所有屬性或方法名稱。下面語句打印出console對象所有的屬性:

          for (const propName in console) {
            console.log(propName, typeof(console[propName]));
          }

          顯示:

          debug – "function"
          error – "function"
          log – "function"
          info – "function"
          warn – "function"
          clear – "function"
          ...

          可以看出,這些屬性全部均是console的函數名稱,因為console沒有屬性名稱。

          1.2 遍歷數組索引值

          for...in 用于數組中,則遍歷數組索引值。

          let array=['a', 'b', 'c'];
          
          for (const index in array) {
            console.log(index, array[index]);
          }

          顯示:

          0 – "a"
          1 – "b"
          2 – "c"

          1.3 遍歷字符串索引值

          由于字符串是由字符組成的數組,因此 for...in 也可用于遍歷字符串的索引值。

          let str="abc";
          
          for (const index in str) {
            console.log(index, str[index]);
          }

          顯示:

          0 – "a"
          1 – "b"
          2 – "c"

          2、for...of 語句


          for...of 語句用于遍歷可遍歷對象 (iterable objects)的元素。這些可遍歷對象包括字符串、數組、以及類似于數組的對象,這些對象都帶有length屬性。

          2.1 不能用于遍歷對象屬性名稱

          for...of 語句不能用于遍歷對象的屬性名稱。因此,下面的代碼是錯誤的:

          let obj={
            name: 'obj',
          
            showName() {
              console.log(this.name);
            }
          };
          
          for (const propName of obj) {
            console.log(propName);
          }

          顯示:

          TypeError: undefined is not a function (near '...propName of obj...')

          意為,將 for...of 語句用于對象上面,無法提取具體的數值。

          2.2 遍歷數組元素

          for...of 語句經常用于遍歷數組中各元素的數值。

          let arr=[2, 4, 6, 8, 10];
          
          for (const value of arr) {
            console.log(value);
          }

          顯示:

          2
          4
          6
          8
          10

          2.3 遍歷字符串中的字符

          由于字符串是由字符組成的數組,因此 for...of 也可用于遍歷字符串的字符。

          let str="abc";
          
          for (const letter of str) {
            console.log(letter);
          }

          顯示:

          a
          b
          c

          2.4 解包

          數組元素如果是帶有特定屬性名稱的對象,可利用解包性質來快速遍歷這些屬性值。看下面例子。

          function Point(x, y) {
            return {x:x, y:y};
          }
          
          let points=[Point(1, 2), Point(2, 3), Point(4, 5)];
          
          for (const point of points) {
            console.log(point.x, point.y);
          }
          

          可將Point視為一個構造器 (constructor),每次調用Point(x, y)都會創建并返回該類的一個對象,且含有x及y的屬性名稱。points則是一個含有多個Point對象的數組。上面的代碼遍歷出每個Point對象后,賦值于point變量,然后打印出它們的x值及y值。

          如果我們不希望每次都通過引用對象屬性的方式來訪問x及y值,則可編寫代碼如下:

          for (const point of points) {
            let x=point.x;
            let y=point.y;
            console.log(x, y);
          }

          這一步可利用ES6的const解包特性予以簡化:

          for (const point of points) {
            const {x, y}=point;
            console.log(x, y);
          }

          更進一步,我們可以直接解包:

          for (const {x, y} of points) {
            console.log(x, y);
          }

          2.5 遍歷Map

          let scoreMap=new Map([
              ['Mike', 75],
              ['Tom', 80],
              ['Smith', 90]
          ]);
          
          for (const [key, value] of scoreMap) {
              console.log(key, value);
          }

          與上一節不同的是,Map需要使用 [key, value] 的方式來解包。

          3、forEach 方法


          3.1 forEach 常見調用方式

          for...in,for...of 均是語句,與它們不同的是,forEach是數組的內嵌方法。這意味著我們可以直接在數組對象上面直接調用該方法。

          let arr=[1, 3, 5, 7, 9];
          
          arr.forEach((element)=> {
            console.log(element);
          });

          作為數組方法,forEach有一個參數,該參數的類型是函數,稱為回調函數 (callback function)。所謂回調函數,是指一旦程序員提供了這樣的函數,JavaScript引擎將負責調用此函數。

          回調函數的價值在于回調函數可能存在多個參數,而這些參數將由JavaScript引擎自動提供。在回調函數中,我們可對JavaScript引擎所自動提供的參數進行進一步加工。

          在上面的回調函數中,element是由JavaScript引擎自動提供的,代表每個數組元素。

          上面的代碼采用了lambda匿名表達式。它等同于:

          let arr=[1, 3, 5, 7, 9];
          
          function callback(element) {
            console.log(element);
          }
          
          arr.forEach(callback);

          可見,lambda表達式更加簡練。

          3.2 forEach 的參數

          forEach共有3個參數 (上面例子只用了第1個),它們的排列順序如下:

          arr.forEach((element, index, array)=> {
            console.log(element);
            console.log(index);
            console.log(array);
          });

          參數element是數組元素,參數index是數組元素所在數組中的索引值,參數array是整個數組。

          一般情況下,我們僅需用到element及index參數就足夠了。由于是每次迭代,因此,forEach方法中的array參數較少用到。

          index每次遍歷時都會加1,且每次都會與array的長度比較。一旦超出array的界限,就會終止遍歷。如果遍歷過程中,修改了array的長度,則需特別注意這一點。

          3.2 forEach 遍歷的終止

          如何中止forEach的遍歷?JavaScript并未提供這樣的機制,但我們可以用一個雙重嵌套的異常來終止遍歷。

          let arr=[1, 3, 5, 7, 9];
          
          try {
            arr.forEach((element, index, array)=> {
              try {
                console.log(index);
                if (index >=3) {
                  throw new Error('forEach termination signal');
                }
              } catch (error) {
                throw error;
              }
            });
          } catch (e) {
            if (e.message==='forEach termination signal') {
              console.log('forEach terminated.');
            }
          }
          
          console.log('This line of code should be executed.');

          顯示:

          0
          1
          2
          3
          forEach terminated.
          This line of code should be executed.

          我們設定,當index的值大于等于3時,需要終止遍歷。這樣,在第7行,當此條件滿足時,即拋出"forEach termination signal"的異常。

          此時,程序流程轉入到第10行至第12行最內層的異常捕獲處理代碼:

          } catch (error) {
              throw error;
          }

          捕獲異常后,如果我們不重新拋出異常,JavaScript引擎則會認為我們已正確地處理了異常,因此會恢復中斷的遍歷進程,繼續處理下一個數組元素,這不是我們想要的。因此,我們在此重新拋出該異常,以切實終止遍歷。

          這時,forEach的遍歷因異常而終止,從而達到了我們的最初的目標。但因為有異常,如果我們未作任何處理,則該異常會導致整個程序都終止運行。只有在我們處理了異常后,程序才能往下走。這就是第14行至18行最外層異常捕獲代碼的作用:

          } catch (e) {
            if (e.message==='forEach termination signal') {
              console.log('forEach terminated');
            }
          }

          先判斷它是不是"forEach termination signal"。如果是,則簡單地打印一行消息。由于這里未再拋出新的異常,因此JavaScript引擎認為我們已經正確地處理了異常,則繼續執行后面的代碼。這樣,最后一行第20行語句將被執行并打印出"This line of code should be executed."的文本。

          一般來講,如果我們需要在數組的遍歷過程中終止遍歷,不要使用 forEach 語句,使用最傳統的方式即可:

          let arr=[1, 3, 5, 7, 9];
          
          for (let i=0; i < arr.length; i++) {
            console.log(i, arr[i]);
            if (i >=3) {
              break;
            }
          }
          
          console.log('This line of code should be executed.');

          這樣即可在遍歷中訪問數組的索引值與數組元素,又可以極為方便地隨時終止遍歷。


          主站蜘蛛池模板: 国产A∨国片精品一区二区| 国产一区风间由美在线观看| 国产一区二区三区影院| 国产一区二区三区内射高清| 人妻少妇久久中文字幕一区二区| 国产综合精品一区二区| 国产精品久久久久久麻豆一区| 日韩人妻无码一区二区三区| 日韩精品一区二三区中文| 成人免费视频一区| 亚洲av乱码中文一区二区三区| 亚洲一区二区三区在线观看蜜桃 | 无码精品尤物一区二区三区| 97精品国产福利一区二区三区| 国产一区二区三区在线看片| 日韩中文字幕精品免费一区| 精品无码人妻一区二区三区| 麻豆精品久久久一区二区| 中文字幕久久亚洲一区 | 另类一区二区三区| 精品国产一区二区三区2021| 亚洲成在人天堂一区二区| 日韩人妻无码一区二区三区| 久久无码精品一区二区三区| 亚洲中文字幕丝袜制服一区 | 综合久久一区二区三区| 国产伦精品一区二区免费| 一级毛片完整版免费播放一区| 无码欧精品亚洲日韩一区夜夜嗨 | 亚洲爽爽一区二区三区| 久久综合一区二区无码| 精品国产免费一区二区三区香蕉| 一区二区视频传媒有限公司| 亚洲啪啪综合AV一区| 亚洲色偷偷偷网站色偷一区| bt7086福利一区国产| 国产传媒一区二区三区呀| 一区二区日韩国产精品| 夜夜添无码试看一区二区三区| 国产午夜福利精品一区二区三区| 亚洲一区二区三区高清|