J 筆記 - Append Item to Array

J 筆記 - Append Item to Array

在之前一系列有關 Array 的文章當中，有看到各種 clone Array 後，將新元素推進陣列會造成的結果，都直接以 push 來簡單舉例而已。

這篇將舉例 易變的 (mutable)、不易變的 (inmutable) 的五種方式，雖然實務上都會直接用 inmutable 的方法，但還是舉例 mutable，來增加自己印象，就算看到這樣的程式碼的時候，也會知道會造成的結果…

易變的 (mutable)

透過 push、splice、.length 這三種方式的塞元素，會影響原始的陣列。

1
2
3
4
5
6
7
8
const array = ['ES5'];

array.push('ES6');
array.splice(array.length, 0, 'ES6');
array[array.length] = 'ES6';

console.log(array);
// ['ES5', 'ES6']

不易變的 (inmutable)

透過 spread、concat 兩種方式，會額外新增一個陣列，並且保持原本的陣列不受到更動。

1
2
3
4
5
6
7
8
9
10
const original = ['ES5'];
let newArray;

newArray = original.concat('ES6');
newArray = [...original, 'ES6'];

console.log(newArray);
// ['ES5', 'ES6']
console.log(original);
// ['ES5']

3 Ways to Append Item to Array (mutable)

接下來就來看一下將元素塞進陣列的 3 種變動的方式。

Array.prototype.push()

將元素添加到數組陣列最後的最簡單方法是使用 push

The push() method adds one or more elements to the end of an array and returns the new length of the array.

1
2
3
4
5
6
7
8
9
const array = ['ES5', 'ES6'];
const pushedArray = ['ES7', 'ES8', 'ES9'];

array.push('ES7', 'ES8', 'ES9');
// ES6
array.push(...pushedArray);

console.log(array); 
// ['ES5', 'ES6', 'ES7', 'ES8', 'ES9'];

Array.prototype.splice()

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

1
2
3
4
5
6
7
8
9
10
const array = ['ES5', 'ES6'];

array.splice(
  array.length, // 陣列的最後
  0,            // 不更改原本陣列裡的元素 
  'ES7', 'ES8', 'ES9'
);

console.log(array); 
// ['ES5', 'ES6', 'ES7', 'ES8', 'ES9'];

Array.length

The length property of an object which is an instance of type Array sets or returns the number of elements in that array. The value is an unsigned, 32-bit integer that is always numerically greater than the highest index in the array.

1
2
3
4
5
6
7
const array = ['ES5', 'ES6'];
const length = array.length; // 2

array[length] = 'ES7';

console.log(zoo); 
// ['ES5', 'ES6', 'ES7'];

2 Ways to Append Item to Array (inmutable)

2 種不變動將元素塞進陣列的方式。

Array.prototype.concat()

我們可以使用 concat 方法，透過接受值、陣列來添加多個元素。

The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

1
2
3
4
5
6
7
8
9
10
11
12
13
const array = ['ES5', 'ES6'];
const array2 = ['ES7', 'ES8', 'ES9'];

const concatArray   = array.concat('ES7');
const concatArray2  = array.concat(array2);

console.log(concatArray);
// ['ES5', 'ES6', 'ES7']
console.log(concatArray2);
// ['ES5', 'ES6', 'ES7', 'ES8', 'ES9']

console.log(array); 
// ['ES5', 'ES6']

Spread syntax

我們可以使用 Spread 方法，將每個陣列元素變成為單個元素，這類似於的效果上方的 concat

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const array = ['ES5', 'ES6'];
const array1 = ['XXX', 'XXX'];

// const XXX = [array, array1];
// [ ['ES5', 'ES6'], ['XXX', 'XXX'] ]

const array2 = [...array, 'ES7'];
const array3 = [...array, 'ES7', 'ES8', 'ES9'];

console.log(array2);
// ['ES5', 'ES6', 'ES7']
 console.log(array3);
// ['ES5', 'ES6', 'ES7', 'ES8', 'ES9']

console.log(array); 
// ['ES5', 'ES6'];

參考資料