JavaScript 數組拼接方法及應用實例

JavaScript 是一門廣泛應用於 Web 開發的編程語言，其中數組作為一種重要的數據結構，具有廣泛的應用。本文將詳細介紹 JavaScript 中數組拼接的方法以及使用示例，讓讀者對數組拼接有更加深入的理解和掌握。

一、concat() 方法的使用

JavaScript 中的數組有一個 concat() 方法，可以將多個數組拼接為一個數組。具體使用方法如下：

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = arr1.concat(arr2);
console.log(arr3); // [1, 2, 3, 4, 5, 6]

concat() 方法可以接受多個參數，也可以傳入一個數組，如下所示：

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [7, 8, 9];
var arr4 = arr1.concat(arr2,arr3);
console.log(arr4); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

需要注意的是，concat() 方法不會改變原始數組，而是返回一個新的數組。

二、…運算符的使用

ES6 中引入了 … 運算符，可以方便地將一個數組拼接到另一個數組的末尾。具體使用方法如下：

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]

…運算符可以接受任意個數組作為參數，並且可以和其他變數一起使用，如下所示：

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [7, 8, 9];
var arr4 = [...arr1, ...arr2, ...arr3];
console.log(arr4); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

三、應用實例

在實際開發中，數組拼接經常被用在以下場景中：

1. 數組合併

在表格中，需要將多個數據數組合併成一個完整的數組。

var tableData = [
  ['Name', 'Age', 'Gender', 'Score'],
  ['Tom', 18, 'Male', 85],
  ['Alice', 19, 'Female', 92],
  ['Jack', 20, 'Male', 79]
];
var header = tableData[0];
var rows = tableData.slice(1);
var newData = rows.map(row => [...row, Math.round((row[3] - 60) / 40 * 100) / 100]);
var newTableData = [header, ...newData];
console.log(newTableData);

代碼解釋：

首先，將表格中的表頭和數據分離開來，然後將每一行數據拼接上一個新的欄位，最後再使用 …運算符將表頭和新的數據合併在一起。

2. 多個相似數組的處理

在數據處理中，可能會有多個相似的數組需要進行處理，然後拼接成一個大的數組。

var data1 = [
  {name:'Tom', age:18},
  {name:'Alice', age:19},
  {name:'Jack', age:20}
];
var data2 = [
  {score:85},
  {score:92},
  {score:79}
];
var newData = data1.map((person, index) => ({...person, ...data2[index]}));
console.log(newData);

代碼解釋：

首先，將數據按照相似的屬性分成兩個數組，然後使用 map() 方法將兩個數組進行合併，使用 …運算符可以簡化代碼的書寫。

3. 逐行讀取數據的處理

在處理大規模數據時，為了節省內存，常常需要逐行讀取數據進行處理，最後將每一行的處理結果進行拼接。

var rawData = `Tom,18,85
Alice,19,92
Jack,20,79
`;
var data = [];
rawData.trim().split('\n').forEach(line => {
  var [name, age, score] = line.split(',');
  var grade = Math.round((score - 60) / 40 * 100) / 100;
  data.push({name, age, score, grade});
});
console.log(data);

代碼解釋：

首先，將原始數據使用 trim() 方法去掉兩端的空格，然後使用 split(‘\n’) 將數據按行分隔開來。逐行讀取數據時，使用 split(‘,’) 將一行數據拆分為多個欄位，然後進行處理，最後將處理結果 push 到一個數組中。在這個過程中，對每個數據逐個進行處理，然後在合併到同一個數組中。

本文主要介紹了 JavaScript 中數組拼接的兩種方法：concat() 和 …運算符。同時，給出了三個實際應用的示例，使讀者進一步掌握數組拼接的相關技能。