JavaScript 陣列

十一月 10, 2019

陣列

JavaScript 的陣列可以看作是一種特別的「物件」，陣列內可以是原始的資料類型、其他陣列、函式等等。

建立陣列

陣列可以使用字面表達語法來建立︰

1	var fruits = ['Apple', 'Banana'];

或是使用 Array 的建構子來建立︰

1
2
3

var fruits = new Array();
fruits[0] = "Apple";
fruits[1] = "Banana";

（透過索引）取得陣列項目

1 2	var first = fruits[0]; //Apple var last = fruits[fruits.length - 1]; // Banana

迭代陣列

fruits.forEach(function(item, index, array) {
  console.log(item, index);
});
// Apple 0
// Banana 1

加入項目至陣列末端

1 2	var newLength = fruits.push('Orange'); // ["Apple", "Banana", "Orange"]

移除陣列末端項目

1 2	var last = fruits.pop(); // 移除 (最末端的) Orange // ["Apple", "Banana"];

移除陣列前端項目

1 2	var first = fruits.shift(); // 移除 (最前端的) Apple // ["Banana"];

加入項目至陣列前端

1 2	var newLength = fruits.unshift('Strawberry') // 加到陣列前端 // ["Strawberry", "Banana"];

在陣列中尋找項目的索引

fruits.push('Mango');
// ["Strawberry", "Banana", "Mango"]

var pos = fruits.indexOf('Banana');
// 1

移除指定索引位置的項目

1
2
3

var removedItem = fruits.splice(pos, 1); // 移除 pos 起的 1 個項目

// ["Strawberry", "Mango"]

移除指定索引位置起的多個項目

var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
console.log(vegetables); 
// ["Cabbage", "Turnip", "Radish", "Carrot"]

var pos = 1, n = 2;

var removedItems = vegetables.splice(pos, n); 
// 這就是移除項目的方式，
// n 表示從該位置 (pos) 開始，一直到陣列的尾端有多少項目需要移除

console.log(vegetables); 
// ["Cabbage", "Carrot"] (原始的陣列被改變)

console.log(removedItems); 
// ["Turnip", "Radish"]

複製陣列

1 2	var shallowCopy = fruits.slice(); // 這就是複製陣列的方式 // ["Strawberry", "Mango"]

將陣列元素合併成字串

var elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

刪除陣列元素

刪除陣列元素後，該元素為undefined。

var arr = [1, 2, 3, 4, 5, 6];

delete arr[1];
//[1,undefined,3, 4, 5, 6]

將字串或輸入參數組成陣列

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

對陣列中的各元素進行操作，操作後的值會被寫入新的陣列中並返回

map 會將所有陣列中的元素依序分別傳入一次至 callback 函式當中，並以此回呼函式每一次被呼叫的回傳值來建構一個新的陣列。

var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]


var arr = [1, 2, 3, 4, 5, 6];

var arr2 = arr.map(function (element,index,array) {

  return element * 2;

});

console.log(arr2);
//  [2, 4, 6, 8, 10, 12]

會將兩個陣列合併產生新的陣列，原陣列不改變

concat() 方法被用來合併兩個或多個陣列。此方法不會改變現有的陣列。

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]

陣列比對（some）

陣列比對，只要有一個元素是 true，就返回 true。

var array = [1, 2, 3, 4, 5];

var even = function(element) {
  // checks whether an element is even
  return element % 2 === 0;
};

console.log(array.some(even));
// expected output: true

陣列比對（every）

陣列比對，所有元素都是 true 才是 true。

function isBelowThreshold(currentValue) {
  return currentValue < 40;
}

var array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

陣列過濾

陣列過濾，透過 filter 的過濾條件返回一個新陣列。

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

檢查傳入的值是否為陣列

// 下方都回傳 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c', 'd'));
Array.isArray(new Array(3));
// 小細節：Array.prototype 本身是陣列：
Array.isArray(Array.prototype);

// 下方都回傳 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });

Cyting 部落格