除了 for…in 方法，還有許多迴圈方法可以協助處理陣列資料，但物件並不支援這些方法，以下為例

const fruits = {
  apple: { price: 45 },
  strawberry: { price: 100 },
  banana: { price: 30 },
  papaya: { price: 60 },
  watermelon: { price: 75 }
}

假設我們想取得每個元素的價格，直接使用陣列方法 forEach() 會產生錯誤，因為物件並沒有該寫法

fruits.forEach(item => {
  console.log(item.price);
});

// output: Uncaught TypeError: fruits.forEach is not a function

閱讀更多

陣列方法可以幫助開發者更有效率的進行資料處理，前端框架 Vue 跟 React 都採取視覺單位關注點分離，框架協助處理畫面部分，而資料面的處理就要靠開發者的功力。

因自己在工作上大量運用到相關技巧，因此將內容筆記起來，方便未來需要時複習使用。

閱讀更多

上一篇 Three.js 3D Library (2) 模型實作 我們建立了行星動畫，接下來試著加入發光效果，讓畫面更吸睛～

UnrealBloomPass 發光效果

Three.js 提供了強大的渲染引擎和豐富的功能，其中後製（Post-processing）是在渲染到螢幕前對畫面進行一些處理，再將畫面渲染到螢幕上，以達到特定的視覺效果，UnrealBloomPass 是其中一個後製功能，可以打造出逼真的發光效果。

閱讀更多

依照上一篇 Three.js 3D Library (1) 基本介紹 介紹了製造 3D 圖形的基本元素，接下來進行實作吧！

座標系統

開始實作之前，必須先了解 Three.js 使用 右手座標系統 Right-Hand Coordinate 來定義 3D 空間：

X軸：向右為正方向，Y軸：向上為正方向，Z軸：向外為正方向

閱讀更多

Three.js 是一個基於 WebGL 開發的 JavaScript 函式庫，可在網頁上建立 3D 圖形。Three.js 提供比 WebGL 更簡單、高效且功能豐富的方式來創建互動性的 3D 場景，並支援多種渲染器，包括 WebGL、Canvas 和 SVG

套件安裝

npm i three

import * as THREE from 'three'

閱讀更多

JavaScript 的型別分為兩種：原始資料型別（Primitive Data Types）以及物件型別（Object Types）

原始資料型別包含以下：

• String 字串型別
• Number 數字型別
• Boolean 布林型別
• Null
• Undefined
• Symbol

ES6 Symbols 是 JavaScript 中的一種新資料型別，用於表示唯一的識別符。每個 Symbol 值都是唯一且不可變的，並且可以作為物件屬性的 key 值。也就是說，即使兩個 Symbol 值具有相同的描述（description），兩者也不相等。

閱讀更多

繼承與原型鏈

在 class 出現前，通常使用建構函式（Constructor）建立原型（Prototype）。原型並非實體（可以將其理解成藍圖），必須透過 new 運算子實體化，繼承該原型。

閱讀更多

手機 App 可以透過原生介面實現分享功能，而 Web Share API 可以協助我們在 Android 或 IOS 網頁上做到類似像 App 的分享功能，主要是透過作業系統原生介面分享，可以輕鬆地將內容分享至第三方平台（Facebook、Twitter、Line…），分享內容可以為連結、文字或是檔案。

閱讀更多

Currying is a technique in functional programming where a function that takes multiple arguments is transformed into a sequence of functions that each take a single argument.

Currying 是一種函式編程（程式設計的一種，可以參考此篇文章）技術，將接收多個參數的函式，拆解為多個函式，每個函式只接受一個參數

閱讀更多

函數原型 call、apply、bind 方法可以用來改變 this 指向的對象，bind 和其他兩個方法 call、apply 較不同，call、apply 會直接執行函式，bind 只是將 this 綁定到函式內，並不會實際執行，這樣說明還是有點難懂，那就接下去看看吧。

閱讀更多