程式碼上色函式庫 highlight.js

功能

程式碼上色,可以用 syntax 找相關的英文資源 ,這個函式庫可以將部落格的程式碼文字依照關鍵字、註解等上不同顏色。

使用方法

  1. 引入 css 與 js 函式庫
  2. 依照規範撰寫pre tag 與 code tag
  3. 寫進指定 js 碼

※css有各種style。

一般網頁

外引CDN函式庫的方法

引入 js 與 css 函式庫

<head>
 
 //引入css,這裡選擇tomorrow style
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/tomorrow.min.css" />

 //引入js
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
</head>

依照規範撰寫 pre 與 code

  1. pre tag 裡面包一層 code tag
  2. <code class=”程式語言名”>
//以寫css碼為例
<pre>
 <code class="css">
  pre {
  border: 1px solid #eee;
  width: 400px;
 }
 </code>
</pre>

寫進指定 js

function custom(){
 hljs.initHighlightingOnLoad();
}
custom();

Display

CODEPEN

WordPress

header.php→引入 css 與 js 函式庫、寫入指定 js

<head>

//在head tag之間加上下面這3行
<!--highlight.js-->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/tomorrow.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>

</head>

<body <?php body_class(); ?>>

//在<body>下面加上這段script
<script>
hljs.initHighlightingOnLoad();
</script>

文章編輯:text editor→依照規範撰寫 pre 與 code

//以寫css碼為例
<pre>
 <code class="css">
  pre {
  border: 1px solid #eee;
  width: 400px;
 }
 </code>
</pre>

Display

CODEPEN

 

 

setInterval

功能

設定每隔一段時間執行一次動作,可以模擬動畫效果
缺點:只能處理能夠數值化的CSS屬性(width, opacity, scale, rotate等等),不能完成顏色漸變等效果

button(onclick="show()") click me
br
br
#box show up
#box
 width: 200px
 height: 100px
 background-color: #aaffe2
 text-align: center
 line-height: 100px
function show(){
 //pos是變動的透明度數值
 var pos=0;
 //setInterval(動作, 毫秒)→每隔幾毫秒,執行一次動作
 const id=window.setInterval(function(){
 
 if(pos>=1){
 //如果pos夠大了,清掉Interval,阻止繼續增加下去
 clearInterval(id);
 pos=0;
 }else{
 pos+=0.1;
 box.style.opacity=pos;
 }
 
 }, 50)
}

show up

正規表達式

説明

正規表達式,是專門用來處理字串邏輯的條件語法。
常常用在 input 表單上,檢査使用者輸入的内容有沒有符合特定格式。
諸如信用卡號格式驗證,密碼強度驗證等等。

相關方法:match(),test()

語法

宣告正規表達式

正規表達式的前後要各用1個斜線/包起來(有點像字串需要用”包起來)。

const str="abcde";
const check=/abc/;

str.match(cri);//["abc"]
//回傳 被找到的字串
if(str.match(cri)){
 console.log(true);
 //↑通常驗證表單會寫成這個形式,裡面放通過驗證後的動作
}else{
 console.log(false)
}//true

尋找某區間内文字

設定檢索區間: [a-e]
a為開始値,e為終止値。

const str="apple";
const check=/[a-c]/;//尋找有沒有 a,b,c 這3個字母
//※寫成/[a-c]/g會比較好(下面會説明)
//※也可以比對多重區間(下面説明)

str.match(check)//["a"]

if(str.match(cri)){
 console.log(true);
}else{
 console.log(false);
}//true ←但只有 a 有被找到而已,pple並沒有被找到

/*****注意*****
※這個例子match是寬鬆尋找方法,只要有1個字元被找到,就會跑出true
*************/

尋找全部【/g】

參考這篇文章

一般情況下,match只會1次比對一個字串字元而已,所以回傳値只會吐出第1項符合的字元。
如果要叫他吐出所有,就要使用/g←放在正規表達式的最後面

※但如果是用 if(str.match(check)) 的話不使用 /g 也沒差

const str="apple";
const check=/[a-e]/;
const check2=/[a-e]/g;//尋找全部寫法


str.match(check);//["a"]
str.match(check2);//["a", "e"]←這樣寫就可以一條一條找出所有符合的字元了

/****比對多重區間***/
const check3=/[a-eo-p]/g//←直接接下去加入就好

str.match(check3);//["a", "p", "p", "e"]

尋找數字與數字字符【\d】

有2種方法可以找到數字

  • 設定 0-9 的區間
  • 正規字符【\d】
const str="apple123";
const check=/[0-9]/g
const check2=/\d/g; //\d效果同等於[0-9]


str.match(check);//["1", "2", "3"]
str.match(check2);//["1", "2", "3"]

檢査數字長度

使用大括號{}指定該字元必須出現幾次

const str="123456";
const check=/\d{4}/;//{4}表示數字(\d)要連續出現4次←4位數字

str.match(check);//["1234"]

if(str.match(check)){
 console.log(true);
}else{
 console.log(false);
}//ture
/*****
str="123456"→true
str="1234"→true
str="12"→false

只有當str不足4位數字時才會回報false(match找不到匹配値,回傳null)
str滿足或超過4位數都會回傳true
※那要怎麼寫手機號碼驗證!←下面告訴你
*****/

設定嚴格的條件:使用開始【^】與結束【$】字符

在上例中可以發現,只有當字串不滿足條件時才會報 false ,剛好符合或超過條件的清況都會回報 true 。

但某些情況下,我們需要非常精確的格式,比如

  • 手機號碼必須是 10 位數字
  • 信用卡號必為 4位數-4位數-4位數-4位數
  • 身份證字號為 1大寫英文 + 9 為數字

所以我們必須更進階地規定條件,不足或超出條件者都必須是 false。

以下為嚴格化寫法

  • 在開頭加入開始字符^
  • 結尾加入結束字符$
//驗證手機號碼
const str1="0912345678";
const str2="0912";
const str3="09123456789999"
const check=/^\d{10}$/;

str1.match(check); //["0912345678"]
str2.match(check); //null
str3.match(check); //null

//進階:規定前2碼為09

const check2=/^09\d{8}$/; //指定09跟後面的8碼條件不用任何東西連接,直接加上就行

str1.match(check2); //["0912345678"]

英數字集符號【\w】

如同 \d 為 [0-9] 的簡寫一般,
\w 則為 [a-zA-Z0-9_] 的簡寫。

可以檢查所有英文大小寫字母,底線,以及數字

const str="ianchen_0419";

const check=/\w/g;
const check2=/[a-zA-Z0-9_]/g;
//這兩個效果一樣

str.match(check);//["i", "a", "n", "c", "h", "e", "n", "_", "0", "4", "1", "9"]
str.match(check2);//["i", "a", "n", "c", "h", "e", "n", "_", "0", "4", "1", "9"]

 

可有可無的條件【?】

『使用者名稱可以包含減號-』

這樣的情況下,不論字串有無減號-,皆可滿足條件。
因此減號-是一個可有可無的條件。

在減號-後面加上問號 ? ,便可以構成可有可無的驗證式

const str1="ianchen";
const str2="ian-chen";
const str3="ian--chen";
const str4="-ianchen";
const str5="ianchen-";

const check=/\w-?\w/;
const check2=/^\w-?\w$/;
//用check2的話5個str都會是null,因為check2必須是【1字母 + 有無底線皆可 + 1字母】的組合才行。


str1.match(check);//["ia"]
str2.match(check);//["ia"]
str3.match(check);//["ia"]
str4.match(check);//["-i"]
str5.match(check);//["ia"]
//結論:5種情況都可以true

比對特殊字元:前置反斜線\

Regex特殊字元【.^$?】

這些字元都是Regex特殊字符,帶有特殊的意義。
若要單純比對這些符號,必須前置反斜線\以做區別。

const str1="$";
const str2="^";
const str3=".";
const str4="?";

const check1=/\$/;
const check2=/\^/;
const check3=/\./;
const check4=/\?/;

str1.match(check1);//["$"]
str2.match(check2);//["^"]
str3.match(check3);//["."]
str4.match(check4);//["?"]

比對很多次【+】

重複比對【+】前面的東西很多次

const str="ianchen_0419";
const check=/\w+/;
//重複比對英文字元(←【+】前面的)很多次,直到比對不了為止

str.match(check);//["ianchen_0419"]

有後面再比對前面【?=】

a(?=b)→如果有找到b的話,再檢查前面有沒有a,並且比對出a
【?=b】要使用括號包起來

const str1="ianchen0419";
const str2="ianchen"
const str3="0419ianchen";
const check=/[a-z]+(?=\d)/;
//後面有數字的話,再比對前面有沒有英文
//然後把所有的英文都找出來【+】

str1.match(check);//["ianchen"]
str2.match(check);//null ←這個因為後面找不到數字所以沒辦法比對英文
str3.match(check);//null ←這個因為數字前面沒有英文所以一樣無法

沒有後面再比對前面【?!】

a(?!b)→如果沒有找到b的話,再檢查前面有沒有a,並且比對出a
【?!b】要使用括號包起來

使用情境:給數字加上分隔逗號,每3碼加一個逗號,但是要從最末位往前數(所以要確保後面沒有落單的數字)

【例】1,234,567,890

const str1="ianchen0419";
const str2="ianchen"
const str3="0419ianchen";
const check=/[a-z]+(?!\d)/;
//後面沒有數字的話,再比對前面有沒有英文
//然後把所有的英文都找出來【+】

str1.match(check);//null ←這個因為後面有數字了所以不能比對前面的英文
str2.match(check);//["ianchen"]
str3.match(check);//["ianchen"]

找出英文邊界【\b】

※前提,英文句子要用空格隔開單字

【\b\w】→找到每個單字字首
【\w\b】→找到每個單字字尾

const str="this is a apple";//必須要有空格
const check1=/\b\w/g;//找字首
const check2=/\w\b/g;//找字尾

str.match(check1);//["t", "i", "a", "a"]
//"this is a apple"

str.match(check2);//["s", "s", "a", "e"]
//"this is a apple"

找出非英文邊界【\B】

用途:數字,符號等等

const str="1234567890";
const check1=/\B\d{3}/g;//每3個字斷開(從後面開始數)
const check2=/\d{3}\B/g;//每3個字斷開(從前面開始數)


str.match(check1);//["234", "567", "890"]
str.match(check2);//["123", "456", "789"]

英文數字逗點

【例】1234567890→1,234,567,890

function commas(x){
 return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 //①從最末位往前數3碼(後面沒有數字的話,比對出3個數字)
 //②一直數一直數
 //③符合①就給他分隔符號
 //④\B比對非英文字的邊界,如果沒有\B的話會變成",123,456,789"
 //取代所有分隔符號為","

}

線上練習網站:RegexOne

JavaScript event: transitionend

説明

觸發條件:漸變事件結束後。
當指定元素的漸變事件結束後,觸發漸變的listener。

※可以當作動畫延遲出現效果使用

漸變屬性:propertyName

propertyName,漸變改變的CSS屬性

.box2 CLICK IT
.box2
 width: 300px
 height: 200px
 display: flex
 align-items: center
 justify-content: center
 background-color: #c6fffe
 transition-duration: 0.5s
 font-size: 20px
 &:hover
  background-color: darken(#c6fffe, 45%)
document.querySelector(".box2").addEventListener("transitionend", function(e){
 console.log(e.propertyName);//只要漸變一停止,就會回報"background-color"←漸變的CSS屬性
})

範例

.box
 .text SHOW UP
.box
 width: 300px
 height: 200px
 background-color: #bffce8
 display: flex
 justify-content: center
 align-items: center
 transition: background 0.5s
.text
 font-size: 20px
 opacity: 0
 color: #fff
 
.dark
 background-color: darken(#bffce8, 55%)
 
.show
 opacity: 1
var box=document.querySelector(".box");
var text=document.querySelector(".text");

box.addEventListener("click", function(){
 this.classList.toggle("dark");
 
})

box.addEventListener("transitionend", function(e){
 console.log("123");//只要漸變一停止,就會回傳"123"
 if(e.propertyName.includes("color")){
  text.classList.toggle("show");
 }
 /*******使用説明******
 如果文字沒有漸變的話,只要一行toggle就搞定
 但如果文字有漸變,只有一行toggle會一直閃爍
 所以要用if控制文字漸變的時機
 這樣文字就會最後一個出現&消失
 ********************/
 
})

Display (click it)

SHOW UP

CSS first-child last-child

説明

【first-child】選擇在任何父元素下第一個出現的指定元素
【last-child】選擇在任何父元素下最後一個出現的指定元素

範例

first-child

p 這是body下第1個p
p body之下第2個p
.parent
 p 這是parent下第1個p
 p parent下第2個p
p
 &:first-child
 color: #68cccc

.parent
 border: solid 1px #000

Display

這是body下第1個p

body之下第2個p

——以下開始parent div——

這是parent下第1個p

parent下第2個p

只要是任何父元素下面的第1個p,都會被選到然後變色

last-child

p 這是body下第1個p
p body之下第2個p
.parent
 p 這是parent下第1個p
 p parent下第2個p
p
 &:last-child
 color: #148282

.parent
 border: solid 1px #000

Display

這是body下第1個p

body之下第2個p

——以下開始parent div——

這是parent下第1個p

parent下第2個p

只要是任何父元素下面最後的p,都會被選到然後變色

CSS selector

説明

CSS Selector,用在撰寫CSS文件上的選擇器,
但是同樣也用於JavaScript的querySelector / querySelectorAll。

Greater than selector

CSS【>】選擇器:用來選擇直系子元素
※不是直接的子元素無法被選到

.parent
 p 這是parent下的直接子元素
 .mid
  p 這是parent下面的mid裡面的子元素(非parent直接子元素)
.parent > p
 color: #68cccc

Display

這是parent下的直接子元素

這是parent下面的mid裡面的子元素(非parent直接子元素)
————————————————–

第一行文字是 parent 下面直接的子元素,所以被 > 選到,改變顏色;
第二行字為 parent 下面間接的子元素,無法被 > 選到,維持原本顏色
※用空格選擇器則兩種情況都能被選到

Attribution Selector

指定的attr條件用[]包住

  1. 傳統選擇法:attr[]裡面的雙引號”要加反斜線抵銷(或是裡面的雙引號改使用單引號)
  2. ES6選擇法:整個querySelector用反引號`代替雙引號”包住,所以裡面的雙引號”不用加反斜線抵銷
.box(data-color="red") A
br
.box(data-color="white") B
.box
 width: 10px
 height: 10px
 border: 1px solid #000
 text-align: center
 padding: 100px
 
.red
 background-color: #f78e79
//傳統選擇法:裡面的雙引號"要加反斜線\抵銷
var redBox=document.querySelector(".box[data-color=\"red\"]");
//ES6選擇法:用反引號`代替雙引號"包住,所以裡面的雙引號"不用加反斜線\抵銷
var redBox=document.querySelector(`.box[data-color="red"]`);

redBox.classList.add("red");

Display

A

 

B

multiple selector

多重條件選擇器。

原理同CSS的多重條件選擇器,不留空白,直接在A條件後面加上B條件

.classA classA
.classB classB
.classA.classB classA and B
div(data-attrA="A") attrA
div(data-attaB="B") attrB
div(data-attrA="A",data-attrB="B") attrA and B
document.querySelector(".classA.classB");
//"<div class='classA classB'>classA and B</code></div>"

document.querySelector("div[data-attrA][data-attrB]")
//"<div data-attra='A' data-attrb='B'>attrA and B</div>"

not selector

指定不要選到包含某class / attr / element的元素

.apple apple A
.apple apple B
.apple apple C
.apple.banana apple D
const AllApple=document.querySelectorAll(".apple");
//▶︎(4) [div.apple, div.apple, div.apple, div.apple.banana]

const PureApple=document.querySelectorAll(".apple:not(.banana)");
//▶︎(3) [div.apple, div.apple, div.apple]
//全選所有.apple,然後去掉有包含.banana的,所以只有選到3個element

not selector:指定attr

指定某個attr不要被選到

input:not([type])

not selector:多重條件

指定多個條件為非選

input:not(.aa):not(.bb)

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"