首頁> 頭條> 主體

最全的數組方法匯總

小云云
發布: 2017-12-13 15:35:11
原創
1930 人瀏覽過

所謂數組,就是無序的元素序列。 若將有限個類型相同的變數的集合命名,那麼這個名稱為數組名。組成數組的各個變數稱為數組的分量,也稱為數組的元素,有時也稱為下標變數。用於區分數組的各個元素的數字編號稱為下標。數組是在程式設計中,為了處理方便, 把具有相同類型的若干元素以無序的形式組織起來的一種形式。 這些無序排列的同類資料元素的集合稱為數組。本文我們主要和大家分享最完整的陣列方法彙總,我們將使用原生javascript方法,希望能幫助大家。

建立陣列
var colors = []; var colors = ['red', 'blue'];
登入後複製
偵測陣列
if(arr instanceof Array) {}
登入後複製

如果網頁中包含多個框架,則需要使用下面的方式來偵測陣列

if(Array.isArray(arr)) {}
登入後複製
# arr.valueOf()
var colors = ['red', 'yellow']; colors.valueOf(); // > ['red', 'yellow']
登入後複製
arr.toString()
var colors = ['red', 'yellow']; colors.toString(); // > "red,yellow"
登入後複製
arr.push(item)

#從陣列末端新增元素,並傳回新陣列的長度

var colors = ['red', 'yellow']; colors.push('pink'); // > 3
登入後複製
arr.pop()

從陣列結尾刪除元素,並傳回被刪除的元素

var colors = ['red', 'yellow']; colors.pop(); // > 'yellow'
登入後複製
arr.unshift(item)

從陣列頭部新增元素,並傳回新陣列的長度

var colors = ['green', 'pink']; colors.unshift('pink'); // > 3
登入後複製
arr.shift ()

從陣列頭刪除元素,並傳回已刪除的元素

var colors = ['yellow', 'orange']; colors.shift(); // > 'yellow'
登入後複製
arr.reverse()

反轉數組的順序,並傳回重新排序之後的數組, 原始數組會被改變

[1, 2, 3, 'reer', 'game', 2, 5].reverse(); // > [5, 2, "game", "reer", 3, 2, 1]
登入後複製
arr.sort(fn)

如果不傳參數,預設情況下陣列內的元素會轉換為字串進行比較,因此一般不建議直接使用預設的arr.sort()進行排序。
傳回值為排序後的新陣列。原始數組會被改變

  • 將陣列內數值元素從小到大排序。

var demo = [1, 4, 2, 'reee', 'name', '9', 'doc']; demo.sort(function(a, b)) { return a - b; } // > [1, 2, 4, "reee", "name", "9", "doc"]
登入後複製
  • 將陣列內數值元素從大到小排序

var demo = [1, 4, 2, 'reee', 'name', '9', 'doc']; demo.sort(function(a, b) { return b - a; }) // > [4, 2, 1, "reee", "name", "9", "doc"]
登入後複製
arr.concat(otherArr )

參數中傳入元素或數組, 會將參數合併到arr中,傳回合併後新的數組,原始數組不會改變

var arr = [1, 3, 'jake']; arr.concat('rose', [2, 'fi']); // > [1, 3, 'jake', 'rose', 2, 'fi']
登入後複製
arr .slice()

剪切數組,傳回剪切之後的數組,元素不會改變

  • 傳入一個參數,表示起始位置,結束位置為最末端

var arr = [4, 2, 1, "reee", "name", "9", "doc"]; arr.slice(2); // > [1, "reee", "name", "9", "doc"]
登入後複製
  • 傳入2個參數,表示起始位置與結束位置,但不包含結束位置的元素

var arr = [4, 2, 1, "reee", "name", "9", "doc"]; arr.slice(2, 4); // > [1, "reee"]
登入後複製
arr.splice()

根據參數的不同,可以分別實現刪除,插入,替換元素的作用,會改變原始陣列

  • 刪除

傳入2個參數,分別表示起始位置與要刪除元素的個數,回傳被刪除由掉的元素組成的陣列

var arr = [4, 2, 1, "reee", "name", "9", "doc"]; arr.splice(2, 3); // > [1, "reee", "name"] // arr: [4, 2, 1, "9", "doc"]
登入後複製
  • 插入

#傳入3個參數,[起始位置| 要刪除的項數為0 | 要插入的元素], 最終傳回刪除掉的元素所組成的數組,因為這裡刪除項數為0,因此會傳回空數組

var arr = [2, 4, 6]; arr.splice(2, 0, 'red', 'green'); // > [] // arr: [2, 4, "red", "green", 6]
登入後複製

取代

傳入三個參數, [ 起始位置| 要刪除的項目數為1 | 要插入的元素],最後傳回被刪除掉的元素組成的陣列
var arr = [2, 4, 9]; arr.splice(1, 1, ['tim', 'tom']); // > [4] // arr: [2, ['tim', 'tom'], 9]
登入後複製
總結因此,這個方法會因為參數的不同而實現不同的功能,所有的參數從頭到尾依序為

[ 起始位置| 要刪除元素的數量| 要插入元素的值,可以寫入多個值]
arr.indexOf(item)


驗證陣列中是否含有某個元素,傳回第一個符合的元素在陣列中的位置,如果沒有,則傳回-1

var arr = [2, 'tim', 4, 5, 2]; arr.indexOf('tim'); // > 1 arr.indexOf('jake'); // > -1
登入後複製

arr. lastIndexOf(item)
驗證數組中是否含有某個元素,不過是從數組尾部開始查找,返回第一個匹配到的元素所在的位置,如果沒有,則返回-1
var arr = [2, 'tim', 4, 5, 2]; arr.lastIndexOf('tim'); // > 1 arr.indexOf('jake'); // > -1
登入後複製


IE6, 7, 8 不支援indexOf與lastIndexOf方法

arr.every()
#對陣列中的每一項運行給定函數,如果函數對每一項都傳回true,則傳回true。會有一個函數作為every的參數,該函數也有3個參數,分別為


[ 呼叫every的數組的每一項元素| 對應元素所在的位置| 表示該數組]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; var everyRes = numbers.every(function(item, index, array) { return item > 2; }) // > false
登入後複製
###arr.some()#########對陣列中的每一項執行給定函數,如果函數對其中一項傳回true,則傳回true。會有一個函數作為every的參數,該函數也有3個參數,分別為######[ 調用every的數組的每一項元素| 對應元素所在的位置| 表示該數組]##### #
var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; var everyRes = numbers.some(function(item, index, array) { return item > 2; }) // > true
登入後複製
######arr.filter(fn)#########過濾方法。傳回滿足條件的元素組成的陣列。 fn的參數為######[ 呼叫every的陣列的每一項元素 | 對應元素所在的位置 | 表示該陣列 ]#######
var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; var everyRes = numbers.filter(function(item, index, array) { return item > 2; }) // > [ 3, 4, 5, 4, 3 ]
登入後複製
arr.map(fn)

对数组的每一项进行计算等处理,返回处理结果组成的数组,fn的参数为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

var numbers = [1, 2, 3, 3, 2, 1]; var everyRes = numbers.map(function(item, index, array) { return item > 2; }) // >[false, false, true, true, false, false]
登入後複製
arr.forEach(fn)

遍历数组,没有返回值,fn的参数为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

numbers.forEach(function(item, index) { // do something })
登入後複製
arr.reduce(fn)

缩减方法。fn的参数为
[ 前一个元素 | 当前元素,从1开始 | 后一个元素的序列,从1开始计数 | 表示该数组 ]

var values = [1, 2, 3, 4, 5]; var sum = values.reduce(function(prev, cur, index, array) { return prev + cur; }) // > 15 //每一次迭代之后的结果分别为 // [3, 3, 4, 5] // [6, 4, 5] // [10, 5] // 15
登入後複製
arr.reduceRight(fn)

与reduce一模一样,只是方向相反。

jQuery相关方法

$.each(arr, fn)

遍历数组或者对象,fn有2个参数,分别为, 比原生的for in 更加健壮
[ 数组的索引或者对象的key值 | 索引或者key值对应的value值 ]

var arr = [1, 2, 3]; $.each(arr, function(key, value) { // do something });
登入後複製
  • 跳过一次循环return | return true

  • 终止循环return false

$.grep(arr, fn)

过滤方法,功能类同原生中的arr.filter(fn)。此处fn的参数如下
[ value: 对象/数组的值 | key值或者序列 ]

var arr = [ 1, 3, 6, 4 ]; $.grep(arr, function(val, key) { return val >= 3; }); // > [3, 6, 4] // arr : [ 1, 3, 6, 4 ] 不会改变
登入後複製
$.map(arr, fn)

对每项进行处理,返回处理结果组成的数组,此处fn的参数如下
[ value: 对象/数组的值 | key值或者序列 ]

var arr = [1, 2, 5, 3]; $.map(arr, function(val, key) { return val * 10; }) // > [10, 30, 30, 20, 10] // 原数组不受影响
登入後複製
$.inArray(item, array)

检测某一个元素item是否存在与数组之中,返回其所在的位置,如果不在,则返回-1

$.inArray(3, [1, 2, 3]); // > 2
登入後複製
$.merge(arr1, arr2)

合并数组,会改变第一个参数的数组为合并之后的数组,返回合并之后的数组

var arr = [1, 3, 4]; var arr2 = [4, 3, 1]; $.merge(arr, arr2); // > [1, 3, 4, 4, 3, 1] // 为了防止第一个数组被改变,可以使用下面的方式来写 $.merge($.merge([], arr), arr2);
登入後複製
$.unique(arr)

过滤DOM数组中重复的元素

$.makeArray(obj)

将类数组对象转换为数组

$(elem).toArray()

将jQuery对象集合恢复成DOM数组

相关推荐:

最实用的JS数组函数整理

PHP常用数组(Array)函数总结整理

PHP 数组排序方法总结

几种PHP数组定义的方法

JavaScript如何创建数组?

相關標籤:
js
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!