Javascript Array | MDN總結(2)

1.Array.from()

Array.from() 方法從一個類似數組或可迭代對象創建一個新的,淺拷貝的數組實例。

語法

Array.from(arrayLike[, mapFn[, thisArg]])

from() 的 length 屬性爲 1 ,即 Array.from.length === 1。

參數
arrayLike
想要轉換成數組的僞數組對象或可迭代對象。

  • 僞數組對象(擁有一個 length 屬性和若干索引屬性的任意對象)
  • 可迭代對象(可以獲取對象中的元素,如 Map和 Set 等)

mapFn 可選
如果指定了該參數,新數組中的每個元素會執行該回調函數。
Array.from(obj, mapFn, thisArg) 就相當於 Array.from(obj).map(mapFn, thisArg)
thisArg 可選
可選參數,執行回調函數 mapFn 時 this 對象。

返回值
一個新的數組實例。
例子

Array.from('foo'); 
// [ "f", "o", "o" ]

const set = new Set(['foo', 'bar', 'baz', 'foo'])
Array.from(set);
// [ "foo", "bar", "baz" ]

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

function f() {
  return Array.from(arguments);
}
f(1, 2, 3);
// [ 1, 2, 3 ]

Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]

Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

2.Array.isArray()

用於確定傳遞的值是否是一個 Array。如果值是 Array,則爲true; 否則爲false。
語法

Array.isArray(obj)

例子

// 下面的函數調用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);

polyfill

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

3.Array.of()

Array.of() 方法創建一個具有可變數量參數的新數組實例,而不考慮參數的數量或類型。
語法

Array.of(element0[, element1[, ...[, elementN]]])

例子

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]
Array.of(undefined); // [undefined]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

polyfill

if (!Array.of) {
  Array.of = function() {
    return Array.prototype.slice.call(arguments);
  };
}

4.Array.prototype.concat()

concat() 方法用於合併兩個或多個數組。此方法不會更改現有數組,而是返回一個新數組。一個它所調用的已存在的數組的淺拷貝。
例子

var alpha = ['a', 'b', 'c'];
var alphaNumeric = alpha.concat(1, [2, 3]);
console.log(alphaNumeric); 
// results in ['a', 'b', 'c', 1, 2, 3]
console.log(alpha ); //['a', 'b', 'c'];

5.Array.prototype.copyWithin()

copyWithin() 方法淺複製數組的一部分到同一數組中的另一個位置,並返回它,不會改變原數組的長度。
語法

arr.copyWithin(target[, start[, end]])//start省略從0開始,end省略會一直複製至數組結尾(默認爲 arr.length)。

例子

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

numbers.copyWithin(-2);//start是0,end爲5,target是-2,所以將4,5替換爲1,2
// [1, 2, 3, 1, 2]

numbers.copyWithin(0, 3);//下標爲3開始,將4,5複製到target爲0開始的位置。
// [4, 5, 3, 4, 5]

numbers.copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]

numbers.copyWithin(-2, -3, -1);
// [1, 2, 3, 3, 4]

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

6.Array.prototype.entries()

entries() 方法返回一個新的Array Iterator對象,該對象包含數組中每個索引的鍵/值對。
語法

arr.entries()

例子

var arr = ["a", "b", "c"]; 
var iterator = arr.entries();
console.log(iterator.next());//{value: [0,'a'], done: false}
console.log(iterator.next());//{value: [1,'b'], done: false}
console.log(iterator.next());//{value: [2,'c'], done: false}
console.log(iterator.next());//{value: undefined, done: true}
/*{value: Array(2), done: false}
  __proto__: Object
*/
// iterator.next()返回一個對象,對於有元素的數組,
// 是next{ value: Array(2), done: false };
// next.done 用於指示迭代器是否完成:在每次迭代時進行更新而且都是false,
// 直到迭代器結束done纔是true。
// next.value是一個["key","value"]的數組,是返回的迭代器中的元素值。


var arr = ["a", "b", "c"];
var iterator = arr.entries();
/*__proto__: Array Iterator
next: ƒ next()
Symbol(Symbol.iterator): ƒ ()
Symbol(Symbol.toStringTag): "Array Iterator"
__proto__: Object*/
for (let e of iterator) {
    console.log(e);
}
// [0, "a"] 
// [1, "b"] 
// [2, "c"]

7.Array.prototype.every()

every() 方法測試一個數組內的所有元素是否都能通過某個指定函數的測試。它返回一個布爾值。
注意:若收到一個空數組,此方法在一切情況下都會返回 true。
語法

//參數
//callback 在被調用時可傳入三個參數:元素值,元素的索引,原數組。
//thisArg,執行 callback 時使用的 this 值。
arr.every(callback(element,index,array)[, thisArg])

every 遍歷的元素範圍在第一次調用 callback 之前就已確定了。在調用 every 之後添加到數組中的元素不會被 callback 訪問到。如果數組中存在的元素被更改,則他們傳入 callback 的值是 every 訪問到他們那一刻的值。那些被刪除的元素或從來未被賦值的元素將不會被訪問到。
例子

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false

8.Array.prototype.fill()

fill() 方法用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引。返回修改後的數組。
語法

arr.fill(value[, start[, end]])

參數
value
用來填充數組元素的值。
start 可選
起始索引,默認值爲0。
end 可選
終止索引,默認值爲 this.length。
例子

[1, 2, 3, 4].fill(0, 2, 4)       // [1, 2, 0, 0]
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" }]

9.Array.prototype.filter()

filter() 方法創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。 返回一個新的、由通過測試的元素組成的數組,如果沒有任何數組元素通過測試,則返回空數組。

語法

//參數
//callback 在被調用時可傳入三個參數:元素值,元素的索引,原數組。
//thisArg,執行 callback 時使用的 this 值。
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

filter 遍歷的元素範圍在第一次調用 callback 之前就已經確定了。在調用 filter 之後被添加到數組中的元素不會被 filter 遍歷到。如果已經存在的元素被改變了,則他們傳入 callback 的值是 filter 遍歷到它們那一刻的值。被刪除或從來未被賦值的元素不會被遍歷到。

例子

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44] 

10.Array.prototype.find()

find() 方法返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined。
語法

arr.find(callback(element,index,array)[, thisArg])

在第一次調用 callback函數時會確定元素的索引範圍,因此在 find方法開始執行之後添加到數組的新元素將不會被 callback函數訪問到。如果數組中一個尚未被callback函數訪問到的元素的值被callback函數所改變,那麼當callback函數訪問到它時,它的值是將是根據它在數組中的索引所訪問到的當前值。被刪除的元素仍舊會被訪問到,但是其值已經是undefined了。
例子

var array1 = [5, 12, 8, 130, 44];
var found = array1.find(function(element) {
  return element > 10;
});
console.log(found);
// expected output: 12

var a = [0,1,,,,5,6];
// Shows all indexes, not just those that have been assigned values
a.find(function(value, index) {
  console.log('Visited index ' + index + ' with value ' + value); 
});
VM88:5 Visited index 0 with value 0
VM88:5 Visited index 1 with value 1
VM88:5 Visited index 2 with value undefined
VM88:5 Visited index 3 with value undefined
VM88:5 Visited index 4 with value undefined
VM88:5 Visited index 5 with value 5
VM88:5 Visited index 6 with value 6

a.map(x=>{console.log(x)})//0 1 5 6
a.forEach(x=>{console.log(x)})//0 1 5 6
for(var i in a){console.log(a[i])}//0 1 5 6
for(var i=0;i<a.length;i++){console.log(a[i])}//0 1 undefined undefined undefined 5 6

a.find(function(value, index) {
  // Delete element 5 on first iteration
  if (index == 0) {
    console.log('Deleting a[5] with value ' + a[5]);
    delete a[5];  // 注:這裏只是將a[5]設置爲undefined,可以試試用a.pop()刪除最後一項,依然會遍歷到被刪的那一項
  }
  // Element 5 is still visited even though deleted
  console.log('Visited index ' + index + ' with value ' + value); 
});
VM439:6 Deleting a[5] with value 5
VM439:10 Visited index 0 with value 0
VM439:10 Visited index 1 with value 1
VM439:10 Visited index 2 with value undefined
VM439:10 Visited index 3 with value undefined
VM439:10 Visited index 4 with value undefined
VM439:10 Visited index 5 with value undefined
VM439:10 Visited index 6 with value 6

11.Array.prototype.findIndex()

findIndex()方法返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-1。用法和find一樣。

12.Array.prototype.flat()

flat() 方法會按照一個可指定的深度遞歸遍歷數組,並將所有元素與遍歷到的子數組中的元素合併爲一個新數組返回。
語法

var newArray = arr.flat([depth])//depth 可選 指定要提取嵌套數組的結構深度,默認值爲 1。

例子
flat() 方法會移除數組中的空項:

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]
var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity 作爲深度,展開任意深度的嵌套數組
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Polyfill

// 使用 reduce、concat 和遞歸無限反嵌套多層嵌套的數組
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];

function flattenDeep(arr1) {
   return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
}
flattenDeep(arr1);
// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

13.Array.prototype.flatMap()

flatMap() 方法首先使用映射函數映射每個元素,然後將結果壓縮成一個新數組。它與 map 連着深度值爲1的 flat 幾乎相同,但 flatMap 通常在合併成一種方法的效率稍微高一些。 返回一個新的數組,其中每個元素都是回調函數的結果,並且結構深度 depth 值爲1。
語法

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // 返回新數組的元素
}[, thisArg])

例子

var arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 只會將 flatMap 中的函數返回的數組 “壓平” 一層
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

let arr = ["今天天氣不錯", "", "早上好"]
arr.map(s => s.split(""))
// [["今", "天", "天", "氣", "不", "錯"],[],["早", "上", "好"]]

arr.flatMap(s => s.split(''));
// ["今", "天", "天", "氣", "不", "錯", "早", "上", "好"]

flatMap 能用於在map期間增刪項目(也就是修改items的數量)。換句話說,它允許你遍歷很多項使之成爲另一些項(靠分別把它們放進去來處理),而不是總是一對一。

let a = [5, 4, -3, 20, 17, -33, -4, 18]
//       |\  \  x   |  | \   x   x   |
//      [4,1, 4,   20, 16, 1,       18]

a.flatMap( (n) =>
  (n < 0) ?      [] :
  (n % 2 == 0) ? [n] :
                 [n-1, 1]
)
// expected output: [4, 1, 4, 20, 16, 1, 18]

Polyfill

var arr = [1, 2, 3, 4];

arr.flatMap(x => [x, x * 2]);
// is equivalent to
arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
// [1, 2, 2, 4, 3, 6, 4, 8]

14.Array.prototype.forEach()

forEach() 方法對數組的每個元素執行一次提供的函數。返回值爲undefined.不可鏈式調用。forEach 方法按升序爲數組中含有效值的每一項執行一次callback 函數,那些已刪除或者未初始化的項將被跳過(例如在稀疏數組上)。forEach 遍歷的範圍在第一次調用 callback 前就會確定。注意: 沒有辦法中止或者跳出 forEach() 循環(break),除了拋出一個異常。如果你需要這樣,使用 forEach() 方法是錯誤的。
語法

arr.forEach(function callback(currentValue[, index[, array]]) {
    // 返回新數組的元素
}[, thisArg]);

例子

const arraySparse = [1,3,,7];
arraySparse.forEach(function(element){
  console.log(element);
});//執行了3次,  1 3 7

如果 thisArg 參數有值,則每次 callback 函數被調用的時候,this 都會指向 thisArg 參數上的這個對象。如果省略了 thisArg 參數,或者賦值爲 null 或 undefined,則 this 指向全局對象。

function Counter() {
    this.sum = 0;
    this.count = 0;
}

Counter.prototype.add = function(array) {
    array.forEach(function(entry) {
        this.sum += entry;
        ++this.count;
    }, this);
    //console.log(this);
};

var obj = new Counter();
obj.add([1, 3, 5, 7]);

obj.count; 
// 4 === (1+1+1+1) 如果沒有this,則爲0
obj.sum;
// 16 === (1+3+5+7)




function Counter() {
    this.sum = 0;
    this.count = 0;
}
Counter.prototype.add = function(array) {
  console.log(this)
  let a=[1,2],b=[3,4],c=[5,6]
  a.forEach(function(x){console.log(x,this)})
  b.forEach(function(x){console.log(x,this)},this)
  c.map(function(x){console.log(x,this)})
};
var y=new Counter()
y.add()

Counter {sum: 0, count: 0}
1 Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ,}
2 Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ,}
3 Counter {sum: 0, count: 0}
4 Counter {sum: 0, count: 0}
5 Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ,}
6 Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ,}

下面的例子會輸出"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

15.Array.prototype.includes()

includes() 方法用來判斷一個數組是否包含一個指定的值,根據情況,如果包含則返回 true,否則返回false。注意:對象數組不能使用includes方法來檢測。使用 includes()比較字符串和字符時是區分大小寫。
語法

arr.includes(valueToFind[, fromIndex])

參數
valueToFind
需要查找的元素值
fromIndex 可選
從fromIndex 索引處開始查找 valueToFind。如果爲負值,則按升序從 array.length + fromIndex 的索引開始搜 (即使從末尾開始往前跳 fromIndex 的絕對值個索引,然後往後搜尋)。默認爲 0。
示例
如果 fromIndex 大於等於數組的長度,則會返回 false,且該數組不會被搜索

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

(function() {
  console.log([].includes.call(arguments, 'a')); // true
  console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');

16.Array.prototype.indexOf()

indexOf()方法返回在數組中可以找到一個給定元素的第一個索引,如果不存在,則返回-1。indexOf 使用strict equality (無論是 ===, 還是 triple-equals操作符都基於同樣的方法)進行判斷 searchElement與數組中包含的元素之間的關係。
語法

arr.indexOf(searchElement[, fromIndex])

示例

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

17.Array.prototype.join()

join() 方法將一個數組(或一個類數組對象)的所有元素連接成一個字符串並返回這個字符串。如果數組只有一個項目,那麼將返回該項目而不使用分隔符。
語法

//separator 指定一個字符串來分隔數組的每個元素。如果缺省該值,數組元素用逗號(,)分隔。
arr.join([separator])

返回值
一個所有數組元素連接的字符串。如果 arr.length 爲0,則返回空字符串。

示例

var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join();      // myVar1的值變爲"Wind,Rain,Fire"
var myVar4 = a.join('');    // myVar4的值變爲"WindRainFire"


//如果一個元素爲 undefined 或 null,它會被轉換爲空字符串。
var b = [undefined, 'Rain', null];
var myVar1 = b.join();//",Rain,"
var myVar2 = b.join('');//"Rain"


function f(a, b, c) {
  var s = Array.prototype.join.call(arguments);
  console.log(s); // '1,a,true'
}
f(1, 'a', true);

18.Array.prototype.keys()

keys() 方法返回一個包含數組中每個索引鍵的Array Iterator對象。和Object.keys不一樣。
語法

arr.keys()

示例

var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr);
var denseKeys = [...arr.keys()];
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys);  // [0, 1, 2]

var arr1 = [null, ,undefined];
var t=arr1.keys()//Array Iterator {}
t.next()//{value: 0, done: false}
t.next()//{value: 1, done: false}
t.next()//{value: 2, done: false}
t.next()//{value: undefined, done: true}

19.Array.prototype.lastIndexOf()

lastIndexOf() 方法返回指定元素(也即有效的 JavaScript 值或變量)在數組中的最後一個的索引,如果不存在則返回 -1。從數組的後面向前查找,從 fromIndex 處開始。用法和indexOf一樣。

20.Array.prototype.map()

map() 方法創建一個新數組,其結果是該數組中的每個元素都調用一個提供的函數後返回的結果。沒有返回值的話,返回undefined。
語法

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

map 方法會給原數組中的每個元素都按順序調用一次 callback 函數。callback 每次執行後的返回值(包括 undefined)組合起來形成一個新數組。 callback 函數只會在有值的索引上被調用;那些從來沒被賦過值或者使用 delete 刪除的索引則不會被調用。

map 方法處理數組元素的範圍是在 callback 方法第一次調用之前就已經確定了。調用map方法之後追加的數組元素不會被callback訪問。如果存在的數組元素改變了,那麼傳給callback的值是map訪問該元素時的值。在map函數調用後但在訪問該元素前,該元素被刪除的話,則無法被訪問到。
示例

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]


var elems = document.querySelectorAll('select option:checked');
var values = Array.prototype.map.call(elems, function(obj) {
  return obj.value;
});


["1", "2", "3"].map(parseInt);
// parseInt(string, radix) -> map(parseInt(value, index))
/*  first iteration (index is 0): */ parseInt("1", 0); // 1
/* second iteration (index is 1): */ parseInt("2", 1); // NaN
/*  third iteration (index is 2): */ parseInt("3", 2); // NaN


var numbers = [1, 2, 3, 4];
var filteredNumbers = numbers.map(function(num, index) {
  if(index < 3) {
     return num;
  }
});
//index goes from 0,so the filterNumbers are 1,2,3 and undefined.
// filteredNumbers is [1, 2, 3, undefined]

21.Array.prototype.pop()

pop()方法從數組中刪除最後一個元素,並返回該元素的值。此方法更改數組的長度。從數組中刪除的元素(當數組爲空時返回undefined)。

pop 方法有意具有通用性。該方法和 call() 或 apply() 一起使用時,可應用在類似數組的對象上。pop方法根據 length屬性來確定最後一個元素的位置。如果不包含length屬性或length屬性不能被轉成一個數值,會將length置爲0,並返回undefined。
語法

arr.pop()

示例

let myFish = ["angel", "clown", "mandarin", "surgeon"];

let popped = myFish.pop();

console.log(myFish); 
// ["angel", "clown", "mandarin"]

console.log(popped); 
// surgeon

22.Array.prototype.push()

push() 方法將一個或多個元素添加到數組的末尾,並返回該數組的新長度。
語法

arr.push(element1, ..., elementN)

push 方法有意具有通用性。該方法和 call() 或 apply() 一起使用時,可應用在類似數組的對象上。push 方法根據 length 屬性來決定從哪裏開始插入給定的值。如果 length 不能被轉成一個數值,則插入的元素索引爲 0,包括 length 不存在時。當 length 不存在時,將會創建它。
示例

var sports = ["soccer", "baseball"];
var total = sports.push("football", "swimming");

console.log(sports); 
// ["soccer", "baseball", "football", "swimming"]

console.log(total);  
// 4


var vegetables = ['parsnip', 'potato'];
var moreVegs = ['celery', 'beetroot'];
// 將第二個數組融合進第一個數組
// 相當於 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) {
        // obj.length is automatically incremented 
        // every time an element is added.
        [].push.call(this, elem);
    }
};

// Let's add some empty objects just to illustrate.
obj.addElem({});
obj.addElem({});
console.log(obj.length);
// → 2

23.Array.prototype.reduce()

reduce() 方法對數組中的每個元素執行一個由您提供的reducer函數(升序執行),將其結果彙總爲單個返回值。
reduce爲數組中的每一個元素依次執行callback函數,不包括數組中被刪除或從未被賦值的元素
語法

//accumulator 累計器
//currentValue 當前值
//currentIndex 當前索引
//array 數組
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

參數
callback
執行數組中每個值 (如果沒有提供 initialValue則第一個值除外)的函數,包含四個參數:
accumulator
累計器累計回調的返回值; 它是上一次調用回調時返回的累積值,或initialValue(見於下方)。
currentValue
數組中正在處理的元素。
index 可選
數組中正在處理的當前元素的索引。 如果提供了initialValue,則起始索引號爲0,否則從索引1起始。
array可選
調用reduce()的數組
initialValue可選
作爲第一次調用 callback函數時的第一個參數的值。 如果沒有提供初始值,則將使用數組中的第一個元素。 在沒有初始值的空數組上調用 reduce 將報錯。

回調函數第一次執行時,accumulator 和currentValue的取值有兩種情況:如果調用reduce()時提供了initialValue,accumulator取值爲initialValue,currentValue取數組中的第一個值;如果沒有提供 initialValue,那麼accumulator取數組中的第一個值,currentValue取數組中的第二個值。

如果數組爲空且沒有提供initialValue,會拋出TypeError 。如果數組僅有一個元素(無論位置如何)並且沒有提供initialValue, 或者有提供initialValue但是數組爲空,那麼此唯一值將被返回並且callback不會被執行。

示例
提供初始值通常更安全,正如下面的例子,如果沒有提供initialValue,則可能有三種輸出:

var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );
var maxCallback2 = ( max, cur ) => Math.max( max, cur );

// reduce() 沒有初始值
[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42
[ { x: 22 }            ].reduce( maxCallback ); // { x: 22 }
[                      ].reduce( maxCallback ); // TypeError

累加對象數組裏的值

var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
    return accumulator + currentValue.x;
},0)

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]

按屬性對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 }] 
// }

數組去重

var myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
var myOrderedArray = myArray.reduce(function (accumulator, currentValue) {
  if (accumulator.indexOf(currentValue) === -1) {
    accumulator.push(currentValue);
  }
  return accumulator
}, [])

console.log(myOrderedArray);

24.Array.prototype.reduceRight()

reduceRight() 方法接受一個函數作爲累加器(accumulator)和數組的每個值(從右到左)將其減少爲單個值。用法和reduce一樣。
語法

arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])

首次調用回調函數時,accumulator 和 currentValue 可以是兩個值之一。如果調用 reduceRight 時提供了 initialValue 參數,則 accumulator等於 initialValue,currentValue 等於數組中的最後一個值。如果沒有提供 initialValue 參數,則 accumulator 等於數組最後一個值, currentValue 等於數組中倒數第二個值。

如果數組爲空,且沒有提供 initialValue 參數,將會拋出一個 TypeError 錯誤。如果數組只有一個元素且沒有提供 initialValue 參數,或者提供了 initialValue 參數,但是數組爲空將會直接返回數組中的那一個元素或 initialValue 參數,而不會調用 callback。
示例

reduce 與 reduceRight 之間的區別
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"

25.Array.prototype.reverse()

reverse() 方法將數組中元素的位置顛倒,並返回該數組。數組的第一個元素會變成最後一個,數組的最後一個元素變成第一個。該方法會改變原數組。reverse 方法顛倒數組中元素的位置,改變了數組,並返回該數組的引用。

reverse方法是特意類化的;此方法可被 called 或 applied於類似數組對象。對象如果不包含反映一系列連續的、基於零的數值屬性中的最後一個長度的屬性,則該對象可能不會以任何有意義的方式運行。
語法

 arr.reverse()

示例

var array1 = ['one', 'two', 'three'];
var reversed = array1.reverse(); 
console.log('reversed: ', reversed);
// expected output: Array ['three', 'two', 'one']
console.log('array1: ', array1);
// expected output: Array ['three', 'two', 'one']


const 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}

26.Array.prototype.shift()

shift() 方法從數組中刪除第一個元素,並返回該元素的值。此方法更改數組的長度。如果數組爲空則返回undefined 。
語法

arr.shift()

shift 方法並不侷限於數組:這個方法能夠通過 call 或 apply 方法作用於類似數組的對象上。但是對於沒有 length 屬性(從0開始的一系列連續的數字屬性的最後一個)的對象,調用該方法可能沒有任何意義。
示例

var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"];

while( (i = names.shift()) !== undefined ) {
    console.log(i);
}
// Andrew, Edward, Paul, Chris, John

27.Array.prototype.slice()

slice() 方法返回一個新的數組對象,這一對象是一個由 begin 和 end 決定的原數組的淺拷貝(包括 begin,不包括end)。原始數組不會被改變。
語法

//如果省略 begin,則 slice 從索引 0 開始。如果 begin 大於原數組的長度,則會返回空數組。
//如果 end 被省略,則 slice 會一直提取到原數組末尾。如果 end 大於數組的長度,slice 也會一直提取到原數組末尾。
arr.slice([begin[, end]])

slice 不會修改原數組,只會返回一個淺複製了原數組中的元素的一個新數組。原數組的元素會按照下述規則拷貝:

  • 如果該元素是個對象引用 (不是實際的對象),slice會拷貝這個對象引用到新的數組裏。兩個對象引用都引用了同一個對象。如果被引用的對象發生改變,則新的和原來的數組中的這個元素也會發生改變。
  • 對於字符串、數字及布爾值來說(不是 String、Number 或者 Boolean 對象),slice會拷貝這些值到新的數組裏。在別的數組裏修改這些字符串或數字或是布爾值,將不會影響另一個數組。

如果向兩個數組任一中添加了新元素,則另一個不會受到影響。
示例

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);
// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']


function list() {
  return Array.prototype.slice.call(arguments);
  //[].slice.call(arguments);
}
var list1 = list(1, 2, 3); // [1, 2, 3]


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]

28.Array.prototype.some()

some() 方法測試數組中是不是至少有1個元素通過了被提供的函數測試。它返回的是一個Boolean類型的值。空數組返回的都是false。
數組中有至少一個元素通過回調函數的測試就會返回true;所有元素都沒有通過回調函數的測試返回值纔會爲false。
語法

arr.some(callback(element[, index[, array]])[, thisArg])

callback 只會在那些”有值“的索引上被調用,不會在那些被刪除或從來未被賦值的索引上調用。
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

29.Array.prototype.sort()

sort() 方法用原地算法對數組的元素進行排序,並返回數組。默認排序順序是在將元素轉換爲字符串,然後比較它們的UTF-16代碼單元值序列時構建的
語法

//firstEl第一個用於比較的元素。
//secondEl第二個用於比較的元素。
//如果省略,元素按照轉換爲的字符串的各個字符的Unicode位點進行排序。
arr.sort([compareFunction(firstEl,secondEl)])

返回排序後的數組。請注意,數組已原地排序,並且不進行復制。

如果 compareFunction(a, b) 小於 0 ,那麼 a 會被排列到 b 之前;
如果 compareFunction(a, b) 等於 0 , a 和 b 的相對位置不變。
如果 compareFunction(a, b) 大於 0 , b 會被排列到 a 之前。

function compare(a, b) {
  if (a < b ) {           // 按某種排序標準進行比較, a 小於 b
    return -1;
  }
  if (a > b ) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

示例

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 }
];
// sort by value從小到大排序
items.sort(function (a, b) {
  return (a.value - b.value)
});

當排序非 ASCII 字符的字符串(如包含類似 e, é, è, a, ä 等字符的字符串)。一些非英語語言的字符串需要使用 String.localeCompare。這個函數可以將函數排序到正確的順序。

var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
items.sort(function (a, b) {
  return a.localeCompare(b);
});

30.Array.prototype.splice()

splice() 方法通過刪除或替換現有元素或者原地添加新的元素來修改數組,並以數組形式返回被修改的內容。此方法會改變原數組。如果沒有刪除元素,則返回空數組。
語法

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

參數
start​
指定修改的開始位置(從0計數)。如果超出了數組的長度,則從數組末尾開始添加內容;如果是負值,則表示從數組末位開始的第幾位(從-1計數,這意味着-n是倒數第n個元素並且等價於array.length-n);如果負數的絕對值大於數組的長度,則表示開始位置爲第0位。沒有參數則返回空數組。
deleteCount 可選
整數,表示要移除的數組元素的個數。
如果 deleteCount 大於 start 之後的元素的總數,則從 start 後面的元素都將被刪除(含第 start 位)。
如果 deleteCount 被省略了,那麼start之後數組的所有元素都會被刪除。
如果 deleteCount 是 0 或者負數,則不移除元素。
item1, item2, … 可選
要添加進數組的元素,從start 位置開始。如果不指定,則 splice() 將只刪除數組元素。

示例

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, "trumpet");
// 運算後的 myFish: ["angel", "clown", "trumpet", "sturgeon"]
// 被刪除的元素: ["drum"]


var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2);
// 運算後的 myFish: ["angel", "clown"]
// 被刪除的元素: ["mandarin", "sturgeon"]

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice();
console.log(myFish)//["angel", "clown", "mandarin", "sturgeon"]
console.log(removed)//[]

31.Array.prototype.toLocaleString()

toLocaleString() 返回一個字符串表示數組中的元素。數組中的元素將使用各自的 toLocaleString 方法轉成字符串,這些字符串將使用一個特定語言環境的字符串(例如一個逗號 “,”)隔開。
語法

arr.toLocaleString([locales[,options]]);

參數

locales 可選
帶有BCP 47語言標記的字符串或字符串數組。
options 可選
一個可配置屬性的對象

var prices = ['¥7', 500, 8123, 12];
prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });

// "¥7,¥500,¥8,123,¥12"

32.Array.prototype.toString()

toString() 返回一個字符串,表示指定的數組及其元素。
語法

arr.toString()

Array對象覆蓋了Object的 toString 方法。對於數組對象,toString 方法連接數組並返回一個字符串,其中包含用逗號分隔的每個數組元素。
示例

var array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());
// expected output: "1,2,a,1a"

33.Array.prototype.unshift()

unshift() 方法將一個或多個元素添加到數組的開頭,並返回該數組的新長度(該方法修改原有數組)。當一個對象調用該方法時,返回其 length 屬性值。
語法

arr.unshift(element1, ..., elementN)

unshift 特意被設計成具有通用性;這個方法能夠通過 call 或 apply 方法作用於類數組對象上。不過對於沒有 length 屬性(代表從0開始的一系列連續的數字屬性的最後一個)的對象,調用該方法可能沒有任何意義。

注意, 如果傳入多個參數,它們會被以的形式插入到對象的開始位置,它們的順序和被作爲參數傳入時的順序一致。 於是,傳入多個參數調用一次 unshift ,和傳入一個參數調用多次 unshift (例如,循環調用),它們將得到不同的結果。

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

arr = [4,5,6]; // 重置數組
arr.unshift(1);
arr.unshift(2);
arr.unshift(3);
console.log(arr); // [3, 2, 1, 4, 5, 6]

34.Array.prototype.values()

values() 方法返回一個新的 Array Iterator 對象,該對象包含數組每個索引的值
語法

arr.values()

示例

let arr = ['w', 'y', 'k', 'o', 'p'];
let eArr = arr.values();
// 您的瀏覽器必須支持 for..of 循環
// 以及 let —— 將變量作用域限定在 for 循環中
for (let letter of eArr) {
  console.log(letter);//'w', 'y', 'k', 'o', 'p'
}
for (let letter of eArr) {
  console.log(letter);//undefined
}

Array.prototype.values === Array.prototype[Symbol.iterator] //true


var arr = ['a', 'b', 'c', 'd', 'e'];
var iterator = arr.values(); 
iterator.next();               // Object { value: "a", done: false }
iterator.next().value;         // "b"
iterator.next()["value"];      // "c"
iterator.next();               // Object { value: "d", done: false }
iterator.next();               // Object { value: "e", done: false }
iterator.next();               // Object { value: undefined, done: true } 
iteraroe.next().value;         // undefined

//if the values in the array changed the array iterator object values change too
var arr = ['a', 'b', 'c', 'd', 'e']; 
var iterator = arr.values();
console.log(iterator);        // Array Iterator {  }
iterator.next().value;        // "a"
arr[1]='n';                 
iterator.next().value;        //  "n"

35.Array.prototype[Symbol.iterator]

Symbol.iterator屬性和 Array.prototype.values() 屬性的初始值均爲同一個函數對象。
語法

arr[Symbol.iterator]()

36.Array.prototype[Symbol.species]

Array[@@species]訪問器屬性返回 Array 的構造函數。

Array[Symbol.species]; // function Array()

Array[Symbol.species](); // []
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章