iT邦幫忙

es6相關文章
共有 111 則文章
鐵人賽 Modern Web DAY 29

技術 Day29【ES6 小筆記】陣列搜尋新方法 find() findIndex() - 以工具人清單為例

find() 在過去如果我們想要找到陣列中符合條件的元素,可能會使用 forEach 或是 for 循環,但是 forEach 是不能跳過或終止的,所以如果當...

鐵人賽 Modern Web DAY 28

技術 Day28【ES6 小筆記】 建構式ㄉ語法糖 - Class 超基本使用範例

ES6 中新增了類別 (class) 來實現原型繼承,但他並不是一種新原型繼承方式,只是以前原型繼承的語法糖,提供更簡潔的語法來建立物件和處理繼承! 這邊也來看...

鐵人賽 Modern Web DAY 27

技術 Day27【ES6 小筆記】 物件好兄弟 Map 使用方式

上一篇學習了 Set,今天要練習的 Map 也是 ES6 中提出的一種資料結構,跟 Set 蠻像的,只是 Map 存取的是鍵值對,所以也跟物件蠻像的,但有以下差...

鐵人賽 Modern Web DAY 26

技術 Day26【ES6 小筆記】 陣列好兄弟 Set 怎麼用? - 以 30 天平民滷肉飯挑戰為例

Set (集合) 是 ES6 中提出的一種資料結構,跟陣列蠻像的,只是他所有的元素都是唯一的,不會有重複的值存在,也沒有順序之分,所以也不能透過 [0] 這種...

鐵人賽 Modern Web DAY 25

技術 Day25【ES6 小筆記】有點規矩!讓你的程式碼整整齊齊~

Hi~你寫程式時都隨便換行、隨便空白,看心情加逗號跟分號嗎?你覺得反正程式沒有錯誤,結果有出來就好嗎?偶爾還會因為忘記分號導致出錯嗎?你覺得其實看了很不舒服,但...

鐵人賽 Modern Web DAY 10

達標好文 技術 10. [JS] 一般函式與箭頭函式的差異?

旅程來到了第 10 天,這趟旅程真的有點硬啊...不過每天只要花一點點時間,就能讓逐漸讓自己變強,這樣的感覺是不是很棒呢? 今天的主題輕鬆一點,來看看 Jav...

鐵人賽 Modern Web DAY 24

技術 Day24【ES6 小筆記】資料型別 Symbol 使用時機

在 JavaScript 中,原始型別有以下幾種: Boolean:僅有 true, false 兩個值 Null:僅有 null 的值 Undefin...

鐵人賽 Modern Web DAY 23

技術 Day23【ES6 小筆記】箭頭函式 this 初步了解/使用時機

這幾天看了很多關於函式中 this 的文章,但感覺還不是很懂 XDDD,今天要來跟著這個影片來學習傳統函式跟箭頭函式中 this 的差別,練練我的小腦袋! 如果...

鐵人賽 Modern Web DAY 22

技術 Day22【ES6 小筆記】變數提升(Hoisting)與暫時死區(TDZ)

今天來介紹 let/const 的暫時死區(Temporal Dead Zone,TDZ),這是 ES6 中對作用域新的專用語,翻成中文就是「時間上暫時無法達到...

鐵人賽 Modern Web DAY 21

技術 Day21【ES6 小筆記】物件屬性存取方式 - 以一篇業配文為例

先前我們有介紹過物件的解構賦值,用於存取多屬性的物件,而今天我們就來聊聊存取單一個物件時,有什麼方法吧! 假如我們有一個物件 restaurant 紀錄這間好吃...

鐵人賽 Modern Web DAY 20

技術 Day20【ES6 小筆記】什麼是「語法糖」哩?

在學習 ES6 的路上,常常會看到「語法糖」這個名詞,但一直不知道是什麼意思,我們來看看維基百哥怎麼說的: 語法糖是由英國電腦科學家彼得·蘭丁發明的一個術語,...

鐵人賽 Modern Web DAY 19

技術 Day19【ES6 小筆記】三元運算子-以哥哥的擇偶條件為例

三元運算子可以拿來做簡單的判斷,在兩個結果間快速的做出選擇!雖然不是 ES6 才出的語法,但是 airbnb 有提到,今天就來介紹一下他的用法唄! ESLin...

鐵人賽 Modern Web DAY 17

技術 Day17【ES6 小筆記】Array.reduce() - 陣列累加 / 比大小 妙招

上次練習了 airbnb 推薦的 map() 語法,我們再來複習一次 ESLint airbnb 的規則怎麼說的: 11.1 不要使用迭代器。更好的做法是使用...

鐵人賽 Modern Web DAY 16

技術 Day16【ES6 小筆記】// javascript 怎麼下個好註解?

今天來介紹 ESLint airbnb 中對於註解的建議,好的註解除了可以增加程式碼的可讀性之外,對於團隊間的開發,如果有培養下註解的默契,在維護上也會有幫助歐...

鐵人賽 Modern Web DAY 15

技術 Day15【ES6 小筆記】物件縮寫好棒棒!Object literal extension

在 ES6 中,物件的撰寫更簡便了!可以使用縮寫的方式縮短我們的程式碼,省去的繁瑣的工作外,也能增加可讀性,今天就來一探究竟唄~ 物件內屬性的簡寫 以我家兔子...

鐵人賽 Modern Web DAY 14

技術 Day14【ES6 小筆記】用 ES6 跟 CSS 做一個調皮的標題

今天要來製作一個有簡單互動效果的標題,來練習我們前兩週提到的模板字串符、箭頭函示、展開運算子及 map() 的應用!首先來看看這個標題有沒有調皮(codepen...

鐵人賽 Modern Web DAY 13

技術 Day13【ES6 小筆記】Array.map() - 處理陣列最佳選擇

上一篇不小心介紹了 airbnb 風格不推薦的 for-of 語法,我們來仔細看看 ESLint airbnb 的規則到底是怎麼說的: 11.1 不要使用迭代...

鐵人賽 Modern Web DAY 3

技術 【React.js入門 - 03】 開始之前應該要知道的DOM和ES6

這個系列和我在12屆鐵人賽的React.js系列文,已經在修訂後和深智數位合作出版成實體書,在天瓏開始預購了,想學React的朋友可以參考看看:https:/...

鐵人賽 Modern Web DAY 12

技術 Day12【ES6 小筆記】for 迴圈 vs. for...of - 陣列處理比一比

過去我們可以使用 for、while、do while、for-in 等內建的函式來處理資料,而在 ES6 中我們多了 for-of 這個更方便的用法來處理這...

鐵人賽 Modern Web DAY 11

技術 Day11【ES6 小筆記】陣列的解構賦值-以哥哥的前女友為例(Array Destructuring)

上一篇介紹了物件的解構賦值應用,而解構賦值的功能是要讓我們在寫物件、陣列的時候可以很便利的使用縮寫,將資料取出成獨立變數,增加可讀性並減少程式碼,今天就來練習陣...

鐵人賽 Modern Web DAY 10

技術 Day10【ES6 小筆記】物件的解構賦值-以一間好吃的餐廳為例(Object Destructuring)

今天來學習 ES6 中的解構賦值,功能是讓我們在寫物件、陣列的時候可以很便利的使用縮寫,快速的將多筆資料取出成獨立變數,增加可讀性並減少程式碼,今天就來練習物件...

鐵人賽 Modern Web DAY 9

技術 Day09【ES6 小筆記】展開運算子 - 基礎使用範例(Spread operator)

上一篇的剩餘參數,是把很多的參數整合成一個陣列,而展開運算子,則是把陣列裡面的值取出,並拆解成一個一個的獨立參數,使用方式一樣都是 ...,以下來看看使用情境...

鐵人賽 Software Development DAY 9

技術 觀察者模式 - 09

多行字串 Typescript 支援多行字串 let text = `start line end line `; 字串模板 Typescript 支援字串模...

鐵人賽 Modern Web DAY 8

技術 Day08【ES6 小筆記】剩餘參數 - 基礎使用範例(Rest parameter)

在有些情況,Function 有不確定數量的參數時,ES6 提供的「剩餘參數」就可以幫助我們很容易 取得剩餘的所有參數,並保存在陣列裡! 剩餘參數的特性如下:...

鐵人賽 Modern Web DAY 6

技術 [ Vue.js ] 資料選項 Options

學習完 Vue 之後,想要透過單元測試守護你的專案,但又不知道從何起手?別擔心,快來訂閱作者最新系列文 《小白也能輕鬆瞭解的 Vue3 單元測試!》讓你的 V...

鐵人賽 Modern Web DAY 7

技術 Day07【ES6 小筆記】變數命名規則&宣告位置哪裡好?

在先前我們已經有介紹過 ES6 新的變數宣告方法 let 與 const,但是變數宣告的位置跟變數名稱也是有規則的哦!養成良好的習慣,可以讓我們的程式碼有更好的...

鐵人賽 Modern Web DAY 6

技術 Day06【ES6 小筆記】函式參數預設值 - 基礎範例(Default Arguments)

參數預設值 ES6 提供了更簡易的函式參數預設值的設定方式,讓我們可以更直覺的來進行設定,優點如下: 減少程式碼 有利於代碼的可讀性 話不多說,來看範...

鐵人賽 Modern Web DAY 5

技術 Day05【ES6 小筆記】前端開發者不能不知道的 ES6 是什麼?

本月參加的鐵人挑戰就是要來探索 ES6,讓 JavaScript 更上一層樓!但是忘記在第一天先跟大家介紹 ES6 是什麼了XDD,來補充分享一下!(以下是簡略...

鐵人賽 Modern Web DAY 4

技術 Day04【ES6 小筆記】箭頭函式 - 基礎使用範例(Arrow function )

ES6 箭頭函式 講到 ES6 就不能不知道箭頭函式,它可以讓我們的函式變得更簡短、提升可讀性,但其實蠻多眉眉角角的,以下就提供幾個寫法範例&特性說明...

鐵人賽 Modern Web DAY 3

達標好文 技術 Day03【ES6 小筆記】JS 組字串好方便!一目瞭然最清楚(模板字串符 template literal)

模板字串符(template literal)是 ES6 中新增的一個相當方便實用的功能,取代以往在 JS 中用 " " 或 ' ' 及 +...