博客地址：https://ainyi.com/12

?

for 循環 和 Array 數組對象方法

?for for-in for-of forEach效率比較

- 四種循環，遍歷長度為 1000000 的數組疊加，得到的時間差：

?

for 3 for-in 250 for-of 7 forEach 44

- 效率速度：for > for-of > forEach > for-in

- for循環本身比較穩定，是for循環的i是Number類型，開銷較小 - for-of 循環的是val，且只能循環數組，不能循環對象 - forEach 不支持 return 和 break，一定會把所有數據遍歷完畢 - for-in 需要窮舉對象的所有屬性，包括自定義的添加的屬性也會遍歷，for...in的key是String類型，有轉換過程，開銷比較大 1 // 面試： for, forEach, for-in, for-of（es6） 2 3 let arr = [1,2,3,4,5]; 4 arr.b = '100'; // 自定義私有屬性 5 6 7 8 // for循環 速度最快 9 for (let i = 0; len = arr.length, i < len; i++) { // 編程式 10 console.log("for循環"+arr[i]); 11 } 12 13 14 15 // forEach 不支持return和break，無論如何都會遍歷完， 16 arr.forEach(function(item){ 17 console.log("forEach循環"+item); 18 }); 19 20 21 22 // for-in 遍歷的是 key 值，且 key 會變成字符串類型，包括數組的私有屬性也會打印輸出 23 for(let key in arr){ 24 console.log("for in循環"+key); 25 console.log(typeof key); 26 } 27 28 29 30 // for-of 遍歷的是值 val，只能遍歷數組 （不能遍歷對象） 31 for(let val of arr){ 32 console.log("for of循環"+val); 33 } 34 35 36 // Object.keys 將對象的 key 作為新的數組，這樣 for-of 循環的就是原數組的 key 值 37 let obj = {school:'haida',age:20}; 38 // 變成 ['school','age'] 39 for(let val of Object.keys(obj)){ 40 console.log(obj[val]); 41 }

?

?JavaScript Array 數組對象方法

- 不改變原數組：concat、every、filter、find、includes、indexOf、isArray、join、lastIndexOf、map、reduce、slice、some、toString、valueOf - 改變原數組：pop、push、reverse、shift、sort、splice、unshift

?重點難點解析

- filter、map、find、includes、some、every、reduce、slice - 數組變異：pop、shift、splice、unshift 1 // filter 過濾：可用于刪除數組元素 2 // 不改變原數組，過濾后返回新數組 3 // 回調函數的返回值：若 true：表示這一項放到新數組中 4 let newArr = [1,2,3,4,5].filter(item => item>2 && item <5); 5 //數組元素>2且<5的元素返回true，就會放到新數組 6 console.log("新數組："+newArr); 7 8 9 10 11 // map 映射，將原有的數組映射成一個新數組 [1,2,3]，用于更新數組元素 12 // 不改變原數組，返回新數組 13 // 回調函數中返回什么這一項就是什么 14 // 若要拼接 <li>1</li><li>2</li><li>3</li> 15 let arr2 = [1,2,3].map(item => `<li>${item}</li>`); 16 // join方法用于把數組中的所有元素放入一個字符串。每個元素通過指定的分隔符進行分隔。 17 // 這里使用''空字符分割 18 console.log(arr2.join('')); 19 20 21 // 若只要 name 的 val 值，不要 key 值 22 let arrJson = [{'name':'krry'},{'name':'lily'},{'name':'xiaoyue'},{'name':'krry'}]; 23 let newArrJson = arrJson.map( val => val.name); 24 console.log(`newArrJson：${newArrJson}`); 25 26 27 28 29 // find：返回找到的那一項 30 // 不改變原數組 31 // 找到后停止循環，找不到返回的是 undefined 32 let arrFind = [1,2,3,4,55,555]; 33 let result = arrFind.find((item,index) => { 34 return item.toString().indexOf(5) > -1;// 找數組元素中有5的第一項 35 }); 36 console.log(result); // 輸出 55 37 38 39 40 41 // includes 數組中是否包含某個元素，返回 true or false 42 let arr3 = [1,2,3,4,55,555]; 43 console.log(arr3.includes(5)); 44 45 46 47 48 // some：如果有一個元素滿足條件，則表達式返回 true, 剩余的元素不會再執行檢測。 49 // 如果沒有滿足條件的元素，則返回 false 50 let arrSF = [1,2,3,4,555]; 51 let result = arrSF.some((item,index)=>{ 52 return item > 3; 53 }); 54 console.log(result); // 輸出true 55 56 57 58 59 // every：如果有一個元素不滿足，則表達式返回 false，剩余的元素不會再進行檢測。 60 // 如果所有元素都滿足條件，則返回 true 61 let arrSE = [1,2,3,4,555]; 62 let result = arrSE.every((item,index)=>{ 63 return item > 3; 64 }); 65 console.log(result); // 輸出 false 66 67 68 69 70 // reduce 收斂函數, 4個參數 返回的是疊加后的結果 71 // 不改變原數組 72 // 回調函數返回的結果： 73 // prev：數組的第一項，next是數組的第二項（下一項） 74 // 當前 return 的值是下一次的 prev 75 let sum = [1,2,3,4,5].reduce((prev,next,index,item)=>{ 76 // console.log(arguments); 77 // 1 2 78 // 3 3 79 // 6 4 80 // 10 5 81 console.log(prev,next); 82 return prev+next; // 返回值會作為下一次的 prev 83 }); 84 console.log(sum); 85 86 87 // reduce 可以默認指定第一輪的 prev，那么 next 將會是數組第一項（下一項） 88 // 例子：算出總金額： 89 let sum2 = [{price:30,count:2},{price:30,count:3},{price:30,count:4}]; 90 let allSum = sum2.reduce((prev,next)=>{ 91 // 0+60 92 // 60+90 93 // 150+120 94 console.log(prev,next); 95 return prev+next.price*next.count; 96 },0); // 默認指定第一次的 prev 為 0 97 console.log(allSum); 98 99 100 // 利用reduce把二維數組變成一維數組 101 let flat = [[1,2,3],[4,5,6],[7,8,9]].reduce((prev,next)=>{ 102 return prev.concat(next); // 拼接數組 103 }); 104 console.log(flat); 105 106 107 108 109 // slice 從已有的數組中返回選定的元素 110 // 不改變原數組 111 let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; 112 let citrus = fruits.slice(1,3); 113 console.log(citrus); // 輸出 Orange,Lemon 114 115 116 117 118 // pop 用于刪除數組的最后一個元素并返回刪除的元素 119 // 改變原數組 120 let fur = ["Banana", "Orange", "Apple", "Mango"]; 121 fur.pop(); 122 console.log(fur); // 輸出 Banana,Orange,Apple 123 124 125 126 127 // shift 用于把數組的第一個元素從其中刪除，并返回第一個元素的值 128 // 改變原數組 129 let fts = ["Banana", "Orange", "Apple", "Mango"]; 130 fts.shift(); 131 console.log(fts);// 輸出 Orange,Apple,Mango 132 133 134 135 136 // unshift 向數組的開頭添加一個或更多元素，并返回新的長度 137 // 改變原數組 138 let fse = ["Banana", "Orange", "Apple", "Mango"]; 139 fse.unshift("Lemon","Pineapple"); 140 console.log(fse); // 輸出 Lemon,Pineapple,Banana,Orange,Apple,Mango 141 142 143 144 145 // splice 用于插入、刪除或替換數組的元素 146 // 改變原數組 147 let myArrs = ["Banana", "Orange", "Apple", "Mango"]; 148 myArrs.splice(2,1); // 從數組下標為 2 開始刪除，刪除 1 個元素 149 console.log(myArrs); // 輸出 Banana,Orange,Mango

?

?額外談一下arguments

1 // arguments 是一個對應于傳遞給函數的參數的類數組對象 2 // 此對象包含傳遞給函數的每個參數的條目，第一個條目的索引從0開始。 3 // 例如，如果一個函數傳遞了三個參數，你可以以如下方式引用他們： 4 // arguments[0] 5 // arguments[1] 6 // arguments[2] 7 let xx = sumAll(1, 123, 500, 115, 44, 88); 8 9 function sumAll() { 10 let i, sum = 0; 11 for (i = 0; i < arguments.length; i++) { 12 sum += arguments[i]; 13 } 14 console.log(sum); // 返回總和 871 15 }

?

?for 效率測試代碼

1 let arr = new Array(); 2 for(let i = 0, len = 1000000;i < len; i++){ 3 arr.push(i); 4 } 5 6 function foradd(my_arr){ 7 let sum = 0; 8 for(let i = 0; i < my_arr.length; i++){ 9 sum += my_arr[i]; 10 } 11 } 12 13 function forinadd(my_arr){ 14 let sum = 0; 15 for(let key in my_arr){ 16 sum += my_arr[key]; 17 } 18 } 19 20 function forofadd(my_arr){ 21 let sum = 0; 22 for(let val of my_arr){ 23 sum += val; 24 } 25 } 26 27 28 function forEachadd(my_arr){ 29 let sum = 0; 30 my_arr.forEach(val => { 31 sum += val; 32 }); 33 } 34 35 function timeTest(func,my_arr,str) { 36 var start_time = null; 37 var end_time = null; 38 start_time = new Date().getTime(); 39 func(my_arr); 40 end_time = new Date().getTime(); 41 console.log(str,(end_time - start_time).toString()); 42 } 43 44 timeTest(foradd,arr,'for'); 45 timeTest(forinadd,arr,'for-in'); 46 timeTest(forofadd,arr,'for-of'); 47 timeTest(forEachadd,arr,'forEach');

?

博客地址：https://ainyi.com/12

轉載于:https://www.cnblogs.com/ainyi/p/9203374.html

總結

以上是生活随笔為你收集整理的for 循环 和 Array 数组对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。