摘要:數(shù)組學(xué)習(xí)記錄是的實(shí)例屬性。對(duì)數(shù)組元素進(jìn)行排序,并返回當(dāng)前數(shù)組。返回一個(gè)由所有數(shù)組元素組合而成的字符串。為數(shù)組中的每個(gè)元素執(zhí)行一次回調(diào)函數(shù)。返回一個(gè)數(shù)組迭代器對(duì)象,該迭代器會(huì)包含所有數(shù)組元素的鍵值對(duì)。
JavaScript數(shù)組學(xué)習(xí)記錄 Array.length
Array.length 是Array的實(shí)例屬性。返回或設(shè)置一個(gè)數(shù)組中的元素個(gè)數(shù)。該值是一個(gè)無(wú)符號(hào) 32-bit 整數(shù),并且總是大于數(shù)組最高項(xiàng)的下標(biāo)。
length 屬性的值是一個(gè) 0 到$2^{32}$-1 的整數(shù)
let arr = ["1", "2", "3", "4","5"]; console.log(arr.length); //output: 5
可以設(shè)置 length屬性的值來(lái)截?cái)嗳魏螖?shù)組。當(dāng)通過(guò)改變length屬性值來(lái)擴(kuò)展數(shù)組時(shí),實(shí)際元素的數(shù)目將會(huì)增加。例如:將一個(gè)擁有 2 個(gè)元素的數(shù)組的 length 屬性值設(shè)為 3 時(shí),那么這個(gè)數(shù)組將會(huì)包含3個(gè)元素,并且,第三個(gè)元素的值將會(huì)是 undefined 。
let numbers = [1, 2, 3, 4, 5]; let length = numbers.length; for (let i = 0; i < length; i++) { numbers[i] *= 2; } console.log(numbers); //[2, 4, 6, 8, 10]
let numbers = [1, 2, 3, 4, 5]; if (numbers.length > 3) { numbers.length = 3; } console.log(numbers); // [1, 2, 3] console.log(numbers.length); // 3
length屬性不一定表示數(shù)組中定義值的個(gè)數(shù)。了解更多:長(zhǎng)度與數(shù)值下標(biāo)屬性之間的關(guān)系。
Array.length 屬性的屬性特性:
屬性 | 說(shuō)明 | 備注 |
---|---|---|
writable | true | 如果設(shè)置為false,該屬性值將不能被修改 |
enumerable | false | 如果設(shè)置為false,刪除或更改任何屬性都將會(huì)失敗。 |
configurable | false | 如果設(shè)置為 true ,屬性可以通過(guò)迭代器for或for...in進(jìn)行迭代。 |
let fruits = []; fruits.push("banana", "apple", "peach"); console.log(fruits.length); // 3 fruits[5] = "mango"; console.log(fruits[5]); // "mango" console.log(Object.keys(fruits)); // ["0", "1", "2", "5"] console.log(fruits.length); // 6 //減少length屬性會(huì)刪除元素 fruits.length = 2; console.log(Object.keys(fruits)); // ["0", "1"] console.log(fruits.length); // 2Array.prototype
Array.prototype 屬性表示 Array 構(gòu)造函數(shù)的原型,并允許向所有Array對(duì)象添加新的屬性和方法。
Array實(shí)例繼承自 Array.prototype 。與所有構(gòu)造函數(shù)一樣,可以更改構(gòu)造函數(shù)的原型對(duì)象,以對(duì)所有 Array 實(shí)例進(jìn)行更改。例如,可以添加新方法和屬性以擴(kuò)展所有Array對(duì)象。這用于 polyfilling, 例如:
鮮為人知的事實(shí):Array.prototype 本身也是一個(gè) Array。
Array.isArray(Array.prototype); // true
Array.prototype 屬性
屬性 | 說(shuō)明 |
---|---|
writable | false |
enumerable | false |
configurable | false |
Array.prototype.constructor
所有的數(shù)組實(shí)例都繼承了這個(gè)屬性,它的值就是 Array,表明了所有的數(shù)組都是由 Array 構(gòu)造出來(lái)的。
Array.prototype.length
上面說(shuō)了,因?yàn)?Array.prototype 也是個(gè)數(shù)組,所以它也有 length 屬性,這個(gè)值為 0,因?yàn)樗莻€(gè)空數(shù)組。
會(huì)改變自身的方法下面的這些方法會(huì)改變調(diào)用它們的對(duì)象自身的值:
Array.prototype.copyWithin()
在數(shù)組內(nèi)部,將一段元素序列拷貝到另一段元素序列上,覆蓋原有的值。
Array.prototype.fill()
將數(shù)組中指定區(qū)間的所有元素的值,都替換成某個(gè)固定的值。
Array.prototype.pop()
刪除數(shù)組的最后一個(gè)元素,并返回這個(gè)元素。
Array.prototype.push()
在數(shù)組的末尾增加一個(gè)或多個(gè)元素,并返回?cái)?shù)組的新長(zhǎng)度。
Array.prototype.reverse()
顛倒數(shù)組中元素的排列順序,即原先的第一個(gè)變?yōu)樽詈笠粋€(gè),原先的最后一個(gè)變?yōu)榈谝粋€(gè)。
Array.prototype.shift()
刪除數(shù)組的第一個(gè)元素,并返回這個(gè)元素。
Array.prototype.sort()
對(duì)數(shù)組元素進(jìn)行排序,并返回當(dāng)前數(shù)組。
Array.prototype.splice()
在任意的位置給數(shù)組添加或刪除任意個(gè)元素。
Array.prototype.unshift()
在數(shù)組的開(kāi)頭增加一個(gè)或多個(gè)元素,并返回?cái)?shù)組的新長(zhǎng)度。
不會(huì)改變自身的方法下面的這些方法絕對(duì)不會(huì)改變調(diào)用它們的對(duì)象的值,只會(huì)返回一個(gè)新的數(shù)組或者返回一個(gè)其它的期望值。
Array.prototype.concat()
返回一個(gè)由當(dāng)前數(shù)組和其它若干個(gè)數(shù)組或者若干個(gè)非數(shù)組值組合而成的新數(shù)組。
Array.prototype.includes()
判斷當(dāng)前數(shù)組是否包含某指定的值,如果是返回 true,否則返回 false。
Array.prototype.join()
連接所有數(shù)組元素組成一個(gè)字符串。
Array.prototype.slice()
抽取當(dāng)前數(shù)組中的一段元素組合成一個(gè)新數(shù)組。
Array.prototype.toSource()
返回一個(gè)表示當(dāng)前數(shù)組字面量的字符串。遮蔽了原型鏈上的 Object.prototype.toSource() 方法。
Array.prototype.toString()
返回一個(gè)由所有數(shù)組元素組合而成的字符串。遮蔽了原型鏈上的 Object.prototype.toString() 方法。
Array.prototype.toLocaleString()
返回一個(gè)由所有數(shù)組元素組合而成的本地化后的字符串。遮蔽了原型鏈上的 Object.prototype.toLocaleString() 方法。
Array.prototype.indexOf()
返回?cái)?shù)組中第一個(gè)與指定值相等的元素的索引,如果找不到這樣的元素,則返回 -1。
Array.prototype.lastIndexOf()
返回?cái)?shù)組中最后一個(gè)(從右邊數(shù)第一個(gè))與指定值相等的元素的索引,如果找不到這樣的元素,則返回 -1。
遍歷方法在下面的眾多遍歷方法中,有很多方法都需要指定一個(gè)回調(diào)函數(shù)作為參數(shù)。在每一個(gè)數(shù)組元素都分別執(zhí)行完回調(diào)函數(shù)之前,數(shù)組的length屬性會(huì)被緩存在某個(gè)地方,所以,如果你在回調(diào)函數(shù)中為當(dāng)前數(shù)組添加了新的元素,那么那些新添加的元素是不會(huì)被遍歷到的。此外,如果在回調(diào)函數(shù)中對(duì)當(dāng)前數(shù)組進(jìn)行了其它修改,比如改變某個(gè)元素的值或者刪掉某個(gè)元素,那么隨后的遍歷操作可能會(huì)受到未預(yù)期的影響??傊灰獓L試在遍歷過(guò)程中對(duì)原數(shù)組進(jìn)行任何修改,雖然規(guī)范對(duì)這樣的操作進(jìn)行了詳細(xì)的定義,但為了可讀性和可維護(hù)性,請(qǐng)不要這樣做。
Array.prototype.forEach()
為數(shù)組中的每個(gè)元素執(zhí)行一次回調(diào)函數(shù)。
Array.prototype.entries()
返回一個(gè)數(shù)組迭代器對(duì)象,該迭代器會(huì)包含所有數(shù)組元素的鍵值對(duì)。
Array.prototype.every()
如果數(shù)組中的每個(gè)元素都滿足測(cè)試函數(shù),則返回 true,否則返回 false。
Array.prototype.some()
如果數(shù)組中至少有一個(gè)元素滿足測(cè)試函數(shù),則返回 true,否則返回 false。
Array.prototype.filter()
將所有在過(guò)濾函數(shù)中返回 true 的數(shù)組元素放進(jìn)一個(gè)新數(shù)組中并返回。
Array.prototype.find()
找到第一個(gè)滿足測(cè)試函數(shù)的元素并返回那個(gè)元素的值,如果找不到,則返回 undefined。
Array.prototype.findIndex()
找到第一個(gè)滿足測(cè)試函數(shù)的元素并返回那個(gè)元素的索引,如果找不到,則返回 -1。
Array.prototype.keys()
返回一個(gè)數(shù)組迭代器對(duì)象,該迭代器會(huì)包含所有數(shù)組元素的鍵。
Array.prototype.map()
返回一個(gè)由回調(diào)函數(shù)的返回值組成的新數(shù)組。
Array.prototype.reduce()
從左到右為每個(gè)數(shù)組元素執(zhí)行一次回調(diào)函數(shù),并把上次回調(diào)函數(shù)的返回值放在一個(gè)暫存器中傳給下次回調(diào)函數(shù),并返回最后一次回調(diào)函數(shù)的返回值。
Array.prototype.reduceRight()
從右到左為每個(gè)數(shù)組元素執(zhí)行一次回調(diào)函數(shù),并把上次回調(diào)函數(shù)的返回值放在一個(gè)暫存器中傳給下次回調(diào)函數(shù),并返回最后一次回調(diào)函數(shù)的返回值。
Array.prototype.values()
返回一個(gè)數(shù)組迭代器對(duì)象,該迭代器會(huì)包含所有數(shù)組元素的值。
Array.prototype[@@iterator]()
和上面的 values() 方法是同一個(gè)函數(shù)。
通用方法節(jié)在 JavaScript 中,很多的數(shù)組方法被故意設(shè)計(jì)成是通用的。也就是說(shuō),那些看起來(lái)像是數(shù)組的對(duì)象(類數(shù)組對(duì)象),即擁有一個(gè) length 屬性,以及對(duì)應(yīng)的索引屬性(也就是數(shù)字類型的屬性,比如 obj[5])的非數(shù)組對(duì)象也是可以調(diào)用那些數(shù)組方法的。其中一些數(shù)組方法,比如說(shuō) join 方法,它們只會(huì)單純的讀取當(dāng)前對(duì)象的 length 屬性和索性屬性的值,并不會(huì)嘗試去改變這些屬性的值。而另外一些數(shù)組方法,比如說(shuō) reverse 方法,它們會(huì)嘗試修改那些屬性的值,因此,如果當(dāng)前對(duì)象是個(gè) String 對(duì)象,那么這些方法在執(zhí)行時(shí)就會(huì)報(bào)錯(cuò),因?yàn)樽址畬?duì)象的 length 屬性和索引屬性都是只讀的。
數(shù)組方法 Array.from()Array.from()方法從一個(gè)類似數(shù)組或可迭代對(duì)象中創(chuàng)建一個(gè)新的數(shù)組實(shí)例。
let arr= Array.from("Array") console.log(arr); // ["A", "r", "r", "a", "y"] console.log(Array.from([1, 2, 3], x => x*x)); // [1, 4, 9]
Array.from() 可以通過(guò)以下方式來(lái)創(chuàng)建數(shù)組對(duì)象:
偽數(shù)組對(duì)象(擁有一個(gè)length屬性和若干索引屬性的任意對(duì)象)
可迭代對(duì)象(可以獲取對(duì)象中的元素,如 Map和 Set 等)
Array.from() 方法有一個(gè)可選參數(shù)
mapFn,讓你可以在最后生成的數(shù)組上再執(zhí)行一次 map 方法后再返回。也就是說(shuō) Array.from(obj, mapFn, thisArg) 就相當(dāng)于 Array.from(obj).map(mapFn, thisArg), 除非創(chuàng)建的不是可用的中間數(shù)組。 這對(duì)一些數(shù)組的子類,如 typed arrays 來(lái)說(shuō)很重要, 因?yàn)橹虚g數(shù)組的值在調(diào)用 map() 時(shí)需要是適當(dāng)?shù)念愋汀?/p>
from() 的 length 屬性為 1 ,即Array.from.length = 1。
在 ES2015 中, Class 語(yǔ)法允許我們?yōu)閮?nèi)置類型(比如 Array)和自定義類新建子類(比如叫 SubArray)。這些子類也會(huì)繼承父類的靜態(tài)方法,比如 SubArray.from(),調(diào)用該方法后會(huì)返回子類 SubArray 的一個(gè)實(shí)例,而不是 Array 的實(shí)例。
數(shù)組去重
function combine(){ let arr = [].concat.apply([], arguments); //沒(méi)有去重復(fù)的新數(shù)組 return Array.from(new Set(arr)); } var m = [1, 2, 2], n = [2,3,3]; console.log(combine(m,n)); // [1, 2, 3]Array.isArray()
Array.isArray() 用于確定傳遞的值是否是一個(gè) Array。
// 下面的函數(shù)調(diào)用都返回 true Array.isArray([]); Array.isArray([1]); Array.isArray(new Array()); // 鮮為人知的事實(shí):其實(shí) Array.prototype 也是一個(gè)數(shù)組。 Array.isArray(Array.prototype); // 下面的函數(shù)調(diào)用都返回 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 });
instanceof 和 isArray
當(dāng)檢測(cè)Array實(shí)例時(shí), Array.isArray 優(yōu)于 instanceof,因?yàn)锳rray.isArray能檢測(cè)iframes.
Array.of()Array.of() 方法創(chuàng)建一個(gè)具有可變數(shù)量參數(shù)的新數(shù)組實(shí)例,而不考慮參數(shù)的數(shù)量或類型。
Array.of() 和 Array 構(gòu)造函數(shù)之間的區(qū)別在于處理整數(shù)參數(shù):Array.of(7) 創(chuàng)建一個(gè)具有單個(gè)元素 7 的數(shù)組,而 Array(7) 創(chuàng)建一個(gè)長(zhǎng)度為7的空數(shù)組(注意:這是指一個(gè)有7個(gè)空位的數(shù)組,而不是由7個(gè)undefined組成的數(shù)組)
Array.of(7); // [7] Array.of(1, 2, 3); // [1, 2, 3] Array(7); // [ , , , , , , ] Array(1, 2, 3); // [1, 2, 3]Array.concat()
concat() 方法用于合并兩個(gè)或多個(gè)數(shù)組。此方法不會(huì)更改現(xiàn)有數(shù)組,而是返回一個(gè)新數(shù)組
Array.copyWithin()copyWithin() 方法淺復(fù)制數(shù)組的一部分到同一數(shù)組中的另一個(gè)位置,并返回它,而不修改其大小
arr.copyWithin(target[, start[, end]])
target
0 為基底的索引,復(fù)制序列到該位置。如果是負(fù)數(shù),target 將從末尾開(kāi)始計(jì)算。
如果 target 大于等于 arr.length,將會(huì)不發(fā)生拷貝。如果 target 在 start 之后,復(fù)制的序列將被修改以符合 arr.length。
start
0 為基底的索引,開(kāi)始復(fù)制元素的起始位置。如果是負(fù)數(shù),start 將從末尾開(kāi)始計(jì)算。
如果 start 被忽略,copyWithin 將會(huì)從0開(kāi)始復(fù)制。
end
0 為基底的索引,開(kāi)始復(fù)制元素的結(jié)束位置。copyWithin 將會(huì)拷貝到該位置,但不包括 end 這個(gè)位置的元素。如果是負(fù)數(shù), end 將從末尾開(kāi)始計(jì)算。
如果 end 被忽略,copyWithin 將會(huì)復(fù)制到 arr.length。
[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] [1, 2, 3, 4, 5].copyWithin(-2, -3, -1); // [1, 2, 3, 3, 4] [].copyWithin.call({length: 5, 3: 1}, 0, 3); ({0:undefined,1:undefined,2:undefined,3: 1,4:undefined,5:undefined,length: 5}).copyWithin(0,3,5); 結(jié)果為: {0:1,1:undefined,2:undefined,3: 1,4:undefined,5:undefined,length: 5}; 也就是 {0:1,3:1,length:5} // {0: 1, 3: 1, length: 5} // ES2015 Typed Arrays are subclasses of Array var i32a = new Int32Array([1, 2, 3, 4, 5]); i32a.copyWithin(0, 2); // Int32Array [3, 4, 5, 4, 5] // On platforms that are not yet ES2015 compliant: [].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); // Int32Array [4, 2, 3, 4, 5]
參數(shù)target,start和end 必須為整數(shù)。
如果start為負(fù),則其指定的索引位置等同于length+start,length為數(shù)組的長(zhǎng)度。end也是如此。
copyWithin方法不要求其this值必須是一個(gè)數(shù)組對(duì)象;除此之外,copyWithin是一個(gè)可變方法,它可以改變this對(duì)象本身,并且返回它,而不僅僅是它的拷貝。
copyWithin 就像 C 和 C++ 的 memcpy 函數(shù)一樣,且它是用來(lái)移動(dòng) Array 或者 TypedArray 數(shù)據(jù)的一個(gè)高性能的方法。復(fù)制以及粘貼序列這兩者是為一體的操作;即使復(fù)制和粘貼區(qū)域重疊,粘貼的序列也會(huì)有拷貝來(lái)的值。
copyWithin 函數(shù)是設(shè)計(jì)為通用的,其不要求其 this 值必須是一個(gè)數(shù)組對(duì)象。
The copyWithin 是一個(gè)可變方法,它不會(huì)改變 this 的 length,但是會(huì)改變 this 本身的內(nèi)容,且需要時(shí)會(huì)創(chuàng)建新的屬性。
Array.entries()entries() 方法返回一個(gè)新的Array Iterator對(duì)象,該對(duì)象包含數(shù)組中每個(gè)索引的鍵/值對(duì)。
一個(gè)新的 Array 迭代器對(duì)象。Array Iterator是對(duì)象,它的原型(__proto__:Array Iterator)上有一個(gè)next方法,可用用于遍歷迭代器取得原數(shù)組的[key,value]。
var arr = ["a", "b", "c"]; var iteratorArr = array1.entries(); console.log(iteratorArr.next().value); // expected output: Array [0, "a"] console.log(iteratorArr.next().value); // expected output: Array [1, "b"]
iterator.next方法
var arr = ["a", "b", "c"]; var iter = arr.entries(); var a = []; // for(var i=0; i< arr.length; i++){ // 實(shí)際使用的是這個(gè) for(var i=0; i< arr.length+1; i++){ // 注意,是length+1,比數(shù)組的長(zhǎng)度大 var tem = iter.next(); // 每次迭代時(shí)更新next console.log(tem.done); // 這里可以看到更新后的done都是false if(tem.done !== true){ // 遍歷迭代器結(jié)束done才是true console.log(tem.value); a[i]=tem.value; } } console.log(a); // 遍歷完畢,輸出next.value的數(shù)組
二維數(shù)組排序
function sortArr(arr) { var goNext = true; var entries = arr.entries(); while (goNext) { var result = entries.next(); if (result.done !== true) { result.value[1].sort((a, b) => a - b); goNext = true; } else { goNext = false; } } return arr; } var arr = [[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]]; sortArr(arr); /*(4) [Array(2), Array(5), Array(5), Array(4)] 0:(2) [1, 34] 1:(5) [2, 3, 44, 234, 456] 2:(5) [1, 4, 5, 6, 4567] 3:(4) [1, 23, 34, 78] length:4 __proto__:Array(0) */
使用 for...of循環(huán)
var arr = ["a", "b", "c"]; var iterator = arr.entries(); // undefined for (let e of iterator) { console.log(e); } // [0, "a"] // [1, "b"] // [2, "c"]Array.every()
every() 方法測(cè)試數(shù)組的所有元素是否都通過(guò)了指定函數(shù)的測(cè)試
function isBelowThreshold(currentValue) { return currentValue < 40; } var array1 = [1, 30, 39, 29, 10, 13]; console.log(array1.every(isBelowThreshold)); // expected output: true function isBigEnough(element, index, array) { return (element >= 10); } var passed = [12, 5, 8, 130, 44].every(isBigEnough); // passed is false passed = [12, 54, 18, 130, 44].every(isBigEnough); // passed is true
every 方法為數(shù)組中的每個(gè)元素執(zhí)行一次 callback 函數(shù),直到它找到一個(gè)使 callback 返回 false(表示可轉(zhuǎn)換為布爾值 false 的值)的元素。如果發(fā)現(xiàn)了一個(gè)這樣的元素,every 方法將會(huì)立即返回 false。否則,callback 為每一個(gè)元素返回 true,every 就會(huì)返回 true。callback 只會(huì)為那些已經(jīng)被賦值的索引調(diào)用。不會(huì)為那些被刪除或從來(lái)沒(méi)被賦值的索引調(diào)用。
callback 被調(diào)用時(shí)傳入三個(gè)參數(shù):元素值,元素的索引,原數(shù)組。
如果為 every 提供一個(gè) thisArg 參數(shù),則該參數(shù)為調(diào)用 callback 時(shí)的 this 值。如果省略該參數(shù),則 callback 被調(diào)用時(shí)的 this 值,在非嚴(yán)格模式下為全局對(duì)象,在嚴(yán)格模式下傳入 undefined。
every 不會(huì)改變?cè)瓟?shù)組。
every 遍歷的元素范圍在第一次調(diào)用 callback 之前就已確定了。在調(diào)用 every 之后添加到數(shù)組中的元素不會(huì)被 callback 訪問(wèn)到。如果數(shù)組中存在的元素被更改,則他們傳入 callback 的值是 every 訪問(wèn)到他們那一刻的值。那些被刪除的元素或從來(lái)未被賦值的元素將不會(huì)被訪問(wèn)到。
every 和數(shù)學(xué)中的"所有"類似,當(dāng)所有的元素都符合條件才返回true。另外,空數(shù)組也是返回true。(空數(shù)組中所有元素都符合給定的條件,注:因?yàn)榭諗?shù)組沒(méi)有元素)。
Array.fill()fill() 方法用一個(gè)固定值填充一個(gè)數(shù)組中從起始索引到終止索引內(nèi)的全部元素。不包括終止索引。
arr.fill(value,[start, 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} // Objects by reference. var arr = Array(3).fill({}) // [{}, {}, {}]; arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
fill 方法接受三個(gè)參數(shù) value, start 以及 end. start 和 end 參數(shù)是可選的, 其默認(rèn)值分別為 0 和 this 對(duì)象的 length 屬性值。
如果 start 是個(gè)負(fù)數(shù), 則開(kāi)始索引會(huì)被自動(dòng)計(jì)算成為 length+start, 其中 length 是 this 對(duì)象的 length 屬性值。如果 end 是個(gè)負(fù)數(shù), 則結(jié)束索引會(huì)被自動(dòng)計(jì)算成為 length+end。
fill 方法故意被設(shè)計(jì)成通用方法, 該方法不要求 this 是數(shù)組對(duì)象。
fill 方法是個(gè)可變方法, 它會(huì)改變調(diào)用它的 this 對(duì)象本身, 然后返回它, 而并不是返回一個(gè)副本。
當(dāng)一個(gè)對(duì)象被傳遞給 fill方法的時(shí)候, 填充數(shù)組的是這個(gè)對(duì)象的引用。
Array.filter()filter() 方法創(chuàng)建一個(gè)新數(shù)組, 其包含通過(guò)所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素。
filter 為數(shù)組中的每個(gè)元素調(diào)用一次 callback 函數(shù),并利用所有使得 callback 返回 true 或 等價(jià)于 true 的值 的元素創(chuàng)建一個(gè)新數(shù)組。callback 只會(huì)在已經(jīng)賦值的索引上被調(diào)用,對(duì)于那些已經(jīng)被刪除或者從未被賦值的索引不會(huì)被調(diào)用。那些沒(méi)有通過(guò) callback 測(cè)試的元素會(huì)被跳過(guò),不會(huì)被包含在新數(shù)組中。
callback 被調(diào)用時(shí)傳入三個(gè)參數(shù):
1.元素的值
2.元素的索引
3.被遍歷的數(shù)組
如果為 filter 提供一個(gè) thisArg 參數(shù),則它會(huì)被作為 callback 被調(diào)用時(shí)的 this 值。否則,callback 的 this 值在非嚴(yán)格模式下將是全局對(duì)象,嚴(yán)格模式下為 undefined。
callback 最終觀察到的this值是根據(jù)通常函數(shù)所看到的 "this"的規(guī)則確定的。
filter 不會(huì)改變?cè)瓟?shù)組,它返回過(guò)濾后的新數(shù)組。
filter 遍歷的元素范圍在第一次調(diào)用 callback 之前就已經(jīng)確定了。在調(diào)用 filter 之后被添加到數(shù)組中的元素不會(huì)被 filter 遍歷到。如果已經(jīng)存在的元素被改變了,則他們傳入 callback 的值是 filter 遍歷到它們那一刻的值。被刪除或從來(lái)未被賦值的元素不會(huì)被遍歷
過(guò)濾JSON中的無(wú)效條目
var arr = [ { id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }, { }, { id: null }, { id: NaN }, { id: "undefined" } ]; var invalidEntries = 0; function isNumber(obj) { return obj !== undefined && typeof(obj) === "number" && !isNaN(obj); } function filterByID(item) { if (isNumber(item.id) && item.id !== 0) { return true; } invalidEntries++; return false; } var arrByID = arr.filter(filterByID); console.log("Filtered Array ", arrByID); // Filtered Array // [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }] console.log("Number of Invalid Entries = ", invalidEntries); // Number of Invalid Entries = 5
搜索
const fruits = ["apple", "banana", "grapes", "mango", "orange"]; /** * Array filters items based on search criteria (query) */ const filterItems = (query) => { return fruits.filter((el) => el.toLowerCase().indexOf(query.toLowerCase()) > -1 ); } console.log(filterItems("ap")); // ["apple", "grapes"] console.log(filterItems("an")); // ["banana", "mango", "orange"]Array.find()
find() 方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的值。否則返回 undefined。
如果你需要找到一個(gè)元素的位置或者一個(gè)元素是否存在于數(shù)組中,使用Array.prototype.indexOf() 或 Array.prototype.includes()。
用對(duì)象的屬性查找數(shù)組里的對(duì)象
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 } 尋
尋找質(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)); // 5Array.findIndex()
findIndex()方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的索引。否則返回-1。
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)); // 2Array.forEach()
forEach() 方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)
// function copy(obj) { var copy = Object.create(Object.getPrototypeOf(obj)); var propNames = Object.getOwnPropertyNames(obj); propNames.forEach(function(name) { var desc = Object.getOwnPropertyDescriptor(obj, name); Object.defineProperty(copy, name, desc); }); return copy; } var obj1 = { a: 1, b: 2 }; var obj2 = copy(obj1); // obj2 looks like obj1 now
如果數(shù)組在迭代時(shí)被修改了,則其他元素會(huì)被跳過(guò)。節(jié)
下面的例子輸出"one", "two", "four"。當(dāng)?shù)竭_(dá)包含值"two"的項(xiàng)時(shí),整個(gè)數(shù)組的第一個(gè)項(xiàng)被移除了,這導(dǎo)致所有剩下的項(xiàng)上移一個(gè)位置。因?yàn)樵?"four"現(xiàn)在在數(shù)組更前的位置,"three"會(huì)被跳過(guò)。 forEach()不會(huì)在迭代之前創(chuàng)建數(shù)組的副本
var words = ["one", "two", "three", "four"]; words.forEach(function(word) { console.log(word); if (word === "two") { words.shift(); } }); // one // two // fourArray.includes()
includes() 方法用來(lái)判斷一個(gè)數(shù)組是否包含一個(gè)指定的值,根據(jù)情況,如果包含則返回 true,否則返回false。
[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false
fromIndex 大于等于數(shù)組長(zhǎng)度節(jié)
如果fromIndex 大于等于數(shù)組長(zhǎng)度 ,則返回 false 。該數(shù)組不會(huì)被搜索
var arr = ["a", "b", "c"]; arr.includes("c", 3); //false arr.includes("c", 100); // false
includes() 作為一個(gè)通用方法節(jié)
includes() 方法有意設(shè)計(jì)為通用方法。它不要求this值是數(shù)組對(duì)象,所以它可以被用于其他類型的對(duì)象 (比如類數(shù)組對(duì)象)。下面的例子展示了 在函數(shù)的arguments對(duì)象上調(diào)用的includes() 方法。
(function() { console.log([].includes.call(arguments, "a")); // true console.log([].includes.call(arguments, "d")); // false })("a","b","c");Array.indexOf()
indexOf()方法返回在數(shù)組中可以找到一個(gè)給定元素的第一個(gè)索引,如果不存在,則返回-1。
arr.indexOf(searchElement) arr.indexOf(searchElement, fromIndex = 0)
找出指定元素的所有索引位置
var indices = []; var array = ["a", "b", "a", "c", "a", "d"]; var element = "a"; var idx = array.indexOf(element); while (idx != -1) { indices.push(idx); idx = array.indexOf(element, idx + 1); } console.log(indices); // [0, 2, 4]Array.join()
join() 方法將一個(gè)數(shù)組(或一個(gè)類數(shù)組對(duì)象)的所有元素連接成一個(gè)字符串并返回這個(gè)字符串。
str = arr.join() // 默認(rèn)為 "," str = arr.join("") // 分隔符 === 空字符串 "" str = arr.join(separator) // 分隔符Array.keys()
var array1 = ["a", "b", "c"]; var iterator = array1.keys(); for (let key of iterator) { console.log(key); // expected output: 0 1 2 }
會(huì)包含沒(méi)有對(duì)應(yīng)元素的索引
var arr = ["a", , "c"]; var sparseKeys = Object.keys(arr); var denseKeys = [...arr.keys()]; console.log(sparseKeys); // ["0", "2"] console.log(denseKeys); // [0, 1, 2]Array.lastIndexOf()
lastIndexOf() 方法返回指定元素(也即有效的 JavaScript 值或變量)在數(shù)組中的最后一個(gè)的索引,如果不存在則返回 -1。從數(shù)組的后面向前查找,從 fromIndex 處開(kāi)始
arr.lastIndexOf(searchElement, fromIndex = arr.length - 1)
從此位置開(kāi)始逆向查找。默認(rèn)為數(shù)組的長(zhǎng)度減 1,即整個(gè)數(shù)組都被查找。如果該值大于或等于數(shù)組的長(zhǎng)度,則整個(gè)數(shù)組會(huì)被查找。如果為負(fù)值,將其視為從數(shù)組末尾向前的偏移。即使該值為負(fù),數(shù)組仍然會(huì)被從后向前查找。如果該值為負(fù)時(shí),其絕對(duì)值大于數(shù)組長(zhǎng)度,則方法返回 -1,即數(shù)組不會(huì)被查找。。
Array.map()map() 方法創(chuàng)建一個(gè)新數(shù)組,其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果。
var kvArray = [{key: 1, value: 10}, {key: 2, value: 20}, {key: 3, value: 30}]; var reformattedArray = kvArray.map(function(obj) { var rObj = {}; rObj[obj.key] = obj.value; return rObj; }); // reformattedArray 數(shù)組為: [{1: 10}, {2: 20}, {3: 30}], // kvArray 數(shù)組未被修改: // [{key: 1, value: 10}, // {key: 2, value: 20}, // {key: 3, value: 30}]Array.pop()
pop()方法從數(shù)組中刪除最后一個(gè)元素,并返回該元素的值。此方法更改數(shù)組的長(zhǎng)度。
let myFish = ["angel", "clown", "mandarin", "surgeon"]; let popped = myFish.pop(); console.log(myFish); // ["angel", "clown", "mandarin"] console.log(popped); // surgeonArray.push()
push() 方法將一個(gè)或多個(gè)元素添加到數(shù)組的末尾,并返回該數(shù)組的新長(zhǎng)度
push 方法有意具有通用性。該方法和 call() 或 apply() 一起使用時(shí),可應(yīng)用在類似數(shù)組的對(duì)象上。push 方法根據(jù) length 屬性來(lái)決定從哪里開(kāi)始插入給定的值。如果 length 不能被轉(zhuǎn)成一個(gè)數(shù)值,則插入的元素索引為 0,包括 length 不存在時(shí)。當(dāng) length 不存在時(shí),將會(huì)創(chuàng)建它。
Array.reduce()reduce() 方法對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)提供的reducer函數(shù)(升序執(zhí)行),將其結(jié)果匯總為單個(gè)返回值
const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer)); // expected output: 10 // 5 + 1 + 2 + 3 + 4 console.log(array1.reduce(reducer, 5)); // expected output: 15
reducer 函數(shù)接收4個(gè)參數(shù):
Accumulator (acc) (累計(jì)器)
Current Value (cur) (當(dāng)前值)
Current Index (idx) (當(dāng)前索引)
Source Array (src) (源數(shù)組)
您的 reducer 函數(shù)的返回值分配給累計(jì)器,該返回值在數(shù)組的每個(gè)迭代中被記住,并最后成為最終的單個(gè)結(jié)果值。
var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) { return accumulator + currentValue; }, 0); // 和為 6
var initialValue = 0; var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) { return accumulator + currentValue.x; },initialValue) console.log(sum) // logs 6
var flattened = [[0, 1], [2, 3], [4, 5]].reduce( function(a, b) { return a.concat(b); }, [] ); // flattened is [0, 1, 2, 3, 4, 5]
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 }] // }
let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4]; let result = arr.sort().reduce((init, current)=>{ if(init.length===0 || init[init.length-1]!==current){ init.push(current); } return init; }, []); console.log(result); //[1,2,3,4,5]Array.reduceRight()
reduceRight() 方法接受一個(gè)函數(shù)作為累加器(accumulator)和數(shù)組的每個(gè)值(從右到左)將其減少為單個(gè)值
reduceRight 為數(shù)組中每個(gè)元素調(diào)用一次 callback 回調(diào)函數(shù),但是數(shù)組中被刪除的索引或從未被賦值的索引會(huì)跳過(guò)?;卣{(diào)函數(shù)接受四個(gè)參數(shù):初始值(或上次調(diào)用回調(diào)的返回值)、當(dāng)前元素值、當(dāng)前索引,以及調(diào)用 reduce 的數(shù)組
var a = ["1", "2", "3", "4", "5"]; var left = a.reduce(function(prev, cur) { return prev + cur; }); var right = a.reduceRight(function(prev, cur) { return prev + cur; }); console.log(left); // "12345" console.log(right); // "54321"Array.reverse()
reverse() 方法將數(shù)組中元素的位置顛倒。
var myArray = ["one", "two", "three"]; myArray.reverse(); console.log(myArray) // ["three", "two", "one"]Array.shift()
shift() 方法從數(shù)組中刪除第一個(gè)元素,并返回該元素的值。此方法更改數(shù)組的長(zhǎng)度
shift 方法移除索引為 0 的元素(即第一個(gè)元素),并返回被移除的元素,其他元素的索引值隨之減 1。如果 length 屬性的值為 0 (長(zhǎng)度為 0),則返回 undefined。
shift 方法并不局限于數(shù)組:這個(gè)方法能夠通過(guò) call 或 apply 方法作用于類似數(shù)組的對(duì)象上。但是對(duì)于沒(méi)有 length 屬性(從0開(kāi)始的一系列連續(xù)的數(shù)字屬性的最后一個(gè))的對(duì)象,調(diào)用該方法可能沒(méi)有任何意義。
let myFish = ["angel", "clown", "mandarin", "surgeon"]; console.log("調(diào)用 shift 之前: " + myFish); // "調(diào)用 shift 之前: angel,clown,mandarin,surgeon" var shifted = myFish.shift(); console.log("調(diào)用 shift 之后: " + myFish); // "調(diào)用 shift 之后: clown,mandarin,surgeon" console.log("被刪除的元素: " + shifted); // "被刪除的元素: angel"Array.slice()
slice() 方法返回一個(gè)新的數(shù)組對(duì)象,這一對(duì)象是一個(gè)由 begin和 end(不包括end)決定的原數(shù)組的淺拷貝。原始數(shù)組不會(huì)被改變。
arr.slice(); // [0, end] arr.slice(begin); // [begin, end] arr.slice(begin, end); // [begin, end)Array.some()
some() 方法測(cè)試數(shù)組中的某些元素是否通過(guò)由提供的函數(shù)實(shí)現(xiàn)的測(cè)試
some() 為數(shù)組中的每一個(gè)元素執(zhí)行一次 callback 函數(shù),直到找到一個(gè)使得 callback 返回一個(gè)“真值”(即可轉(zhuǎn)換為布爾值 true 的值)。如果找到了這樣一個(gè)值,some() 將會(huì)立即返回 true。否則,some() 返回 false。callback 只會(huì)在那些”有值“的索引上被調(diào)用,不會(huì)在那些被刪除或從來(lái)未被賦值的索引上調(diào)用。
callback 被調(diào)用時(shí)傳入三個(gè)參數(shù):元素的值,元素的索引,被遍歷的數(shù)組。
將會(huì)把它傳給被調(diào)用的 callback,作為 this 值。否則,在非嚴(yán)格模式下將會(huì)是全局對(duì)象,嚴(yán)格模式下是 undefined。
some() 被調(diào)用時(shí)不會(huì)改變數(shù)組。
some() 遍歷的元素的范圍在第一次調(diào)用 callback. 時(shí)就已經(jīng)確定了。在調(diào)用 some() 后被添加到數(shù)組中的值不會(huì)被 callback 訪問(wèn)到。如果數(shù)組中存在且還未被訪問(wèn)到的元素被 callback 改變了,則其傳遞給 callback 的值是 some() 訪問(wèn)到它那一刻的值。
function isBiggerThan10(element, index, array) { return element > 10; } [2, 5, 8, 1, 4].some(isBiggerThan10); // false [12, 5, 8, 1, 4].some(isBiggerThan10); // trueArray.sort()
sort() 方法用原地算法對(duì)數(shù)組的元素進(jìn)行排序,并返回?cái)?shù)組。排序算法現(xiàn)在是穩(wěn)定的。默認(rèn)排序順序是根據(jù)字符串Unicode碼點(diǎn)。
Array.splice()splice()方法通過(guò)刪除現(xiàn)有元素和/或添加新元素來(lái)修改數(shù)組,并以數(shù)組返回原數(shù)組中被修改的內(nèi)容。
var myFish = ["angel", "clown", "mandarin", "surgeon"]; //從第 2 位開(kāi)始刪除 0 個(gè)元素,插入 "drum" var removed = myFish.splice(2, 0, "drum"); //運(yùn)算后的 myFish:["angel", "clown", "drum", "mandarin", "surgeon"] //被刪除元素?cái)?shù)組:[],沒(méi)有元素被刪除Array.toLocaleString()
toLocaleString() 返回一個(gè)字符串表示數(shù)組中的元素。數(shù)組中的元素將使用各自的 toLocaleString 方法轉(zhuǎn)成字符串,這些字符串將使用一個(gè)特定語(yǔ)言環(huán)境的字符串(例如一個(gè)逗號(hào) ",")隔開(kāi)。
var prices = ["¥7", 500, 8123, 12]; prices.toLocaleString("ja-JP", { style: "currency", currency: "JPY" }); // "¥7,¥500,¥8,123,¥12"Array.toString() Array.unshift()
unshift() 方法將一個(gè)或多個(gè)元素添加到數(shù)組的開(kāi)頭,并返回該數(shù)組的新長(zhǎng)度。
Array.values()values() 方法返回一個(gè)新的 Array Iterator 對(duì)象,該對(duì)象包含數(shù)組每個(gè)索引的值
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/100195.html
摘要:對(duì)于,其默認(rèn)大小一般是本地存儲(chǔ)和都保存在瀏覽器端,且都是同源的。把變量放在閉包中和放在全局作用域,對(duì)內(nèi)存的影響是一致的,這里并不能說(shuō)成是內(nèi)存泄露。將新的樹(shù)和之前的虛擬樹(shù)進(jìn)行相比較,根據(jù)結(jié)果對(duì)進(jìn)行精準(zhǔn)響應(yīng)。 1. JavaScript 1. JavaScript文件在什么情況下會(huì)放在html哪個(gè)位置 https://zhuanlan.zhihu.com/p/... 對(duì)于必須要在DOM加載...
摘要:對(duì)于,其默認(rèn)大小一般是本地存儲(chǔ)和都保存在瀏覽器端,且都是同源的。把變量放在閉包中和放在全局作用域,對(duì)內(nèi)存的影響是一致的,這里并不能說(shuō)成是內(nèi)存泄露。將新的樹(shù)和之前的虛擬樹(shù)進(jìn)行相比較,根據(jù)結(jié)果對(duì)進(jìn)行精準(zhǔn)響應(yīng)。 1. JavaScript 1. JavaScript文件在什么情況下會(huì)放在html哪個(gè)位置 https://zhuanlan.zhihu.com/p/... 對(duì)于必須要在DOM加載...
摘要:如果你還沒(méi)正式開(kāi)始正則表達(dá)式,請(qǐng)快速瀏覽跳過(guò)本章節(jié)。就是一個(gè)等同于但更簡(jiǎn)略的正則表達(dá)式。如果想查找全部,就要加標(biāo)識(shí)全局匹配規(guī)則正則表達(dá)式搜索字符串指定的值,從而去匹配字符串。正則表達(dá)式都是用來(lái)操作字符串的。 正則表達(dá)式 Create by jsliang on 2018-11-14 10:41:20 Recently revised in 2018-11-19 08:46:37 ...
摘要:個(gè)人前端文章整理從最開(kāi)始萌生寫(xiě)文章的想法,到著手開(kāi)始寫(xiě),再到現(xiàn)在已經(jīng)一年的時(shí)間了,由于工作比較忙,更新緩慢,后面還是會(huì)繼更新,現(xiàn)將已經(jīng)寫(xiě)好的文章整理一個(gè)目錄,方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開(kāi)始萌生寫(xiě)文章的想法,到著手...
閱讀 3356·2021-11-10 11:36
閱讀 3252·2021-10-08 10:21
閱讀 2889·2021-09-29 09:35
閱讀 2432·2021-09-22 16:06
閱讀 3994·2021-09-09 09:33
閱讀 1341·2019-08-30 15:44
閱讀 3183·2019-08-30 10:59
閱讀 2994·2019-08-29 15:32