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 到一个数组中。在这个过程中，对每个数据逐个进行处理，然后在合并到同一个数组中。