標籤彙整:ARRAY

splice() 陣列項目刪除

説明

刪除或增添陣列項目

範例

刪除項

陣列.splice(編號,刪除幾項)

【例】arr.splice(1, 1)
→從 arr[1] 開始刪除1項
→刪掉 arr[1]

const fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
fruits.splice(1, 1)//從fruits[1]開始,刪掉1項。

console.log(fruits);//["Banana", "Lemon", "Apple", "Mango"]

增添項

const fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
fruits.splice(1, 1, "Melon")//從fruits[1]開始,刪掉1項,插入“Moko”

console.log(fruits);//["Banana", "Melon", "Lemon", "Apple", "Mango"]

 

陣列相關方法2

Ref: JavaScript30

some()  確認有沒有人符合條件

給予條件→找出是否有一個人(或以上)符合條件。

//共用陣列資料
const people = [
 { name: 'Wes', year: 1988 },
 { name: 'Kait', year: 1986 },
 { name: 'Irv', year: 1970 },
 { name: 'Lux', year: 2015 }
];

確認是否有人已滿19歳

/*****【方法一】function*************/
const isAdult1=people.some(

function(person){
 //getFullYear?
 const currentYear=new Date().getFullYear();
 if(currentYear-person.year>=19){
 return true;
 }
}
 
);


/*****【方法二】arrow function*******/
const isAdult2=people.some(person => new Date().getFullYear()-person.year>=19);
console.log(isAdult2);//true

every()  確認是否全員符合條件

給予條件→找出是否所有人都符合條件。

確認是否全員都滿19歳

const everyAdult=people.every(person => new Date().getFullYear()-person.year>=19);

console.log(everyAdult);//false

find()  找出特定的項目

//共用陣列資料
const comments = [
 { text: 'Love this!', id: 523423 },
 { text: 'Super good', id: 823423 },
 { text: 'You are the best', id: 2039842 },
 { text: 'Ramen is my fav food ever', id: 123523 },
 { text: 'Nice Nice Nice!', id: 542328 }
];

找出id為【823423】的留言

const comment=comments.find(comment => comment.id===823423);

console.log(comment);
/**
Object {
  id: 823423,
  text: "Super good"
}
**/

findIndex 找出特定項目的陣列編號

【※注意】陣列編號由 0 開始算。編號 0 為第1項、編號 1 為第 2 項。

找出id為【823423】的陣列編號

const index=comments.findIndex(comment => comment.id===823423);

console.log(index);//1 ←comments[1];

splice 刪除特定編號的陣列

參考文章
【※注意】只能指定編號刪除。

comments.splice(1, 1);

//然後comments就會少一項了。但不保留沒刪除前的内容。

slice 摘取陣列

參考文章

也可以達到刪除特定項目陣列的效果。
但方法是擷取保留項目,像是指定列印頁數。

共5頁的資料→只列印【第1頁】、【第3-5頁】→最後印出來的資料就會少了第2頁

用slice可以同時保留刪除前的陣列與刪除後的陣列。

const newComments=[
 ...comments.slice(0, 1),//only return comments[0]
 ...comments.slice(2)//omit end value
 //保留slice[0], slice[2-4]→等於去掉slice[1]
]; 

console.log(newComments);
/**
const newC=[
 ...comments.slice(0, 1),//only return comments[0]
 ...comments.slice(2)//omit end value
];
**/

 

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
}
****************/

 

JavaScript split()

方法

split(),括弧裡面放要來切割的字符,字符要用雙引號””包起來

範例

const arr=["moko.dog", "afro.ugly", "ian.clever"];
const str="moko.dog";

//split("切割的符號")
const split=str.split(".");
console.log(split)//["moko", "dog"]

//指定參數可以抓到分割後的部位
const [first, last]=str.split(".");
console.log(first); //"moko"
console.log(last);//"dog"

//也可以在陣列裡面做分割,但是會變成陣列中的陣列
const arrSp=arr.map(the => the.split("."));
console.log(arrSp);//[["moko", "dog"], ["afro", "ugly"], ["ian", "clever"]]


//結合map與[]=split,只抓出的部分資料,並且排成陣列
const firstOnly=arr.map((the) => {
 const [f, l]=the.split(".");
 return f;
});
console.log(firstOnly); //["moko", "afro", "ian"]

進階:shift()  選取第一個切好的字串

【説明】moko.beauty.dog.retriever 這個字串用〔.〕切割,會得出以下結果

  • output[0]:moko
  • output[1]:beauty
  • output[2]:dog
  • output[3]:retriever

shift() 會直接取output[0]的值,也就是摘取「moko」這個字串

const string="moko.beauty.dog.retriever";

string.split(".").shift(); //"moko"

pop()  選取最後一個切好的字串

說明同上,pop() 會選到output[3] 的「retriver」

const string="moko.beauty.dog.retriever";

string.split(".").pop(); //"retriever"

nodeList轉array

説明

querySelectorAll() 呼叫的元素形式是 nodeList ,
所以不能直接在 JavaScript 做一般的運算。
但可以轉成 Array ,再去做運算。

方法一:Object Spread Operator

ES6 方法,簡潔的寫法

li Ian
li Afro
li Moko
const li=document.querySelectorAll("li");

//turn to array
const arr=[...li];
const fullNames=arr.map(name => name.textContent+" CHEN"); //提取出文字 + 後綴

console.log(fullNames);//["Ian CHEN", "Afro CHEN", "Moko CHEN"]

方法二 Array.from()

const li=document.querySelectorAll("li");

//turn to array
const arr2=Array.from(li);
const fullNames=arr2.map(name => name.textContent+" CHEN"); //提取出文字 + 後綴

console.log(fullNames);//["Ian CHEN", "Afro CHEN", "Moko CHEN"]

 

Ajax

説明

使用外部(後台)資料,不用自己建構資料模型。

步驟

  1. 使用ajax串接後台api
  2. 印出資料,success:成功
  3. 將function内資料外接
  4. 之後使用tododata變數,可以在外部編輯這筆資料

範例

div#notify
// 3 將function内資料外接
var tododata;

// 1 使用ajax串接後台api
$.ajax(
 {
  url: "https://goo.gl/PBvlqI",
 // 2 印出資料,success:成功
  success: function(res){
   $("#notify").text(res);
   tododata=res;
  }
 }
);

// 4 之後使用tododata變數,可以在外部編輯這筆資料
Display

(按下載入不安全的代碼後顯示)

應用:JSON與ajax結合

  1. 製作html清單模板
  2. 定義外部api
  3. ajax串接,ajax裡面是物件形式
    • 連接url變數
    • 成功:傳回參數→結果→外接
    • JSON.parse(文字)→物件結構
  4. 製作迴圈,準備列印資料
    • 迴圈下的api資料
    • 代換變數
    • 載入代換後的新模板
  5. 建立打勾項目
    • 取代class
    • 定義打勾class
.todolist
 h3 我的代辦清單
 hr
 ul#listitem
 //li(class="{{class}}") {{num}}. {{name}} {{date}}
*
font-family: 微軟正黑體
 
body
 padding: 30px

.todolist
 display: inline-block
 padding: 20px
 border: solid 3px
 
 & ul
  padding: 0px

 & li
  list-style: none
  width: 300px
  padding: 5px

 .done
  &:before
  content: " ✔ "
  color: red
// 1 製作html清單模板
var html="<li class='{{class}}'>{{num}}.{{name}} {{date}}</li>";
// 2 定義外部api
var api="https://goo.gl/PBvlqI";
// 3.3 定義外接資料
var data;

// 3 ajax串接,ajax裡面是物件形式
$.ajax({
 // 3.1 連接url變數
 url: api,
 // 3.2 成功:傳回參數→結果→外接
 success: function(res){
 // 3.3 JSON.parse(文字)→物件結構
 // console.log(JSON.parse(res));
 data=JSON.parse(res);
 
 // 4 製作迴圈,準備列印資料
 for(i=0;i<data.length;i++){
 // 4.1 迴圈下的api資料
 var item=data[i]
 // 5.2 定義打勾class
 // if簡寫(檢査項目==true)?"是的話傳値":"否的話傳値"
 var now_class=(item.done)==true?"done":"";
 
 
 // 4.2 代換變數
 var new_html=
 html.replace("{{num}}",i+1)
 .replace("{{name}}",item.name)
 .replace("{{date}}",item.date)
 // 5 建立打勾項目
 // 5.1 取代class
 .replace("{{class}}",now_class);
 
 // 4.3 載入代換後的新模板
 $("#listitem").append(new_html);
 }
 }
});
Display

CODEPEN

陣列與物件

陣列[]:依照編號排排站好的資料

  1. 宣告陣列[]
  2. 編號資料
  3. 利用push,新增資料
  4. 開始列印資料
ul#menu
// 1宣告陣列
var menu=[];

// 2編號資料
menu[0]="東坡肉炒飯";
menu[1]="葱爆羊肉";
menu[2]="花式炒鮭魚";

// 3利用push,新增資料
menu.push("新疆烤山豬");

// 4開始列印資料
$("#menu").append("<li>"+menu[0]+"</li>");
$("#menu").append("<li>"+menu[1]+"</li>");
$("#menu").append("<li>"+menu[2]+"</li>");
$("#menu").append("<li>"+menu[3]+"</li>");

陣列進階:簡寫方法

var menu = [];

// 1 編號資料簡寫,簡化以下資料
// menu_json[0]="東坡肉炒飯";
// menu_json[1]="葱爆羊肉";
// menu_json[2]="花式炒鮭魚";

// *毎筆資料用逗號隔開
menu = ["東坡肉炒飯", "葱爆羊肉", "花式炒鮭魚"];

menu.push("新疆烤山豬");

// 2 列印資料簡寫,利用迴圈for制定規則
// $("#menu_json").append("<li>"+menu_json[0]+"</li>");
// $("#menu_json").append("<li>"+menu_json[1]+"</li>");
// $("#menu_json").append("<li>"+menu_json[2]+"</li>");
// $("#menu_json").append("<li>"+menu_json[3]+"</li>");

// 迴圈變數(開始;結束;規則)
for (var i = 0; i < 4; i++) {
 // debug: console.log(i);
 $("#menu").append("<li>" + menu[i] + "</li>");
}

陣列進階2:自動判斷資料長度

var menu = [];

menu = ["東坡肉炒飯", "葱爆羊肉", "花式炒鮭魚"];

menu.push("新疆烤山豬");

// 迴圈結束値使用menu.length
for (var i = 0; i < menu.length; i++) {
 $("#menu").append("<li>" + menu[i] + "</li>");
}

物件{}:毎一項資料都有名字的陣列

  1. 定義物件
  2. 編寫物件
  3. 列印物件
ul#shop
// 1 定義物件
var shop = {};

// 2 編寫物件
shop.name="阿東熱炒";
shop.addr="台北市宵夜路";
shop.phone="02 123456789";

// 3 列印物件
// 補充:列印物件方法二shop["name"]=shop.name
// 方法二使用時機,中括號裡面是變數或參數時使用
// shop.name只有當name是存在的物件名才可使用
$("#shop").append("<li>商店名稱:"+shop.name+"</li>");
$("#shop").append("<li>商店地址:"+shop.addr+"</li>");
$("#shop").append("<li>商店電話:"+shop.phone+"</li>");

物件進階:編寫物件簡寫

var shop = {};

// 編寫物件簡寫,簡化以下項目
// shop.name="阿東熱炒";
// shop.addr="台北市宵夜路";
// shop.phone="02 123456789";

// 用逗號區隔
shop={
 //屬性名稱有空格時需要"包起來
 //ex. "shop name": "阿東熱炒"
 name: "阿東熱炒",
 addr: "台北市宵夜路",
 phone: "02 123456789"
};


$("#shop").append("<li>商店名稱:"+shop.name+"</li>");
$("#shop").append("<li>商店地址:"+shop.addr+"</li>");
$("#shop").append("<li>商店電話:"+shop.phone+"</li>");

物件内的陣列&清單内的子清單

ul#shop
var shop = {};

// 1 物件内新增陣列
shop = {
 name: "阿東熱炒",
 addr: "台北市宵夜路",
 phone: "02 123456789",
 menu: ["東坡肉炒飯", "葱爆羊肉", "花式炒鮭魚"]
};

// 2 一樣可以用push,不過前面要+物件名
shop.menu.push("新疆烤山豬");

// 4 定義子清單變數
// 4.1 建立ul開始標籤
var menu_html = "<ul>";
// 4.2 製作内部迴圈
for(i = 0; i < shop.menu.length; i++){
 menu_html+="<li>"+shop.menu[i]+"</li>";
}
// 4.3 建立ul結束標籤
menu_html += "</ul>";

// 3 列印子陣列,先用menu_html借代,因為要做子清單
$("#shop").append("<li>商店名稱:" + shop.name + "</li>");
$("#shop").append("<li>商店地址:" + shop.addr + "</li>");
$("#shop").append("<li>商店電話:" + shop.phone + "</li>");
$("#shop").append("<li>商店菜單:" + menu_html + "</li>");

使用變數呼叫物件

必須要將整串變數連名帶姓地存成變數或參數

var car={brand: "Audi", color: "blue", foot: 4};

var s=car.brand;
console.log(brand); //Audi

//不可以這樣做↓
var s2=brand;
console.log(car.v2); //error

//呼叫變數的式子不管有多長,都不可以拆開
//要寫成像這樣→var s3=title.dataset.name
//參數同理