我們持續學習，在React中一定會用到的JS語法吧！

昨日介紹內容

• 樣板字面值(Template literals)
• 箭頭函式
• 物件解構
• 陣列解構

本日介紹內容

• 展開運算子
• 其餘運算子
• 陣列操作方法
  • map
  • filter
  • forEach
• ES6 - 使用module分檔 (import & export)

一、Spread Operator 展開運算子

展開運算子[...] 是把一個陣列展開成個別的值的速寫語法。

1.用來複製或組合陣列：

展開運算子(Spread Operator)是把一個陣列展開(expand)成個別值。

時常運用的場景式用來組合陣列，對應的陣列的方法是concat

let fruit1 = ['蘋果', '西瓜', '鳳梨'];
let fruit2 = ['香蕉', '芒果', '芭樂'];

let fruit3 = fruit1.concat(fruit2);
let fruit4 = [...fruit1, ...fruit2];

console.log(fruit4) //['蘋果', '西瓜', '鳳梨'，'香蕉', '芒果', '芭樂']

2.用來淺拷貝使用：

如果陣列或物件，有相同的記憶體參考位置 ，如下範例apple 和 fruit 指向同一個陣列（它們有相同的記憶體參考位置），只要修改其中一樣，另一樣也會跟著被更改到。

舉例來說：

let fruit = ['蘋果', '西瓜', '鳳梨'];
let apple = fruit
apple[0] = 'apple'

console.log(fruit) // ['apple', '西瓜' , '鳳梨'] 
console.log(apple) // ['apple', '西瓜' , '鳳梨'] 

改用淺拷貝使用

let fruit = ['蘋果', '西瓜', '鳳梨'];
let apple = [...fruit]
apple[0] = 'apple'

console.log(fruit) // ['蘋果', '西瓜' , '鳳梨']
console.log(apple) // ['apple', '西瓜' , '鳳梨']  

因為 [...] 創建了一個新的陣列，這個新的陣列包含了 fruit 陣列中的所有元素，但它們指向不同的記憶體位置。因此，當你修改 apple 陣列中的元素時，fruit 陣列不會受到影響。

也可以運用在物件上，複製一個物件，並為該物件新增一些屬性。

const mobilePhone ={
	name:'IponeX',
	publishedYear: '2024'
}

const myPhone ={
	...mobilePhone,
	price:10000,
	os:'iOS'
}

二、其餘運算子(Rest Operator)

和展開運算子的寫法一樣是 [...] ，用於表示不確定數量的參數，並將其視為一個陣列，用在函式傳入參數或解構賦值時。

用於函式傳入：

放在函式的參數括號內，它必須放在參數最後一個，否則會跳錯。

這個參數可以用陣列方法去操作（ forEach 、map 等 ）

function fn(...num){
  console.log(num)
  
  let count = a.filter(i=>i>3)
  console.log(count)
  // [4, 5, 6]
}

fn(1,2,3,4,5,6)

function fn(x,y,...a){
// 參數 x 是 1
// 參數 y 是 2
// 參數 ...a 是 3, 4, 5, 6
}
fn(1,2,3,4,5,6)

用於解構賦值：

1.陣列中的解構賦值

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...ohter] = numbers;

console.log(first);  // 輸出: 1
console.log(second); // 輸出: 2
console.log(ohter);  // 輸出: [3, 4, 5]

2.物件中的解構賦值

const person = {
  name: 'Alice',
  age: 25,
  city: 'New York',
  country: 'USA'
};

const { name, age, ...ohter } = person;

console.log(name);  // 輸出: 'Alice'
console.log(age);   // 輸出: 25
console.log(rest);  // 輸出: { city: 'New York', country: 'USA' }

三、陣列操作方法 (map , filter , foreach)

1. map 方法

map 方法會將陣列中的每個元素透過指定的函數處理，並返回一個新陣列。
這個新陣列的長度與原來的陣列相同，但元素是經過函數轉換後的結果。

範例：

let numbers = [1, 2, 3, 4];
let squaredNumbers = numbers.map(num => num * 2);

console.log(squaredNumbers); // [2, 4, 6, 8]

在這個範例中，map 將每個數字乘以 2，並返回一個新的陣列 squaredNumbers。

2. filter 方法

filter 方法會篩選出符合條件的元素，並返回一個新陣列。
篩選條件由一個回呼函數指定，這個函數返回 true 的元素會被保留，返回 false 的元素會被過濾掉。

範例：

let numbers = [1, 2, 3, 4];
let evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4]

在這個範例中，filter 篩選出了所有的偶數，並返回一個包含這些偶數的陣列 evenNumbers。

3. forEach 方法

forEach 方法會針對陣列中的每個元素執行一次指定的函數。
與 map 不同的是，forEach 不會返回新的陣列，它僅僅用來執行副作用操作（例如修改外部變數或印出console.log）。

範例：

let numbers = [1, 2, 3, 4];
numbers.forEach(num => console.log(num * 2));

// 輸出：
// 2
// 4
// 6
// 8

在這個範例中，forEach 將每個數字乘以 2 並console出來，它不會返回新的陣列。

四、ES6 - Module 分檔 (import & export)

ES6 引入了模組化的概念，使得程式碼可以被拆分成不同的檔案並共享程式碼。
這使得程式碼的結構更加清晰和可維護。

1. export - 匯出模組

使用 export 關鍵字來匯出變數、函式、類別等，使它們能夠在其他檔案中被 import。

範例：
假設有一個檔案 math.js，裡面定義了一些函式：

// math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

在這個例子中，我們匯出了常數 PI 和兩個函數 add 以及 multiply。

2. import - 匯入模組

你可以使用 import 關鍵字來從其他檔案中匯入匯出的內容。

範例：
假設有另一個檔案 app.js，我們想要使用 math.js 中定義的函數和常數：

// app.js
import { PI, add, multiply } from './math.js';

console.log("圓的面積:", PI * multiply(5, 5)); // 圓的面積: 78.53975
console.log("加法結果:", add(3, 7)); // 加法結果: 10

在這個範例中，我們從 math.js 中匯入了 PI、add 和 multiply，並使用它們來執行一些計算。

3. export default - 匯出預設模組

除了具名匯出外，模組還可以有一個預設匯出（export default），這允許你匯出單個值或物件，而在匯入時不需要使用大括號。

範例：

// math.js
export default function subtract(a, b) {
  return a - b;
}

匯入 export default 的模組：

// app.js
import subtract from './math.js';

console.log("減法結果:", subtract(10, 5)); // 減法結果: 5

在這個範例中，我們匯出了預設函數 subtract，並在匯入時直接使用它，而不需要使用大括號。

我們快速了解ES6的部分語法，這些內容在之後的React教學當中會常常出現，因此我們先來認識與學習它。明天，我們就準備來認識React囉~

資料參考：

• 展開運算子與其餘運算子 · 從ES6開始的JavaScript學習生活 (gitbooks.io)

後記

本文將會同步更新到我的部落格

• 黃禎平 – Medium