• 遍歷
  • for
  • for-in
• 迭代
  • forEach-遍歷
  • filter-過濾
  • map-對映
  • some-部分符合
  • every-全部符合
• 屬性和方法
  • length
  • Array.isArray-型別判斷
  • indexOf-按元素值查詢
  • lastIndexOf-按元素值查詢
  • push-尾部新增元素
  • unshift-頭部新增元素
  • pop-尾部刪除
  • shift-頭部刪除
  • splice-新增替換刪除
  • sort-排序
  • reverse-反序
  • join-合併成字串
  • concat-合併成陣列
  • slice-擷取陣列
  • reduce-左側累計
  • reduceRight-右側累加
• 其他操作
  • 去重
  • 交集
  • 最大值，最小值
• 參考

ES5 下的常用陣列操作

遍歷

for

var _array = [1, 2, 3]
for (var key = 0; key < _array.length; key++) {
    console.log(key, _array[key])
}
 

for-in

var _array = [1, 2, 3]
for (var key in _array) {
    console.log(key, _array[key])
}

迭代

在迭代中使用 return break continue 無效

forEach-遍歷

var _array = [1, 2, 3]
_array.forEach(function (value, key, array) {
    console.log(value, key, array)
})

filter-過濾

var _array = [1, 2, 3]
var _newArray = _array.filter(function (value, key, array) {
    return value > 2
})
console.log(_newArray)  //[ 3 ]
 

map-對映

var _array = [1, 2, 3]
var _newArray = _array.map(function (value, key, array) {
    return key + ":" + value
})
console.log(_newArray)  //[ '0:1', '1:2', '2:3' ]

some-部分符合

//只要有一個值符合條件，即退出迴圈
var _array = [1, 2, 3]
var _hasValueBiggerThanOne = _array.some(function (value, key, array) {
    console.log(value)  //value 不會到 3
    return value > 1
})
console.log(_hasValueBiggerThanOne)  //true
 

every-全部符合

var _array = [1, 2, 3]
var _everyValueBiggerThanOne = _array.every(function (value, key, array) {
    return value > 1
})
console.log(_everyValueBiggerThanOne)  //false

屬性和方法

length

length長度屬性

var _array = ['a', 'b', 'c']
console.log(_array.length)  //輸出3
_array.length = 2
console.log(_array)  //輸出['a', 'b']

Array.isArray-型別判斷

var _array = ['a', 'b', 'c']
console.log(Array.isArray(_array))  //輸出true

indexOf-按元素值查詢

查詢元素並返回對應元素的索引值，如果找不到此元素則返回-1，第二個引數為查詢的起始位置

var _array = ['a', 'b', 'c']
_array.indexOf('b')  //返回值為1
_array.indexOf('d')  //返回值為-1
_array.indexOf('b', 2)  //返回值為-1

lastIndexOf-按元素值查詢

從後向前查詢元素並返回元素的索引值，如果找不到則返回-1

var _array = ['a', 'b', 'c']
_array.lastIndexOf('b')  //返回值為1
_array.lastIndexOf('d')  //返回值為-1

push-尾部新增元素

向陣列的尾部新增一個或多個元素，並返回新陣列的長度

var _array = ['a', 'b', 'c']
_array.push('d')  //返回值為4
console.log(_array)  //列印值為['a', 'b', 'c', 'd']

unshift-頭部新增元素

向陣列的頭部新增一個或多個元素，並返回新陣列的長度

var _array = ['b', 'c', 'd']
_array.unshift('a', 'b')  //返回值為5
console.log(_array)  //列印值為['a', 'b', 'b', 'c', 'd']

pop-尾部刪除

從尾部刪除一個元素，並返回該元素

var _array = ['a', 'b', 'c']
_array.pop()  //返回'c'
console.log(_array)  //列印值為['a', 'b']

shift-頭部刪除

從頭部刪除一個元素，並返回該元素

var _array = ['a', 'b', 'c']
_array.shift()  //返回'a'
console.log(_array)  //列印值為['b', 'c']

splice-新增替換刪除

新增、替換、刪除元素。會改變原陣列

var _array = [1, 2, 3, 4, 5]
_array.splice(1, 0, 2)	//在 1 的位置，刪除 0 個元素，新增元素 2
console.log(_array)  //輸出[1, 2, 2, 3, 4, 5]
_array.splice(1, 1)	//在 1 的位置，刪除 1 個元素，不新增元素
console.log(_array)  //輸出[1, 2, 3, 4, 5]
_array.splice(1, 1, 2, 3)	//在 1 的位置，刪除 1 個元素，新增元素 2 和 3
console.log(_array)  //輸出[1, 2, 3, 3, 4, 5]

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

• 引數start表示替換的位置
• 引數devareCount表示刪除的元素
• 引數item1...表示新增的元素

sort-排序

陣列排序，並返回新陣列，且改變原陣列

var _array = [25, 4, 3, 10, 22, 4]
_array.sort()
console.log(_array)  //輸出[10, 22, 25, 3, 4, 4]
var _newArr = _array.sort(function (x, y) {
    // 正序
    return x - y
})
console.log(_array)  //輸出[3, 4, 4, 10, 22, 25]
console.log(Object.is(_newArr, _array)) //true

reverse-反序

倒置陣列，並返回新陣列，且改變原陣列

var _array = ['a', 'b', 'c']
var reverseArr = _array.reverse()
console.log(reverseArr)  //輸出['c', 'b', 'a']
console.log(Object.is(reverseArr, _array)) //true

join-合併成字串

合併陣列中所有元素成為字串並返回

var _array = ['a', 'b', 'c']
console.log(_array.join())  //輸出a, b, c
console.log(_array.join('-'))  //輸出a-b-c

concat-合併成陣列

合併兩個或多個數組，返回一個全新的陣列，原陣列不變

var arr1 = ['a', 'b']
var arr2 = ['c', 'd']
console.log(arr1.concat(arr2))  //輸出["a", "b", "c", "d"]

slice-擷取陣列

按引數begin和end擷取陣列，不改變原陣列

var arr1 = ['a', 'b']
var arr2 = ['c', 'd']
console.log(arr1.concat(arr2))  //輸出["a", "b", "c", "d"]
console.log(arr1)  //輸出["a", "b"]
console.log(arr2)  //輸出["c", "d"]

reduce-左側累計

從左至右按reducer函式組合元素值，並返回累加器終值

var _array = [1, 2, 3, 4, 5]
var reducer = function (accumulator, currentValue) {
    return accumulator + currentValue
}
console.log(_array.reduce(reducer))  //1+2+3+4+5 = 15
console.log(_array.reduce(reducer, 5))  //5+1+2+3+4+5 = 20 設定5為累加器的初始值

reduceRight-右側累加

從右至左按reducer函式組合元素值，並返回累加器終值

var _array = [1, 2, 3, 4, 5]
var reducer = function (accumulator, currentValue) {
    return accumulator - currentValue
}
console.log(_array.reduceRight(reducer))  //5-4-3-2-1
console.log(_array.reduceRight(reducer, 6))  //6-5-4-3-2-1

其他操作

去重

function unique(arr) {
    for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] === arr[j]) {         //第一個等同於第二個，splice方法刪除第二個
                arr.splice(j, 1)
                j--
            }
        }
    }
    return arr
}

var arr = [
    1, 1, 'true', 'true', true, true, 15, 15, false, false, 
    undefined, undefined, null, null, NaN, NaN, 
    'NaN', 'NaN', 0, 0, 'a', 'a', {}, {}
]
console.log(unique(arr))
console.log(unique(arr))
// NaN 和 物件 無法去重
// [
//   1,     'true',
//   true,  15,
//   false, undefined,
//   null,  NaN,
//   NaN,   'NaN',
//   0,     'a',
//   {},    {}
// ]

交集

最大值，最小值

var _array = [22,13,6,55,30]
console.log(Math.max.apply(null, _array))   //55
console.log(Math.min.apply(null, _array))   //6

參考

For-each over an array in JavaScript - Stack Overflow

JS方法速查

JavaScript陣列方法速查手冊 - 知乎

JavaScript陣列去重（12種方法，史上最全）_前端開發隨筆 - SegmentFault 思否