陣列的常用方法

yingpengsha發表於2019-03-25
陣列

建立和初始化陣列

使用 Array 建構函式初始化

let array1 = new Array();
let array2 = new Array(7);
let array3 = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
複製程式碼

直接賦值建立

let array1 = [];
let array2 = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
複製程式碼

Array.of 方法

Array.of() 方法建立一個具有可變數量引數的新陣列例項，而不考慮引數的數量或型別。

let array1 = Array.of(7); // [7]
let array2 = Array.of(...[1, 2, 3, 4]); // [1, 2, 3, 4]
複製程式碼

二維和多維陣列

二維陣列

let matrixArray = new Array(2);
matrixArray[0] = new Array('0.0', '0.1', '0.2', '0.3');
matrixArray[1] = new Array('1.0', '1.1', '1.2', '1.3');
複製程式碼
- [0] [1] [2] [3]
[0] '0.0' '0.1' '0.2' '0.3'
[1] '1.0' '1.1' '1.2' '1.3'

搜尋元素

使用 indexOf 方法

indexOf()方法返回在陣列中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10];
console.log(array.indexOf(10)) // 9
console.log(array.indexOf('A')) // -1
複製程式碼

使用 lastIndexOf 方法

lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或變數）在陣列中的最後一個的索引，如果不存在則返回 -1。從陣列的後面向前查詢，從 fromIndex 處開始。

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10];
console.log(array.lastIndexOf(10)) // 10
console.log(array.indexOf('A')) // -1

console.log(array.lastIndexOf(10, 9)) // 9
複製程式碼

使用 find 方法

find() 方法返回陣列中滿足提供的測試函式的第一個元素的值。否則返回 undefined。

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10];

let find1 = array.find((value, index, arr) => {
    return value % 2 === 0;
}) // 2

let find2 = array.find((value, index, arr) => {
    return typeof value === 'string';
}) // undefined
複製程式碼

使用 findIndex 方法

findIndex()方法返回陣列中滿足提供的測試函式的第一個元素的索引。否則返回-1。

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10];

let find1 = array.findIndex((value, index, arr) => {
    return value % 2 === 0;
}) // 1

let find2 = array.findIndex((value, index, arr) => {
    return typeof value === 'string';
}) // -1
複製程式碼

使用 includes 方法

includes() 方法用來判斷一個陣列是否包含一個指定的值，根據情況，如果包含則返回 true，否則返回false。

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10];
console.log(array.includes(10)) // true
console.log(array.includes('A')) // false
複製程式碼

新增元素

使用 push 方法

push 方法，能把任意元素新增到陣列的末尾。

let array = [1, 2, 3];
array.push('number'); //[1, 2, 3, 'number']
複製程式碼

使用 unshfit 方法

unshfit 方法，能把任意元素新增至陣列的開頭。

let array = [1, 2, 3];
array.unshfit('number1', 'number2'); // ['number1', 'number2', 1, 2, 3]
複製程式碼

刪除元素

使用 pop 方法

pop 方法，能在陣列的末尾刪除一個元素。

let array = [1, 2, 3, 'number'];
array.pop(); // [1, 2, 3]
複製程式碼

使用 shfit 方法

shfit方法，能在陣列的開頭刪除一個元素。

let array = [ 'number', 1, 2, 3];
array.shfit(); // [1, 2, 3]
複製程式碼

在任意位置刪除、新增、替換元素

使用 splice 刪除元素

let array = [1, 2, 3, 4, 5];
array.splice(0, 3); // [4, 5];
複製程式碼

使用 splice 新增元素

let array = [1, 2, 3];
let insertArray = ['number1', 'number2']
array.splice(1, 0, ...insertArray); // [1, 'number1', 'number2', 2, 3];
複製程式碼

使用 splice 替換元素

let array = [1, 2, 3];
let replaceArray = ['number1', 'number2']
array.splice(1, 1, ...replaceArray); // [1, 'number1', 'number2', 3];
複製程式碼

使用 fill 替換元素

fill() 方法用一個固定值填充一個陣列中從起始索引到終止索引內的全部元素。不包括終止索引。

let array = [1, 2, 3];
let number = 0;
array.fill(number, 1, 3); // [1, 0, 0]
複製程式碼

陣列合並

使用 concat 連線陣列

concat 函式並不會直接改變陣列的值，而是返回一個連線後的陣列

let array1 = [1, 2, 3];
let array2 = ['a', 'b', 'c'];
let result = array1.concat(array2); // [1, 2, 3, 'a', 'b', 'c']
複製程式碼

排序元素

使用 sort 方法排序

let array = [5, 3, 2, 1, 4];
array.sort(); // [1, 2, 3, 4, 5]
複製程式碼

使用 sort 方法自定義排序

let array = ['D', 'a', 'c', 'B'];
array.sort(); // ['B', 'D', 'a', 'c']

let strCompare = (one, two) => {
  if (one.toLowerCase() < b.toLowerCase()) {
    return -1;
  }
  if (one.toLowerCase() > b.toLowerCase()) {
    return 1;
  }
  return 0;
}
array.sort(strCompare); // ['a', 'B', 'c' 'D']
複製程式碼

使用 reverse 方法將陣列中元素的位置顛倒

let array = [1, 2, 3, 4, 5];
array.reverse(); // [5, 4, 3, 2, 1]
複製程式碼

迭代器函式

forEach 方法

forEach( ) 方法對陣列的每個元素執行一次提供的函式。

let array = [1, 2, 3, 4];
array.forEach((value, index, arr) => {
  console.log(value % 2 === 0); // 輸入出是否被 2 整除
})
// false
// true
// false
// true
複製程式碼

for …… of 迴圈迭代

let array = [1, 2, 3, 4];
for (const number of array) {
  console.log(n % 2 === 0)
}
// false
// true
// false
// true
複製程式碼

map 方法

map() 方法建立一個新陣列，其結果是該陣列中的每個元素都呼叫一個提供的函式後返回的結果。

let array = [1, 2, 3, 4];
let result = array.forEach((value, index, arr) => {
  return value * 2;
})
// array : [1, 2, 3, 4]
// result : [2, 4, 6, 8]
複製程式碼

filter 方法

filter() 方法建立一個新陣列, 其包含通過所提供函式實現的測試的所有元素。

let array = [1, 2, 3, 4];
let result = array.filter((value, index, arr) => {
  return value > 2;
})
// array : [1, 2, 3, 4]
// result : [3, 4]
複製程式碼

reduce 方法

reduce() 方法對陣列中的每個元素執行一個由您提供的reducer函式(升序執行)，將其結果彙總為單個返回值。

let array = [1, 2, 3, 4];
let result = array.reduce((value, currentValue, index, arr) => {
  return value + currentValue;
}, 5)
// result : 5 + 1 + 2 + 3 + 4 = 15 
複製程式碼

every 方法

every( )方法測試陣列的所有元素是否都通過了指定函式的測試。

let array = [1, 2, 3, 4];

array.every((value) => {
  return value % 2 === 0; // 陣列是否都能被 2 整除
})
// false

array.every((value) => {
  return typeof value == 'number'; // 陣列是否都是數字
})
// true
複製程式碼

some 方法

some() 方法測試是否至少有一個元素通過由提供的函式實現的測試。

let array = [1, 2, 3, 4];

array.some((value) => {
  return value % 2 === 0; // 陣列有沒有能被 2 整除的值
})
// true

array.some((value) => {
  return typeof value == 'string'; // 陣列有沒有字串
})
// false
複製程式碼

entries 方法

entries() 方法返回一個新的Array Iterator物件，該物件包含陣列中每個索引的鍵/值對。

let array = [1, 2, 3, 4];
let iterator = array.entries();

console.log(iterator.next()); // {value: [0, 1], done: false }
console.log(iterator.next()); // {value: [1, 2], done: false }
console.log(iterator.next()); // {value: [2, 3], done: false }
console.log(iterator.next()); // {value: [3, 4], done: false }
console.log(iterator.next()); // {value: undefined, done: true }
複製程式碼

keys 方法

keys() 方法返回一個包含陣列中每個索引鍵的Array Iterator物件。

let array = [1, 2, 3, 4];
let iterator = array.keys();

console.log(iterator.next()); // {value: 0, done: false }
console.log(iterator.next()); // {value: 1, done: false }
console.log(iterator.next()); // {value: 2, done: false }
console.log(iterator.next()); // {value: 3, done: false }
console.log(iterator.next()); // {value: undefined, done: true }
複製程式碼

values 方法

values() 方法返回一個新的 Array Iterator 物件，該物件包含陣列每個索引的值

let array = [1, 2, 3, 4];
let iterator = array.values();

console.log(iterator.next()); // {value: 1, done: false }
console.log(iterator.next()); // {value: 2, done: false }
console.log(iterator.next()); // {value: 3, done: false }
console.log(iterator.next()); // {value: 4, done: false }
console.log(iterator.next()); // {value: undefined, done: true }
複製程式碼

Array.from 方法

Array.from() 方法從一個類似陣列或可迭代物件中建立一個新的陣列例項。

console.log(Array.from('number')); // ['n', 'u', 'm', 'b', 'e', 'r']
console.log(Array.from([1, 2, 3], value => value + 1)); // [2, 3, 4]
複製程式碼

輸出陣列為字串

toString 方法

let array = ['h', 'e', 'l', 'l', 'o'];
console.log(array.toString()); // 'h, e, l, l, o'
複製程式碼

join 方法

let array = ['h', 'e', 'l', 'l', 'o'];
console.log(array.join('-')); // 'h-e-l-l-o'
複製程式碼

相關文章