以下介紹ES5和ES6+ Array的常見用法,也許能讓你寫出來的JS Code看起來更簡潔易懂
主要有八種:
這篇先來介紹兩種,以下來一一說明吧!
1. Array.forEach
回傳陣列裡每一個元素
Array.forEach(callback(currentValue [, index [, array]])[, thisArg]);
範例:
const months = ['January', 'February', 'March', 'April']; months.forEach(function(month) { console.log(month);}); /* output January February March April */
如上面程式碼的output所示,會逐筆回傳array裡的資料
等同for迴圈:
const months = ['January', 'February', 'March', 'April']; for(let i = 0; i < months.length; i++) { console.log(months[i]);} /* output January February March April */
※要記住的是forEach不會回傳任何值,因此只適合用在一些迴圈處理
如下面範例,使它return month,得到的是undefined
const months = ['January', 'February', 'March', 'April']; const returnedValue = months.forEach(function (month) { return month;}); console.log('returnedValue: ', returnedValue); // undefined
上面範例只用到callback的第一個參數,但其實還可以接收兩個參數:
const months = ['January', 'February', 'March', 'April']; months.forEach(function(month, index, array) { console.log(month, index, array);}); /* output January 0 ["January", "February", "March", "April"] February 1 ["January", "February", "March", "April"] March 2 ["January", "February", "March", "April"] April 3 ["January", "February", "March", "April"] */
2. Array.map
回傳一新轉變過的陣列
Array.map(function callback(currentValue[, index[, array]]) { // Return element for new_array}[, thisArg])
範例1:
const months = ['January', 'February', 'March', 'April']; const transformedArray = months.map(function (month) { return month.toUpperCase();}); console.log(transformedArray); // ["JANUARY", "FEBRUARY", "MARCH", "APRIL"]
上面程式碼將每個元素全轉為大寫
等同:
const months = ['January', 'February', 'March', 'April'];const converted = []; for(let i = 0; i < months.length; i++) { converted.push(months[i].toUpperCase()); }; console.log(converted); // ["JANUARY", "FEBRUARY", "MARCH", "APRIL"]
※新的陣列長度會跟原始陣列一樣
前面有提到forEach不會回傳值,但map可以回傳一新長度同原始陣列的陣列
另外,map不會異動到原始陣列
範例2:
const users = [ { first_name: 'Mike', last_name: 'Sheridan' }, { first_name: 'Tim', last_name: 'Lee' }, { first_name: 'John', last_name: 'Carte' }]; const usersList = users.map(function (user) { return user.first_name + ' ' + user.last_name;}); console.log(usersList); // ["Mike Sheridan", "Tim Lee", "John Carte"]
也可使用map將first_name和last_name串接起來,回傳成一新array
原本用+符號去串接,在ES6可以使用以下用法:
const users = [ { first_name: 'Mike', last_name: 'Sheridan' }, { first_name: 'Tim', last_name: 'Lee' }, { first_name: 'John', last_name: 'Carte' }]; const usersList = users.map(function (user) { return `${user.first_name} ${user.last_name}`;}); console.log(usersList); // ["Mike Sheridan", "Tim Lee", "John Carte"]
下回再繼續整理接下來的兩個~