JavaScript 對象數組排序與提取屬性：化學元素案例實戰

需求

後端返回 JSON 對象數組，每個對象包含元素符號與原子序數，需按 val 排序並提取中文名與值兩個數組。

輸入數據結構

var elements = [
  { symbol: 'K',  name: '鉀', val: 19 },
  { symbol: 'Ca', name: '鈣', val: 20 },
  { symbol: 'Na', name: '鈉', val: 11 },
  { symbol: 'Mg', name: '鎂', val: 12 }
];

核心代碼

// 1. 按 val 升序排序
elements.sort(function(a, b) {
  return a.val - b.val; // 數值比較，避免字符串比較陷阱
});

// 2. 提取排序後的 name 與 val 數組
var names = elements.map(function(e) { return e.name; });
var vals  = elements.map(function(e) { return e.val; });

console.log(names); // ["鈉", "鎂", "鉀", "鈣"]
console.log(vals);  // [11, 12, 19, 20]

ES6 箭頭函數簡寫

elements.sort((a, b) => a.val - b.val);
const names = elements.map(e => e.name);
const vals  = elements.map(e => e.val);

通用封裝函數

function sortAndExtract(arr, sortKey, ...extractKeys) {
  const sorted = [...arr].sort((a, b) => a[sortKey] - b[sortKey]);
  return extractKeys.map(key => sorted.map(item => item[key]));
}

// 使用
const [names, vals] = sortAndExtract(elements, 'val', 'name', 'val');

注意事項

• sort 會原地修改數組，若需保留原序列請先拷貝 [...arr]。
• 數值排序必須提供比較函數 (a,b) => a - b，否則按字符串 Unicode 編碼排序（如 100 排在 2 前面）。
• 若 val 可能為字符串，轉換：Number(a.val) - Number(b.val)。