MDN

學(xué)習(xí)JS的時候一定要善用MDN查API

假如我們想要查全局函數(shù)Array, 我們可以在google中輸入'array mdn'

數(shù)組

什么是數(shù)組

看下圖, 數(shù)組本質(zhì)上還是一個對象, 只不過數(shù)組有兩個顯著的特征

1. 數(shù)組的__proto__指向Array構(gòu)造函數(shù), 繼承了很多數(shù)組特有的方法
2. 數(shù)組的length動態(tài)變化, 數(shù)組會隨著元素的增加實(shí)時改變length

除了這兩個顯著的特點(diǎn), 數(shù)組跟對象差別不大

image.png

使用Array()直接生成數(shù)組

給Array()一個數(shù)字作為參數(shù)時, 返回的是一個長度為該數(shù)字的空數(shù)組

let arr = Array(3)
a.length //3
a // [undefined, undefined, undefined]

給Array()一個以上數(shù)字作為參數(shù)時, 返回的是以這些數(shù)組組成的數(shù)組

let arr = Array(2,3,5,4)
a.length //4
a //[2,3,5,4]

對于對象,聲明時時加不加new沒有影響, 所以聲明數(shù)組時加不加new不影響

let a = Array(2,3)
let b = new Array(2,3)

聲明的數(shù)組a和b沒有任何區(qū)別

但是基本類型加不加new是有區(qū)別的, 加new返回的是對象

let a = Number('123') // number
let b = new Number('123') //object

數(shù)組常用API

forEach

forEach(callback) 方法對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)。

參數(shù)
callback
為數(shù)組中每個元素執(zhí)行的函數(shù)，該函數(shù)接收三個參數(shù)：

• currentValue(當(dāng)前值)
  數(shù)組中正在處理的當(dāng)前元素。
• index(索引)
  數(shù)組中正在處理的當(dāng)前元素的索引。
• array
  forEach()方法正在操作的數(shù)組。

thisArg(可選)
可選參數(shù)。當(dāng)執(zhí)行回調(diào) 函數(shù)時用作this的值(參考對象)。

返回值
undefined

示例

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}

// 注意索引2被跳過了，因?yàn)樵跀?shù)組的這個位置沒有項
[2, 5, ,9].forEach(logArrayElements);

// a[0] = 2
// a[1] = 5
// a[3] = 9

[2, 5,"" ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 
// a[3] = 9

[2, 5, undefined ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9


let xxx;
// undefined

[2, 5, xxx ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9

我們來實(shí)現(xiàn)一個forEach

let arr = [1,2,3,4]
arr.forEach = function(fn) {
  for(let i=0; i<this.length; i++) {
    fn(this[i], i)
  }
}

map

map 方法跟forEach類似, 最大的區(qū)別就是map會返回一個調(diào)用過函數(shù)的數(shù)組

map()方法創(chuàng)建一個新數(shù)組，其結(jié)果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果。

語法

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

參數(shù)
callback
為數(shù)組中每個元素執(zhí)行的函數(shù)，該函數(shù)接收三個參數(shù)：

• currentValue(當(dāng)前值)
  數(shù)組中正在處理的當(dāng)前元素。
• index(索引)
  數(shù)組中正在處理的當(dāng)前元素的索引。
• array
  forEach()方法正在操作的數(shù)組。

thisArg(可選)
可選參數(shù)。當(dāng)執(zhí)行回調(diào) 函數(shù)時用作this的值(參考對象)。

返回值
一個新數(shù)組，每個元素都是回調(diào)函數(shù)的結(jié)果

示例

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值為[1, 2, 3], numbers的值仍為[1, 4, 9]

filter

filter()方法創(chuàng)建一個新數(shù)組, 其包含通過所提供函數(shù)實(shí)現(xiàn)的測試的所有元素。

語法

let new_array = arr.filter(callback[, thisArg])

參數(shù)
callback
用來測試數(shù)組的每個元素的函數(shù)。調(diào)用時使用參數(shù) (element, index, array)。
返回true表示保留該元素（通過測試），false則不保留。
thisArg
可選。執(zhí)行 callback 時的用于 this 的值。

返回值
一個新的通過測試的元素的集合的數(shù)組

示例
刪選過濾掉所有的小值

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

reduce

reduce()方法對累加器和數(shù)組中的每個元素（從左到右）應(yīng)用一個函數(shù)，將其減少為單個值。

語法

arr.reduce(callback[, initialValue])

參數(shù)
callback
執(zhí)行數(shù)組中每個值的函數(shù)，包含四個參數(shù)：

• accumulator
  累加器累加回調(diào)的返回值; 它是上一次調(diào)用回調(diào)時返回的累積值，或initialValue（如下所示）。
• currentValue
  數(shù)組中正在處理的元素。
• currentIndex(可選)
  數(shù)組中正在處理的當(dāng)前元素的索引。 如果提供了initialValue，則索引號為0，否則為索引為1。
• array(可選)
  調(diào)用reduce的數(shù)組

initialValue(可選)
用作第一個調(diào)用 callback的第一個參數(shù)的值。 如果沒有提供初始值，則將使用數(shù)組中的第一個元素。 在沒有初始值的空數(shù)組上調(diào)用 reduce 將報錯。

返回值
函數(shù)累計處理的結(jié)果

示例
reduce如何運(yùn)行

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
  return accumulator + currentValue
})

callback 被調(diào)用四次，每次調(diào)用的參數(shù)和返回值如下表：

sort

sort(compareFunction) 對數(shù)組自身排序, 接收一個函數(shù)

參數(shù)
compareFunction
可選。用來指定按某種順序進(jìn)行排列的函數(shù)。如果省略，元素按照轉(zhuǎn)換為的字符串的各個字符的Unicode位點(diǎn)進(jìn)行排序。

• 如果compareFunction(a, b)小于 0 ，那么 a 會被排列到 b 之前；
• 如果compareFunction(a, b)等于 0 ， a 和 b 的相對位置不變。備注： ECMAScript 標(biāo)準(zhǔn)并不保證這一行為，而且也不是所有瀏覽器都會遵守（例如 Mozilla 在 2003 年之前的版本）；
• 如果compareFunction(a, b)大于 0 ， b 會被排列到 a 之前。
• compareFunction(a, b)必須總是對相同的輸入返回相同的比較結(jié)果，否則排序的結(jié)果將是不確定的。

返回值
返回排序后的數(shù)組。原數(shù)組已經(jīng)被排序后的數(shù)組代替。

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

// [1, 2, 3, 4, 5]

join

join('separator')方法將一個數(shù)組（或一個類數(shù)組對象）的所有元素連接成一個字符串并返回這個字符串。不會改變數(shù)組！

參數(shù)
separator

• 指定一個字符串來分隔數(shù)組的每個元素。
• 如果需要(separator)，將分隔符轉(zhuǎn)換為字符串。
• 如果省略()，數(shù)組元素用逗號分隔。默認(rèn)為 ","。
• 如果separator是空字符串("")，則所有元素之間都沒有任何字符。

返回值
一個所有數(shù)組元素連接的字符串。如果 arr.length 為0，則返回空字符串

示例

let a = ['Wind', 'Rain', 'Fire']
let myVar1 = a.join()      // myVar1的值變?yōu)?Wind,Rain,Fire"
let myVar2 = a.join(', ')  // myVar2的值變?yōu)?Wind, Rain, Fire"
let myVar3 = a.join(' + ') // myVar3的值變?yōu)?Wind + Rain + Fire"
let myVar4 = a.join('')    // myVar4的值變?yōu)?WindRainFire"

concat

concat()方法用于合并兩個或多個數(shù)組。此方法不會更改現(xiàn)有數(shù)組，而是返回一個新數(shù)組。

語法

let new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

參數(shù)
valueN
將數(shù)組和/或值連接成新數(shù)組。

返回值
新的 Array 實(shí)例。

示例

let alpha = ['a', 'b', 'c'];
let numeric = [1, 2, 3];

alpha.concat(numeric);
// result in ['a', 'b', 'c', 1, 2, 3]