JavaScript Array methods 陣列相關方法1

filter()篩選

篩出符合條件的値
用 if 指定條件,若條件為真,return true回傳其値,否則忽略

//共用物件資料
const inventors = [
 { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
 { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
 { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
 { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
 { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
 { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
 { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
 { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
 { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
 { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
 { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
 { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
 ];

用 filter 找出生於 1500 年代的投資客

//用 if 指定條件,若條件為真,return true回傳其値,否則忽略
const fifteen=inventors.filter(function(inventor){
 if(inventor.year>=1500 && inventor.year<1600){
 return true;//keep it
 }else{
 return false; //else可以省略不寫
 }
});

//ES6版本
const fifteen2=inventors.filter(inventor => inventor.year>=1500 && inventor.year<1600);
//省略 retun 不寫

console.table(fifteen);

Display (console panel)

(index) first last year passed
0 “Galileo” “Galilei” 1564 1642
1 “Johannes” “Kepler” 1571 1630

map() 再構築

將原本的陣列經過内容編排後,以陣列的方式重新呈現新的内容

列出投資客的全名

const fullNames=inventors.map(inventor => `${inventor.first} ${inventor.last}`);

console.log(fullNames);
//fullNames是陣列資料所以只能用log
//map只能回傳陣列
//["Albert Einstein", "Isaac Newton", "Galileo Galilei", "Marie Curie", "Johannes Kepler", "Nicolaus Copernicus", "Max Planck", "Katherine Blodgett", "Ada Lovelace", "Sarah E. Goode", "Lise Meitner", "Hanna Hammarström"]

sort() 排序

針對陣列資料做排序
利用 if statement

  • 【return 1】往下移動
  • 【return -1】往上移動

將投資客由老排到年輕

//a: first guy
//b: next guy

const ordered=inventors.sort(function(a, b){
 if(a.year>b.year){
 //go down
 return 1;
 }else{
 //go up
 return -1;
 }
})

//if簡寫版
const ordered2=inventors.sort((a, b) => a.year>b.year ? 1 : -1);
//條件不用()包起來
//? means if it is true
//: means else

console.table(ordered2);

Display (console panel)

(index) first last year passed
0 “Nicolaus” “Copernicus” 1473 1543
1 “Galileo” “Galilei” 1564 1642
2 “Johannes” “Kepler” 1571 1630
3 “Isaac” “Newton” 1643 1727
4 “Ada” “Lovelace” 1815 1852
5 “Hanna” “Hammarström” 1829 1909
6 Sarah E.” “Goode” 1855 1905
7 “Max” “Planck” 1858 1947
8 “Marie” “Curie” 1867 1934
9 “Lise” “Meitner” 1878 1968
10 “Albert” “Einstein” 1879 1955
11 “Katherine” “Blodgett” 1898 1979

將投資客由長壽排到短命

const oldest=inventors.sort(function(a,b){
 //内部宣告常數算壽命
 const lastGuy=a.passed - a.year;
 const nextGuy=b.passed - b.year;
 
 //簡寫版
 return lastGuy > nextGuy ? -1 : 1;

 //麻煩版
 /*
 if(lastGuy>nextGuy){
 //go up
 return -1
 }else{
 //go down
 return 1;
 }
 */
});

console.table(oldest);

Display (console panel)

(index) first last year passed
0 “Lise” “Meitner” 1878 1968
1 “Max” “Planck” 1858 1947
2 “Isaac” “Newton” 1643 1727
3 “Katherine” “Blodgett” 1898 1979
4 “Hanna” “Hammarström” 1829 1909
5 “Galileo” “Galilei” 1564 1642
6 “Albert” “Einstein” 1879 1955
7 “Nicolaus” “Copernicus” 1473 1543
8 “Marie” “Curie” 1867 1934
9 “Johannes” “Kepler” 1571 1630
10 Sarah E.” “Goode” 1855 1905
11 “Ada” “Lovelace” 1815 1852

依照字母排序名字部分 (first name)

//共用陣列資料
const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
//split用法參考
const alpha=people.sort((lastOne, nextOne) =>{
 const [aFirst, aLast]=lastOne.split(", ");
 const [bFirst, bLast]=nextOne.split(", ");

 return aLast > bLast ? 1 : -1;
});

console.log(alpha);
//["Bierce, Ambrose", "Bevan, Aneurin", "Birrell, Augustine", "Becker, Carl", "Bennington, Chester", "Ben-Gurion, David", "Black, Elk", "Berne, Eric", "Bethea, Erin", "Biondo, Frank", "Beck, Glenn", "Berry, Halle", "Beecher, Henry", "Belloc, Hilaire", "Bergman, Ingmar", "Berlin, Irving", "Biden, Joseph", "Billings, Josh", "Bevel, Ken", "Benson, Leana", "Bentsen, Lloyd", "Berio, Luciano", "Beethoven, Ludwig", "Begin, Menachem", "Beddoes, Mick", "Berle, Milton", "Benenson, Peter", "Berger, Ric", "Blair, Robert", "Benchley, Robert", "Beckett, Samuel", "Bernhard, Sandra", "Bellow, Saul", "Bent, Silas", "Biko, Steve", "Blair, Tony", "Benn, Tony", "Benjamin, Walter", "Berry, Wendell", "Blake, William", "Berra, Yogi"]

reduce() 累加

  • 指定總和項的値
  • return 總和項 += 子項目

所有投資客總共活了多久

//迴圈法
var totalYears=0;

for(i=0;i<inventors.length;i++){
 totalYears += (inventors[i].passed - inventors[i].year);
}
console.log(totalYears); //861

//reduce法
//total總和項
//inventor子項目
const totalYears2=inventors.reduce((total, inventor) => {
 return total += (inventor.passed - inventor.year);
}, 0);//means initial total = 0;
console.log(totalYears);//861

統計各交通工具出現次數

//原始資料
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];

//if法
const transpotation=data.reduce(function(obj, item){
 if(!obj[item]){
 obj[item]=0;
 //定義obj内容初始値
 }
 obj[item]++;
 return obj;
}, {});
//↑{}定義obj是一個物件


//簡寫法
//obj, item 自由命名
const trasnpotation2=data.reduce(function(obj, item){
 obj[item]++;
 //obj[item]=obj.item,因為item是變數不是真實存在的物件下資料名稱,所以必須用中括號法呼叫他

 console.log(item);//'car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck'
 //item沒有定義所以會抓到陣列内容,然後因為下面的函式外初始値會抓14次,從頭抓到尾
 console.log(obj.car);//1 2 2 2 2 2 3 3 3 3 4 4 5 5←car在14次中的每一次共出現了幾次

 return obj;

},{
 car: 0,
 walk: 0,
 truck: 0,
 bike: 0,
 van: 0
});
//定義obj初始値
/*****☆★重要★☆*****
這個初始値
是寫在function外面的
所以
會跑14次
好像是reduce的特性喔啾咪
********************/

console.log(transpotation);
/****************
Object {
  bike: 2,
  car: 5,
  truck: 3,
  van: 2,
  walk: 2
}
****************/

 

Leave a Reply

Your email address will not be published. Required fields are marked *