JavaScript數據結構-數組含數組方法

你們好，我是前端圖圖。通過上一篇文章(也是個人第一篇文章)，我的感受得到蠻不錯的成績，好開心拿下了年度徵文的傑出獎。前端

最近也在尋思下一篇寫什麼東西呢？最近在學數據結構與算法這本書。那就講講數據結構吧！也把此次寫做看成覆盤。輸入的同時也要輸出的，否則學了一點用都沒有。下面廢話很少說，咱們開始吧！程序員

爲何使用數組

假設有這樣一個需求：保存一組人名，能夠像下面這樣。算法

const name1 = "小紅";
const name2 = "小黃";
const name3 = "小明";
const name4 = "小周";
複製代碼

但這樣並非最好的方案，若是按照這樣的方法的話，只能存部分的人名。要建立幾個到幾十個變量，這樣顯然是行不通的。像這種需求咱們就能夠用數組來解決了。後端

const names = ["小紅", "小黃", "小明", "小周"];
複製代碼

用數組來存這些人名就比剛纔聲明多個變量要簡潔得多了。數組

建立和初始化數組

js建立和初始化數很簡單，有二種方式建立或初始化一個數組。markdown

使用new關鍵字建立數組

// 聲明一個數組
const arr1 = new Array();
// 將數組元素做爲參數
const arr2 = new Array("1", "2", "3", "4");
// 給數組一個指定長度
const arr3 = new Array(7);
複製代碼

使用new關鍵字，能簡單地聲明初始化一個數組，用這種方法，還能夠建立一個指定長度的數組。另外也能夠直接將數組元素做爲參數傳遞給它的構造器。數據結構

可是new建立數組並非最好的方式，還有一種建立數組的方式。函數

使用`[]`形式

建立一個數組還能夠用[]的形式建立，這也是js最多見的一種方式。ui

// 經過字面量的方式建立
const arr1 = [];
//能夠用一些元素初始化數組
const strs = ["1", "2", "3", "4"];
複製代碼

若是想知道數組中存有多少個元素(也就是數組的長度)，訪問數組的length屬性便可。spa

const numbers = [1, 2, 3, 4, 5, 6];
console.log(numbers.length); // 6
複製代碼

訪問元素和迭代數組

要想訪問數組裏特定位置的元素，能夠用中括號傳遞元素位置的數值，這就能夠獲得想知道的值或賦新的值。

const numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 1
console.log(numbers[1]); // 2

numbers[2] = 5;
console.log(numbers[2]); // 5
複製代碼

若是想數組numbers裏的全部元素，經過for循環迭代數組、打印元素。for循環的用法就不講了，是個程序員都會的循環語句。還有其餘的數組方法下面會講到。

const numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
複製代碼

經過for循環迭代每一項就能夠獲得數組裏的全部元素並在控制檯打印。

添加元素

在數組中添加元素也很簡單，就拿上面的numbers舉例。

const numbers = [1, 2, 3, 4, 5];
複製代碼

從數組尾部添加元素

想要給數組添加一個元素(好比6)，只要把值賦給數組中最後一個空位上的元素就能夠了。

const numbers[numbers.length] = 6;
複製代碼

在js裏，數組是一個可修改的對象，若是添加元素，就會自動增加。

使用push方法

數組有一個push方法，把元素添加到數組的尾部。使用push方法，能添加N元素。

let numbers = [0, 1, 2, 3, 4, 5];
numbers[numbers.length] = 6;
numbers.push(7);
numbers.push(8, 9);
console.log(numbers);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
複製代碼

在最後的log中就獲得了從0到9的值。

從數組頭部添加元素

使用unshift方法

unshift方法，能夠直接把元素插入到數組的頭部。

let numbers = [0, 1, 2, 3, 4, 5];
numbers.unshift(-2, -1);
numbers.unshift(-4, -3);
console.log(numbers);
// [-4, -3, -2, -1, 0, 1, 2, 3, 4, 5]
複製代碼

刪除元素

從數組的末尾刪除元素

數組的pop方法，用於刪除數組最後面的元素。

let arr = [1, 2, 3, 4, 5];
arr.pop();
console.log(arr);
// [1, 2, 3, 4]
複製代碼

從數組的頭部刪除元素

數組有一個shift方法，用於刪除數組的第一個元素。

let numbers = [1, 2, 3, 4, 5, 6];
numbers.shift();
console.log(numbers);
// [ 2, 3, 4, 5, 6]
複製代碼

假如數組中的值是從1到6，長度爲6。執行shift方法以後，數組就剩下2到6，長度也變成了5。使用shift和unshift方法，能夠用數組來模擬隊列的數據結構。

在任意位置添加或刪除元素

使用splice方法，能夠簡單地經過指定位置或索引刪除相應位置上指定數量的元素。

let numbers = [1, 2, 3, 4, 5, 6];
numbers.splice(4, 2);
console.log(numbers);
// [1, 2, 3, 4]
複製代碼

上面的代碼中，刪除了索引4開始的2個元素。這就表示把numbers[5]、numbers[6]這兩個元素刪除了。最後數組中的值是1, 2, 3, 4。

還可使用delete運算符刪除數組中的元素。

let numbers = [1, 2, 3, 4, 5];
delete numbers[2];
console.log(numbers);
// [1, 2, empty, 4, 5]
複製代碼

能夠看到delete運算符，把numbers[2]位置上的值變成了empty。delete運算符是把元素刪除了，可是位置還保留着，這個位置上值是個空值。因此不建議你們使用delete運算符數組中的元素。

如今再把5, 6放回到數組中原來的位置上，還可使用splice方法。

let numbers = [1, 2, 3, 4, 5, 6];
numbers.splice(4, 2);
console.log(numbers);
// [1, 2, 3, 4]

number.splice(4, 0, 5, 6);
console.log(numbers);
// [1, 2, 3, 4, 5, 6]
複製代碼

splice方法接收第一個參數是想要刪除或插入的索引值。第二個參數是刪除元素的個數（這個的例子目的不是刪除元素，因此傳0）。第三個參數日後，就是添加到數組中的值。

二維數組和多維數組

下面用一個平均氣溫測量的例子，來實現一個矩陣（二維數組，或數組的數組）。

let airTemperature = [];

airTemperature[0] = [28, 22, 24, 26, 10];
airTemperature[1] = [20, 16, 18, 30, 21];
console.log(airTemperature);
// [ [ 28, 22, 24, 26, 10 ], [ 20, 16, 18, 30, 21 ] ]
複製代碼

上面的代碼裏，分別制定了天天和每小時的數據。我也照書上畫了個圖，方便你們理解。

每一行就是天天的數據，每一列就是當天不一樣時段的氣溫。

迭代二維數組的元素

迭代二維數組其實就是用兩層for循環來實現。

let airTemperature = [];

airTemperature[0] = [28, 22, 24, 26, 10];
airTemperature[1] = [20, 16, 18, 30, 21];

for (let i = 0; i < airTemperature.length; i++) {
  console.log(airTemperature[i]);
  for (let j = 0; j < airTemperature[i].length; j++) {
    console.log(airTemperature[i][j]);
  }
}
複製代碼

其中變量i表示行，j表示列。每個airTemperature[i]表明一個數組，因此在嵌套的for循環中迭代airTemperature[i]的每個位置。

多維數組

假設要建立一個3 x 3 x 3的矩陣，每一格里包含矩陣的i(行)、j(列)、z(深度)之和。

let Arrx3x3x3 = [];
for (let i = 0; i < 3; i++) {
  Arrx3x3x3[i] = [];
  for (let j = 0; j < 3; j++) {
    Arrx3x3x3[i][j] = [];
    for (let z = 0; z < 3; z++) {
      Arrx3x3x3[i][j][z] = i + j + z;
    }
  }
}

console.log(Arrx3x3x3);
/* [ [ [0, 1, 2], [1, 2, 3], [2, 3, 4] ], [ [1, 2, 3], [2, 3, 4], [3, 4, 5] ], [ [2, 3, 4], [3, 4, 5], [4, 5, 6] ] ] */
複製代碼

數據結構有幾個維度沒有什麼關係，能夠用循環迭代每一個維度來訪問全部的格子。Arrx3x3x3矩陣以下圖。

下面來輸出一下這個矩陣裏的內容。

for (let i = 0; i < Arrx3x3x3.length; i++) {
  for (let j = 0; j < Arrx3x3x3[i].length; j++) {
    for (let z = 0; z < Arrx3x3x3[i][j].length; z++) {
      console.log(Arrx3x3x3[i][j][z]); // 這裏輸出z的結果
    }
  }
}
複製代碼

若是是一個3 x 3 x 3 x 3的矩陣，就用到四層for循環語句，以此類推。在開發當中不多會用到四維數組，二維是最多見的。

js數組方法

下面來盤點一下除了以上用過的數組方法，js還有哪些數組方法。

concat：拼接2個數組或更多數組，並返回拼接後的數組。
every：對數組中的每一個元素運行指定函數，檢測數組的元素是否符合條件，有一個元素不符合條件都會返回false，剩餘的元素不會進行檢測。
filter：對數組中的每一個元素運行指定函數，返回這個函數會返回true的元素組成的數組。
forEach：迭代數組的每一個元素。這個方法沒有返回值。
join：把數組中的全部元素連成一個字符串。
indexOf：返回一個傳入的值最早出現的索引，沒有找到則返回-1。(從數組的頭部開始找)
lastIndexOf：返回一個傳入的值最後出現的索引，沒有找到則返回-1。(從數組的末尾開始找)
map：對數組中的每一個元素運行指定函數，返回每次調用函數的結果組成數組。
reverse：顛倒數組中元素的順序，第一個變成最後一個，最後一個變成第一個。
slice：傳入索引值，把數組中對應索引範圍內的元素做爲新數組返回。
some：檢測數組的每一個元素是否符合添加，若是其中一個元素符合條件，則返回true。
sort：用於對數組的元素進行排序。
toString：把數組做爲字符串返回。(將數組轉成以逗號分隔的字符串)
valueOf：和toString相似，把數組做爲字符串返回。

concat方法

若是有多個數組，想要合併成一個數組的話，可使用concat方法。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let number = 7;
let arr3 = arr1.concat(arr2, number);
console.log(arr3);
// [1, 2, 3, 4, 5, 6, 7]
複製代碼

concat方法能夠向一個數組傳遞數組、對象或者是其餘類型的值。數組會按照該方法傳入的參數順序成指定數組。上面的例子裏，arr2被合併到arr1中，而後number變量的值也被合併。最後輸出的結果是[1, 2, 3, 4, 5, 6, 7]。

迭代函數

除了for循環語句以外，js還內置不少迭代數組的方法。咱們須要一個數組和一個函數：假設數組中的值是從1到10；若是數組的元素能夠被2整除，函數就返回true，不然返回false。

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

function isEven(val) {
  return val % 2 === 0;
}
複製代碼

every方法

every方法會迭代數組中的每一個元素，直到返回false。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.every(isEven));
// false
複製代碼

上面的例子中，數組的第一個元素是1，它不是2的倍數，因此isEven函數返回false，而後執行就結束了。

some方法

some方法跟eveny方法的行爲相反，會迭代數組的每一個元素，直到函數返回true爲止。

console.log(arr.some(isEven));
// true
複製代碼

這個例子中，數組中的第一個偶數是2。第一個被迭代的元素是1，isEven返回false。第二個被迭代的元素是2，isEven返回true，迭代就結束了。

forEach方法

forEach方法用來迭代整個數組，它和for循環效果同樣。切記，forEach方法是沒有返回值的。

arr.forEach((val) => console.log(val % 2 === 0));
// false
// true
// false
// true
// false
// true
// false
// true
// false
// true
複製代碼

map和filter方法

map和filter方法都會返回新的數組。首先看map方法。

const myMap = arr.map(isEven);
console.log(myMap);
// [false, true, false, true, false, true, false, true, false, true]
複製代碼

數組myMap裏的值是：[false, true, false, true, false, true, false, true, false, true]。它保存了傳入map方法的isEven函數的運行結果。這樣就容易知道哪一個元素是偶數了。好比，myMap[0]是false，由於1不是偶數。

filter方法，它返回的新數組是由isEven函數返回true的元素組成的。

const filterNumbers = arr.filter(isEven);
console.log(filterNumbers);
// [ 2, 4, 6, 8, 10 ]
複製代碼

至關於篩選了數組中被2整除的元素，但也是用於篩選數組中符合條件的元素。

reduce方法

reduce方法接收四個參數的函數：preVal(初始值)、currVal(當前元素)、index(當前索引)和array(當前元素所在的數組)。index和array是可選參數。這個函數返回一個將被疊加到累加器的值，reduce方法中止執行後會返回這個累加器。若是要對一個數組的全部元素求和，這個方法就頗有用。

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

const myReduce = arr.reduce((preVal, currVal) => preVal + currVal);
console.log(myReduce); // 輸出55
複製代碼

ES6添加的數組方法

@@iterator：返回一個包含數組鍵值對的迭代器對象，經過同步調用獲得數組元素的鍵值對。
copyWithin：複製數組中一系列元素到同一個數組指定的起始位置。
entries：返回包含數組全部鍵值對的@@iterator。
includes：若是數組中存在某個元素則返回true，不然返回false。
find：根據回調函數給定的條件從數組中查找元素，若是找到則返回該元素。
findIndex：根據回調函數給定的條件從數組中查找元素，若是找到則返回該元素在數組中的索引。
fill：用靜態值填充數組。
from：用於把類數組的對象和可遍歷的對象轉成真正的數組。
keys：返回包含數組全部索引的@@iterator。
of：根據傳入的參數建立一個新數組。
values：返回包含數組中全部值的@@iterator。

for...of方法

ES6增長迭代數組的方法for...of循環，下面是它的用法。

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let i of arr) {
  // n就是arr中的元素
  console.log(n % 2 === 0);
}
複製代碼

`@@iterator`對象

ES6還爲Array增長了一個@@iterator屬性，須要經過Symbol.iterator來訪問。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let iterator = arr[Symbol.iterator]();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3
console.log(iterator.next().value); // 4
複製代碼

而後，不斷調用迭代器的next方法，就能依次獲得數組中的值。arr數組中有10個值，那麼就要調用10次。這顯然不實際，可是可使用for...of循環來輸出這些值。

let iterator = arr[Symbol.iterator]();
for (const n of iterator) {
  console.log(n);
}
複製代碼

數組中的值被迭代完以後，再次調用iterator.next().value則會返回undefined。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let iterator = arr[Symbol.iterator]();
for (const n of iterator) {
  console.log(n);
}
console.log(iterator.next().value); // undefined
複製代碼

數組的`entries`、`keys`和`values`方法

ES6還增長了三種從數組中獲得迭代器的方法。

entries方法

let aEntries = arr.entries(); // 這裏獲得鍵值對的迭代器
console.log(aEntries.next().value); // [0, 1] 位置0的值爲1
console.log(aEntries.next().value); // [1, 2] 位置1的值爲2
console.log(aEntries.next().value); // [2, 3] 位置2的值爲3
複製代碼

arr數組中都是數，key是數組中的位置，value是保存在數組索引的值。也可使用for...of循環對aEntries進行迭代。

keys方法

key方法返回包含數組索引的@@iterator。

let aKeys = arr.keys(); // 獲得數組索引的迭代器
console.log(aKeys.next()); // { value: 0, done: false }
console.log(aKeys.next()); // { value: 1, done: false }
console.log(aKeys.next()); // { value: 2, done: false }
複製代碼

keys方法會返回arr數組的索引。若是沒有可迭代的值，aKeys.next()就返回一個value屬性爲undefined、done屬性爲true的對象。若是done屬性的值爲false，就說明還有可迭代的值。

values方法

values方法返回@@iterator則包含數組的值。

let aValues = arr.values();
console.log(aValues.next()); // { value: 1, done: false }
console.log(aValues.next()); // { value: 2, done: false }
console.log(aValues.next()); // { value: 3, done: false }
複製代碼

`form`方法

Array.form方法用於把可遍歷的對象、類數組的對象轉爲真正的數組（包括Set和Map數據結構）。也能夠根據已有的數組建立一個新的數組。好比，要複製arr數組。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arr2 = Array.from(arr);
console.log(arr2);
// [0, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 可遍歷對象轉數組
let obj = {
  0: "1",
  1: "2",
  2: "3",
  length: 3,
};
console.log(Array.from(obj));
// [ '1', '2', '3' ]

// 類數組的對象轉爲真正的數組，arguments就是類數組的對象
function args() {
  console.log(Array.from(arguments));
}

args(1, 2); // [ 1, 2 ]
複製代碼

還能夠傳入一個用來過濾值的函數，例子以下。

let evens = Array.from(arr, (x) => x % 2 === 0);
console.log(evens);
// [false, true, false, true, false, true, false, true, false, true]
複製代碼

上面的代碼會建立一個evens數組，以及值true（在原數組中爲偶數）或false（在原數組中爲奇數）。

`Array.of`方法

Array.of方法根據傳入的參數建立一個新數組。

let arr2 = Array.of(1);
let arr3 = Array.of(2, 3, 4, 5, 6, 7, 8);
console.log(arr2); // [ 1 ]
console.log(arr3); // [2, 3, 4, 5, 6, 7, 8]
複製代碼

也能夠用這個方法複製已有的數組，以下。

let arrCopy = Array.of(...arr3);
console.log(arrCopy); // [2, 3, 4, 5, 6, 7, 8];
複製代碼

上面的代碼和Array.form(arr3)的效果是同樣的。

`fill`方法

fill方法用給定的值，填充一個數組。

let arrCopy = Array.of(1, 2, 3, 4, 5, 6);
複製代碼

arrCopy數組的length是6，證實有6個位置，再看下面的代碼。

let arrCopy = Array.of(1, 2, 3, 4, 5, 6);
arrCopy.fill(0);
console.log(arrCopy);
// [ 0, 0, 0, 0, 0, 0 ]
複製代碼

arrCopy數組全部位置上的值都會變成0。還能夠指定開始填充的索引，以下所示。

arrCopy.fill(2, 1);
console.log(arrCopy);
// [ 1, 2, 2, 2, 2, 2 ]
複製代碼

上面的例子，數組中從1開始的全部位置上的值都是2。

也能夠指定結束填充的索引。

arrCopy.fill(1, 3, 5);
console.log(arrCopy);
// [ 1, 2, 3, 1, 1, 6 ]
複製代碼

上面的例子中，會把1填充到數組索引3到5的位置（不包括3和5）。

想建立數組並初始化值的時候，fill方法很是好用，像下面這樣。

let ones = Array(6).fill(1);
console.log(ones); // [ 1, 1, 1, 1, 1, 1 ]
複製代碼

這裏建立了一個長度爲6、全部值都是1的數組。

`copyWithin`方法

copyWithin方法複製數組中的一系列元素到同一數組指定的位置。

let copyArray = [1, 2, 3, 4, 5, 6];
複製代碼

假設想把四、五、6三個值複製到數組前三個位置，獲得[4, 5, 6, 4, 5, 6]這個數組，能夠用下面的代碼。

copyArray.copyWithin(0, 3);
console.log(copyArray);
// [ 4, 5, 6, 4, 5, 6 ]
複製代碼

假設想把四、5這個兩個值（在位置3和4上）複製到位置1和2。能夠這樣作：

copyArray.copyWithin(1, 3, 5);
console.log(copyArray);
// [ 1, 4, 5, 4, 5, 6 ]
複製代碼

這種狀況下，會把位置3開始到位置5結束（不包括3和5）的元素複製到位置1。

排序元素

下面展現最經常使用的搜索和排序方法。js也提供了一個排序方法和一組搜索方法。

首先是反序輸出數組arr。要實現這樣的功能，可使用reverse方法，把數組內的元素反序。

arr.reverse();
console.log(arr);
// [10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
複製代碼

如今就能夠看到，輸出arr以後獲得的結果是[10, 9, 8, 7, 6, 5, 4, 3, 2, 1]。

下面來看sort方法。

arr.sort();
console.log(arr);
// [1, 10, 2, 3, 4, 5, 6, 7, 8, 9];
複製代碼

然而，輸出數組，結果是[1, 10, 2, 3, 4, 5, 6, 7, 8, 9]。看起來不太對勁，這是由於sort方法在對數組作排序時，把元素默認成字符串進行相互比較了。

能夠傳入本身寫的比較函數。由於數組裏都是數，能夠像下面這樣寫。

arr.sort((a, b) => a - b);
console.log(arr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
複製代碼

在b大於a時，這段代碼會返回負數，反之則返回正數。若是相等的話，就會返回0。也就是說返回的是負數，就說明a比b小，這樣sort就能根據返回值的狀況對數組進行排序了。

以前的代碼也能夠表示像下面這樣。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.sort();
console.log(arr);
// [1, 10, 2, 3, 4, 5, 6, 7, 8, 9];
function compare(a, b) {
  if (a < b) {
    return -1;
  }
  if (a > b) {
    return 1;
  }
  // a等於b就返回0
  return 0;
}
arr.sort(compare);
console.log(arr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
複製代碼

這是由於js的sort方法接收compareFunction做爲參數，而後sort會用它排序數組。在這個例子裏，聲明瞭一個用來比較數組元素的函數，使數組升序排序。

自定義排序

能夠對任何對象類型的數組進行排序，也能夠建立compareFunction來比較元素。例如，對象Person有名字和年齡屬性，咱們想根據年齡排序。

const friends = [
  { name: "xiaohong", age: 20 },
  { name: "xiaoming", age: 19 },
  { name: "xiaojia", age: 23 },
];

function compare(a, b) {
  if (a.age < b.age) {
    return -1;
  }

  if (a.age > b.age) {
    return 1;
  }
  return 0;
}

console.log(friends.sort(compare));
// [
// { name: 'xiaoming', age: 19 },
// { name: 'xiaohong', age: 20 },
// { name: 'xiaojia', age: 23 }
// ]
複製代碼

在這個例子裏，輸出結果如上。

字符串排序

假若有這樣一個數組。

let names = ["Ana", "ana", "john", "John"];
複製代碼

使用sort方法排序以後以下所示。

console.log(names.sort());
// [ 'Ana', 'John', 'ana', 'john' ]
複製代碼

既然a在字母表裏排第一位，爲什麼ana卻排在了John以後呢？這是由於js在作字符比較的時候，是根據字符對應的一種叫作ASCII值來比較的。例如，A、J、a、j對應的ASCII值分別是6五、7四、9七、106。

雖然a在字母表裏是最靠前的，但J的ASCII值比a的小，因此排在了a前面。

若是給sort傳入一個忽略大小寫的比較函數，將輸出["Ana", "ana", "John", "john"]。

let names = ["Ana", "ana", "john", "John"];
console.log(
  names.sort((a, b) => {
    if (a.toLowerCase() < b.toLowerCase()) {
      return -1;
    }
    if (a.toLowerCase() > b.toLowerCase()) {
      return 1;
    }
    return 0;
  })
);
複製代碼

在這種狀況下，sort函數不會有任何做用。它會按照如今的大小寫字母順序排序。

若是但願小寫字母排在前面，就須要使用localeCompare方法。

let names = ["Ana", "ana", "john", "John"];
names.sort((a, b) => a.localeCompare(b));
console.log(names);
// [ 'ana', 'Ana', 'john', 'John' ]
複製代碼

結果輸出如上。

假如對帶有重音符號的字符作排序的話，也能夠用localeCompare來實現。

const name2 = ["Maève", "Maeve"];
console.log(name2.sort((a, b) => a.localeCompare(b)));
// [ 'Maeve', 'Maève' ]
複製代碼

最後結果輸出如上。

搜索

搜索有兩個方法：indexOf和lastIndexOf這兩個方法，前者是返回與參數匹配的第一個元素的索引。後者則是返回與參數匹配的最後一個元素的索引，就用arr數組來作例子。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.indexOf(5)); // 4
console.log(arr.lastIndexOf(11)); // -1
複製代碼

能夠看到上面的打印結果，第二行打印出了4，第三行打印出了-1（由於11並不在數組裏面）。

`find`和`findIndex`方法

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

function multipleOf(ele, index, array) {
  return ele % 13 === 0;
}

console.log(arr.find(multipleOf)); // undefined
console.log(arr.findIndex(multipleOf)); // -1
複製代碼

find和findIndex方法接收一個回調函數，搜索一個知足回調函數條件的值。上面的例子中，要從數組裏找一個13的倍數。

find和findIndex的不一樣之處在於，find方法返回第一個知足條件的值，而findIndex方法返回這個值在數組中的索引。若是沒有知足條件的值，find返回undefined，而findIndex返回-1。

includes方法

includes方法是用於檢測數組中是否包含某個元素，若是存在則返回true，不然返回false。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(arr.includes(5)); // true
console.log(arr.includes(11)); // false
複製代碼

若是給includes方法傳入一個起始索引，搜索就會從索引指定的位置開始。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(arr.includes(4, 6)); // false
複製代碼

這裏輸出了false，是由於數組索引6以後都不包含元素4。

輸出數組爲字符串

若是想要把數組裏全部的元素輸出爲一個字符串，可使用toString和join這兩個方法。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.toString()); // 1,2,3,4,5,6,7,8,9,10
console.log(arr.join()); // 1,2,3,4,5,6,7,8,9,10
複製代碼

若是想用一個不一樣的分隔符（例如-）把元素隔開，就能夠用join方法。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.join("-")); // 1-2-3-4-5-6-7-8-9-10
複製代碼

join方法，我通常用在給後端傳多個時間或者日期用得比較多點。

以上就是js數組中的方法。

結尾

若是哪裏寫得不對或者很差，歡迎各位大佬指點！也但願你們能給個贊。之後儘可能每週寫一篇文章，來提升本身的寫做水平，同時把本身學的知識分享給你們。好累~~！從早上寫到下午五點多。

JavaScript數據結構-數組 含數組方法