JavaScrip-->數組

數組

在程序語言中數組的重要性不言而喻，JavaScript中數組也是最常使用的對象之一，數組是值的有序集合，由于弱類型的原因，JavaScript中數組十分靈活、強大，不像是Java等強類型高級語言數組只能存放同一類型或其子類型元素，JavaScript在同一個數組中可以存放多種類型的元素，而且長度也是可以動態調整的，可以隨著數據增加或減少自動對數組長度做更改。

創建數組

在JavaScript多種方式創建數組

構造函數

Array作為構造函數，行為很不一致。因此，不建議使用它生成新數組

// 無參數時，返回一個空數組
new Array() // []

// 單個正整數參數，表示返回的新數組的長度
new Array(1) // [ ,]
new Array(2) // [ , ,]

// 非正整數的數值作為參數，會報錯
new Array(3.2) // RangeError: Invalid array length
new Array(-3) // RangeError: Invalid array length

// 單個非正整數參數（比如字符串、布爾值、對象等），
// 則該參數是返回的新數組的成員
new Array('abc') // ['abc']
new Array([1]) // [Array[1]]

// 多參數時，所有參數都是返回的新數組的成員
new Array(1, 2) // [1, 2]
new Array('a', 'b', 'c') // ['a', 'b', 'c']

字面量

  1. 使用方括號，創建空數組，等同于調用無參構造函數
var a4 = [];
  1. 使用中括號，并傳入初始化數據，等同于調用帶有初始化數據的構造函數
ar a5 = [10];

數組的索引與長度

var arr  = [1,2,3,4];
console.log(arr.length);//4
console.log(arr[0]);//1
console.log(arr[1]);//2

元素添加/刪除

刪除

pop()

pop方法用于刪除數組的最后一個元素，并返回該元素。注意，該方法會改變原數組。

var a = ['a', 'b', 'c'];

a.pop() // 'c'
a // ['a', 'b']

對空數組使用pop方法，不會報錯，而是返回undefined。

[].pop() // undefined

shift()

shift方法用于刪除數組的第一個元素，并返回該元素。注意，該方法會改變原數組。

var a = ['a', 'b', 'c'];

a.shift() // 'a'
a // ['b', 'c']

shift方法可以遍歷并清空一個數組。

var list = [1, 2, 3, 4, 5, 6];
var item;

while (item = list.shift()) {
  console.log(item);
}

list // []

添加

push()

push方法用于在數組的末端添加一個或多個元素，并返回添加新元素后的數組長度。注意，該方法會改變原數組。

var a = [];

a.push(1) // 1
a.push('a') // 2
a.push(true, {}) // 4
a // [1, 'a', true, {}]

unshift()

unshift方法用于在數組的第一個位置添加元素，并返回添加新元素后的數組長度。注意，該方法會改變原數組。

var a = ['a', 'b', 'c'];

a.unshift('x'); // 4
a // ['x', 'a', 'b', 'c']

unshift方法可以在數組頭部添加多個元素

var arr = [ 'c', 'd' ];
arr.unshift('a', 'b') // 4
arr // [ 'a', 'b', 'c', 'd' ]

終極神器 splice

JavaScript提供了一個splice方法用于一次性解決數組添加、刪除（這兩種方法一結合就可以達到替換效果），方法有三個參數

  1. 開始索引

  2. 刪除元素的位移

  3. 插入的新元素，當然也可以寫多個

splice方法返回一個由刪除元素組成的新數組，沒有刪除則返回空數組

刪除

指定前兩個參數，可以使用splice刪除數組元素，同樣會帶來索引調整及length調整

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

插入與替換

只要方法第二個參數，也就是刪除動作執行的次數設為0，第三個參數及以后填寫要插入內容就splice就能執行插入操作，

而如果第二個參數不為0則變成了先在該位置刪除再插入，也就是替換效果

var a = [1, 2, 3, 4, 5];
a.splice(1,0,9,99,999);
console.log(a.length); //8
console.log(a);//[1, 9, 99, 999, 2, 3, 4, 5]
a.splice(1,3,8,88,888);
console.log(a.length);//8
console.log(a);//[1, 8, 88, 888, 2, 3, 4, 5]

一個例子：數組去重


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

for(var i=0;i<arr.length; i++){
  for(var j=i+1; j<arr.length;j++){
    if(arr[i]==arr[j]){
      arr.splice(j, 1);
      j--;//刪除元素后，索引值相應的發生變化
    }
  }
}

常用操作

sort()

sort方法對數組成員進行排序，默認是按照字典順序排序。排序后，原數組將被改變。

需要特殊注意。sort方法不是按照大小排序，而是按照對應字符串的字典順序排序。

也就是說，數值會被先轉成字符串，再按照字典順序進行比較，所以101排在11的前面

['d', 'c', 'b', 'a'].sort()
// ['a', 'b', 'c', 'd']

[4, 3, 2, 1].sort()
// [1, 2, 3, 4]

[11, 101].sort()
// [101, 11]

[10111, 1101, 111].sort()
// [10111, 1101, 111]

如果想讓sort方法按照自定義方式排序，可以傳入一個函數作為參數，表示按照自定義方法進行排序。

該函數本身又接受兩個參數，表示進行比較的兩個元素。

如果返回值大于0，表示第一個元素排在第二個元素后面；

其他情況下，都是第一個元素排在第二個元素前面

[10111, 1101, 111].sort(function (a, b) {
  return a - b;
})
// [111, 1101, 10111]

[
  { name: "張三", age: 30 },
  { name: "李四", age: 24 },
  { name: "王五", age: 28  }
].sort(function (o1, o2) {
  return o1.age - o2.age;
})
// [
//   { name: "李四", age: 24 },
//   { name: "王五", age: 28  },
//   { name: "張三", age: 30 }
// ]

練習：
　
排列 '["1px", "20px", "80px", "10px"]', 根據數值從小到大排序

隨機打亂順序

這里就需要用到我們的Math.random隨機函數,它會隨機產生0-1之間的數值

var arr = [1, 2, 3, 4, 5,6, 7, 8];
arr.sort(function(a, b){
    return Math.random() - 0.5;
})

join(char)

join方法以參數作為分隔符，將所有數組成員組成一個字符串返回。如果不提供參數，默認用逗號分隔。

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

a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"

如果數組成員是undefined或null或空位，會被轉成空字符串。

[undefined, null].join('#')
// '#'

['a',, 'b'].join('-')
// 'a--b'

slice(start,end)

slice方法用于提取原數組的一部分，返回一個新數組，原數組不變。

它的第一個參數為起始位置（從0開始），第二個參數為終止位置（但該位置的元素本身不包括在內）。如果省略第二個參數，則一直返回到原數組的最后一個成員。

// 格式
arr.slice(start_index, upto_index);

// 用法
var a = ['a', 'b', 'c'];

a.slice(0) // ["a", "b", "c"]
a.slice(1) // ["b", "c"]
a.slice(1, 2) // ["b"]
a.slice(2, 6) // ["c"]
a.slice() // ["a", "b", "c"]

如果slice方法的參數是負數，則表示倒數計算的位置。

var a = ['a', 'b', 'c'];
a.slice(-2) // ["b", "c"]
a.slice(-2, -1) // ["b"]

concat(array)

concat方法用于多個數組的合并。它將新數組的成員，添加到原數組的尾部，然后返回一個新數組，原數組不變

['hello'].concat(['world'])
// ["hello", "world"]

['hello'].concat(['world'], ['!'])
// ["hello", "world", "!"]

reverse()

reverse方法用于顛倒數組中元素的順序，返回改變后的數組。注意，該方法將改變原數組。

var a = ['a', 'b', 'c'];

a.reverse() // ["c", "b", "a"]
a // ["c", "b", "a"]

map()

map方法對數組的所有成員依次調用一個函數，根據函數結果返回一個新數組。

var numbers = [1, 2, 3];

numbers.map(function (n) {
  return n + 1;
});
// [2, 3, 4]

numbers
// [1, 2, 3]

map方法接受一個函數作為參數。該函數調用時，map方法會將其傳入三個參數，分別是當前成員、當前位置和數組本身。

[1, 2, 3].map(function(elem, index, arr) {
  return elem * index;
});
// [0, 2, 6]

filter()

filter方法的參數是一個函數，所有數組成員依次執行該函數，返回結果為true的成員組成一個新數組返回。該方法不會改變原數組。

[1, 2, 3, 4, 5].filter(function (elem) {
  return (elem > 3);
})
// [4, 5]

filter方法的參數函數可以接受三個參數，第一個參數是當前數組成員的值，這是必需的，后兩個參數是可選的，分別是當前數組成員的位置和整個數組。

[1, 2, 3, 4, 5].filter(function (elem, index, arr) {
  return index % 2 === 0;
});
// [1, 3, 5]

indexOf()，lastIndexOf()

indexOf方法返回給定元素在數組中第一次出現的位置，如果沒有出現則返回-1。

var a = ['a', 'b', 'c'];

a.indexOf('b') // 1
a.indexOf('y') // -1

indexOf方法還可以接受第二個參數，表示搜索的開始位置。

['a', 'b', 'c'].indexOf('a', 1) // -1

lastIndexOf方法返回給定元素在數組中最后一次出現的位置，如果沒有出現則返回-1。

var a = [2, 5, 9, 2];
a.lastIndexOf(2) // 3
a.lastIndexOf(7) // -1
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,270評論 0贊 4
  • 第三章 類型、值和變量 1、存取字符串、數字或布爾值的屬性時創建的臨時對象稱做包裝對象，它只是偶爾用來區分字符串值...
    坤少卡卡閱讀 656評論 0贊 1
  • 由于最近都在freecodecamp上刷代碼，運用了很多JavaScript數組的方法，因此做了一份關于JavaS...
    2bc5f46e925b閱讀 2,004評論 0贊 16
  • 前言 把《C++ Primer》[https://book.douban.com/subject/25708312...
    尤汐Yogy閱讀 9,537評論 1贊 51
  • 在翻譯實戰或平行語料庫創建過程，往往需要把“雙語交錯段落”進行分離，也就是把第1、3、5、7、……段的整段英語或漢...
    靜_靜_閱讀 445評論 0贊 0