JavaScript數組學習記錄_11

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);
// 2

Array.prototype

Array.prototype 屬性表示 Array 構造函數的原型,並容許向全部Array對象添加新的屬性和方法。
Array實例繼承自 Array.prototype 。與全部構造函數同樣,能夠更改構造函數的原型對象,以對全部 Array 實例進行更改。例如,能夠添加新方法和屬性以擴展全部Array對象。這用於 polyfilling, 例如:緩存

不爲人知的事實:Array.prototype 自己也是一個 Array。app

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()

將數組中指定區間的全部元素的值,都替換成某個固定的值。ui

  • Array.prototype.pop()

刪除數組的最後一個元素,並返回這個元素。this

  • 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\n', 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)); // 5

Array.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)); // 2

Array.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
// four

Array.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); 
// surgeon

Array.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); // true

Array.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 對象,該對象包含數組每一個索引的值

相關文章
相關標籤/搜索