Array 對象屬性和方法

Array 對象

 

在 JavaScript 中， Array 對象用於構造數組，數組是類列表的高階對象，可在單個的變量中存儲多個值。

JavaScript 數組的長度和元素類型都是非固定的。因為數組的長度可隨時改變，並且其數據在內存中也可以不連續，所以 JavaScript 數組不一定是密集型的，這取決於它的使用方式。

只能用整數作為數組元素的索引，而不能用字符串。后者稱為關聯數組。使用非整數並通過方括號或點號來訪問或設置數組元素時，所操作的並不是數組列表中的元素，而是數組對象的屬性集合上的變量。數組對象的屬性和數組元素列表是分開存儲的，並且數組的遍歷和修改操作也不能作用於這些命名屬性。

它的原型中提供了遍歷、查找、修改元素等相關操作。

創建一個 Array 對象有多種方法：

• var arr = Array(x,y,z)
• var arr = new Array(x,y,z)
• var arr = [x,y,z]

 

Array 對象與其實例的屬性和方法：

// Object.getOwnPropertyDescriptors(Array):
name                        : {value: "Array", writable: false, enumerable: false, configurable: true}
length                      : {value: 1, writable: false, enumerable: false, configurable: true}
prototype                   : {value: Array(0), writable: false, enumerable: false, configurable: false}
Symbol(Symbol.species)      : {set: undefined, enumerable: false, configurable: true, get: ƒ}
from                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
isArray                     : {writable: true, enumerable: false, configurable: true, value: ƒ}
of                          : {writable: true, enumerable: false, configurable: true, value: ƒ}

Object.getOwnPropertyDescriptors(Array.prototype):
constructor                 : {writable: true, enumerable: false, configurable: true, value: ƒ}
length                      : {value: 0, writable: true, enumerable: false, configurable: false}
Symbol(Symbol.iterator)     : {writable: true, enumerable: false, configurable: true, value: ƒ}
Symbol(Symbol.unscopables)  : {value: {…}, writable: false, enumerable: false, configurable: true}
concat                      : {writable: true, enumerable: false, configurable: true, value: ƒ}
copyWithin                  : {writable: true, enumerable: false, configurable: true, value: ƒ}
entries                     : {writable: true, enumerable: false, configurable: true, value: ƒ}
every                       : {writable: true, enumerable: false, configurable: true, value: ƒ}
fill                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
filter                      : {writable: true, enumerable: false, configurable: true, value: ƒ}
find                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
findIndex                   : {writable: true, enumerable: false, configurable: true, value: ƒ}
flat                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
flatMap                     : {writable: true, enumerable: false, configurable: true, value: ƒ}
forEach                     : {writable: true, enumerable: false, configurable: true, value: ƒ}
includes                    : {writable: true, enumerable: false, configurable: true, value: ƒ}
indexOf                     : {writable: true, enumerable: false, configurable: true, value: ƒ}
join                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
keys                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
lastIndexOf                 : {writable: true, enumerable: false, configurable: true, value: ƒ}
map                         : {writable: true, enumerable: false, configurable: true, value: ƒ}
pop                         : {writable: true, enumerable: false, configurable: true, value: ƒ}
push                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
reduce                      : {writable: true, enumerable: false, configurable: true, value: ƒ}
reduceRight                 : {writable: true, enumerable: false, configurable: true, value: ƒ}
reverse                     : {writable: true, enumerable: false, configurable: true, value: ƒ}
shift                       : {writable: true, enumerable: false, configurable: true, value: ƒ}
slice                       : {writable: true, enumerable: false, configurable: true, value: ƒ}
some                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
sort                        : {writable: true, enumerable: false, configurable: true, value: ƒ}
splice                      : {writable: true, enumerable: false, configurable: true, value: ƒ}
toLocaleString              : {writable: true, enumerable: false, configurable: true, value: ƒ}
toString                    : {writable: true, enumerable: false, configurable: true, value: ƒ}
unshift                     : {writable: true, enumerable: false, configurable: true, value: ƒ}
values                      : {writable: true, enumerable: false, configurable: true, value: ƒ}

 

 

Array 常用方法

1、Array.from()

功能：把一個類數組對象或可迭代對象轉化為數組。

語法：Array.from(arrayLike[, mapFn[, thisArg]])

參數：

• arrayLike：想要轉換成數組的類數組對象或可迭代對象。
• mapFn 可選：如果指定了該參數，新數組中的每個元素會執行該回調函數。
• thisArg 可選：可選參數，執行回調函數 mapFn 時 this 對象。

返回值：一個新的數組。

示例：

Array.from('elfpower')// ["e", "l", "f", "p", "o", "w", "e", "r"]

Array.from('elfpower',i=>i.toUpperCase())// ["E", "L", "F", "P", "O", "W", "E", "R"]
 Array.from([1,2,,4,5],i=>i*5)// [5, 10, NaN, 20, 25] var obj = {count:10,toAdd: function(i) {return this.count+i}} Array.from([1,2,3,4,5],function(i){return this.toAdd(i)},obj)// [5, 10, NaN, 20, 25]

 

2、Array.of()

功能：創建一個具有可變數量參數的新數組實例，而不考慮參數的數量或類型。

語法：Array.of(element0[, element1[, ...[, elementN]]])

參數： elementN，任意個參數，將按順序成為返回數組中的元素。

返回值：一個新的數組。

示例：

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

 

3、Array.isArray()

功能：檢測所傳值是否數組。

語法：Array.isArray(obj)

參數：obj，要檢測的值。

返回值：如果值是 Array，則為true; 否則為false。

示例：

Array.isArray([1, 2, 3])// true
Array.isArray({name: 'gwg'})// false
Array.isArray("elfpower")// false
Array.isArray(true)// false
Array.isArray(undefined)// false
Array.isArray(NaN)// false

 

 

Array.prototype 常用方法與描述

方法	描述
concat()	返回兩個數據經過聯接后的數組。
every()	如何數組內的元素均滿足某測試函數，那么就返回true。
filter()	原來的數組中能過通過過濾器的元素組成一個新的數組返回。
forEach()	調用一個函數來處理數組中的每個元素。
indexOf()	返回與指定元素相匹配的第一個位置，如果不存在就返回-1
join()	連接數組中所有的元素，返回一個字符串
lastIndexOf()	返回與指定元素相匹配的最后一個位置，如果不存在就返回-1。
map()	調用一個函數處理數組中的每一個元素，將生成的結果組成一個新的數組，並返回
pop()	返回數組中的最后一個元素，並刪除。
push()	在數組的最后增加一個元素，並返回新數組的長度
reduce()	對數組中的所有元素（從左到右）調用指定的回調函數。 該回調函數的返回值為累積結果，並且此返回值在下一次調用該回調函數時作為參數提供。
reduceRight()	對數組中的所有元素（從右到左）調用指定的回調函數。 該回調函數的返回值為累積結果，並且此返回值在下一次調用該回調函數時作為參數提供。
reverse()	反轉數組元素的順序——第一個成為最后一個,最后成為第一。
shift()	刪除數組的第一個元素並返回。
slice()	提取一段數組並返回一個新的數組
some()	,如果存在一個元素滿足所提供的測試函數，就返回true。
sort()	對數組中的元素排序。
splice()	增刪數組中的元素。
toString()	返回一個表示數組及其元素的字符串。
toSource()	返回一個字符串,代表該數組的源代碼.（該特性是非標准的，請盡量不要在生產環境中使用它！！！）
---es6擴展---	--- 以下是es6擴展 ---
copyWithin()	淺復制數組的一部分到同一數組中的另一個位置，並返回它，不會改變原數組的長度。
entries()	返回一個新的Array Iterator對象，該對象包含數組中每個索引的鍵/值對。
fill()	用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引。
find()	返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined。
findIndex()	返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-1。
flat()	按照一個可指定的深度遞歸遍歷數組，並將所有元素與遍歷到的子數組中的元素合並為一個新數組返回。
flatMap()	首先使用映射函數映射每個元素，然后將結果壓縮成一個新數組。
includes()	用來判斷一個數組是否包含一個指定的值，根據情況，如果包含則返回 true，否則返回false。

 

Array.prototype 常用方法

1、concat()

功能：

• 用於連接兩個或多個數組，該方法不會改變現有的數組，而是返回被連接數組的一個副本。
• 如果要進行 concat() 操作的參數是數組，那么添加的是數組中的元素，而不是數組。

語法：var new_array = arr.concat(value1[, value2[, ...[, valueN]]])

參數： valueN (將數組和/或值連接成新數組。如果省略了valueN參數參數，則concat會返回一個它所調用的已存在的數組的淺拷貝。)

示例：

var arr1 = [1, 2, 3],
    arr2 = ['a', 'b', 'c'], arr3 = [[11], ['z'], [{gg:20}]]; var arrs = arr1.concat(arr2, arr3); console.log(arrs); // [1, 2, 3, "a", "b", "c", [11],["z"], [{gg: 20}]]

 

2、join()

功能：

• 把數組中的所有元素放入一個字符串，元素是通過指定的分隔符進行分隔的。
• 若省略了分隔符參數，則使用逗號作為分隔符。
• 如果數組只有一個項目，那么將返回該項目而不使用分隔符。
• 不改變原數組。

語法：arr.join(separator)

參數： separator (可選。指定要使用的分隔符。如果省略該參數，則使用逗號作為分隔符)

示例：

// arr.join() 不傳參,默認“,”分隔
var arr = new Array(3)
arr[0] = "張"
arr[1] = "三"
arr[2] = "豐"
var nArr = arr.join()
console.log(nArr) // 張,三,豐

// arr.join() 傳參“-”,使用“-”分隔
var arr2 = new Array(3)
arr2[0] = "張"
arr2[1] = "三"
arr2[2] = "豐"
var nArr2 = arr2.join('-')
console.log(nArr2) // 張-三-豐

// arr.join() 傳參空字符""則無分隔
var arr3 = new Array(3)
arr3[0] = "張"
arr3[1] = "三"
arr3[2] = "豐"
var nArr3 = arr3.join('')
console.log(nArr3) // 張三豐

 

3、push()

• 向數組的末尾添加一個或多個元素，並返回新的數組長度。
• 改變原數組。

語法：arr.push(element1, ..., elementN)

參數： elementN (被添加到數組末尾的元素)

示例：

var arr = [1,2,3]; 
var len = arr.push('a','b','c');
console.log(arr); // [1, 2, 3, "a", "b", "c"] 
console.log(len); // 6 （返回數組新長度為6）

// 合並多個數組
var arr = [1,2,3]; 
var arr2 = ['a','b','c'];
var arr3 = ['g','w','g'];
arr.push(...arr2,...arr3);
console.log(arr); // [1, 2, 3, "a", "b", "c", "g", "w", "g"]

 

4、pop()

• 用於刪除數組的最后一個元素，把數組長度減1，並返回被刪除元素。
• 如果數組已經為空，則 pop() 不改變數組，並返回 undefined。
• 改變原數組。

語法：arr.pop() 

示例：

var arr = [1,2,3];
var getLast = arr.pop(); // 第一次 arr.pop()
console.log(arr); // [1, 2]
console.log(getLast); // 3 (arr.pop() 返回數組最后一個元素)
arr.pop(); // 第二次 arr.pop()
console.log(arr); // [1]
arr.pop(); // 第三次 arr.pop()
console.log(arr); // []
console.log(arr.pop()); //空數組時返回 undefined

 

5、shift()

• 用於把數組的第一個元素從其中刪除，並返回被移除的這個元素。
• 如果數組是空的，那么 shift() 方法將不進行任何操作，返回 undefined。
• 該方法是直接修改原數組。

語法：arr.shift()

示例：

var arr = [1,2,3];
var getFirst = arr.shift(); // 第一次 arr.shift()
console.log(arr); // [2, 3]
console.log(getFirst); // 1 (arr.shift() 返回數組第一個元素)
arr.shift(); // 第二次 arr.pop()
console.log(arr); // [3]
arr.shift(); // 第三次 arr.pop()
console.log(arr); // []
console.log(arr.shift()); // 空數組 返回undefined

 

6、unshift()

• 向數組的開頭添加一個或更多元素，並返回新的數組長度。
• 該方法是直接修改原數組。

語法：arr.unshift(element1, ..., elementN)

參數：elementN (要添加到數組開頭的元素或多個元素。)

示例：

var arr = [1,2,3,4];
arr.unshift('a');
arr.unshift('b','c'); // 注意：傳入多個參數，它們會被以塊的形式插入到對象的開始位置
arr.unshift('d');
console.log(arr); // ["d", "b", "c", "a", 1, 2, 3, 4] 注意"b"和"c"的排序，以塊的形式插入按參數傳入時的順序

// 使用 arr.shift 和 unshift 配合，反序排列數組
var arr1 = [1,2,3,4,5];
var nArr1 = [];
var len = arr1.length; // 必須先定義好len，不然在for里面每shift一次長度就會變少一個，最終導致循環次數減少

for(let i = 0;i < len;i++) {
    nArr1.unshift(arr1.shift()) // 
}
console.log(nArr1) // [5, 4, 3, 2, 1]

// 也可以用 while 循環，反序排列數組
var arr2 = ["a", "b", "c", "d" ,"e"];
var nArr2 = [];
while( (i = arr2.shift()) !== undefined ) {
    nArr2.unshift(i)
}
console.log(nArr2) // ["e", "d", "c", "b", "a"]

 

7、reverse()

• 用於顛倒數組中元素的順序。
• 該方法會直接修改原數組，而不會創建新數組。

語法：arr.reverse()

示例：

var arr = [1,2,3,4,5];
var reArr = arr.reverse();

console.log(reArr); // [5, 4, 3, 2, 1] 
console.log(arr); // [5, 4, 3, 2, 1] 原數組被改變

 

8、sort()

• 用於對數組的元素進行排序。
• 該排序直接修改原數組，不生成副本。
• 該方法接受一個可選參數，若未使用參數，將按字母順序對數組元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（如有必要），以便進行比較。
• 如果想按照其他標准進行排序，就需要提供比較函數，該函數要比較兩個值，然后返回一個用於說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b，其返回值如下：
  • 若 a 小於 b，排序后 a 應該在 b 之前，則返回一個小於 0 的值。
  • 若 a 等於 b，則返回 0。
  • 若 a 大於 b，則返回一個大於 0 的值。

語法：arr.sort([compareFunction])

參數 (可選)：compareFunction (firstEl, secondEl )

• firstEl (第一個用於比較的元素。)
• secondEl (第二個用於比較的元素。)

示例：

// 排序
var numbers = [4,2,1,5,3]; 
numbers.sort((a, b) => a - b); 
console.log(numbers); // [1, 2, 3, 4, 5]


// 根據 age 排序
var roles = [
  { name: '張三', age: 666 },
  { name: '李四', age: 999 },
  { name: '王五', age: 555 },
  { name: '趙六', age: -888 },
  { name: 'gwg' },
  { name: 'power', age: 20 }
];
roles.sort(function (a, b) {
  return (a.age - b.age)
});
console.log(roles); 
/*[
    {name: "趙六", age: -888},
    {name: "power", age: 20},
    {name: "王五", age: 555},
    {name: "張三", age: 666},
    {name: "李四", age: 999}
]*/

 

9、slice()

• 截取原數組從start到end位置（不包含它）元素組成的子數組。
• 該方法返回一個新數組，不會修改原數組。
• 若未指定end參數，那么截取尾巴直到原數組最后一個元素（包含它）。

語法：arr.slice(start [,end])

參數： 

• begin (可選)：
• 提取起始處的索引（從 0 開始），從該索引開始提取原數組元素。
• 如果該參數為負數，則表示從原數組中的倒數第幾個元素開始提取，slice(-2) 表示提取原數組中的倒數第二個元素到最后一個元素（包含最后一個元素）。
• 如果省略 begin，則 slice 從索引 0 開始。
• 如果 begin 大於原數組的長度，則會返回空數組。
• end(可選)：
• 提取終止處的索引（從 0 開始），在該索引處結束提取原數組元素。slice 會提取原數組中索引從 begin 到 end 的所有元素（包含 begin，但不包含 end）。
• slice(1,4) 會提取原數組中從第二個元素開始一直到第四個元素的所有元素 （索引為 1, 2, 3的元素）。
• 如果該參數為負數， 則它表示在原數組中的倒數第幾個元素結束抽取。 slice(-2,-1) 表示抽取了原數組中的倒數第二個元素到最后一個元素（不包含最后一個元素，也就是只有倒數第二個元素）。
• 如果 end 被省略，則 slice 會一直提取到原數組末尾。
• 如果 end 大於數組的長度，slice 也會一直提取到原數組末尾。

 

示例：

var arr = ['a','b','c','d','e','f','g','h','i'];
var cArr1 = arr.slice();
var cArr2 = arr.slice(2);
var cArr3 = arr.slice(2,4);
var cArr4 = arr.slice(-2,4);
var cArr5 = arr.slice(2,-4);
var cArr6 = arr.slice(-2,-4);

console.log(cArr1); // ["a", "b", "c", "d", "e", "f", "g", "h", "i"]
console.log(cArr2); // ["c", "d", "e", "f", "g", "h", "i"]
console.log(cArr3); // ["c", "d"]
console.log(cArr4); // []
console.log(cArr5); // ["c", "d", "e"]
console.log(cArr6); // []

// 使用 arr.slice 把類數組轉化為數組
function list() {
  return [].slice.call(arguments);
}
var listArr = list(1, 2, 3); 
console.log(listArr);// [1, 2, 3]

 

10、splice(start[, deleteCount[, item1[, item2[, ...]]]])

• 刪除從 index 處開始的hownamy個元素，並且用可選參數列表中聲明的一個或多個值來替換那些被刪除的元素。
• 該方法返回的是含有被刪除的元素組成的數組，若無被刪元素，則返回空數組。
• 若參數只有index，那么原數組將從index開始刪除直至結尾。
• 該方法直接修改原數組。

語法：arr.splice(start[, deleteCount[, item1[, item2[, ...]]]])

參數：

• start：
• 指定修改的開始位置（從0計數）。
• 如果超出了數組的長度，則從數組末尾開始添加內容；
• 如果是負值，則表示從數組末位開始的第幾位（從-1計數，這意味着-n是倒數第n個元素並且等價於array.length-n）；
• 如果負數的絕對值大於數組的長度，則表示開始位置為第0位。

• deleteCount (可選)：
• 整數，表示要移除的數組元素的個數。
• 如果 deleteCount 大於 start 之后的元素的總數，則從 start 后面的元素都將被刪除（含第 start 位）。
• 如果 deleteCount 被省略了，或者它的值大於等於array.length - start(也就是說，如果它大於或者等於start之后的所有元素的數量)，那么start之后數組的所有元素都會被刪除。
• 如果 deleteCount 是 0 或者負數，則不移除元素。這種情況下，至少應添加一個新元素。

• item1, item2, ... (可選)：
• 要添加進數組的元素,從start 位置開始。如果不指定，則 splice() 將只刪除數組元素。

示例：

var arr = [1,2,3,4,5];
// 從第3位開始，刪除0個元素，插入 'a'、'b'、'c'
arr.splice(3,0,'a','b','c');
console.log(arr) // [1, 2, 3, "a", "b", "c", 4, 5]

var arr1 = [1,2,3,4,5];
// 從第2位開始，刪除后面所有元素
arr1.splice(2); // 相當於 arr1.splice(2,arr1.length);
console.log(arr1) // [1, 2]

var arr2 = [1,2,3,4,5];
// 從第2位開始，刪除后面所有元素，再插入 'a'、'b'
arr2.splice(2,arr2.length,'a','b');
console.log(arr2) // [1, 2, "a", "b"]

var arr3 = [1,2,3,4,5];
// 從倒數第3位開始，刪除1個元素
arr3.splice(-3,1); 
console.log(arr3); // [1,2,4,5]

var arr4 = [1,2,3,4,5];
// 從倒數最后一位開始，刪除所有元素，插入 'a'、'b'
arr4.splice(-arr4.length,arr4.length,'a','b');
// 相當於出第一位開始刪除 arr4.splice(0,arr4.length,'a','b');
console.log(arr4);// ["a", "b"]

 

11、indexOf():

• 返回在數組中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。

語法：arr.indexOf(searchElement[, fromIndex])

參數： 

• searchElement：要查找的元素。

• fromIndex (可選)：開始查找的位置。如果該索引值大於或等於數組長度，意味着不會在數組里查找，返回-1。如果參數中提供的索引值是一個負值，則將其作為數組末尾的一個抵消，即-1表示從最后一個元素開始查找，-2表示從倒數第二個元素開始查找 ，以此類推。 注意：如果參數中提供的索引值是一個負值，並不改變其查找順序，查找順序仍然是從前向后查詢數組。如果抵消后的索引值仍小於0，則整個數組都將會被查詢。其默認值為0。

示例：

var array = [1, '哈哈',3,'haha', 5];
array.indexOf('哈哈');      //  1   從第一個開始找'哈哈'，找到后，返回'哈哈'索引為1
array.indexOf(7);           // -1  從第一個開始找 7，沒找到，返回 -1
array.indexOf(1, 1);        // -1  從第二個開始找 1，沒找到，返回 -1
array.indexOf(1, 0)         //  0  從第一個開始找 1，找到后，返回 1 的索引為 0
array.indexOf(5, 2);        //  4  從第三個開始找 5，找到后，返回 5 的索引為 4
array.indexOf('haha', -3);  //  3  從倒數第三個開始找'haha'，找到后，返回'haha'索引為 3
array.indexOf(1, -3);       // -1  從倒數第三個開始找 1，沒找到，返回 -1

 

12、lastIndexOf():

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

語法：arr.lastIndexOf(searchElement[, fromIndex])

參數： 

• searchElement：要查找的元素。

• fromIndex (可選)：從此位置開始逆向查找。默認為數組的長度減 1(arr.length - 1)，即整個數組都被查找。如果該值大於或等於數組的長度，則整個數組會被查找。如果為負值，將其視為從數組末尾向前的偏移。即使該值為負，數組仍然會被從后向前查找。如果該值為負時，其絕對值大於數組長度，則方法返回 -1，即數組不會被查找。

示例：

var array = [1,'哈哈',3,'haha',5];
array.lastIndexOf('哈哈');         //  1
array.lastIndexOf(7);              // -1
array.lastIndexOf(3, 4);          //  2
array.lastIndexOf(3, 3);          //  3
array.lastIndexOf('haha', -2);  //  3
array.lastIndexOf(3, -4);        // -1
array.lastIndexOf(3, -1);        //  2


// 查找所有元素
var indices = [];
var arr = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = arr.lastIndexOf(element);
while (idx != -1) {
  indices.push(idx);
  idx = (idx > 0 ? arr.lastIndexOf(element, idx - 1) : -1);
}
console.log(indices); // [4, 2, 0]

 

13、map():

• 返回一個新的Array，每個元素為調用func的結果
• map可理解為 返回的新數組的每個元素是原數組對應元素的映射，通過函數計算一一對應

語法：var new_array = arr.map(function callback(currentValue[, index[, array]]) {}[, thisArg])

參數： 

• callback( currentValue, index, array )：
• currentValue (數組中正在處理的當前元素。) 
• index (可選，數組中正在處理的當前元素的索引。)
• array (可選，方法調用的數組。)
• 在callback中，三個參數的關系 currentValue === array[index]; // true
• thisArg (可選)：執行 callback 函數時值被用作this。

示例：

// 所有元素乘2
var arr = [1,3,5,7,9];
// 傳1個參數，必須返回處理后的結果
var mArr = arr.map(x=>x*2);
console.log(mArr); // [2, 6, 10, 14, 18]


// 
var arr= [1,2,3,4,5];
var nArr = [];
// 傳3個參數，cVal-當前處理的元素，index-索引，oArr-原數組
var mArr= arr.map(function (cVal,index,oArr) {
    nArr.push(oArr[index]*10)
    var a = cVal*5;
    var b = a.toString();  
    return b
    
})
console.log(mArr); // ["5", "10", "15", "20", "25"] mArr 是cVal*5再轉字符串
console.log(nArr); // [10, 20, 30, 40, 50] nArr 是oArr[index]*10
console.log(arr); // [1, 2, 3, 4, 5] 原數組不變

 

14、reduce()：

• reduce方法有兩個參數，第一個參數是一個callback，用於針對數組項的操作；
• 第二個參數則是傳入的初始值，這個初始值用於單個數組項的操作。
• reduce方法返回值並不是數組，而是形如初始值的經過疊加處理后的操作。

 

語法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

參數： 

• callback：執行數組中每個值 (如果沒有提供 initialValue則第一個值除外)的函數。
• accumulator ：累計器累計回調的返回值; 它是上一次調用回調時返回的累積值，或initialValue。
• currentValue （可選）：數組中正在處理的元素。
• index （可選）：數組中正在處理的當前元素的索引。 如果提供了initialValue，則起始索引號為0，否則從索引1起始。
• array （可選）：調用reduce()的數組。

• initialValue （可選）：啟動初始值
• 作為第一次調用 callback函數時的第一個參數的值。
• 如果沒有提供初始值，則將使用數組中的第一個元素。
• 在沒有初始值的空數組上調用 reduce 將報錯。

示例：

// 求和
var total = [ 0, 1, 2, 3 ].reduce(
  ( acc, cur ) => acc + cur,
  0
);
console.log(total); // 6


// 累加對象數組里的值
var initialValue = 0;
var sum = [{num: 1}, {num:2}, {num:3}].reduce(
    (accumulator, currentValue) => accumulator + currentValue.num
    ,initialValue
);

console.log(sum); // 6


// 計算數組中每個元素出現的次數
var skills = ['js', 'css', 'html', 'css', 'js'];

var countedSkills = skills.reduce(function (allSkills, skill) { 
  if (skill in allSkills) {
    allSkills[skill]++;
  }
  else {
    allSkills[skill] = 1;
  }
  return allSkills;
}, {});
console.log(countedSkills); // {js: 2, css: 2, html: 1}

// 按屬性對object分類
var people = [
  { name: '張三', age: 21 },
  { name: '李四', age: 20 },
  { name: '王五', 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');
console.log(groupedPeople); 
/*
{ 
  20: [
    { name: '李四', age: 20 }, 
    { name: '王五', age: 20 }
  ], 
  21: [{ name: '張三', age: 21 }] 
}
*/

// 數組去重 
let arr = [1,2,1,'g',2,3,5,4,5,3,4,'w',4,'g',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, "g", "w"]

 

15、reduceRight()：

• 接受一個函數作為累加器（accumulator）和數組的每個值（從右到左）將其減少為單個值。
• 和 reduce() 基本一樣，方向相反。
• 如果數組為空，且沒有提供 initialValue 參數，則會拋出一個 TypeError 錯誤。

 

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

參數： 

• callback：一個回調函數，用於操作數組中的每個元素，它可接受四個參數：
• accumulator ：累加器，上一次調用回調函數時，回調函數返回的值。首次調用回調函數時，如果 initialValue 存在，累加器即為 initialValue，否則須為數組中的最后一個元素。
• currentValue （可選）：當前被處理的元素。
• index （可選）：數組中當前被處理的元素的索引。
• array （可選）：調用 reduceRight() 的數組。

• initialValue （可選）：啟動初始值
• 首次調用 callback 函數時，累加器 accumulator 的值。如果未提供該初始值，則將使用數組中的最后一個元素，並跳過該元素。如果不給出初始值，則需保證數組不為空。
• 否則，在空數組上調用 reduce 或 reduceRight 且未提供初始值（例如 [].reduce( (acc, cur, idx, arr) => {} ) ）的話，會導致類型錯誤 TypeError: reduce of empty array with no initial value。

示例：

// 求和
var sum = [0, 1, 2, 3].reduceRight(function(a, b) {
  return a + b;
}); // 6 

// 數組扁平化
var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
    return a.concat(b);
}, []); // flattened is [4, 5, 2, 3, 0, 1]

// 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"

 

16、filter():

• 為數組中的每個元素調用一次 callback 函數，並利用所有使得 callback 返回 true 或等價於 true 的值的元素創建一個新數組。
• 遍歷的元素范圍在第一次調用 callback 之前就已經確定了。在調用 filter 之后被添加到數組中的元素不會被 filter 遍歷到。如果已經存在的元素被改變了，則他們傳入 callback 的值是 filter 遍歷到它們那一刻的值。被刪除或從來未被賦值的元素不會被遍歷到。
• 返回一個新的、由通過測試的元素組成的數組，如果沒有任何數組元素通過測試，則返回空數組。
• 不會改變原數組，它返回過濾后的新數組。

 

語法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

參數： 

• callback：用來測試數組的每個元素的函數。返回 true 表示該元素通過測試，保留該元素，false 則不保留。它接受以下三個參數：
• element ：數組中當前正在處理的元素。
• index （可選）：正在處理的元素在數組中的索引。
• array （可選）：調用了 filter 的數組本身。

• thisArg (可選)：
• 執行 callback 時，用於 this 的值。

示例：

 

// 篩選對象屬性符合條件的條目
var arr = [
  { num: 15 },
  { num: -1 },
  { num: 0 },
  { num: 5 },
  { num: 66.6 },
  { },
  { num: null },
  { num: NaN },
  { num: 'undefined' }
];
function isBigEnough(item) {
  return item.num >= 10;
}
var filtered = arr.filter(isBigEnough);
console.log(filtered) // [{num: 15},{num: 66.6}]

// 在數組中搜索符合的條目
var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

 

17、some():

• 遍歷的元素的范圍在第一次調用 callback. 前就已經確定了。在調用 some() 后被添加到數組中的值不會被 callback 訪問到。如果數組中存在且還未被訪問到的元素被 callback 改變了，則其傳遞給 callback 的值是 some() 訪問到它那一刻的值。已經被刪除的元素不會被訪問到。
• 為數組中的每一個元素執行一次 callback 函數，直到找到一個使得 callback 返回一個“真值”（即可轉換為布爾值 true 的值）。如果找到了這樣一個值，some() 將會立即返回 true。否則，some() 返回 false。
• 返回一個boolean，判斷是否有元素是否符合func條件。
• 不會改變原數組。

 

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

參數： 

• callback：用來測試每個元素的函數，接受三個參數：
• element ：數組中正在處理的元素。
• index （可選）：數組中正在處理的元素的索引值。
• array （可選）：調用some() 的數組。

• thisArg (可選)：
• 執行 callback 時，時使用的 this 的值。

示例：

// 判斷數組中是否有大於10的元素
[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true

 

18、every():

• 方法為數組中的每個元素執行一次 callback 函數，直到它找到一個會使 callback 返回 false 的元素。如果發現了一個這樣的元素，every 方法將會立即返回 false。否則，callback 為每一個元素返回 true， 
• 返回一個boolean，判斷每個元素是否符合func條件。
• 當所有的元素都符合條件才會返回true。
• 不會改變原數組。

語法：arr.every(callback[, thisArg])

參數： 

• callback：用來測試每個元素的函數，接受三個參數：
• element ：數組中正在處理的元素。
• index （可選）：數組中正在處理的元素的索引值。
• array （可選）：調用every() 的數組。

• thisArg (可選)：
• 執行 callback 時，時使用的 this 的值。

示例：

// 是否數組中所有元素都大於10
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

 

19、forEach():

• 方法按升序為數組中含有效值的每一項執行一次 callback 函數。
• 如果 thisArg 參數有值，則每次 callback 函數被調用時，this 都會指向 thisArg 參數。如果省略了 thisArg 參數，或者其值為 null 或 undefined，this 則指向全局對象。
• 如果使用箭頭函數表達式來傳入函數參數， thisArg 參數會被忽略，因為箭頭函數在詞法上綁定了 this 值。
• 除了拋出異常以外，沒有辦法中止或跳出 forEach() 循環。如果你需要中止或跳出循環，forEach() 方法不是應當使用的工具。
• 沒有返回值，只是針對每個元素調用func。
• 不會改變原數組。

 

語法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

參數： 

• callback：用來測試每個元素的函數，接受三個參數：
• currentValue：數組中正在處理的元素。
• index （可選）：數組中正在處理的元素的索引值。
• array （可選）：調用forEach() 的數組。

• thisArg (可選)：
• 執行 callback 時，時使用的 this 的值。

示例：

// 不對未初始化的值進行任何操作（稀疏數組）
var arr = [1,{},3,null,5,,7];
arr.forEach(function(v,i,a){
  console.log("處理第"+i+"個元素："+v);
});
// 處理第0個元素：1
// 處理第1個元素：[object Object]
// 處理第2個元素：3
// 處理第3個元素：null
// 處理第4個元素：5
// 處理第6個元素：7
// 第5個元素未初始化而被跳過

// 扁平化數組
function flatten(arr) {
  var result = [];
  arr.forEach((i) => {
    if (Array.isArray(i))
      result.push(...flatten(i));
    else
      result.push(i);
  })
  return result;
}

var nArr = [1,2,[3,33,[3.1,[3.21,3.22]]],4,[5,55],-6];
flatten(nArr); // [1, 2, 3, 33, 3.1, 3.21, 3.22, 4, 5, 55, -6]

 

20、copyWithin():

• 參數 target、start 和 end 必須為整數。
• 如果 start 為負，則其指定的索引位置等同於 length+start，length 為數組的長度，end 也是如此。
• copyWithin 方法不要求其 this 值必須是一個數組對象；除此之外，copyWithin 是一個可變方法，它可以改變 this 對象本身，並且返回它，而不僅僅是它的拷貝。
• copyWithin 函數被設計為通用式的，其不要求其 this 值必須是一個數組對象。
• copyWithin 是一個可變方法，它不會改變 this 的長度 length，但是會改變 this 本身的內容，且需要時會創建新的屬性。
• 返回改變后的數組。

語法：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: 1, 3: 1, length: 5}

 

21、entries():

• 返回一個新的Array Iterator對象，該對象包含數組中每個索引的鍵/值對。
• iterator.next()返回一個對象，對於有元素的數組，

語法：arr.entries()

示例：

var arr = ['a', 'b', 'c'];
var iterator1 = arr.entries();

console.log(iterator1.next()); // {value:[0, "a"], done: false}
console.log(iterator1.next().value); // [1, "b"]
console.log(iterator1.next().value); // [2, "c"]
console.log(iterator1.next().done); // true

 

22、fill():

• 用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引。
• 如果 start 是個負數, 則開始索引會被自動計算成為 length+start, 其中 length 是 this 對象的 length 屬性值。如果 end 是個負數, 則結束索引會被自動計算成為 length+end。
• fill 方法故意被設計成通用方法, 該方法不要求 this 是數組對象。
• 返回修改后的數組。

語法：arr.fill(value[, start[, end]])

參數： 

• value：用來填充數組元素的值。
• start （可選）：起始索引，默認值為0。
• end （可選） ：終止索引，默認值為 this.length。

示例：

[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({}) // [{}, {}, {}];
// 需要注意如果fill的參數為引用類型，會導致都執行都一個引用類型
// 如 arr[0] === arr[1] 為true
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

 

23、find():

• 返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined。
• find方法對數組中的每一項元素執行一次 callback 函數，直至有一個 callback 返回 true。當找到了這樣一個元素后，該方法會立即返回這個元素的值，否則返回 undefined。
• callback 函數會為數組中的每個索引調用即從 0 到 length - 1，而不僅僅是那些被賦值的索引，這意味着對於稀疏數組來說，該方法的效率要低於那些只遍歷有值的索引的方法。

語法：arr.find(callback[, thisArg])

參數： 

• callback：在數組每一項上執行的函數，接收 3 個參數：
• element ：當前遍歷到的元素。
• index （可選）：當前遍歷到的索引。
• array （可選）：數組本身。

• thisArg (可選)：
• 執行回調時用作this 的對象。

示例：

var arr = [
    {name:'張三',age:20},
    {name:'李四',age:16},
    {name:'王五',age:16},
]

arr.find(function (item) {
    return item.age === 16 // 返回第一個符合age 為16的項
}) // {name: "李四", age: 16}

 

24、findIndex():

• findIndex方法對數組中的每個數組索引0..length-1（包括）執行一次callback函數，直到找到一個callback函數返回真實值（強制為true）的值。如果找到這樣的元素，findIndex會立即返回該元素的索引。
• 如果回調從不返回真值，或者數組的length為0，則findIndex返回-1。
• 與某些其他數組方法（如Array#some）不同，在稀疏數組中，即使對於數組中不存在的條目的索引也會調用回調函數。
• findIndex不會修改所調用的數組。

語法：arr.findIndex(callback[, thisArg])

參數： 

• callback：在數組每一項上執行的函數，接收 3 個參數：
• element ：當前遍歷到的元素。
• index （可選）：當前遍歷到的索引。
• array （可選）：數組本身。

• thisArg (可選)：
• 執行回調時用作this 的對象。

示例：

var arr = [
    {name:'張三',age:20},
    {name:'李四',age:16},
    {name:'王五',age:16},
]

arr.findIndex(function (item) {
    return item.age === 16 // 返回第一個符合age 為16的項的索引
}) // 1

 

25、flat():

• 按照一個可指定的深度遞歸遍歷數組，並將所有元素與遍歷到的子數組中的元素合並為一個新數組返回。
• 會返回一個包含將數組與子數組中所有元素的新數組。

語法：var newArray = arr.flat([depth])

參數： depth（可選）：指定要提取嵌套數組的結構深度，默認值為 1。

示例：

// 數組扁平化
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]

var arr5 = [1, 2, , 4, 5];
arr5.flat();// [1, 2, 4, 5]

 

26、flatMap():

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

語法：var new_array = arr.flatMap(callback(currentValue[, index[, array]]) {}[, thisArg])

參數： 

• callback：可以生成一個新數組中的元素的函數，可以傳入三個參數：
• currentValue：當前正在數組中處理的元素。
• index （可選）：數組中正在處理的當前元素的索引。
• array （可選）：被調用的 map 數組。

• thisArg (可選)：
• 執行 callback 函數時 使用的this 值。

示例：

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

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

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

 

27、includes():

• 用來判斷一個數組是否包含一個指定的值，根據情況，如果包含則返回 true，否則返回false。

語法：arr.includes(valueToFind[, fromIndex])

參數： 

• valueToFind：需要查找的元素值。

• fromIndex (可選)：從fromIndex 索引處開始查找 valueToFind。如果為負值，則按升序從 array.length + fromIndex 的索引開始搜 （即使從末尾開始往前跳 fromIndex 的絕對值個索引，然后往后搜尋）。默認為 0。

示例：

[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

// fromIndex 大於等於數組長度
var arr = ['a', 'b', 'c'];
arr.includes('c', 3);   // false
arr.includes('c', 100); // false

// 如果 fromIndex 為負值，計算出的索引將作為開始搜索searchElement的位置。
//如果計算出的索引小於 0，則整個數組都會被搜索。
var arr = ['a', 'b', 'c'];
arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true
arr.includes('a', -2); // false

// 方法有意設計為通用方法。它不要求this值是數組對象，所以它可以被用於其他類型的對象 (比如類數組對象)。

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

 

 

 

JavaScript 中的三大對象 (本地對象、內置對象、 宿主對象)

本地對象

• Object 對象屬性和方法
• String 對象屬性和方法
• Array 對象屬性和方法
• Date 對象屬性和方法
• Number 對象屬性和方法
• RegExp 對象屬性和方法
• Function 對象屬性和方法
• Boolean 對象屬性和方法
• Error 對象屬性和方法

 

內置對象

• Global 對象屬性和方法
• Math 對象屬性和方法
• JSON 對象屬性和方法

 

宿主對象

• DOM 對象屬性和方法
• BOM 對象屬性和方法