一、定義

數組（array）是按次序排列的一組值。每個值的位置都有編號（從0開始）。整個數組用方括號表示，數組的值用'，'分割；數組的數據可以是任何類型。

本質上，數組屬于一種特殊的對象，對應的鍵名也是字符串"0", "1", "2"。。。。

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

二、獲取數組值

只能通過arr[0]的方式來獲取數組值。
因為單獨的數值不能作為標識符，arr.0的寫法不合法的。

var arr = [3, 4, 5, 6] console.log(arr[3]) //6 console.log(arr[4]) //undefined

三、數組的基礎操作

1、length屬性

• 1)可以直接設置length長度，沒有具體數值的數組值，會以空位填充

• 2)人為設置length小于當前數組長度，超過length長度的數組的成員會被刪除
  清空數組的方式，設置arr.length =0

var arr = [ 'a', 'b', 'c' ]; arr.length // 3arr.length = 2; arr // ["a", "b"]

2、in 運算符

1） 運算符in用于檢查某個鍵名是否存在，適用于對象，也適用于數組。

var arr = [ 'a', 'b', 'c' ]; 2 in arr // true '2' in arr // true 4 in arr // false

2） 如果數組的某個位置是空位，in運算符返回false

var arr = []; arr[100] = 'a';100 in arr // true 1 in arr // false

3、push （在數組最后再添加一個元素）

arr.push('jirengu') //再數組最后添加一個元素 console.log(arr) // [3, 4, 5, 6, 'hello', 'jirengu']

4、pop (刪除數組最后一位并返回數值)

var value = arr.pop() //把數組最后一位彈出來，返回 console.log(value) //'jirengu'

5、unshift (在數組第一位插入一個數值)

arr.unshift('ruoyu') //在數組第一位新增 console.log(arr) //['ruoyu', 3, 4, 5, 6, 'hello']

6、shift(刪除數組第一位，并返回被刪除值)

var value2 = arr.shift() //把數組第一位拿出來返回，數組發生變化 console.log(value2) // 'ruoyu'

7、splice(替換數組的一部分，并把替換內容作為新數組返回)

var arr2 = arr.splice(1, 2)
splice的第一個參數：截斷開始的下標；splice的第二個參數：截斷長度。之后的參數為替換的內容。原數組會會變化，截取的部分自動為一個數組返回。
用途一：截斷數組

arr= [3, 4, 5, 6, 'hello']var arr2 = arr.splice(1, 2) //從下標為1的元素開始，拿出來2個元素作為一個數組返回，原數組發生改變 console.log(arr) // [3, 6, 'hello'] console.log(arr2) // [4, 5]

用途二：替換數組內容

arr= [3, 6, 'hello'] arr.splice(1, 0, 8,9) //從下標為1的位置（元素6）開始，刪除0個，新增兩個元素(在6前面新增8,9) console.log(arr) //[3, 8, 9, 6, 'hello']

7、slice(截取數組)

slice的第一個參數：開始截斷的下標；slice的第二個參數：結束截斷數組的下標（不包括這個數）。原數組不會變化

arr=[3, 8, 9, 6, 'hello'] var arr3 = arr.slice(2,3) //從 arr 下標為2開始，到下標為3結束(不包括3)，做為新數組，原數組不變 console.log(arr3) // [9] console.log(arr) //[3, 8, 9, 6, 'hello']

8、join('-')(用某個符號連接數組所有的值，生成字符串)

原數組不變

arr=[3, 8, 9, 6, 'hello']var str = arr.join('-') console.log(str) // "3-8-9-6-hello" console.log(arr.join(',')); //"3,8,9,6,hello"

9、arr.concat(array) (連接兩個數組)

concat方法用于拼接數組，a.concat(b)返回一個a和b共同組成的新數組。
不會修改任何一個原始數組

var a = [1,2,3,4,5]; var b = [6,7,8,9]; console.log(a.concat(b));//[1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(a); //[1, 2, 3, 4, 5] console.log(b); //[6, 7, 8, 9]

10、reverse()數組逆序

用于將數組逆序，它會修改原數組

var a = [1,2,3,4,5]; a.reverse(); console.log(a); //[5, 4, 3, 2, 1]

11、sort（對數組進行排序）

1）沒有參數，默認根據字符串Unicode碼來排序。

var a=[5,4,3,2,1] a.sort() console.log(a) //[1, 2, 3, 4, 5] var a=[7,8,9,10,11] a.sort() console.log(a) //[10, 11, 7, 8, 9]

2）可以自定義一個排序方式，如arr.sort([compareFunction])，比較規則如下

• 如果 compareFunction(a, b) 小于 0 ，那么 a 會被排列到 b 之前；
• 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相對位置不變
• 如果 compareFunction(a, b) 大于 0 ， b 會被排列到 a 之前

或者是按照true和false來判斷，true的話就會調換位置。
3）原數組會改變

var a = [7,8,9,10,11]a.sort(function(v1,v2){return v1-v2})console.log(a) //[7, 8, 9, 10, 11]var users = [{name: 'aaa',age: 21},{name: 'baa',age: 18},{name: 'abc',age: 24}]// 按age 從小到大排序var sortByAge = users.sort(function(v1, v2){return v1.age > v2.age})// 按name從大到小排序var sortByName = users.sort(function(v1, v2){return v1.name > v2.name})

四：ES5 數組拓展(注意駝峰寫法)

1、Array.isArray(arr)判斷是不是數組

這是Array對象的一個靜態函數，用來判斷一個對象是不是數組

var a = []; var b = new Date(); console.log(Array.isArray(a)); //true console.log(Array.isArray(b)); //false

2、indexOf(element)/ lastIndexOf(element)尋找數組是否有對應的內容

這兩個方法用于查找數組內指定元素位置，查找到第一個后返回其索引，沒有查找到返回-1，indexOf從頭至尾搜索，lastIndexOf反向搜索。

var arr =[2,3,5,7,3,9] arr.indexOf(3) //1

3、forEach(function(element,index,arry))遍歷數組，對數組的每個元素執行一次提供的函數

1）原理：遍歷數組，參數為一個回調callback函數，回調函數有三個參數：

• element：數組當前項的值
• index：數組當前項的索引（可選）
• array：數組對象本身（可選）
• thisArg：當執行回調 函數時用作this的值。如果給forEach傳遞了thisArg參數，當調用時，它將被傳給callback函數，作為它的this值。否則，將會傳入 undefined 作為它的this值（可選，愛用不用）

2）注意：

• 數組內已刪除或者未初始化的項不會遍歷到
• 返回值是：undefined，原數組會改變，這個和map和reduce不一樣

3）舉個例子

var arr=[1,2,5,6,8] arr.forEach(function(e,i,arr){ arr[i]=e*e }) console.log(arr)//?[1, 4, 25, 36, 64]

4、map(function(element,index,arry))遍歷數組，對數組的每個值執行函數操作，并把結果返回新數組

1）原理：遍歷數組，對函數的每個值執行回調函數，返回值組成一個新數組。原數組不變
2）函數參數：

• element：數組當前項的值
• index：數組當前項的索引（可選）
• array：數組對象本身（可選）
• thisArg：執行 callback 函數時使用的this 值（可選）

3）返回值：
一個新數組，每個元素都是回調函數的結果

4）舉個例子

var obj2 =[{ key:1,value:2},{ key:4,value:8},{ key:5,value:78}] var array= obj2.map(function(obj){ var arr2=[]arr2[obj.key] =obj.value return arr2})})

5、filter(function(element,index,arry))遍歷數組，對數組每一個元素執行callback函數，并將滿足條件的值返回新數組

1）原理：遍歷數組，對數組每一個元素執行callback函數，并將滿足條件的值返回新數組。原數組不變
2）函數參數：

• element：數組當前項的值
• index：數組當前項的索引（可選）
• array：數組對象本身（可選）
• thisArg：執行 callback 函數時使用的this 值（可選）

3）返回值：
一個新的通過測試的元素的集合的數組，如果沒有通過測試則返回空數組

4）舉個例子

var a =[2,3,4,5,7,9,6] console.log(a.filter(function(e){ return e%2==0 })) //[2, 4, 6]

參考文獻

6、reduce(function(v1, v2), value)遍歷數組，對數組的值依次兩兩執行回調函數，將兩個數組值合成一個值，reduce從索引最小值開始

1）原理：對累計器和數組中的每個元素（從左到右）應用一個函數，將其簡化為單個值。
2）函數參數：

• currentValue：數組中正在處理的元素
• index：數組當前項的索引（可選）
• array：數組對象本身（可選）
• Accumulator (累計器)：累計器累計回調的返回值; 它是上一次調用回調時返回的累積值，或initialValue（初始值）
• initialValue（初始值）（可選）作為第一次調用 callback函數時的第一個參數的值。 如果沒有提供初始值，則將使用數組中的第一個元素。在沒有初始值的空數組上調用 reduce 將報錯

3）返回值：
函數累計處理的結果

4）舉個例子

var a = [1, 2, 3, 4, 5, 6] var sumvalue= a.reduce(function(v1,v2){ return v1+v2})

將二維數組轉化為一維

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {return a.concat(b);},[] ); // flattened is [0, 1, 2, 3, 4, 5]

mdn文檔
5)要點
回調函數第一次執行時，accumulator 和currentValue的取值有兩種情況：如果調用reduce()時提供了initialValue，accumulator取值為initialValue，currentValue取數組中的第一個值；如果沒有提供 initialValue，那么accumulator取數組中的第一個值，currentValue取數組中的第二個值

7、every(function(element, index, array))測試數組的所有元素是否都通過了指定函數的測試

1）原理：
every 方法為數組中的每個元素執行一次 callback 函數，直到它找到一個使 callback 返回 false（表示可轉換為布爾值 false 的值）的元素。如果發現了一個這樣的元素，every 方法將會立即返回 false。否則，callback 為每一個元素返回 true，every 就會返回 true
2）函數參數：

• element：數組當前項的值
• index：數組當前項的索引（可選）
• array：數組對象本身（可選）
• thisArg：執行 callback 函數時使用的this 值（可選）

3）返回值：
true/false

4）舉個例子

var a = [1, 2, 3, 4, 5, 6]console.log(a.every(function(e){ return e>0})) //true

5）every不會改變原數組 mdn

8、some(function(element, index, array))測試數組中的某些元素是否通過由提供的函數實現的測試

1）原理：
some 為數組中的每一個元素執行一次 callback 函數，直到找到一個使得 callback 返回一個“真值”（即可轉換為布爾值 true 的值）。如果找到了這樣一個值，some 將會立即返回 true。否則，some 返回 false
2）函數參數：

• element：數組當前項的值
• index：數組當前項的索引
• array：數組對象本身

3）返回值：
true/false

4）舉個例子

var a = [1, 2, 3, 4, 5, 6]console.log(a.some(function(e){ return e>5})) //true

5）some不會改變原數組

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的js数组笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。