淺談JS數組中四種經常使用的API

在JavaScript中，數組是一個特殊的變量，用於存儲不一樣的元素。數組的使用場景很是多，平日學習中也涉及到不少數組的api/相關操做，對目前經常使用到的四個api( map(),forEach(),filter(),some() )的理解總結了一下。不足之處，請多多指教。

1. map

• map: "映射" 強調數組每一項的一一對應的關係,對每一個元素進行處理，並返回新的數組。(注:使用map時必定要return一個值，由於它的做用就是映射關係得出結果)

• 定義： 建立一個新數組，其結果是該數組中的每一個元素都調用一個提供的函數後返回的結果。

• 注：map() 不會對空數組進行檢測，也不會改變原始數組。

  先來一個簡單的栗子：

  const arr = [1,2,3,4];
  //求原數組的平方
  const squreArr = arr.map(item => item * item)
  console.log(squreArr);
  複製代碼

  結果：

  [2,4,9,16]
  複製代碼

• 其中map() 的功能就是映射，一一對應，把數組的每一項變成新的一項，得出一組新的數組。

  下面再扔一個栗子幫助理解

  eg:

  //抽象出一個數組 todo=[] ,把它映射成爲 HTML的過程,用js來完成
   
          let todo = [//建立一個數組 並列出要作的每一項
              {text: 'eat', done: false},
              {text: 'work', done: false}
          ]
          ul.innerHTML = todo.map(function(item,i) {
              // map foreach 強調的功能不同
              return `
              <li>
                <input type="checkbox" id="todo${i}">
                <label for="todo${i}">${item.text}</label>
              </li> 
              `
              //return `` 裏面添加動態替換的內容，必須是字符串，不能給數組
          }).join('');//拼接 '':空字符串 去掉數組裏面默認的逗號
  複製代碼

• map(function(item,i，ret)中，map()裏面接收的是一個函數,function裏面有三個參數分別是

  item: 表示數組裏的每一項

  i: 索引，表示在數組的第幾項

  ret：表示map裏面的原數組，每次循環都同樣的，不經常使用。

  能夠嘗試輸出console.log(item,i,ret)看下三個參數的效果：

  

• 這裏想提一下上面出現的 join()， 數組轉字符串，把數組中的全部元素經過指定的分隔符進行分隔放入一個字符串，返回生成的字符串。

  鏈式調用join(),把數組裏的 每一項變成/拼接成字符串，才符合HTML的要求，就能插到頁面上 例如 把插入 < li >的數組變成字符串

  // map  = [ `<li></li>`, `<li></li>`]
   // join  = <li></li><li></li>
  複製代碼

  另外舉例說明一下join()的效果：

  

2. forEach

• 定義: 用於調用數組的每一個元素，並將元素傳遞給回調函數。

• 語法： array.forEach(function(currentValue, index, arr), thisValue)

• forEach() 遍歷的範圍在第一次調用 function 前就會肯定。

  調用 forEach 後添加到數組中的項不會被 function 訪問到。

  若是已經存在的值被改變，則傳遞給 function 的值是 forEach() 遍歷到他們那一刻的值。

• 關於forEach()要注意的是：

  沒法中途退出循環，只能用return退出本次回調，進行下一次回調。

  它老是返回 undefined值,即便你return了一個值。

  eg:

  let a = [1, 2, ,3]; // 最後第二個元素是空的，不會遍歷(undefined、null會遍歷)
  let obj = { name: 'OBKoro1' };
  let result = a.forEach(function (value, index, array) { 
   a[3] = '改變元素';
   a.push('添加到尾端，不會被遍歷')
   console.log(value, 'forEach傳遞的第一個參數'); // 分別打印 1 ,2 ,改變元素
   console.log(this.name); // OBKoro1 打印三次 this綁定在obj對象上
   // break; // break會報錯
   return value; // return只能結束本次回調 會執行下次回調
   console.log('不會執行，由於return 會執行下一次循環回調')
  }, obj);
  console.log(result); // 即便return了一個值,也仍是返回undefined
  複製代碼

3. filter

• filter() 方法建立一個新的數組，新數組中的元素是經過檢查指定數組中符合條件的全部元素。 能夠理解爲：它能夠 在數組中過濾你想要的或者不想要的東西

• 語法：array.filter(function(currentValue,index,arr), thisValue)

• 注意： filter() 不會對空數組進行檢測，且不會改變原始數組。

• filter()方法是對數據中的元素進行過濾，也就是說是不能修改原數組中的數據，只能讀取原數組中的數據，function須要返回布爾值；爲true的時候，對應的元素留下來；爲false的時候，對應的元素過濾掉。

  eg: 返回數組 ages 中全部元素都大於 18 的元素:

  常規寫法

  const ages = [32,15,19,12];
  const nums = [];
  for(let age of ages) {
      if (age >= 18) {
         nums.push(age);
      }
   }
   console.log(nums);
  
  複製代碼

  接下來看一個超級精簡的方法， es6中的新寫法filter()

  const ages = [32,15,19,12];
  const adultArr = ages.filter( age => age >= 18);
  console.log(adultArr);
  
  複製代碼

  輸出結果爲

  [32,19]
  複製代碼

  array.filter 語義化的過濾功能 可讀性提高，用兩三行代碼就解決，裏面還涉及到箭頭函數，可點擊自行了解，這就是es6讓代碼更優雅的新寫法 ，表述性好一些 。

4. some

• some() 方法用於檢測數組中的元素是否知足指定條件（函數提供）。

• some() 方法會依次執行數組的每一個元素：

  若是有一個元素知足條件，則表達式返回true , 剩餘的元素不會再執行檢測。

  若是沒有知足條件的元素，則返回false。

• 注意： some() 不會對空數組進行檢測，且不會改變原始數組。

  eg:

  const ages = [32,15,19,12];
  onst adultPresent = ages.some(age => age >= 50);//數組裏有一個知足需求
  //console.log(adultPresent);
  
  const allOldEnough = ages.every(age => age >= 50);//數組裏面每一項都知足需求
  console.log(allOldEnough);
  
  複製代碼

5. 補充

• forEach()與 map()不一樣的是，它老是返回 undefined值，而且不可鏈式調用。

  常常有人用map來遍歷數組，能夠但不推薦，每一個api都有各自的功能，map強調的是對象映射，數組能夠用forEach()來遍歷。

  什麼狀況下你不應使用map:

  A)你不打算使用返回的新數組

  B) 你沒有從回調函數中返回值

  若是你還但願深刻的學習 Map，能夠參考這裏Array.prototype.map()

• 說一下前面提到的es6,在寫代碼的過程當中，咱們須要注意HTML的語義化，而且es6新引入的語法特性，讓咱們的代碼簡潔易懂，可讀性提高，讓代碼更優雅，以上提到的forEach 也是其中之一，還有 some等，後面將繼續深刻學習。 可參考阮一峯的ES6入門教程。

  新手一枚，歡迎指正。