摘要:數組學習記錄是的實例屬性。對數組元素進行排序,并返回當前數組。返回一個由所有數組元素組合而成的字符串。為數組中的每個元素執行一次回調函數。返回一個數組迭代器對象,該迭代器會包含所有數組元素的鍵值對。
JavaScript數組學習記錄 Array.length
Array.length 是Array的實例屬性。返回或設置一個數組中的元素個數。該值是一個無符號 32-bit 整數,并且總是大于數組最高項的下標。
length 屬性的值是一個 0 到$2^{32}$-1 的整數
let arr = ["1", "2", "3", "4","5"]; console.log(arr.length); //output: 5
可以設置 length屬性的值來截斷任何數組。當通過改變length屬性值來擴展數組時,實際元素的數目將會增加。例如:將一個擁有 2 個元素的數組的 length 屬性值設為 3 時,那么這個數組將會包含3個元素,并且,第三個元素的值將會是 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屬性不一定表示數組中定義值的個數。了解更多:長度與數值下標屬性之間的關系。
Array.length 屬性的屬性特性:
屬性 | 說明 | 備注 |
---|---|---|
writable | true | 如果設置為false,該屬性值將不能被修改 |
enumerable | false | 如果設置為false,刪除或更改任何屬性都將會失敗。 |
configurable | false | 如果設置為 true ,屬性可以通過迭代器for或for...in進行迭代。 |
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屬性會刪除元素 fruits.length = 2; console.log(Object.keys(fruits)); // ["0", "1"] console.log(fruits.length); // 2Array.prototype
Array.prototype 屬性表示 Array 構造函數的原型,并允許向所有Array對象添加新的屬性和方法。
Array實例繼承自 Array.prototype 。與所有構造函數一樣,可以更改構造函數的原型對象,以對所有 Array 實例進行更改。例如,可以添加新方法和屬性以擴展所有Array對象。這用于 polyfilling, 例如:
鮮為人知的事實:Array.prototype 本身也是一個 Array。
Array.isArray(Array.prototype); // true
Array.prototype 屬性
屬性 | 說明 |
---|---|
writable | false |
enumerable | false |
configurable | false |
Array.prototype.constructor
所有的數組實例都繼承了這個屬性,它的值就是 Array,表明了所有的數組都是由 Array 構造出來的。
Array.prototype.length
上面說了,因為 Array.prototype 也是個數組,所以它也有 length 屬性,這個值為 0,因為它是個空數組。
會改變自身的方法下面的這些方法會改變調用它們的對象自身的值:
Array.prototype.copyWithin()
在數組內部,將一段元素序列拷貝到另一段元素序列上,覆蓋原有的值。
Array.prototype.fill()
將數組中指定區間的所有元素的值,都替換成某個固定的值。
Array.prototype.pop()
刪除數組的最后一個元素,并返回這個元素。
Array.prototype.push()
在數組的末尾增加一個或多個元素,并返回數組的新長度。
Array.prototype.reverse()
顛倒數組中元素的排列順序,即原先的第一個變為最后一個,原先的最后一個變為第一個。
Array.prototype.shift()
刪除數組的第一個元素,并返回這個元素。
Array.prototype.sort()
對數組元素進行排序,并返回當前數組。
Array.prototype.splice()
在任意的位置給數組添加或刪除任意個元素。
Array.prototype.unshift()
在數組的開頭增加一個或多個元素,并返回數組的新長度。
不會改變自身的方法下面的這些方法絕對不會改變調用它們的對象的值,只會返回一個新的數組或者返回一個其它的期望值。
Array.prototype.concat()
返回一個由當前數組和其它若干個數組或者若干個非數組值組合而成的新數組。
Array.prototype.includes()
判斷當前數組是否包含某指定的值,如果是返回 true,否則返回 false。
Array.prototype.join()
連接所有數組元素組成一個字符串。
Array.prototype.slice()
抽取當前數組中的一段元素組合成一個新數組。
Array.prototype.toSource()
返回一個表示當前數組字面量的字符串。遮蔽了原型鏈上的 Object.prototype.toSource() 方法。
Array.prototype.toString()
返回一個由所有數組元素組合而成的字符串。遮蔽了原型鏈上的 Object.prototype.toString() 方法。
Array.prototype.toLocaleString()
返回一個由所有數組元素組合而成的本地化后的字符串。遮蔽了原型鏈上的 Object.prototype.toLocaleString() 方法。
Array.prototype.indexOf()
返回數組中第一個與指定值相等的元素的索引,如果找不到這樣的元素,則返回 -1。
Array.prototype.lastIndexOf()
返回數組中最后一個(從右邊數第一個)與指定值相等的元素的索引,如果找不到這樣的元素,則返回 -1。
遍歷方法在下面的眾多遍歷方法中,有很多方法都需要指定一個回調函數作為參數。在每一個數組元素都分別執行完回調函數之前,數組的length屬性會被緩存在某個地方,所以,如果你在回調函數中為當前數組添加了新的元素,那么那些新添加的元素是不會被遍歷到的。此外,如果在回調函數中對當前數組進行了其它修改,比如改變某個元素的值或者刪掉某個元素,那么隨后的遍歷操作可能會受到未預期的影響。總之,不要嘗試在遍歷過程中對原數組進行任何修改,雖然規范對這樣的操作進行了詳細的定義,但為了可讀性和可維護性,請不要這樣做。
Array.prototype.forEach()
為數組中的每個元素執行一次回調函數。
Array.prototype.entries()
返回一個數組迭代器對象,該迭代器會包含所有數組元素的鍵值對。
Array.prototype.every()
如果數組中的每個元素都滿足測試函數,則返回 true,否則返回 false。
Array.prototype.some()
如果數組中至少有一個元素滿足測試函數,則返回 true,否則返回 false。
Array.prototype.filter()
將所有在過濾函數中返回 true 的數組元素放進一個新數組中并返回。
Array.prototype.find()
找到第一個滿足測試函數的元素并返回那個元素的值,如果找不到,則返回 undefined。
Array.prototype.findIndex()
找到第一個滿足測試函數的元素并返回那個元素的索引,如果找不到,則返回 -1。
Array.prototype.keys()
返回一個數組迭代器對象,該迭代器會包含所有數組元素的鍵。
Array.prototype.map()
返回一個由回調函數的返回值組成的新數組。
Array.prototype.reduce()
從左到右為每個數組元素執行一次回調函數,并把上次回調函數的返回值放在一個暫存器中傳給下次回調函數,并返回最后一次回調函數的返回值。
Array.prototype.reduceRight()
從右到左為每個數組元素執行一次回調函數,并把上次回調函數的返回值放在一個暫存器中傳給下次回調函數,并返回最后一次回調函數的返回值。
Array.prototype.values()
返回一個數組迭代器對象,該迭代器會包含所有數組元素的值。
Array.prototype[@@iterator]()
和上面的 values() 方法是同一個函數。
通用方法節在 JavaScript 中,很多的數組方法被故意設計成是通用的。也就是說,那些看起來像是數組的對象(類數組對象),即擁有一個 length 屬性,以及對應的索引屬性(也就是數字類型的屬性,比如 obj[5])的非數組對象也是可以調用那些數組方法的。其中一些數組方法,比如說 join 方法,它們只會單純的讀取當前對象的 length 屬性和索性屬性的值,并不會嘗試去改變這些屬性的值。而另外一些數組方法,比如說 reverse 方法,它們會嘗試修改那些屬性的值,因此,如果當前對象是個 String 對象,那么這些方法在執行時就會報錯,因為字符串對象的 length 屬性和索引屬性都是只讀的。
數組方法 Array.from()Array.from()方法從一個類似數組或可迭代對象中創建一個新的數組實例。
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() 可以通過以下方式來創建數組對象:
偽數組對象(擁有一個length屬性和若干索引屬性的任意對象)
可迭代對象(可以獲取對象中的元素,如 Map和 Set 等)
Array.from() 方法有一個可選參數
mapFn,讓你可以在最后生成的數組上再執行一次 map 方法后再返回。也就是說 Array.from(obj, mapFn, thisArg) 就相當于 Array.from(obj).map(mapFn, thisArg), 除非創建的不是可用的中間數組。 這對一些數組的子類,如 typed arrays 來說很重要, 因為中間數組的值在調用 map() 時需要是適當的類型。
from() 的 length 屬性為 1 ,即Array.from.length = 1。
在 ES2015 中, Class 語法允許我們為內置類型(比如 Array)和自定義類新建子類(比如叫 SubArray)。這些子類也會繼承父類的靜態方法,比如 SubArray.from(),調用該方法后會返回子類 SubArray 的一個實例,而不是 Array 的實例。
數組去重
function combine(){ let arr = [].concat.apply([], arguments); //沒有去重復的新數組 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() 用于確定傳遞的值是否是一個 Array。
// 下面的函數調用都返回 true Array.isArray([]); Array.isArray([1]); Array.isArray(new Array()); // 鮮為人知的事實:其實 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 });
instanceof 和 isArray
當檢測Array實例時, Array.isArray 優于 instanceof,因為Array.isArray能檢測iframes.
Array.of()Array.of() 方法創建一個具有可變數量參數的新數組實例,而不考慮參數的數量或類型。
Array.of() 和 Array 構造函數之間的區別在于處理整數參數:Array.of(7) 創建一個具有單個元素 7 的數組,而 Array(7) 創建一個長度為7的空數組(注意:這是指一個有7個空位的數組,而不是由7個undefined組成的數組)
Array.of(7); // [7] Array.of(1, 2, 3); // [1, 2, 3] Array(7); // [ , , , , , , ] Array(1, 2, 3); // [1, 2, 3]Array.concat()
concat() 方法用于合并兩個或多個數組。此方法不會更改現有數組,而是返回一個新數組
Array.copyWithin()copyWithin() 方法淺復制數組的一部分到同一數組中的另一個位置,并返回它,而不修改其大小
arr.copyWithin(target[, start[, end]])
target
0 為基底的索引,復制序列到該位置。如果是負數,target 將從末尾開始計算。
如果 target 大于等于 arr.length,將會不發生拷貝。如果 target 在 start 之后,復制的序列將被修改以符合 arr.length。
start
0 為基底的索引,開始復制元素的起始位置。如果是負數,start 將從末尾開始計算。
如果 start 被忽略,copyWithin 將會從0開始復制。
end
0 為基底的索引,開始復制元素的結束位置。copyWithin 將會拷貝到該位置,但不包括 end 這個位置的元素。如果是負數, end 將從末尾開始計算。
如果 end 被忽略,copyWithin 將會復制到 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); 結果為: {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]
參數target,start和end 必須為整數。
如果start為負,則其指定的索引位置等同于length+start,length為數組的長度。end也是如此。
copyWithin方法不要求其this值必須是一個數組對象;除此之外,copyWithin是一個可變方法,它可以改變this對象本身,并且返回它,而不僅僅是它的拷貝。
copyWithin 就像 C 和 C++ 的 memcpy 函數一樣,且它是用來移動 Array 或者 TypedArray 數據的一個高性能的方法。復制以及粘貼序列這兩者是為一體的操作;即使復制和粘貼區域重疊,粘貼的序列也會有拷貝來的值。
copyWithin 函數是設計為通用的,其不要求其 this 值必須是一個數組對象。
The copyWithin 是一個可變方法,它不會改變 this 的 length,但是會改變 this 本身的內容,且需要時會創建新的屬性。
Array.entries()entries() 方法返回一個新的Array Iterator對象,該對象包含數組中每個索引的鍵/值對。
一個新的 Array 迭代器對象。Array Iterator是對象,它的原型(__proto__:Array Iterator)上有一個next方法,可用用于遍歷迭代器取得原數組的[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++){ // 實際使用的是這個 for(var i=0; i< arr.length+1; i++){ // 注意,是length+1,比數組的長度大 var tem = iter.next(); // 每次迭代時更新next console.log(tem.done); // 這里可以看到更新后的done都是false if(tem.done !== true){ // 遍歷迭代器結束done才是true console.log(tem.value); a[i]=tem.value; } } console.log(a); // 遍歷完畢,輸出next.value的數組
二維數組排序
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循環
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() 方法測試數組的所有元素是否都通過了指定函數的測試
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 方法為數組中的每個元素執行一次 callback 函數,直到它找到一個使 callback 返回 false(表示可轉換為布爾值 false 的值)的元素。如果發現了一個這樣的元素,every 方法將會立即返回 false。否則,callback 為每一個元素返回 true,every 就會返回 true。callback 只會為那些已經被賦值的索引調用。不會為那些被刪除或從來沒被賦值的索引調用。
callback 被調用時傳入三個參數:元素值,元素的索引,原數組。
如果為 every 提供一個 thisArg 參數,則該參數為調用 callback 時的 this 值。如果省略該參數,則 callback 被調用時的 this 值,在非嚴格模式下為全局對象,在嚴格模式下傳入 undefined。
every 不會改變原數組。
every 遍歷的元素范圍在第一次調用 callback 之前就已確定了。在調用 every 之后添加到數組中的元素不會被 callback 訪問到。如果數組中存在的元素被更改,則他們傳入 callback 的值是 every 訪問到他們那一刻的值。那些被刪除的元素或從來未被賦值的元素將不會被訪問到。
every 和數學中的"所有"類似,當所有的元素都符合條件才返回true。另外,空數組也是返回true。(空數組中所有元素都符合給定的條件,注:因為空數組沒有元素)。
Array.fill()fill() 方法用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引。
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 方法接受三個參數 value, start 以及 end. start 和 end 參數是可選的, 其默認值分別為 0 和 this 對象的 length 屬性值。
如果 start 是個負數, 則開始索引會被自動計算成為 length+start, 其中 length 是 this 對象的 length 屬性值。如果 end 是個負數, 則結束索引會被自動計算成為 length+end。
fill 方法故意被設計成通用方法, 該方法不要求 this 是數組對象。
fill 方法是個可變方法, 它會改變調用它的 this 對象本身, 然后返回它, 而并不是返回一個副本。
當一個對象被傳遞給 fill方法的時候, 填充數組的是這個對象的引用。
Array.filter()filter() 方法創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。
filter 為數組中的每個元素調用一次 callback 函數,并利用所有使得 callback 返回 true 或 等價于 true 的值 的元素創建一個新數組。callback 只會在已經賦值的索引上被調用,對于那些已經被刪除或者從未被賦值的索引不會被調用。那些沒有通過 callback 測試的元素會被跳過,不會被包含在新數組中。
callback 被調用時傳入三個參數:
1.元素的值
2.元素的索引
3.被遍歷的數組
如果為 filter 提供一個 thisArg 參數,則它會被作為 callback 被調用時的 this 值。否則,callback 的 this 值在非嚴格模式下將是全局對象,嚴格模式下為 undefined。
callback 最終觀察到的this值是根據通常函數所看到的 "this"的規則確定的。
filter 不會改變原數組,它返回過濾后的新數組。
filter 遍歷的元素范圍在第一次調用 callback 之前就已經確定了。在調用 filter 之后被添加到數組中的元素不會被 filter 遍歷到。如果已經存在的元素被改變了,則他們傳入 callback 的值是 filter 遍歷到它們那一刻的值。被刪除或從來未被賦值的元素不會被遍歷
過濾JSON中的無效條目
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() 方法返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined。
如果你需要找到一個元素的位置或者一個元素是否存在于數組中,使用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 } 尋
尋找質數
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()方法返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-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() 方法對數組的每個元素執行一次提供的函數
// 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
如果數組在迭代時被修改了,則其他元素會被跳過。節
下面的例子輸出"one", "two", "four"。當到達包含值"two"的項時,整個數組的第一個項被移除了,這導致所有剩下的項上移一個位置。因為元素 "four"現在在數組更前的位置,"three"會被跳過。 forEach()不會在迭代之前創建數組的副本
var words = ["one", "two", "three", "four"]; words.forEach(function(word) { console.log(word); if (word === "two") { words.shift(); } }); // one // two // fourArray.includes()
includes() 方法用來判斷一個數組是否包含一個指定的值,根據情況,如果包含則返回 true,否則返回false。
[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false
fromIndex 大于等于數組長度節
如果fromIndex 大于等于數組長度 ,則返回 false 。該數組不會被搜索
var arr = ["a", "b", "c"]; arr.includes("c", 3); //false arr.includes("c", 100); // false
includes() 作為一個通用方法節
includes() 方法有意設計為通用方法。它不要求this值是數組對象,所以它可以被用于其他類型的對象 (比如類數組對象)。下面的例子展示了 在函數的arguments對象上調用的includes() 方法。
(function() { console.log([].includes.call(arguments, "a")); // true console.log([].includes.call(arguments, "d")); // false })("a","b","c");Array.indexOf()
indexOf()方法返回在數組中可以找到一個給定元素的第一個索引,如果不存在,則返回-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() 方法將一個數組(或一個類數組對象)的所有元素連接成一個字符串并返回這個字符串。
str = arr.join() // 默認為 "," 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 }
會包含沒有對應元素的索引
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 值或變量)在數組中的最后一個的索引,如果不存在則返回 -1。從數組的后面向前查找,從 fromIndex 處開始
arr.lastIndexOf(searchElement, fromIndex = arr.length - 1)
從此位置開始逆向查找。默認為數組的長度減 1,即整個數組都被查找。如果該值大于或等于數組的長度,則整個數組會被查找。如果為負值,將其視為從數組末尾向前的偏移。即使該值為負,數組仍然會被從后向前查找。如果該值為負時,其絕對值大于數組長度,則方法返回 -1,即數組不會被查找。。
Array.map()map() 方法創建一個新數組,其結果是該數組中的每個元素都調用一個提供的函數后返回的結果。
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 數組為: [{1: 10}, {2: 20}, {3: 30}], // kvArray 數組未被修改: // [{key: 1, value: 10}, // {key: 2, value: 20}, // {key: 3, value: 30}]Array.pop()
pop()方法從數組中刪除最后一個元素,并返回該元素的值。此方法更改數組的長度。
let myFish = ["angel", "clown", "mandarin", "surgeon"]; let popped = myFish.pop(); console.log(myFish); // ["angel", "clown", "mandarin"] console.log(popped); // surgeonArray.push()
push() 方法將一個或多個元素添加到數組的末尾,并返回該數組的新長度
push 方法有意具有通用性。該方法和 call() 或 apply() 一起使用時,可應用在類似數組的對象上。push 方法根據 length 屬性來決定從哪里開始插入給定的值。如果 length 不能被轉成一個數值,則插入的元素索引為 0,包括 length 不存在時。當 length 不存在時,將會創建它。
Array.reduce()reduce() 方法對數組中的每個元素執行一個提供的reducer函數(升序執行),將其結果匯總為單個返回值
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 函數接收4個參數:
Accumulator (acc) (累計器)
Current Value (cur) (當前值)
Current Index (idx) (當前索引)
Source Array (src) (源數組)
您的 reducer 函數的返回值分配給累計器,該返回值在數組的每個迭代中被記住,并最后成為最終的單個結果值。
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() 方法接受一個函數作為累加器(accumulator)和數組的每個值(從右到左)將其減少為單個值
reduceRight 為數組中每個元素調用一次 callback 回調函數,但是數組中被刪除的索引或從未被賦值的索引會跳過。回調函數接受四個參數:初始值(或上次調用回調的返回值)、當前元素值、當前索引,以及調用 reduce 的數組
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() 方法將數組中元素的位置顛倒。
var myArray = ["one", "two", "three"]; myArray.reverse(); console.log(myArray) // ["three", "two", "one"]Array.shift()
shift() 方法從數組中刪除第一個元素,并返回該元素的值。此方法更改數組的長度
shift 方法移除索引為 0 的元素(即第一個元素),并返回被移除的元素,其他元素的索引值隨之減 1。如果 length 屬性的值為 0 (長度為 0),則返回 undefined。
shift 方法并不局限于數組:這個方法能夠通過 call 或 apply 方法作用于類似數組的對象上。但是對于沒有 length 屬性(從0開始的一系列連續的數字屬性的最后一個)的對象,調用該方法可能沒有任何意義。
let myFish = ["angel", "clown", "mandarin", "surgeon"]; console.log("調用 shift 之前: " + myFish); // "調用 shift 之前: angel,clown,mandarin,surgeon" var shifted = myFish.shift(); console.log("調用 shift 之后: " + myFish); // "調用 shift 之后: clown,mandarin,surgeon" console.log("被刪除的元素: " + shifted); // "被刪除的元素: angel"Array.slice()
slice() 方法返回一個新的數組對象,這一對象是一個由 begin和 end(不包括end)決定的原數組的淺拷貝。原始數組不會被改變。
arr.slice(); // [0, end] arr.slice(begin); // [begin, end] arr.slice(begin, end); // [begin, end)Array.some()
some() 方法測試數組中的某些元素是否通過由提供的函數實現的測試
some() 為數組中的每一個元素執行一次 callback 函數,直到找到一個使得 callback 返回一個“真值”(即可轉換為布爾值 true 的值)。如果找到了這樣一個值,some() 將會立即返回 true。否則,some() 返回 false。callback 只會在那些”有值“的索引上被調用,不會在那些被刪除或從來未被賦值的索引上調用。
callback 被調用時傳入三個參數:元素的值,元素的索引,被遍歷的數組。
將會把它傳給被調用的 callback,作為 this 值。否則,在非嚴格模式下將會是全局對象,嚴格模式下是 undefined。
some() 被調用時不會改變數組。
some() 遍歷的元素的范圍在第一次調用 callback. 時就已經確定了。在調用 some() 后被添加到數組中的值不會被 callback 訪問到。如果數組中存在且還未被訪問到的元素被 callback 改變了,則其傳遞給 callback 的值是 some() 訪問到它那一刻的值。
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() 方法用原地算法對數組的元素進行排序,并返回數組。排序算法現在是穩定的。默認排序順序是根據字符串Unicode碼點。
Array.splice()splice()方法通過刪除現有元素和/或添加新元素來修改數組,并以數組返回原數組中被修改的內容。
var myFish = ["angel", "clown", "mandarin", "surgeon"]; //從第 2 位開始刪除 0 個元素,插入 "drum" var removed = myFish.splice(2, 0, "drum"); //運算后的 myFish:["angel", "clown", "drum", "mandarin", "surgeon"] //被刪除元素數組:[],沒有元素被刪除Array.toLocaleString()
toLocaleString() 返回一個字符串表示數組中的元素。數組中的元素將使用各自的 toLocaleString 方法轉成字符串,這些字符串將使用一個特定語言環境的字符串(例如一個逗號 ",")隔開。
var prices = ["¥7", 500, 8123, 12]; prices.toLocaleString("ja-JP", { style: "currency", currency: "JPY" }); // "¥7,¥500,¥8,123,¥12"Array.toString() Array.unshift()
unshift() 方法將一個或多個元素添加到數組的開頭,并返回該數組的新長度。
Array.values()values() 方法返回一個新的 Array Iterator 對象,該對象包含數組每個索引的值
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100195.html
摘要:對于,其默認大小一般是本地存儲和都保存在瀏覽器端,且都是同源的。把變量放在閉包中和放在全局作用域,對內存的影響是一致的,這里并不能說成是內存泄露。將新的樹和之前的虛擬樹進行相比較,根據結果對進行精準響應。 1. JavaScript 1. JavaScript文件在什么情況下會放在html哪個位置 https://zhuanlan.zhihu.com/p/... 對于必須要在DOM加載...
摘要:對于,其默認大小一般是本地存儲和都保存在瀏覽器端,且都是同源的。把變量放在閉包中和放在全局作用域,對內存的影響是一致的,這里并不能說成是內存泄露。將新的樹和之前的虛擬樹進行相比較,根據結果對進行精準響應。 1. JavaScript 1. JavaScript文件在什么情況下會放在html哪個位置 https://zhuanlan.zhihu.com/p/... 對于必須要在DOM加載...
摘要:如果你還沒正式開始正則表達式,請快速瀏覽跳過本章節。就是一個等同于但更簡略的正則表達式。如果想查找全部,就要加標識全局匹配規則正則表達式搜索字符串指定的值,從而去匹配字符串。正則表達式都是用來操作字符串的。 正則表達式 Create by jsliang on 2018-11-14 10:41:20 Recently revised in 2018-11-19 08:46:37 ...
摘要:個人前端文章整理從最開始萌生寫文章的想法,到著手開始寫,再到現在已經一年的時間了,由于工作比較忙,更新緩慢,后面還是會繼更新,現將已經寫好的文章整理一個目錄,方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法,到著手...
閱讀 3344·2021-11-10 11:36
閱讀 3244·2021-10-08 10:21
閱讀 2841·2021-09-29 09:35
閱讀 2416·2021-09-22 16:06
閱讀 3959·2021-09-09 09:33
閱讀 1327·2019-08-30 15:44
閱讀 3171·2019-08-30 10:59
閱讀 2982·2019-08-29 15:32