是的!就是想去看看這更廣的世界與社會,體驗出外獨自生活的感受。另外,自己的家業是傳產加工業,跟自己的興趣與理想差很多,這部分跟父母討論了很多,自己想要的工作經驗也都在北部,想讓自己能夠獨當一面出外學習與成長,此刻我就下定決心前往北部工作了。
自己的理想職位是「Front-End Developer 網頁前端工程師」,其實我在應徵工作前很早就在準備我的工作履歷與作品集了,8 月前的 4 個多月的時間裡,都在不斷地精進這項工作的技能與相關知識,自我學習,甚至線下社群交流也會去看看。
最後運用網路上的資源與課程,做出了一些網頁作品,加上之前實習時所遺留的專案再重整,放進我精心製作的 CakeResume 履歷中,整理擦亮自己的 Blog & Github 也跟著放進去。
接著到了 8 月多時,陸陸續續投遞了好幾家公司,由於自我的工作經驗不足,只有大學一年的實習經驗,所以幾乎都是找新創公司居多,並以前端 Vue 框架為主。
先來講講應徵面試前的準備真的不簡單:
總共投了 12 家公司,最後只有收到 8 家公司的面試邀請,外加 1 家主動邀請的,全都在台北與新北市,所以當下就安排全部集中在下週 4 天的時間,剛好那個禮拜週末有個社群 COSCUP 開源年會想參加,也就是直接北上 6 天 5 夜的行程,找了兩家青年旅社住宿,初次在台北短暫的生活體驗。
在陸陸續續經過每一天的面試行程後,真的都有不同的感受,每家公司至少都會有 技術層面的考試或測驗,再來 與 HR & 技術主管或資深同事的面試,有些更深入的還有 智能與個性的測驗,最後如果還有 CEO 或 co-founder 的面談 那就更為重要了。
公司想要的人才都不盡相同,技術能力強的、個性與公司文化相符的、工作經驗豐富的…等等,這讓我知道自己其實還缺少很多東西,自己的心態也不斷再轉變,不管結果是好是壞,重視每一次的面試過程,盡心說出與寫出最好的內容,儘管是沒遇過的或不會的也要說出「這項內容目前還不夠瞭解,進入公司如有需求會在加強學習充分瞭解它的」,表現出主動學習的態度,讓面試官瞭解自己對這份工作的慾望心。
在被公司面試挑選時,相對的,自己也是在挑選想要的公司,運用最後面試者的提問去多瞭解公司的文化、人事物、技術工具、環境、制度…等等,讓自己對未來的工作內容有更多憧憬,明確這就是我想要的。
當時內心的理想公司也慢慢確立在心中: (期望順序)
全面試完成後過了兩週的結果,9 間公司裏有 2 間我主動在面試時推掉,2 間無聲卡,3 間好人卡,2 間有取得 offer,其中我有一間最想去的 TenTen 転転 在面試第二關就被打掉了,真的很懊悔自己能力真的很有限啊!
最後剩下的兩間公司,一間主打未來潛力高推向國際的 ‘雲端醫療’,另一間主打福利與薪資都比前者高的 ‘博弈產業’,我最終選擇了前者,我相信擁有很高的未來展望與學習動機的公司是我最好的選擇,能讓自己隨著公司一同成長。
後記:
現在回憶起來,雖然我都是應徵 junior 工程師級的,但這結果真的很不如預期啊!自己當時體驗最深的應該就是:工作經驗與溝通經驗非常不足,面對問題的解決態度也需要再更具體才行,另外我開的薪資期待過於高也是個缺陷,導致於取得 offer 的難度真的提高不少,不管怎麼說這都是非常棒的體驗,會好好謹記在心的,人生第一次的應徵面試之旅就此獻給了台北。
剛好到今年 2019 過新年前已經滿 5 個月了,讓我有滿滿的體悟與一些初體驗。我以最年輕的員工進入了這間 Health2Sync 雲端醫療公司,初始配備 Mac pro + 24 吋螢幕,座位旁就坐著 CEO,還有 BD 行銷團隊,辦公室為開放式格局,顯得非常寬敞,這真的非常特別啊!
我的前端前輩有將近 3 年多的經驗,很感謝她很耐心的指導,讓我更熟悉公司的許多專案,還有關於糖尿病這檔事也瞭解不少,另外,還有跟其同事相處真的很融洽,不會有年紀上的隔閡,能夠把彼此當成真的朋友對待,想聊什麼都行。除了這些很棒的工作氣氛,還有非常彈性的上下班與休息時間,任何時段想出去都可以,只要工作能做完就沒問題啦!
這幾個月的時間也參加了不少活動,3天2夜員工旅遊、同事的婚禮、與日本員工的聚餐、聖誕節節慶美食饗宴、公司的溫馨又瘋狂的尾牙,這都真的都很棒呢!
對了,關於工作上的歷經我也學習蠻多的,讓我最印像深刻的就是
以前在製作網頁專案時,都是我自己一人擔當全部要角,直接取用網路上很初始的設計稿 + Github page 靜態 server + 開源公開的 API 或是搭配 json server 自製簡易的 API,沒什麼規則性,想隨時改動都行
但有了真實團隊的 desgin framework、backend API & server、PM user story & 需求,這就完全不同層級的,按規畫好的結構與排程走,雖然只需要專注在自己的專業上,但細節部分就得更深入,測試就要全面瀏覽器支援了。另外團隊溝通就是更重要的一環,最常碰到的:
以上這些是讓我體驗最深的,這絕對不是一人接案就能瞭解的。
當然還有其他的成長,遇到問題與處理事情的態度、評估實作的時間與優先完成的順序,這也都是新的體悟,可以看到真的工作好幾年的人,不只是技術上非常熟練,以上這些經驗也都是非常老道吧!
]]>img 圖片的 RWD 響應式設計
使用 CSS 截斷文字內容,自動限制行數
1 | .line-clamp { |
vue 生命週期 mounted 的使用時機
瀏覽器進行以下階段時,將調用此函數鉤子
在此進行以下操作
vm.$refs
、window
、document
之 DOM 元素,執行資料初始化window
監聽事件 scroll, resize 之類的vue 的動畫 & 元素轉場操作
<transition>
標籤執行全局的 window
監聽事件時
vue.directives 的進階使用
inserted
vuex store 資料與 v-model
做結合
get()
取得 store getters 資料set()
執行 store mutations 操作資料element.offsetTop
取得的高度不一定是元素的頂部到達整個頁面的頂部距離,會依照元素的所在位置而改變
當多個 HTML 頁面時,需要在各自的 HTML 裡直接引入 css/scss/less, js/jsx 檔案
由於 dist 和 .cache 在建置後或開啟 server 時,不會把原先的檔案刪除,需要事先手動刪除
rm -rf dist && rm -rf .cache
清除原先的檔案當不同的檔案在同個時間下,加載到同一個需要被編譯的檔案時,就會出現 bug
教學指南參考: A Complete Guide to Grid
Gird 父元素主要使用以下 CSS 屬性 (常用)
grid-template
(-columns
& -rows
) - 指定網格的長寬數值與數量grid-gap
- 設定間距大小grid-auto-rows
- 指定剩餘的 row 長度,在內容不明確時可用align-items
- 上下對齊justify-content
- 全體左右對齊或分散Gird 子元素主要使用以下 CSS 屬性 (常用)
grid-column
& grid-row
- 指定範圍或明確座標開始位置 / 結束位置
grid-area
- 上面屬性的合體col 開始 / row 開始 / col 結束 / row 結束
align-self
& justify-self
- 上下對齊 & 左右對齊當子元素要指定放置的範圍時,可以使用以下撰寫方式:
grid-column: x / span n格數;
+ grid-row: y / span n格數;
grid-area: x / y / span n格數 / span n格數;
align-self
& justify-self
當父元素 grid-template-columns
在指定欄位寬度的實際數值後,不代表全部加總後就是實際的 width
長度,width
還是 auto
width
沒有真的數值,所以使用 margin 左右等於 auto 時是不會置中的width
時,可使用 justify-content: center;
就能置中overflow: hidden;
,超過就隱藏width: 100%
就可以了自訂的 checkbox
自訂的 file 上傳按鈕
button 如果是 icon 時,當觸發 hover 功能可以產生淡化的背景提示,這是一個按鈕
::before
上使用 position: absolute
,就能避免原始元素會改變位置或大小background-color: currentColor
可以抓取當前的 color
屬性內容值opacity
就能自動產生不同的淡化背景helps classes 可以事先產生多種
狀態類型的或可搭配 JS 來顯示的 CSS 樣式,這種類型的需要特別獨立出來,可以加上 prefix 字樣 js-*
,最後都會改由 JS 來控制,好處是可一統管理顯示與隱藏的狀態變化
狀態管理很重要,可以藉由狀態資訊改變各種 CSS 樣式 & DOM 顯示隱藏
vuex store 中的 actions 都需要事先加上初始化的方法,以防需要使用 API 後端資料時,資料結構會與前端差很多
vue directives 的使用方式
使用以下方法應用在 vue data 資料時,需要避免 vue 無限循環觀察 (observer) data 的變化,尤其使用在 v-for 更需要如此
Array.prototype.reverse
Array.prototype.sort
[...this.items]
,再放入 computed 裡讓 vue 繼續觀察變動這是為了讓自己的網頁切版技巧可以更加熟練,而記錄的一些心得內容,還有一些初始的開發設置,提供自己能夠更快速地上手切版技巧。
Update date: 2018-07-15
CSS 初始化
引入第三方初始化 CSS
加上自訂 reset.css,必加入的配置設定 : (可加在 body
上)
grid system 框架插件
UI 元件框架 (大型的)
inherit
或 initial
,繼承最初自訂的配置優先以設計師的角度去下排版
Flex 容器排版應用
margin-left: auto;
在容器中讓子元素推移到右側,用來代替float: right;
flex: 1
讓 B 填滿剩餘長度快速建置 HTML 區塊版面 - CSS 工具
搭配 CSS / SASS 設計模式規範
若有加入大型的 UI 元件框架,自訂的 CSS 樣式名稱需要加入自己的前綴符號,可避免與框架的 CSS 樣式名稱衝突或被覆蓋
若要修改 UI 元件的 CSS 內容,最好的處裡方式為
1 | /* 有明確指定的 UI 元件時適用 */ |
待新增…
使用 rem 單位,隨著根字體大小而自動改變,預設為 16px (參考網址)
使用 em 單位,隨著當下字體大小而自動改變,使用時機為 :
若設計的內容無背景或邊框線條,需要加上間距 (邊距) 時
_variables.scss
_mixins.scss
_reset.scss
_base.scss
_components.scss
_helpers.scss
main.scss
文字大小
間距 (邊距) 大小
顏色
madia query 斷點範圍
間格距離、分隔空間之類的
margin
或 padding
margin-buttom: xxx
=> mb-x
樣式名稱顏色
background-color
color
border-color
文字類型
font-size
+ line-weight
font-weight
font-style: italic
text-decoration: underline
color
元素的顯示方式
display: flex
+ algin-items
或 justify-content
#000000
~ #333333
主顏色範圍: bga(176, 176, 176) #B0B0B0
~ bga(201, 201, 201) #C9C9C9
lighten(主顏色 , 10%)
#EDEDED
主顏色範圍: bga(219, 219, 219) #DBDBDB
~ bga(232, 232, 232) #E8E8E8
lighten(主顏色 , 5%)
lighten(主顏色 , 8%) 最高值: #FAFAFA
計算公式:
體驗的過程中採了不少坑,嘗試導入各個專案中,希望可以建立更完整的 SPA 網站,因此記錄的一些心得內容都放在這裡了,提供未來的自己可以更快速地開發專案,運用 Vue 建立更完善與維護性高的網頁服務。
Update date: 2018-07-26
瀏覽器進行以下階段時,將調用此函數鉤子
在此進行以下操作
vm.$refs
、window
、document
之 DOM 元素,執行資料初始化window
監聽事件 scroll, resize 之類的Vue.component(key, value)
,這樣所有的 view 就能直接引用了哪時候可以使用
mutations 的使用時機
arr.push()
)、update、delete 之類的操作actions 的使用時機
store 撰寫思考順序
修改資料狀態的 JS 使用方式 (為了讓 vue 能夠檢測到更新 DOM)
arr.push(newItem)
arr.push({ props: value })
陣列修改項目:
arr.splice(index, 1, newItem)
arr.splice(arr.indexOf(oldItem), 1, { ...oldItem, props: value })
1 | const index = arr.findIndex(item => item.id === id); |
陣列刪除項目:
arr.splice(index, 1)
arr.splice(arr.indexOf(oldItem), 1)
1 | const index = arr.findIndex(item => item.id === id); |
物件新增 / 修改屬性內容:
obj = {...obj, props: value}
obj = {...obj, ...objData}
obj = {...obj, ...{ p1: v1, p2: v2 } }
可使用 vuex modules 系統,其中參數 namespaced 設置為 true,就能把資料做成模組分類
函數鉤子 bind
:
inserted
函數鉤子來代替使用就行了函數鉤子 inserted
:
函數鉤子 unbind
:
函數鉤子 update
:
binding.value
沒變動有時也會執行,可以通過比較 binding.oldValue
來過濾不必要的更新執行缺點 :
this
(vue 實例),所有的 data 都只能從參數值傳進來,所取得的參數除了 el 其他都只能是唯讀的進階用法:
this
(vue 實例)了<transition>
標籤加上 Token 認證機制
需要使用 localStorage 或 cookies 儲存 token,可讓其他子網域自動認證/自動登入,也可以加入 expire 過期機制
可以創建 auth.js 專門處理 登入、登出、註冊 的邏輯概念
完整實踐概念:
1 | module.exports = { |
ES6 從推出到現在已經過蠻久了,應用上也很成熟了,在許多 JS 前端或後端框架上都能普遍看到它的身影。將來寫 JS 不管是前端還是後端,ES6 這些新特性真的是必備的技能了,所以事先好好地深入學習是必要的。
ES6 的完整名稱為 ECMAScript 6 ,這是 JavaScript 語言新一代的標準規範,在 2015 年 6 月正式發佈。
ES6 其實是一個泛指的名詞,泛指 ES5.1 版以後的新一代 JavaScript 語言標準,涵蓋了 ES2015, ES2016, ES2017 等等,ECMAScript 2015 (簡稱 ES2015) 則是正式名稱,特別算是該年度發佈的語言標準,也就是 ES6 語言標準。
ES6 提出了許多新的語法與特性,甚至擴充更多 API 可以更容易使用,使得 JavaScript 變得更強大,更適合用來寫大型或複雜的應用程式!
以下都是我在研究學習期間所收集的實用網站,有些內容真的很不錯,都可以點點看 :
線上網頁程式碼預覽 & 編輯 (支援 ES6)
瀏覽器支援度查尋工具
其他實用工具
文章參考資源
其實在研究這些內容期間都斷斷續續的,所以拖了這麼久才完成它,有些網站又寫得非常棒,很不想再重複寫一次阿,但還是自己整理記錄一次,以後想回頭瞭解也比較有方向吧!
當然在 ES6 中還有蠻多東西可以介紹的,甚至是 ES7 新的 API 語法 async函數 & await,這基本上能夠代替 ES6 的 Promise 物件來處理 JavaScript 非同步事件了,新的事物一直發展出來真的很厲害,學習的道路還要繼續不斷地往前走。
雖然寫文章真的蠻累的,至少一路走來,檢視到自己的成長與努力是值得的。
]]>在使用前可以先建置環境目錄,有需求的請參考上一篇的第一段內容。
為了讓 Babel 編譯器能順利執行,避免錯誤的產生,也讓我們有更好的程式碼品質,減少後續維護的成本,ESLint 就是個非常適合的偵錯工具使用在 JavaScript 語言上,它也支援 ES6 最新的標準,不過ESLint 的配置規範就比較複雜一些,最好搭配主流的規範套件會比較輕鬆。
eslint
工具eslint
命令1 | 初始化建立 .eslintrc 配置檔 |
.eslintrc
配置檔1 | { |
1. 為了方便使用,在本地端與全域環境中都安裝 eslint
工具
1 | npm install eslint -g |
2. 在根目錄下初始化,建立.eslintrc
配置檔
1 | eslint --init |
3. 這裡會先問你要怎麼建立規範檔案呢? 如下 :
通常只會選擇前兩種方式。如果選擇第一項,將會一連串問你基本的規範內容,選擇 JSON 格式,就會直接建立.eslintrc.json
配置檔。
不過,最常用的還是使用第二項,引入主流的規範配置,順便會再問你想要哪一種主流規範,這裡會使用 “Airbnb“ 為居多,也很適合團隊的規範,點選完後會幫你下載它的專屬配置套件,再幫你建立.eslintrc.json
配置檔,ESLint 會把這個主流規範自動引入配置檔中。(這裡不選擇把 react 加入)
4. .eslintrc.json
檔案內容如下
1 | { |
而在 npm 的packing.json
配置檔中你會看到多了剛剛下載的套件,代表安裝成功了,如下 :
“devDependencies”: {
“eslint”: “^4.15.0”,
“eslint-config-airbnb-base”: “^12.1.0”,
“eslint-plugin-import”: “^2.8.0”
}
5. 接下來就可以加入自訂的規範內容,改寫.eslintrc.json
配置檔
console.log()
、加入環境設定 browser.eslintrc.json
以舉例來說,內容改寫成如下1 | { |
6. 最後就能偵錯檔案了,終端機執行命令如下
1 | eslint src/index.js |
然後運行後的結果,將會幫你列出不符合規範的地方,若有錯誤,結果類似下圖 :
以上就是 ESLint 的基本使用,當然自己手動偵錯是很笨的方式,一樣這也可以搭配第三方套件來幫你自動偵錯。
7. 搭配自動化模組工具或程式編輯器的插件
eslint
,再依照步驟建立好.eslintrc.json
規範後就可以使用啦!只要搭配好的工具就能讓你輕鬆偵錯,快速建立環開發境,改善你的 coding style,尤其是在團隊裡更應該要有好的規範習慣。
這篇做的有點久阿,原因網路上許多教學都很簡略就帶過了,我想做個完整地操作步驟,至少要知道這些工具是如何被使用,再來搭配其他套件工具也是很重要的。
原本 “ES6 開發環境建置“ 是打算只用一篇發出,但寫到最後改了很多次,又加深說明,導致內容不知不覺暴增…所以就分為兩篇文章介紹了,希望可以達到最完整的紀錄,清楚知道這些工具在使用上是很方便的啦~
]]>現今各大瀏覽器廠商所開發的 JavaScript 引擎還沒有對 ES6 標準中所有特性做到完美支持,不能直接放入,有些新語法會報錯。所以想使用這些新特性或語法在所有瀏覽器上,需要使用 Babel 編譯器來轉換成舊式的 ES5 標準代碼,才能完全符合環境的支持。
為了要簡單快速使用,我們建立以下目錄 :
1 | 目錄 |
1 |
|
1 | const getText = () => 'JavaScript ES6'; |
在使用 Babel、ESLint 之前要先會用 npm 套件管理來安裝,這是在 Node.js 環境下執行的,不懂得可以先去 npm 官網 看看。
1 | npm init |
package.json
檔案:1 | { |
Babel 是 JavaScript 的編譯器(compiler)工具,可以把 ES6 標準以上的新語法轉換成最基本的 JS 語法,另外也支援 react 語法轉換,只要簡單的配置就能完成,這已是現今非常流行的轉換工具了。Babel 搭配一些自動化打包套件還可以加快效率與自動運行,在前端工程中很受歡迎。
.babelrc
配置檔案1 | { |
babel-preset-env
工具babel-cli
工具babel
命令1 | 轉碼後输出到畫面上 |
1. 先在本地端安裝 babel-cli
、babel-preset-env
工具 :
1 | npm install babel-cli babel-preset-env --save-dev |
2. 這時候會在 package.json 檔案中看到多出devDependencies
選項,代表安裝成功
“devDependencies”: {
“babel-cli”: “^6.26.0”,
“babel-preset-env”: “^1.6.1”
}
3. 再來建立.babelrc
Babel 的配置檔案,把轉碼規則包的套件填入,檔案內容如下
1 | { |
4. 然後藉由 npm 的腳本自訂方式來代替 babel 命令,改寫 package.json 中scripts
選項,內容如下
“scripts”: {
“build”: “babel src -d dist”
}
5. 最後在終端機執行命令如下
1 | npm run build |
可以看到運行的結果,dist 資料夾裡多了一個 index.js 檔如下
1 | ; |
這就代表編譯成 ES5 代碼成功啦!執行 index.html 在瀏覽器上看看是否會有預期的結果吧~
以上是 Babel 的基本使用,需要自己手動執行編譯的命令,由於很麻煩就有了第三方套件站出來了,自動化這些命令程序,接下來一節,我們使用另一個方法來讓它更方便。
Gulp 是現今很流行的任務打包工具,主要用來自動化運行任務套件,像是編譯、最小化、合併…等等的任務。Gulp 的詳細教學就請先自行 google 吧,這裡將省略帶過。
1. 需要先安裝gulp
與 Babel 提供的gulp-babel
、babel-core
、babel-preset-env
這三套工具 :
1 | npm install gulp gulp-babel babel-core babel-preset-env --save-dev |
2. 還是要建立 .babelrc
檔案 :
1 | { |
3. 然後建立 Gulp 需要運行的腳本檔案 gulpfile.js
,放在根目錄下,內容為把 src 資料夾裡的檔案進行編譯後再放到 dist 資料夾中(可直接使用部分的 ES6 語法) :
1 | const gulp = require('gulp'); |
4. 最後在終端機執行腳本命令,如下
1 | gulp build |
對! 你可以發現到,以上方法跟直接使用 babel-cli
命令行工具是一樣的效果。雖然它比較繁瑣,但別忘了 Gulp 的主要功能是自動化任務,繼續下面操作。
5. 我們另外在 gulpfile.js
檔案中再加入自動化監看腳本的程式碼,如下 :
1 | gulp.task('watch', () => { |
6. 使用監看腳本,終端機執行命令如下
1 | gulp watch |
當運行後,可以看到只要每次修改 src 資料夾裡的 JS 檔案,Gulp 將會自動執行 Babel 編譯動作,至少這樣就方便許多了。若搭配它的一些 API 還能與其他套件做結合呢!
下一篇文章ES6 開發環境建置(下) - ESLint 偵錯工具 將會介紹 ESLint 偵錯工具,可以在編譯前找出錯誤,規範好統一的程式碼風格。
]]>本篇將會簡單地介紹 ES6 其他較實用常見的 API 與擴展,主要知道基本內容就好,並不會深入探討。
1 | let set = new Set(); |
1 | // 這是基本語法 |
function*
next()
方法,就會繼續執行函數,直到遇到下一個 yield 關鍵字,又會暫停函數的執行,而每一次暫停時會 yiled (產出)一個當前狀態值{value: anyType, done: boolean}
結構的物件for...of
迭代迴圈去取得 yield 返回的 value 值1 | function* gen() { |
1 | // Unicode 表示法 |
0b
(或0B
)、0o
(或0O
)表示**
關鍵字當作指數運算1 | // 二進制和八進製表示法 |
"use strict"
export
做為模組對外的輸出,放於檔案最後import
做為輸入其他模組的功能,放於檔案開頭as
關鍵字重新命名變數名稱1 | export let str = 'Hello'; |
{}
,用來統一輸出1 | // 使用大括號"{}"做統一輸出 |
{}
輸入模組中有被 export 過的變數,後面加上檔案路徑或模組名稱*
輸入模組中所有被 export 過的變數1 | // 基本使用,假設輸出模組的檔案名稱為 myModule.js |
export default
輸出與輸入{}
了1 | // 檔名: export.js |
概念為可以先輸入後輸出同一個模組,export 和 import 語句結合在一起的意思。主要用來把接口輸出改名或改成默認的接口輸出。
1 | export { obj, foo } from './myModule.js'; |
基本上 ES6 的程式碼使用 Babel 轉譯成舊式的 JS 語法已經習以為常,但現今已有許多瀏覽器都支援 ES6 與模組系統了,可以直接寫入語法,支援的瀏覽器參考 Can I use …
運行模組系統使用以下方式 :
<script>
標籤,再加入type="module"
屬性,直接放入 HTML 檔案上就行了1 | // 檔名: main.js |
1 | <script type="module"> |
]]>註 : 有些瀏覽器需要藉由伺服器去運行,直接開啟 HTML 檔案是不行的
而 key 值的範圍不限於字串,可以是各種類型的值(包括 number、array、object、function、symbol…等等)都可以當作 key,是一種更完善的 Hash 結構實現。
1 | // Map 基本使用 |
[key, value]
的資料結構new
產生 Map 物件[['key1', 'value1'], ['key2', 'value2']]
for..of
迭代循環可單獨取得所有的[key, value]
...
擴展運算子取得陣列集合1 | let map1 = new Map(); |
set(key, value)
: 設置內容get(key)
: 獲取指定 key 的內容,若找不到返回undefined
has(key)
: 檢查是否存在此 key,有則返回ture
,無則返回false
delete(key)
: 刪除指定 key 的內容,成功返回ture
,失敗返回false
clear()
: 刪除所有內容成員size 屬性
: 取得內容成員總數1 | let map = new Map(); |
這些方法函數所產生的內容都是 “迭代器(iterator)的資料類型“,可以使用for...of
迴圈取得個別單獨的值,也能使用...
擴展運算符直接轉成陣列類型。
keys()
: 取得所有 keyvalues()
: 取得所有成員的值entries()
: 取得所有內容成員forEach()
: 走訪 Map 的所有成員1 | let map = new Map([ |
Symbol
函數生成,可以保證不會與其他屬性名或數值產生衝突,所以很適合用來代替傳統定義常數內容值的方式。1 | let s = Symbol(); |
toString()
方法,若有參數也會一同輸出[]
,能防止此屬性名(關鍵字)被改寫或覆蓋1 | // 獨一無二不會有任何相同的值,儘管接受的參數是相同的 |
Symbol 作為屬性名時,該屬性不會出現在for...in
、for...of
迴圈迭代中,也不會在Object.keys()
、Object.getOwnPropertyNames()
等等之類的方法中被獲取,只有唯一使用Object.getOwnPropertySymbols()
此方法才能獲取擁有 Symbol 值的屬性名。
1 | let s1 = Symbol('s1'); |
Symbol.for()
: 可以重新使用同一個 Symbol 值,若定義時輸入參數一樣,則 Symbol 值會相等Symbol.keyFor()
: 可以取得在使用Symbol.for()
定義時所輸入的參數值1 | let s1 = Symbol.for('new'); |
作為 ES6 iterator(迭代器)的建構方法名稱,可參考: ES6 Iterators in Depth。
]]>class
類別,它是效仿其他程式語言擁有物件導向(OOP)的概念,取代需要原型 prototype 的操作,因為寫法更簡潔與易於理解,用來代替 javascript 傳統建構物件的形式。1 | class foo { |
class
本身原型是指向建構函數 functionprototype
的屬性還是存在的constructor
建構子函數class
本身也可以使用表達式的來定義static
關鍵字extends
關鍵字進行物件繼承super
關鍵字Symbol
唯一性的形式定義可以參考: ES6 class 關鍵字
]]>1 | // 對物件直接寫入變數和函數,省略了許多關鍵詞 |
1 | // 簡化函數的物件返回值 |
[]
包覆,但內容還是只能使用字串1 | // 定義物件時,屬性名稱是可變化的 |
=>
(箭頭) 來定義函數,比起一般函數可以用更簡短的語法來表示,可以讓程式碼的可閱讀性提高。函數的參數 => 返回值的內容
1 | // 一般函數寫法,輸入半徑求圓面積 |
()
1 | // 無參數 |
{}
,像是物件內容,需要在外圍加上括號()
1 | let foo = () => ({x: 10, y: 20}); |
{}
1 | let getDate = () => { |
1 | let arr = [1, 2, 3]; |
arguments
物件,需要使用 rest 參數代替1 | // 使用 addEventListener 監聽事件 |
上面程式範例參考來自: https://pjchender.blogspot.tw/2017/01/es6-arrow-function.html
1 | function Timer() { |
call()
、apply()
、bind()
這些方法去改變 this 的指向1 | let people = { |
var self = this
此步驟而直接使用了DOM 在處理監聽事件addEventListener()
時,放入的回調函數盡量不要使用箭頭函數
定義物件屬性中的方法,或者定義建構函數的 prototype
方法,不能使用箭頭函數來定義
定義建構函數,一樣不能使用箭頭函數來定義
new
產生此建構的物件就會報錯預設參數是為了代替傳統的方式,解決了需要判斷是否為undefined
才能設置預設值的麻煩
1 | // 函數中的預設參數 |
1 | function defaultParam(){ return 'test'; } |
1 | // 函數參數的預設值設為空物件,也設置了解構賦值的預設值 |
undefined
將會觸發參數等於預設值,但傳入null
則沒有這個效果1 | // 放入 undefined 與 null 的差別 |
...
,後面再加上陣列變數名稱,與擴展運算子很相似,但兩者是相反的概念arguments
物件,其實不能說完全取代,因為arguments
內還有其他參數,但常用來獲取裡面的陣列,只是繁瑣的轉換過程比較麻煩1 | // 函數中的 Rest 參數 |
1 | function foo(a, ...b, c) {} |
1 | // 使用在解構賦值上 |
...
Spread Operator,簡化了展開陣列的過程,應用上真的非常廣,像是取值、複製、合併、轉換型態、取代舊式 API…等等,這些都改善或簡化了 JavaScript 的邏輯程序,讓程式有了更多元的發展。...
組成,後面再加上你要轉換的陣列1 | let spread = [1, 2, 3]; |
apply()
方法1 | function foo(a, b, c) { |
1 | let a1 = ['x', 'y']; |
1 | let a1 = [1, 2]; |
1 | let a1 = ['Hello', 'world']; |
1 | let text = [...'Hello']; |
Object.assign
方法1 | let obj1 = { name: 'foo', x: 10 }; |
push()
方法上1 | let list = [1, 2]; |
1 | let today = new Date(...[2018, 1, 1]); |
1 | // 取得 HTML DOM 使用到 querySelectorAll() |
這個...
擴展運算子與 ES6 中另一個新加入的 Rest 參數看起來很相似,但它們卻是相反的關係,下次的主題將會來解說到~
‵ ‵
包起來表示1 | // 可寫入多行的字串 |
${ }
來嵌入trim()
方法來消除1 | // 可以嵌入變數 |
forEach()
方法,另外這跟for...in
迴圈很相似,但這兩者的用法是不同的,以下會多舉例比較他們之間的關係。for...in
是取得物件的 “鍵名/屬性名”,而for...of
是取得物件的 “鍵值/屬性值”1 | let arr = ['a', 'b', 'c', 'd']; |
1 | let arr = ['a', 'b', 'c'] |
entries()
方法來獲取[key, value]
1 | let arr = ['a', 'b', 'c', 'd']; |
undefined
1 | // 內層為陣列類型時 |