數(shù)據(jù)類型-Array

• 什么是數(shù)組
• • 創(chuàng)建數(shù)組
  • 訪問(wèn)和修改數(shù)組
  • length 和數(shù)字下標(biāo)之間的關(guān)系
• 數(shù)組的方法
• • 數(shù)組對(duì)象的方法
  • 字符串和數(shù)組之間的轉(zhuǎn)換
  • 數(shù)組實(shí)例的方法
  • • 數(shù)組的增刪改查
    • • push
      • pop
      • shift
      • unshift
      • splice
      • slice
      • fill
      • indexOf
      • lastIndexOf
    • 數(shù)組的排序
    • • sort
      • reverse
    • 數(shù)組的遞歸
    • • flat
      • flatMap
    • 數(shù)組拼接
    • • concat
    • 數(shù)組的拷貝
    • • copyWithin
    • 數(shù)組的迭代方法
    • • forEach
      • map
      • every
      • some
      • filter
      • find
      • findIndex
      • reduce
      • reduceRight
      • values
      • keys
      • entries

什么是數(shù)組

Array對(duì)象是用于構(gòu)造數(shù)組的全局對(duì)象，數(shù)組是類似于列表的高階對(duì)象。 數(shù)組是特殊的對(duì)象數(shù)據(jù)類型

• 中括號(hào)中設(shè)置的是屬性值，它的屬性名是默認(rèn)生成的數(shù)字，從0開始遞增，而且這個(gè)數(shù)字代表每一項(xiàng)的位置，我們把其稱之為“索引” =>從0開始，連續(xù)遞增，代表每一項(xiàng)位置的數(shù)字屬性名
• 默認(rèn)有一個(gè)屬性名length，存儲(chǔ)數(shù)組的長(zhǎng)度
• 數(shù)組由中括號(hào)構(gòu)成，其中包含用逗號(hào)分隔的元素列表。
• 數(shù)組中可以存儲(chǔ)任何類型的的元素：字符串，數(shù)字，對(duì)象，另一個(gè)變量，甚至另一個(gè)數(shù)組，可以混合匹配

創(chuàng)建數(shù)組

• 字面量方法：
  • [element0, element1, …, elementN]
  • var fruits = ['Apple', 'Banana'];
• 函數(shù)方法
  • new Array(element0, element1[, …[, elementN]])
  • new Array(arrayLength)
    • elementN: Array構(gòu)造器會(huì)根據(jù)給定的元素創(chuàng)建一個(gè)數(shù)組，當(dāng)僅有一個(gè)參數(shù)且為數(shù)字時(shí)除外
    • arrayLength:一個(gè)范圍在 0 到 232-1 之間的整數(shù)，數(shù)組的長(zhǎng)度
    • 如果傳入的參數(shù)不是有效值，則會(huì)拋出 RangeError 異常
  • 描述：
    • 只能用整數(shù)作為數(shù)組元素的索引，而不能用字符串。后者稱為關(guān)聯(lián)數(shù)組
    • 使用非整數(shù)并通過(guò)方括號(hào)或點(diǎn)號(hào)來(lái)訪問(wèn)或設(shè)置數(shù)組元素時(shí)，所操作的并不是數(shù)組列表中的元素，而是數(shù)組對(duì)象的屬性集合上的變量
    • 數(shù)組對(duì)象的屬性和數(shù)組元素列表是分開存儲(chǔ)的，并且數(shù)組的遍歷和修改操作也不能作用于這些命名屬性

訪問(wèn)和修改數(shù)組

• 使用括號(hào)表示法訪問(wèn)數(shù)組中的元素（與檢索特定字符串字符的方法相同）
• 數(shù)組的索引是從0開始的，第一個(gè)元素的索引為0，最后一個(gè)元素的索引等于該數(shù)組的長(zhǎng)度減1
• 如果指定的索引是一個(gè)無(wú)效值，JavaScript 數(shù)組并不會(huì)報(bào)錯(cuò)，而是會(huì)返回 undefined
• 在 JavaScript 中，以數(shù)字開頭的屬性不能用點(diǎn)號(hào)引用，必須用方括號(hào)
• 如果對(duì)象的屬性名是保留字（最好不要這么做！），只能通過(guò)字符串的形式用方括號(hào)來(lái)訪問(wèn)
• array[n] = “newString” ，用 “newString” 替換 array[n] 位置上的原來(lái)的元素
• 數(shù)組中若包含數(shù)組，則稱之為多維數(shù)組，訪問(wèn)元素的方式ary[1][2]:訪問(wèn)第二項(xiàng)中第三項(xiàng)元素

var arr = ['first element', 'second element', 'last element']; console.log(arr[0]); // 打印 'first element' console.log(arr[1]); // 打印 'second element' console.log(arr[arr.length - 1]); // 打印 'last element' console.log(arr[4]); // 打印 "undefined" console.log(arr.0); // SyntaxErrorarr[1] = "haha"; console.log(arr);//['first element', 'haha', 'last element']var promise = {'var' : 'text','array': [1, 2, 3, 4] }; console.log(promise['var']);//'text'

length 和數(shù)字下標(biāo)之間的關(guān)系

• length：獲取數(shù)組的長(zhǎng)度
• JavaScript 數(shù)組的 length 屬性和其數(shù)字下標(biāo)之間有著緊密的聯(lián)系
• 使用一個(gè)合法的下標(biāo)為數(shù)組元素賦值，并且該下標(biāo)超出了當(dāng)前數(shù)組的大小的時(shí)候，解釋器會(huì)同時(shí)修改 length 的值
• 也可以顯式地給 length 賦一個(gè)更大的值
• 為 length 賦一個(gè)更小的值則會(huì)刪掉一部分元素
• length屬性也有其他用途，最常用于循環(huán)，即循環(huán)遍歷數(shù)組中的所有項(xiàng)

var fruits = []; fruits.push('banana', 'apple', 'peach'); console.log(fruits.length); // 3fruits[5] = 'mango'; console.log(fruits[5]); // 'mango' console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] console.log(fruits.length); // 6 console.log(fruits); // ["banana", "apple", "peach", empty × 2, "mango"] console.log(fruits[4]); // undefined /* 0: "banana" 1: "apple" 2: "peach" 5: "mango" length: 6 */fruits.length = 10; console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] console.log(fruits.length); // 10fruits.length = 2; console.log(Object.keys(fruits)); // ['0', '1'] console.log(fruits.length); // 2let ary= [1, 1, 2, 3, 5, 8, 13]; for (let i = 0; i < ary.length; i++) {console.log(ary[i]); }

數(shù)組的方法

數(shù)組對(duì)象的方法

• Array.from：從一個(gè)類似數(shù)組或可迭代對(duì)象創(chuàng)建一個(gè)新的，淺拷貝的數(shù)組實(shí)例

  • Array.from(arrayLike[, mapFn[, thisArg]])
    • arrayLike：想要轉(zhuǎn)換成數(shù)組的偽數(shù)組對(duì)象或可迭代對(duì)象
    • mapFn 可選：如果指定了該參數(shù)，新數(shù)組中的每個(gè)元素會(huì)執(zhí)行該回調(diào)函數(shù)
    • thisArg 可選：可選參數(shù)，執(zhí)行回調(diào)函數(shù) mapFn 時(shí) this 對(duì)象
  • 返回值：一個(gè)新的數(shù)組實(shí)例
  • 描述：
    • 偽數(shù)組對(duì)象（擁有一個(gè) length 屬性和若干索引屬性的任意對(duì)象）
    • 可迭代對(duì)象（可以獲取對(duì)象中的元素,如 Map和 Set 等）
    • from() 的 length 屬性為 1 ，即 Array.from.length === 1

• Array.isArray：用來(lái)判斷某個(gè)變量是否是一個(gè)數(shù)組對(duì)象

  • Array.isArray(obj)
    • 返回值：如果值是 Array，則為true; 否則為false。
  // 下面的函數(shù)調(diào)用都返回 trueArray.isArray([]);Array.isArray([1]);Array.isArray(new Array());Array.isArray(new Array('a', 'b', 'c', 'd'))// 鮮為人知的事實(shí)：其實(shí) Array.prototype 也是一個(gè)數(shù)組。Array.isArray(Array.prototype);

• Array.of：根據(jù)一組參數(shù)來(lái)創(chuàng)建新的數(shù)組實(shí)例，支持任意的參數(shù)數(shù)量和類型

  • Array.of(element0[, element1[, …[, elementN]]])
    • elementN：任意個(gè)參數(shù)，將按順序成為返回?cái)?shù)組中的元素
    • 返回值:新的 Array 實(shí)例
  Array.of(1); // [1]Array.of(1, 2, 3); // [1, 2, 3]Array.of(undefined); // [undefined]//兼容廢舊環(huán)境if (!Array.of) {Array.of = function() {return Array.prototype.slice.call(arguments);};}

字符串和數(shù)組之間的轉(zhuǎn)換

字符串轉(zhuǎn)換為數(shù)組

let str = "a,s,d,f,g,h,j,k,l"; //arr.join([separator]) [separator]默認(rèn)是逗號(hào)分割，也可以傳入其他分隔符 let ary = str.split(",");//[a,s,d,f,g,h,j,k,l]

數(shù)組轉(zhuǎn)換為字符串

let ary = [a,s,d,f,g,h,j,k,l];//arr.join([separator]) [separator]:隔數(shù)組元素的指定字符串,默認(rèn)是逗號(hào)，也可以傳其他字符串 // undefined 或 null，會(huì)被轉(zhuǎn)換為空字符串 let str = ary.join();//

數(shù)組實(shí)例的方法

• 不修改原數(shù)組：concat（合并）、copyWithin（淺復(fù)制）、fill（填充）、includes（包含）、indexOf（索引）、join（拼接）、slice（截取）、toString（轉(zhuǎn)字符串）
• 修改原數(shù)組：flat（遞歸）、pop（后刪）、push（后加）、unshift（前加）、shift（前刪）、reverse（顛倒）sort（排序）、splice（增刪改）
• 遍歷數(shù)組：every、filter、forEach、entries/keys/values(迭代器)、map、reduce/reduceRight、some/find / findIndex/lastIndexOf

數(shù)組的增刪改查

push

在數(shù)組的末尾增加一個(gè)或多個(gè)元素，并返回?cái)?shù)組的新長(zhǎng)度

• arr.push(element1, …, elementN)
  • elementN:被添加到數(shù)組末尾的元素
• 返回值:當(dāng)調(diào)用該方法時(shí)，新的 length 屬性值將被返回
• 描述：
  • 可以和 call() 或 apply() 一起使用時(shí)，可應(yīng)用在類似數(shù)組的對(duì)象上
  • push 方法根據(jù) length 屬性來(lái)決定從哪里開始插入給定的值
  • 如果 length 不能被轉(zhuǎn)成一個(gè)數(shù)值，則插入的元素索引為 0，包括 length 不存在時(shí)
  • 當(dāng) length 不存在時(shí)，將會(huì)創(chuàng)建它。

var sports = ["soccer", "baseball"]; var total = sports.push("football", "swimming"); console.log(sports);// ["soccer", "baseball", "football", "swimming"] console.log(total);// 4var vegetables = ['parsnip', 'potato']; var moreVegs = ['celery', 'beetroot']; // 將第二個(gè)數(shù)組融合進(jìn)第一個(gè)數(shù)組，相當(dāng)于 vegetables.push('celery', 'beetroot'); Array.prototype.push.apply(vegetables, moreVegs); console.log(vegetables);// ['parsnip', 'potato', 'celery', 'beetroot']var obj = {length: 0,addElem: function addElem (elem) { [].push.call(this, elem)} } obj.addElem({}); obj.addElem({}); console.log(obj.length);// → 2

pop

刪除數(shù)組的最后一個(gè)元素，并返回這個(gè)元素。此方法更改數(shù)組的長(zhǎng)度。

• arr.pop()
• 返回值：從數(shù)組中刪除的元素(當(dāng)數(shù)組為空時(shí)返回undefined)
• 描述：
  • 可以和 call() 或 apply() 一起使用時(shí)，可應(yīng)用在類似數(shù)組的對(duì)象上
  • pop方法根據(jù) length屬性來(lái)確定最后一個(gè)元素的位置
  • 如果不包含length屬性或length屬性不能被轉(zhuǎn)成一個(gè)數(shù)值，會(huì)將length置為0，并返回undefined
  • 如果在一個(gè)空數(shù)組上調(diào)用 pop()，返回 undefined。

let myFish = ["angel", "clown", "mandarin", "surgeon"]; let popped = myFish.pop(); console.log(myFish);// ["angel", "clown", "mandarin"] console.log(popped);// "surgeon"

shift

刪除數(shù)組的第一個(gè)元素，并返回這個(gè)元素。此方法更改數(shù)組的長(zhǎng)度。

• arr.shift()
• 返回值 :從數(shù)組中刪除的元素; 如果數(shù)組為空則返回undefined 。
• 描述:
  • shift 方法移除索引為0的元素(即第一個(gè)元素)，并返回被移除的元素，其他元素的索引值隨之減 1。如果 length 屬性的值為 0 (長(zhǎng)度為 0)，則返回 undefined。
  • 能夠通過(guò) call 或 apply 方法作用于類似數(shù)組的對(duì)象上。但是對(duì)于沒(méi)有 length 屬性（從0開始的一系列連續(xù)的數(shù)字屬性的最后一個(gè)）的對(duì)象，調(diào)用該方法可能沒(méi)有任何意義。

var myFish = ['angel', 'clown', 'mandarin', 'surgeon']; console.log(JSON.stringify(myFish));// ['angel', 'clown', 'mandarin', 'surgeon'] var shifted = myFish.shift(); console.log( myFish);//['clown', 'mandarin', 'surgeon'] console.log(shifted);//angelvar names = ["Andrew", "Edward", "Paul", "Chris" ,"John"]; while( (i = names.shift()) !== undefined ) {console.log(i);} //"Andrew" //"Edward" //"Paul" //"Chris" //"John"

unshift

一個(gè)或多個(gè)元素添加到數(shù)組的開頭，并返回該數(shù)組的新長(zhǎng)度(該方法修改原有數(shù)組)。

• arr.unshift(element1, …, elementN)
  • elementN：要添加到數(shù)組開頭的元素或多個(gè)元素
• 返回值：當(dāng)一個(gè)對(duì)象調(diào)用該方法時(shí)，返回其 length 屬性值。
• 描述：
  • unshift 方法會(huì)在調(diào)用它的類數(shù)組對(duì)象的開始位置插入給定的參數(shù)
  • 能夠通過(guò) call 或 apply 方法作用于類數(shù)組對(duì)象上
  • 對(duì)于沒(méi)有l(wèi)ength屬性的對(duì)象，調(diào)用該方法可能沒(méi)有任何意義。
  • 如果傳入多個(gè)參數(shù)，它們會(huì)被以塊的形式插入到對(duì)象的開始位置，它們的順序和被作為參數(shù)傳入時(shí)的順序一致
  • 傳入多個(gè)參數(shù)調(diào)用一次unshift，和傳入一個(gè)參數(shù)調(diào)用多次unshift(例如，循環(huán)調(diào)用)，它們將得到不同的結(jié)果。

let arr = [4,5,6]; arr.unshift(1,2,3); console.log(arr); // [1, 2, 3, 4, 5, 6]arr = [4,5,6]; // 重置數(shù)組 arr.unshift(1); arr.unshift(2); arr.unshift(3); console.log(arr); // [3, 2, 1, 4, 5, 6]arr = [1, 2]; arr.unshift(0); // arr is [0, 1, 2] arr.unshift(-2, -1); // arr is [-2, -1, 0, 1, 2] => length = 5 arr.unshift([-4, -3]);// arr is [[-4, -3], -2, -1, 0, 1, 2] =>length = 6 arr.unshift([-7, -6], [-5]); //arr is [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ] =>length = 8

splice

通過(guò)刪除或替換現(xiàn)有元素或者原地添加新的元素來(lái)修改數(shù)組,并以數(shù)組形式返回被修改的內(nèi)容。此方法會(huì)改變?cè)瓟?shù)組。

• array.splice(start[, deleteCount[, item1[, item2[, …]]]])

  • start:指定修改的開始位置（從0計(jì)數(shù)）。
    • 如果超出了數(shù)組的長(zhǎng)度，則從數(shù)組末尾開始添加內(nèi)容；
    • 如果是負(fù)值，則表示從數(shù)組末位開始的第幾位（從-1計(jì)數(shù)，這意味著-n是倒數(shù)第n個(gè)元素并且等價(jià)于array.length-n）；
    • 如果負(fù)數(shù)的絕對(duì)值大于數(shù)組的長(zhǎng)度，則表示開始位置為第0位。
  • deleteCount 可選:整數(shù)，表示要移除的數(shù)組元素的個(gè)數(shù)。
    • 如果 deleteCount 大于 start 之后的元素的總數(shù)，則從 start 后面的元素都將被刪除（含第 start 位）。
    • 如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是說(shuō)，如果它大于或者等于start之后的所有元素的數(shù)量)，那么start之后數(shù)組的所有元素都會(huì)被刪除。
    • 如果 deleteCount 是 0 或者負(fù)數(shù)，則不移除元素。這種情況下，至少應(yīng)添加一個(gè)新元素。
  • item1,item2,…可選:要添加進(jìn)數(shù)組的元素,從start位置開始。如果不指定，則splice()將只刪除數(shù)組元素。

• 返回值:由被刪除的元素組成的一個(gè)數(shù)組。如果只刪除了一個(gè)元素，則返回只包含一個(gè)元素的數(shù)組。如果沒(méi)有刪除元素，則返回空數(shù)組。

• 描述:如果添加進(jìn)數(shù)組的元素個(gè)數(shù)不等于被刪除的元素個(gè)數(shù)，數(shù)組的長(zhǎng)度會(huì)發(fā)生相應(yīng)的改變。

//從第 2 位開始刪除 0 個(gè)元素，插入“drum” var myFish = ["angel", "clown", "mandarin", "sturgeon"]; var removed = myFish.splice(2, 0, "drum"); console.log( myFish); // ["angel", "clown", "drum", "mandarin", "sturgeon"] console.log(removed); // [], 沒(méi)有元素被刪除myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']; removed = myFish.splice(3, 1); // 運(yùn)算后的 myFish: ["angel", "clown", "drum", "sturgeon"] // 被刪除的元素: ["mandarin"]

slice

抽取當(dāng)前數(shù)組中的一段元素組合成一個(gè)新數(shù)組,含首不含尾，且不改變?cè)瓟?shù)組。

• arr.slice([begin[, end]])
  • begin 可選:
    • 提取起始處的索引（從 0 開始），從該索引開始提取原數(shù)組元素。
    • 如果該參數(shù)為負(fù)數(shù)，則表示從原數(shù)組中的倒數(shù)第幾個(gè)元素開始提取
    • 如果省略 begin，則 slice 從索引 0 開始。
    • 如果 begin 超出原數(shù)組的索引范圍，則會(huì)返回空數(shù)組。
  • end 可選:
    • 提取終止處的索引（從 0 開始），在該索引處結(jié)束提取原數(shù)組元素
    • slice 會(huì)提取原數(shù)組中索引從 begin 到 end 的所有元素（包含 begin，但不包含 end）。
    • 如果該參數(shù)為負(fù)數(shù)， 則它表示在原數(shù)組中的倒數(shù)第幾個(gè)元素結(jié)束抽取。
    • 如果 end 被省略，則 slice 會(huì)一直提取到原數(shù)組末尾。
    • 如果 end 大于數(shù)組的長(zhǎng)度，slice 也會(huì)一直提取到原數(shù)組末尾。
• 返回值:一個(gè)含有被提取元素的新數(shù)組。
• 描述:slice不會(huì)修改原數(shù)組，只會(huì)返回一個(gè)淺復(fù)制了原數(shù)組中的元素的一個(gè)新數(shù)組。

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; var citrus = fruits.slice(1, 3); // fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'] // citrus contains ['Orange','Lemon']// 使用 slice 方法從 myCar 中創(chuàng)建一個(gè) newCar。 var myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }; var myCar = [myHonda, 2, "cherry condition", "purchased 1997"]; var newCar = myCar.slice(0, 2); // 輸出 myCar、newCar 以及各自的 myHonda 對(duì)象引用的 color 屬性。 console.log(' myCar = ' + JSON.stringify(myCar));// myCar = [{"color":"red","wheels":4,"engine":{"cylinders":4,"size":2.2}},2,"cherry condition","purchased 1997"] console.log('newCar = ' + JSON.stringify(newCar));//newCar = [{"color":"red","wheels":4,"engine":{"cylinders":4,"size":2.2}},2] console.log(' myCar[0].color = ' + JSON.stringify(myCar[0].color));// myCar[0].color = "red" console.log('newCar[0].color = ' + JSON.stringify(newCar[0].color));//VM109:1 newCar[0].color = "red"var unboundSlice = Array.prototype.slice; var slice = Function.prototype.call.bind(unboundSlice); function list() { return slice(arguments) } var list1 = list(1, 2, 3); // [1, 2, 3](function () {'use strict';var _slice = Array.prototype.slice;try {_slice.call(document.documentElement);} catch (e) { Array.prototype.slice = function(begin, end) {end = (typeof end !== 'undefined') ? end : this.length;if (Object.prototype.toString.call(this) === '[object Array]'){return _slice.call(this, begin, end);};var i, cloned = [],size, len = this.length, start = begin || 0;start = (start >= 0) ? start : Math.max(0, len + start);var upTo = (typeof end == 'number') ? Math.min(end, len) : len;if (end < 0) {upTo = len + end; }size = upTo - start;if (size > 0) {cloned = new Array(size);if (this.charAt) {for (i = 0; i < size; i++) { cloned[i] = this.charAt(start + i) }} else {for (i = 0; i < size; i++) { cloned[i] = this[start + i] }}}return cloned;};} }());

fill

用一個(gè)固定值填充數(shù)組中從起始索引到終止索引內(nèi)的全部元素,不包括終止索引

• arr.fill(value[, start[, end]])
  • value:用來(lái)填充數(shù)組元素的值
  • start 可選:始索引，默認(rèn)值為0
  • end 可選:終止索引，默認(rèn)值為 this.length
• 返回值:修改后的數(shù)組
• 描述：
  • 該方法不要求 this 是數(shù)組對(duì)象
  • 會(huì)改變調(diào)用它的 this 對(duì)象本身, 然后返回它, 而并不是返回一個(gè)副本
  • 如果 start 是個(gè)負(fù)數(shù), 則開始索引會(huì)被自動(dòng)計(jì)算成為 length+start
  • 如果 end 是個(gè)負(fù)數(shù), 則結(jié)束索引會(huì)被自動(dòng)計(jì)算成為 length+end

[1, 2, 3].fill(4); // [4, 4, 4] [1, 2, 3].fill(4, 1); // [1, 4, 4] [1, 2, 3].fill(4, 1, 2); // [1, 4, 3] [1, 2, 3].fill(4, 1, 1); // [1, 2, 3] [1, 2, 3].fill(4, 3, 3); // [1, 2, 3] [1, 2, 3].fill(4, -3, -2); // [4, 2, 3] [1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3] [1, 2, 3].fill(4, 3, 5); // [1, 2, 3] Array(3).fill(4); // [4, 4, 4] [].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}var arr = Array(3).fill({}) // [{}, {}, {}];if (!Array.prototype.fill) {Object.defineProperty(Array.prototype, 'fill', {value: function(value) {// Steps 1-2.if (this == null) {throw new TypeError('this is null or not defined');}var O = Object(this),len = O.length >>> 0;// Steps 6-7.var start = arguments[1], relativeStart = start >> 0;// Step 8.var k = relativeStart < 0 ?Math.max(len + relativeStart, 0) :Math.min(relativeStart, len);// Steps 9-10.var end = arguments[2],relativeEnd = end === undefined ? len : end >> 0;// Step 11.var final = relativeEnd < 0?Math.max(len + relativeEnd, 0) :Math.min(relativeEnd, len);// Step 12.while (k < final) { O[k] = value; k++; }// Step 13.return O;}}); }

indexOf

返回?cái)?shù)組中第一個(gè)(/最后一個(gè)[從右邊數(shù)第一個(gè)])與指定值相等的元素的索引，如果找不到這樣的元素，則返回 -1

• arr.indexOf(searchElement[, fromIndex])
• searchElement:要查找的元素
• fromIndex 可選:開始查找的位置
  • fromIndex>length 返回-1
  • fromIndex < 0 ，則從（length - fromIndex）處開始查找。
  • 如果（length - fromIndex）< 0 ,則整個(gè)數(shù)組都將會(huì)被查詢。其默認(rèn)值為0.
• 返回值 : 首個(gè)被找到的元素在數(shù)組中的索引位置; 若沒(méi)有找到則返回 -1

var array = [2, 5, 9];array.indexOf(2); // 0array.indexOf(7); // -1array.indexOf(9, 2); // 2array.indexOf(2, -1); // -1array.indexOf(2, -3); // 0

lastIndexOf

方法返回指定元素（也即有效的 JavaScript 值或變量）在數(shù)組中的最后一個(gè)的索引，如果不存在則返回 -1。從數(shù)組的后面向前查找，從 fromIndex 處開始。

• arr.lastIndexOf(searchElement[, fromIndex])
• searchElement:被查找的元素。
• fromIndex 可選:從此位置開始逆向查找。
  • 默認(rèn)為數(shù)組的長(zhǎng)度減 1(arr.length - 1)，即整個(gè)數(shù)組都被查找
  • 如果該值大于或等于數(shù)組的長(zhǎng)度，則整個(gè)數(shù)組會(huì)被查找
  • 如果為負(fù)值，將其視為從數(shù)組末尾向前的偏移。
  • 即使該值為負(fù)，數(shù)組仍然會(huì)被從后向前查找
  • 如果該值為負(fù)時(shí)，其絕對(duì)值大于數(shù)組長(zhǎng)度，則方法返回 -1，即數(shù)組不會(huì)被查找。
• 返回值:數(shù)組中該元素最后一次出現(xiàn)的索引，如未找到返回-1

var array = [2, 5, 9, 2]; var index = array.lastIndexOf(2);// index is 3 index = array.lastIndexOf(7);// index is -1 index = array.lastIndexOf(2, 3);// index is 3 index = array.lastIndexOf(2, 2);// index is 0 index = array.lastIndexOf(2, -2);// index is 0 index = array.lastIndexOf(2, -1);// index is 3if (!Array.prototype.lastIndexOf) {Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {'use strict';if (this === void 0 || this === null) throw new TypeError();var n, k, t = Object(this), len = t.length >>> 0;if (len === 0) return -1;n = len - 1;if (arguments.length > 1) {n = Number(arguments[1]);if (n != n) {n = 0;} else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) {n = (n > 0 || -1) * Math.floor(Math.abs(n));}}for (k = n >= 0? Math.min(n, len - 1) : len - Math.abs(n); k >= 0; k--) {if (k in t && t[k] === searchElement) return k;}return -1;}; }

數(shù)組的排序

sort

對(duì)數(shù)組元素進(jìn)行排序，并返回當(dāng)前數(shù)組

• 用原地算法對(duì)數(shù)組的元素進(jìn)行排序，并返回?cái)?shù)組。默認(rèn)排序順序是在將元素轉(zhuǎn)換為字符串，然后比較它們的UTF-16代碼單元值序列時(shí)構(gòu)建的
  
• 由于它取決于具體實(shí)現(xiàn)，因此無(wú)法保證排序的時(shí)間和空間復(fù)雜性。
• arr.sort([compareFunction])
  • compareFunction可選 : 用來(lái)指定按某種順序進(jìn)行排列的函數(shù)。如果省略，元素按照轉(zhuǎn)換為的字符串的各個(gè)字符的Unicode位點(diǎn)進(jìn)行排序。
    • firstEl:第一個(gè)用于比較的元素。
    • secondEl:第二個(gè)用于比較的元素。
• 返回值:排序后的數(shù)組。請(qǐng)注意，數(shù)組已原地排序，并且不進(jìn)行復(fù)制。
• 描述：
  • compareFunction(a, b) 小于 0 ，那么 a 會(huì)被排列到 b 之前
  • compareFunction(a, b) 等于 0 ， a 和 b 的相對(duì)位置不變
  • 如果 compareFunction(a, b) 大于 0 ， b 會(huì)被排列到 a 之前
  • compareFunction(a, b) 必須總是對(duì)相同的輸入返回相同的比較結(jié)果，否則排序的結(jié)果將是不確定的。

const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1);// expected output: Array [1, 100000, 21, 30, 4]var numbers = [4, 2, 5, 1, 3]; numbers.sort((a, b) => a - b); console.log(numbers);// [1, 2, 3, 4, 5]var items = [ { name: 'Edward', value: 21 }, { name: 'Sharpe', value: 37 },{ name: 'And', value: 45 }, { name: 'The', value: -12 },{ name: 'Magnetic' }, { name: 'Zeros', value: 37 }]; items.sort(function (a, b) { return (a.value - b.value)});// sort by value items.sort(function(a, b) {// sort by namevar nameA = a.name.toUpperCase(); // ignore upper and lowercasevar nameB = b.name.toUpperCase(); // ignore upper and lowercaseif (nameA < nameB) { return -1; }if (nameA > nameB) { return 1; }return 0;// names must be equal });

reverse

顛倒數(shù)組中元素的排列順序，即原先的第一個(gè)變?yōu)樽詈笠粋€(gè)，原先的最后一個(gè)變?yōu)榈谝粋€(gè)

• arr.reverse()
• 返回值：顛倒后的數(shù)組。
• 描述：
  • reverse 方法顛倒數(shù)組中元素的位置，改變了數(shù)組，并返回該數(shù)組的引用
  • 可被 called 或 applied于類似數(shù)組對(duì)象。
  • 對(duì)于沒(méi)有l(wèi)ength屬性的對(duì)象，調(diào)用該方法可能沒(méi)有任何意義。

let a = [1, 2, 3]; console.log(a); // [1, 2, 3] a.reverse(); console.log(a); // [3, 2, 1]a = {0: 1, 1: 2, 2: 3, length: 3}; console.log(a); // {0: 1, 1: 2, 2: 3, length: 3} Array.prototype.reverse.call(a); //same syntax for using apply() console.log(a); // {0: 3, 1: 2, 2: 1, length: 3}

數(shù)組的遞歸

flat

按照一個(gè)可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個(gè)新數(shù)組返回。

• var newArray = arr.flat([depth])
  • depth 可選:指定要提取嵌套數(shù)組的結(jié)構(gòu)深度，默認(rèn)值為 1
• 返回值:一個(gè)包含將數(shù)組與子數(shù)組中所有元素的新數(shù)組

const arr1 = [0, 1, 2, [3, 4]]; console.log(arr2.flat(2)); // expected output: [0, 1, 2, [3, 4]]var arr4 = [1, 2, , 4, 5]; arr4.flat();// [1, 2, 4, 5]//替代方案 var arr = [1, 2, [3, 4]]; // 展開一層數(shù)組 arr.flat(); //[1,2,3,4] // 等效于 arr.reduce((acc, val) => acc.concat(val), []);// [1, 2, 3, 4]// 使用擴(kuò)展運(yùn)算符 ... const flattened = arr => [].concat(...arr);

flatMap

先使用映射函數(shù)映射每個(gè)元素，然后將結(jié)果壓縮成一個(gè)新數(shù)組。與map方法和深度depth為1的flat幾乎相同，但flatMap通常在合并成一種方法的效率稍微高一些。

• 語(yǔ)法：

var new_ary = arr.flatMap(function callback(currentValue[, index[, array]]) {// return element for new_array }[, thisArg]);

• callback：可以生成一個(gè)新數(shù)組中的元素的函數(shù)，可以傳入三個(gè)參數(shù)：
  • currentValue：當(dāng)前正在數(shù)組中處理的元素
  • index可選：可選的。數(shù)組中正在處理的當(dāng)前元素的索引。
  • array可選：可選的。被調(diào)用的 map 數(shù)組
  • thisArg可選：可選的。執(zhí)行 callback 函數(shù)時(shí) 使用的this 值。
• 返回值： 一個(gè)新的數(shù)組，其中每個(gè)元素都是回調(diào)函數(shù)的結(jié)果，并且結(jié)構(gòu)深度 depth 值為1。

var arr1 = [1, 2, 3, 4]; arr1.map(x => [x * 2]);// [[2], [4], [6], [8]] arr1.flatMap(x => [x * 2]);// [2, 4, 6, 8] // only one level is flattened arr1.flatMap(x => [[x * 2]]);// [[2], [4], [6], [8]]

數(shù)組拼接

concat

返回一個(gè)由當(dāng)前數(shù)組和其它若干個(gè)數(shù)組或者若干個(gè)非數(shù)組值組合而成的新數(shù)組

• var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
• valueN可選:數(shù)組和/或值，將被合并到一個(gè)新的數(shù)組中
  • 如果省略了所有valueN參數(shù)，則concat會(huì)返回調(diào)用此方法的現(xiàn)存數(shù)組的一個(gè)淺拷貝
• 返回值:新的 Array 實(shí)例
• concat方法不會(huì)改變this或任何作為參數(shù)提供的數(shù)組，而是返回一個(gè)淺拷貝，它包含與原始數(shù)組相結(jié)合的相同元素的副本

var alpha = ['a', 'b', 'c']; var numeric = [1, 2, 3]; alpha.concat(numeric);// result in ['a', 'b', 'c', 1, 2, 3]var num1 = [1, 2, 3],num2 = [4, 5, 6],num3 = [7, 8, 9]; var nums = num1.concat(num2, num3); console.log(nums);// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]var alpha = ['a', 'b', 'c']; var alphaNumeric = alpha.concat(1, [2, 3]); console.log(alphaNumeric);// results in ['a', 'b', 'c', 1, 2, 3]var num1 = [[1]]; var num2 = [2, [3]]; var num3=[5,[6]]; var nums = num1.concat(num2); console.log(nums);// results is [[1], 2, [3]] var nums2=num1.concat(4,num3); console.log(nums2); // results is [[1], 4, 5,[6]]

數(shù)組的拷貝

copyWithin

淺復(fù)制數(shù)組的一部分到同一數(shù)組中的另一個(gè)位置，并返回它，不會(huì)改變?cè)瓟?shù)組的長(zhǎng)度

• arr.copyWithin(target[, start[, end]])
  • target:復(fù)制序列到該位置。
    • 如果是負(fù)數(shù)，target將從末尾開始計(jì)算
    • 如果 target 大于等于 arr.length，將會(huì)不發(fā)生拷貝
    • 如果 target 在 start 之后，復(fù)制的序列將被修改以符合 arr.length
  • start：0 為基底的索引，開始復(fù)制元素的起始位置
    • 如果是負(fù)數(shù)，start 將從末尾開始計(jì)算
    • 如果 start 被忽略，copyWithin 將會(huì)從0開始復(fù)制
  • end: 開始復(fù)制元素的結(jié)束位置
    • copyWithin將會(huì)拷貝到該位置，但不包括 end 這個(gè)位置的元素
    • 如果是負(fù)數(shù)， end 將從末尾開始計(jì)算
    • 如果end被忽略,將一直復(fù)制到數(shù)組結(jié)尾
• 返回值：改變后的數(shù)組
• 參數(shù) target、start 和 end 必須為整數(shù)
• start 為負(fù)，則其指定的索引位置等同于 length+start
• 不會(huì)改變this的長(zhǎng)度length，但是會(huì)改變this本身的內(nèi)容，且需要時(shí)會(huì)創(chuàng)建新的屬性

[1, 2, 3, 4, 5].copyWithin(-2);// [1, 2, 3, 1, 2] [1, 2, 3, 4, 5].copyWithin(0, 3);// [4, 5, 3, 4, 5] [1, 2, 3, 4, 5].copyWithin(0, 3, 4);// [4, 2, 3, 4, 5] [].copyWithin.call({length: 5, 3: 1}, 0, 3);// {0: 1, 3: 1, length: 5}

數(shù)組的迭代方法

數(shù)組的迭代方法一般用來(lái)辦理數(shù)組中的每一項(xiàng)做一些特殊處理, 有很多方法都需要指定一個(gè)回調(diào)函數(shù)作為參數(shù),在每一個(gè)數(shù)組元素都分別執(zhí)行完回調(diào)函數(shù)之前，數(shù)組的length屬性會(huì)被緩存在某個(gè)地方,所以，如果你在回調(diào)函數(shù)中為當(dāng)前數(shù)組添加了新的元素，那么那些新添加的元素是不會(huì)被遍歷到的。所以不要在遍歷過(guò)程中對(duì)原數(shù)組進(jìn)行任何修改(但為了可讀性和可維護(hù)性),

forEach

為數(shù)組中的每個(gè)元素執(zhí)行一次回調(diào)函數(shù)

• arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
  • callback：用來(lái)測(cè)試每個(gè)元素的函數(shù)，它可以接收三個(gè)參數(shù)：
    • element：用于測(cè)試的當(dāng)前值
    • index可選:數(shù)組中正在處理的當(dāng)前元素的索引
    • array可選:forEach() 方法正在操作的數(shù)組
  • thisArg 可選:可選參數(shù)。當(dāng)執(zhí)行回調(diào)函數(shù) callback 時(shí)，用作 this 的值
  • 返回值:undefined
• 描述：
  • 按升序?yàn)閿?shù)組中含有效值的每一項(xiàng)執(zhí)行一次callback函數(shù)，已刪除或者未初始化的項(xiàng)將被跳過(guò)
  • 如果省略thisArg參數(shù)，或者其值為null或undefined，this則指向全局對(duì)象
  • forEach() 為每個(gè)數(shù)組元素執(zhí)行一次 callback 函數(shù)；與 map() 或者 reduce() 不同的是，它總是返回 undefined 值，并且不可鏈?zhǔn)秸{(diào)用
  • 除了拋出異常以外，沒(méi)有辦法中止或跳出forEach循環(huán)。如果你需要中止或跳出循環(huán)，forEach方法不是應(yīng)當(dāng)使用的工具
  • 需要提前終止循環(huán)，可以使用：
    • 一個(gè)簡(jiǎn)單的 for 循環(huán)
    • for…of / for…in 循環(huán)
    • every()
    • some()
    • find()
    • findIndex()
    • 只要條件允許，也可以使用 filter() 提前過(guò)濾出需要遍歷的部分，再用 forEach() 處理。

const arraySparse = [1,3,,7]; let numCallbackRuns = 0; arraySparse.forEach(function(element){ console.log(element); numCallbackRuns++;}); console.log("numCallbackRuns: ", numCallbackRuns); // 1 // 3 // 7 // numCallbackRuns: 3// 將for循環(huán)轉(zhuǎn)換為forEach const items = ['item1', 'item2', 'item3'],copy = []; // before for (let i=0; i<items.length; i++) { copy.push(items[i]);} // after items.forEach(function(item){ copy.push(item);});

map

返回一個(gè)由回調(diào)函數(shù)的返回值組成的新數(shù)組

• 語(yǔ)法：

var new_array = arr.map(function callback(currentValue[, index[, array]]) {// Return element for new_array }[, thisArg])

• callback：生成新數(shù)組元素的函數(shù)，使用三個(gè)參數(shù)：
  • currentValue：callback 數(shù)組中正在處理的當(dāng)前元素。
  • index可選：callback 數(shù)組中正在處理的當(dāng)前元素的索引。
  • array可選：map 方法調(diào)用的數(shù)組。
• thisArg可選：執(zhí)行 callback 函數(shù)時(shí)值被用作this。
• 返回值：一個(gè)由原數(shù)組每個(gè)元素執(zhí)行回調(diào)函數(shù)的結(jié)果組成的新數(shù)組
• 描述：
  • callback 每次執(zhí)行后的返回值（包括 undefined）組合起來(lái)形成一個(gè)新數(shù)組
  • callback 函數(shù)只會(huì)在有值的索引上被調(diào)用；那些從來(lái)沒(méi)被賦過(guò)值或者使用 delete 刪除的索引則不會(huì)被調(diào)用。

var numbers = [1, 4, 9]; var doubles = numbers.map(function(num) { return num * 2;}); // doubles數(shù)組的值為： [2, 8, 18] // numbers數(shù)組未被修改： [1, 4, 9]var map = Array.prototype.map var a = map.call("Hello World", function(x) { return x.charCodeAt(0);}) // a的值為[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

every

如果數(shù)組中的每個(gè)元素都滿足測(cè)試函數(shù)，則返回 true，否則返回 false

• arr.every(callback(element[, index[, array]])[, thisArg])
  • callback：用來(lái)測(cè)試每個(gè)元素的函數(shù)，它可以接收三個(gè)參數(shù)：
    • element：用于測(cè)試的當(dāng)前值
    • index可選:用于測(cè)試的當(dāng)前值的索引
    • array可選:調(diào)用 every 的當(dāng)前數(shù)組
  • thisArg:執(zhí)行 callback 時(shí)使用的 this 值
• 返回值:如果回調(diào)函數(shù)的每一次返回都為 truthy 值，返回 true ，否則返回 false
• 描述：
  • 若收到一個(gè)空數(shù)組，此方法在一切情況下都會(huì)返回 true
  • every為數(shù)組的每個(gè)元素執(zhí)行一次callback函數(shù)，直到找到一個(gè)使 callback返回falsy的元素
    • 如果發(fā)現(xiàn)了一個(gè)這樣的元素，every 方法將會(huì)立即返回 false
    • callback 為每一個(gè)元素返回 true，every 就會(huì)返回 true
  • every 不會(huì)改變?cè)瓟?shù)組

//檢測(cè)數(shù)組中的所有元素是否都大于 10 function isBigEnough(element, index, array) { return element >= 10;} [12, 5, 8, 130, 44].every(isBigEnough); // false [12, 54, 18, 130, 44].every(isBigEnough); // true[12, 5, 8, 130, 44].every(x => x >= 10); // false [12, 54, 18, 130, 44].every(x => x >= 10); // true//兼容舊環(huán)境 if (!Array.prototype.every) {Array.prototype.every = function(callbackfn, thisArg) {'use strict';var T, k;if (this == null) { throw new TypeError('this is null or not defined'); };var O = Object(this),len = O.length >>> 0;if (typeof callbackfn !== 'function') { throw new TypeError(); }if (arguments.length > 1) { T = thisArg; }k = 0;while (k < len) {var kValue;if (k in O) {kValue = O[k];var testResult = callbackfn.call(T, kValue, k, O);if (!testResult) { return false;}}k++;}return true;}; }

some

如果數(shù)組中至少有一個(gè)元素滿足測(cè)試函數(shù)，則返回 true，否則返回 false

• arr.some(callback(element[, index[, array]])[, thisArg])
  • callback:用來(lái)測(cè)試每個(gè)元素的函數(shù)，接受三個(gè)參數(shù)：
    • element:數(shù)組中正在處理的元素。
    • index 可選:數(shù)組中正在處理的元素的索引值。
    • array可選:some()被調(diào)用的數(shù)組。
  • thisArg可選：執(zhí)行 callback 時(shí)使用的 this 值。
• 返回值：數(shù)組中有至少一個(gè)元素通過(guò)回調(diào)函數(shù)的測(cè)試就會(huì)返回true；所有元素都沒(méi)有通過(guò)回調(diào)函數(shù)的測(cè)試返回值才會(huì)為false。
• 描述：
  • 如果用一個(gè)空數(shù)組進(jìn)行測(cè)試，在任何情況下它返回的都是false。

var fruits = ['apple', 'banana', 'mango', 'guava']; function checkAvailability(arr, val) {return arr.some(function(arrVal) {return val === arrVal;}); }; checkAvailability(fruits, 'kela'); // false checkAvailability(fruits, 'banana'); // true

filter

將所有在過(guò)濾函數(shù)中返回 true 的數(shù)組元素放進(jìn)一個(gè)新數(shù)組中并返回

• var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
  • callback:用來(lái)測(cè)試數(shù)組的每個(gè)元素的函數(shù)。返回true表示該元素通過(guò)測(cè)試，保留該元素，false則不保留。它接受以下三個(gè)參數(shù)：
    • element:數(shù)組中當(dāng)前正在處理的元素
    • index可選:正在處理的元素在數(shù)組中的索引
    • array可選:調(diào)用了 filter 的數(shù)組本身
  • thisArg可選:執(zhí)行 callback 時(shí)，用于 this 的值
    • 如果提供thisArg參數(shù)，則被作為callback被調(diào)用時(shí)的this值。
    • 否則，callback的this值在非嚴(yán)格模式下是全局對(duì)象，嚴(yán)格模式下為undefined
• 返回值:一個(gè)新的、由通過(guò)測(cè)試的元素組成的數(shù)組，如果沒(méi)有任何數(shù)組元素通過(guò)測(cè)試，則返回空數(shù)組

//1. 過(guò)濾掉小于10的數(shù)字 function isBigEnough(element) { return element >= 10;} var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);// filtered is [12, 130, 44] //2. 過(guò)濾數(shù)組 var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; function filterItems(query) {return fruits.filter(function(el){return el.toLowerCase().indexOf(query.toLowerCase()) > -1;}) }; console.log(filterItems('ap')); // ['apple', 'grapes'] console.log(filterItems('an')); // ['banana', 'mango', 'orange']//兼容版本 if (!Array.prototype.filter){Array.prototype.filter = function(func, thisArg) {'use strict';if (!(typeof func==='function' && this)) throw new TypeError();var len = +this.length, res = new Array(len), t = this, c = 0, i = -1;if (thisArg === undefined){while (++i !== len){if (i in this){ if (func(t[i], i, t)){res[c++] = t[i]; } }}}else{while (++i !== len){// checks to see if the key was setif (i in this){if (func.call(thisArg, t[i], i, t)){res[c++] = t[i];}}}}res.length = c; // shrink down array to proper sizereturn res;}; }

find

找到第一個(gè)滿足測(cè)試函數(shù)的元素并返回那個(gè)元素的值，如果找不到，則返回undefined

• arr.find(callback[, thisArg])
  • callback：在數(shù)組每一項(xiàng)上執(zhí)行的函數(shù)，接收 3 個(gè)參數(shù)
    • element:當(dāng)前遍歷到的元素
    • index可選:當(dāng)前遍歷到的索引
    • array可選:數(shù)組本身
  • thisArg可選:執(zhí)行回調(diào)時(shí)用作this 的對(duì)象
• 返回值:數(shù)組中第一個(gè)滿足所提供測(cè)試函數(shù)的元素的值，否則返回 undefined

const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 10); console.log(found);// expected output: 12var inventory = [{name: 'apples', quantity: 2},{name: 'bananas', quantity: 0},{name: 'cherries', quantity: 5} ]; function findCherries(fruit) { return fruit.name === 'cherries';} console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

• findIndex() 方法，它返回?cái)?shù)組中找到的元素的索引，而不是其值
  • 要找到一個(gè)元素的位置或者一個(gè)元素是否存在于數(shù)組中，使用Array.prototype.indexOf() 或 Array.prototype.includes()

var inventory = [{name: 'apples', quantity: 2},{name: 'bananas', quantity: 0},{name: 'cherries', quantity: 5} ]; function findCherries(fruit) { return fruit.name === 'cherries';} console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 } //尋找數(shù)組中的質(zhì)數(shù) function isPrime(element, index, array) {var start = 2;while (start <= Math.sqrt(element)) {if (element % start++ < 1) { return false; }}return element > 1; } console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found console.log([4, 5, 8, 12].find(isPrime)); // 5

findIndex

找到第一個(gè)滿足測(cè)試函數(shù)的元素并返回那個(gè)元素的索引，如果找不到，則返回 -1

• arr.findIndex(callback[, thisArg])
  • callback：針對(duì)數(shù)組中的每個(gè)元素, 都會(huì)執(zhí)行該回調(diào)函數(shù), 執(zhí)行時(shí)會(huì)自動(dòng)傳入下面三個(gè)參數(shù)：
    • element：當(dāng)前元素
    • index：當(dāng)前元素的索引
    • array：調(diào)用findIndex的數(shù)組
  • thisArg：可選。執(zhí)行callback時(shí)作為this對(duì)象的值
• 返回值：數(shù)組中通過(guò)提供測(cè)試函數(shù)的第一個(gè)元素的索引。否則，返回-1
• 如果callback從不返回真值，或者數(shù)組的length為0，則findIndex返回-1

//查找數(shù)組中首個(gè)質(zhì)數(shù)元素的索引 function isPrime(element, index, array) {var start = 2;while (start <= Math.sqrt(element)) { if (element % start++ < 1) { return false;}}return element > 1; } console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found console.log([4, 6, 7, 12].findIndex(isPrime)); // 2if (!Array.prototype.findIndex) {Object.defineProperty(Array.prototype, 'findIndex', {value: function(predicate) {if (this == null) { throw new TypeError('"this" is null or not defined');}var o = Object(this);var len = +o.length;if (typeof predicate !== 'function') { throw new TypeError('predicate must be a function');}var thisArg = arguments[1],k = 0;while (k < len) {var kValue = o[k];if (predicate.call(thisArg, kValue, k, o)) { return k; }k++;}return -1;}}); }

reduce

從左到右為每個(gè)數(shù)組元素執(zhí)行一次回調(diào)函數(shù)，并把上次回調(diào)函數(shù)的返回值放在一個(gè)暫存器中傳給下次回調(diào)函數(shù)，并返回最后一次回調(diào)函數(shù)的返回值

• 語(yǔ)法 ： arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
  • callback：執(zhí)行數(shù)組中每個(gè)值 (如果沒(méi)有提供initialValue則第一個(gè)值除外)的函數(shù)，包含四個(gè)參數(shù)：
    • accumulator：累計(jì)器累計(jì)回調(diào)的返回值;
      • 它是上一次調(diào)用回調(diào)時(shí)返回的累積值，或initialValue。
    • currentValue：數(shù)組中正在處理的元素。
    • index 可選：數(shù)組中正在處理的當(dāng)前元素的索引。
      • 如果提供了initialValue，則起始索引號(hào)為0，否則從索引1起始。
    • array可選：調(diào)用reduce()的數(shù)組
  • initialValue可選：作為第一次調(diào)用 callback函數(shù)時(shí)的第一個(gè)參數(shù)的值。
    • 如果沒(méi)有提供初始值，則將使用數(shù)組中的第一個(gè)元素。
    • 在沒(méi)有初始值的空數(shù)組上調(diào)用 reduce 將報(bào)錯(cuò)。
• 返回值：函數(shù)累計(jì)處理的結(jié)果

[0, 1, 2, 3, 4].reduce((prev, curr) => prev + curr ); // 10var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {return accumulator + currentValue.x; },0) console.log(sum) // 6var flattened = [[0, 1], [2, 3], [4, 5]].reduce( function(a, b) { return a.concat(b); }, []);// flattened is [0, 1, 2, 3, 4, 5]//計(jì)算數(shù)組中每個(gè)元素出現(xiàn)的次數(shù) var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']; var countedNames = names.reduce(function (allNames, name) {if (name in allNames) { allNames[name]++; } else {allNames[name] = 1;}return allNames; }, {}); // countedNames is: { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }//按屬性對(duì)object分類 var people = [{ name: 'Alice', age: 21 },{ name: 'Max', age: 20 },{ name: 'Jane', age: 20 } ]; function groupBy(objectArray, property) {return objectArray.reduce(function (acc, obj) {var key = obj[property];if (!acc[key]) { acc[key] = []; }acc[key].push(obj);return acc;}, {}); } var groupedPeople = groupBy(people, 'age'); // groupedPeople is: // { // 20: [{ name: 'Max', age: 20 },{ name: 'Jane', age: 20 }], // 21: [{ name: 'Alice', age: 21 }] // }

reduceRight

從右到左為每個(gè)數(shù)組元素執(zhí)行一次回調(diào)函數(shù)，并把上次回調(diào)函數(shù)的返回值放在一個(gè)暫存器中傳給下次回調(diào)函數(shù)，并返回最后一次回調(diào)函數(shù)的返回值

• 同reduce相似：只是從右到左遍歷數(shù)組
• 數(shù)組內(nèi)>1個(gè)元素
  • 提供initialValue：accumulator為initialValue，currentValue為最后一個(gè)元素
  • 未提供 initialValue：accumulator為數(shù)組中最后一個(gè)元素
    currentValue 為倒數(shù)第二個(gè)元素
• 數(shù)組內(nèi)1個(gè)元素，未提供 initialValue，直接返回?cái)?shù)組中的唯一一個(gè)元素
• 數(shù)組內(nèi)0個(gè)元素
  • 提供initialValue，直接返回 initialValue
  • 未提供initialValue，拋出 TypeError 錯(cuò)誤

[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {return previousValue + currentValue; });var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {return a.concat(b); }, []);// flattened is [4, 5, 2, 3, 0, 1]

values

返回一個(gè)數(shù)組迭代器對(duì)象，該迭代器會(huì)包含所有數(shù)組元素的值

• arr.values()
  • 返回值:一個(gè)新的 Array 迭代對(duì)象。

//使用 for...of 循環(huán)進(jìn)行迭代 let arr = ['w', 'y', 'k', 'o', 'p']; let eArr = arr.values();for (let letter of eArr) {console.log(letter); } //"w" "y "k" "o" "p"

keys

返回一個(gè)數(shù)組迭代器對(duì)象，該迭代器會(huì)包含所有數(shù)組元素的鍵

• arr.keys()

  • 返回值 :一個(gè)新的 Array 迭代器對(duì)象。
  var arr = ["a", , "c"]; var sparseKeys = Object.keys(arr); var denseKeys = [...arr.keys()]; console.log(sparseKeys); // ['0', '2'] console.log(denseKeys); // [0, 1, 2] //索引迭代器會(huì)包含那些沒(méi)有對(duì)應(yīng)元素的索引

entries

返回一個(gè)數(shù)組迭代器對(duì)象，該迭代器會(huì)包含所有數(shù)組元素的鍵值對(duì)

• arr.entries()
  • iterator.next():遍歷迭代器取得原數(shù)組的[key,value]
    • 返回一個(gè)對(duì)象，對(duì)于有元素的數(shù)組，// 是next{ value: Array(2), done: false }
• 返回值:一個(gè)新的 Array 迭代器對(duì)象

const array1 = ['a', 'b', 'c']; const iterator1 = array1.entries();for (let e of iterator) {console.log(e); } // [0, "a"] // [1, "b"] // [2, "c"]console.log(iterator1.next().value);//{value: Array(2), done: false} /*done: falsevalue: Array(2)0: 01: "a"length: 2 */ console.log(iterator1.next().value);//{value: Array(2), done: false} /*done: falsevalue: Array(2)0: 11: "b"length: 2 */ console.log(iterator1.next().value);//{value: Array(2), done: false} /*done: falsevalue: Array(2)0: 21: "c"length: 2 */ console.log(iterator1.next().value); //{value: undefined, done: true} /*done: truevalue: undefined */

總結(jié)

以上是生活随笔為你收集整理的数据类型 - Array的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。