天天看點

Javascript周遊數組的各種方式

初學者做一個小筆記,如有遺漏歡迎各位大佬補充,理性讨論不要yygq,謝謝
var arr = [1, 2, 3, 4, 4, 4, 4];

/* 
  1、for循環
  參數:周遊出來的每個都是item即每一項
    傳回值:無
*/
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

/* 
  2、for……of 循環,周遊出來的每個value都是數值對應的值
    參數:周遊出來的每個都是item即每一項
    傳回值:無
*/
for (value of arr) {
  console.log(value);
}

/* 
  3、for……in 循環
    參數:周遊出來的每個都是index值即數組下标
    傳回值:無
*/
for (index in arr) {
  console.log(index);
}

/* 
  4、forEach循環(高階函數)
    參數:value數組中的目前項, index目前項的索引, array原始數組;
    傳回值:無
*/
arr.forEach((value, index, array) => {
  console.log(value);
  console.log(index);
  console.log(array);
});

/* 
  5、filter方法(高階函數)
    參數:item數組中的目前項, index目前項的索引, array原始數組;
    傳回值:新數組,其包含通過所提供函數實作的測試的所有元素。
*/
const a = arr.filter((item, index, array) => {
  console.log(item, index, array);
  return item > 3;
});
console.log(a);

// 引用自MDN Web Docs
const words = [
  "spray",
  "limit",
  "elite",
  "exuberant",
  "destruction",
  "present",
];
const result = words.filter((word) => word.length > 6); // 沒有括号是直接省略return語句
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

/* 
  6、map方法(高階函數)
    參數:item數組中的目前項, index目前項的索引, array原始數組;
    傳回值:新數組,其包含通過所提供函數實作的測試的所有元素。
    備注:
      因為map生成一個新數組,當你不打算使用傳回的新數組卻使用map是違背設計初衷的,請用forEach或者for-of替代。
      你不該使用map: A)你不打算使用傳回的新數組,或/且 B) 你沒有從回調函數中傳回值。
*/
const newArr = arr.map((item, index, array) => {
  console.log(item);
  console.log(index);
  console.log(array);
  return item * 4;
});
console.log(newArr);

/* 
  7、reduce方法(高階函數)
    參數:
      Accumulator (acc) (累計器)
      Current Value (cur) (目前值)
      Current Index (idx) (目前索引)
      Source Array (src) (源數組)
    傳回值:數值,函數的傳回值配置設定給累計器,該傳回值在數組的每個疊代中被記住,并最後成為最終的單個結果值。
*/
const sum = [0, 1, 2, 3, 4].reduce(function (
  accumulator,
  currentValue,
  currentIndex,
  array
) {
  return accumulator + currentValue;
});
console.log(sum);

/* 
  8、every方法(高階函數)
    參數:
      callback
        用來測試每個元素的函數,它可以接收三個參數:
      element
        用于測試的目前值。
      index可選
        用于測試的目前值的索引。
      array可選
        調用 every 的目前數組。
      thisArg
        執行 callback 時使用的 this 值。
    傳回值:布爾值
    備注:every() 方法測試一個數組内的所有元素是否都能通過某個指定函數的測試。它傳回一個布爾值。
*/
// 下面的例子檢測在數組中是否所有元素大于 10。
function isBigEnough(element, index, array) {
  return element >= 10;
}
const big = [12, 5, 8, 130, 44].every(isBigEnough); // false
const bigg = [12, 54, 18, 130, 44].every(isBigEnough); // true
console.log(big);
console.log(bigg);

/* 
  9、every方法(高階函數)
    參數:
      callback
        用來測試每個元素的函數,接受三個參數:
      element
        數組中正在處理的元素。
      index 可選
        數組中正在處理的元素的索引值。
      array可選
        some()被調用的數組。
      thisArg可選
        執行 callback 時使用的 this 值。
    傳回值:布爾值
    備注:some() 方法測試數組中是不是至少有1個元素通過了被提供的函數測試。它傳回的是一個Boolean類型的值。
*/
// 下面的例子檢測在數組中是否有元素大于 10。
function isBiggerThan10(element, index, array) {
  return element > 10;
}

const some = [2, 5, 8, 1, 4].some(isBiggerThan10); // false
const somee = [12, 5, 8, 1, 4].some(isBiggerThan10); // true
console.log(some);
console.log(somee);
           

繼續閱讀