六種JS數組使用方法實例總結

在js學習的過程中，js數組的方法的學習是必須要掌握的，這裡我總結了一下js數組中常用的方法，大家互相學習一下。話不多說，讓我們來直接進入正文學習。

一、js物件繼承的方法

數組是一種特殊的對象，繼承了物件Object的toString()、toLocaleString( )和valueOf()方法

1.toString()

toString方法傳回由陣列中每個值的字串形式拼接而成的一個以符號分割的字串於不使用參數的join()傳回的字串相同

[1,2,3].toString()//'1,2,3'
['a','b','c'].toString()//'a,b,c'
[1,[2,3]].toString()//'1,2,3'

2.toLocaleString()

toLocaleString()是toString()的本地化版本，在常態下，和toString()回傳一樣，在數字到達3位數以上，為自動格式化、還可以格式化日期

var a = 3333; a.toLocaleString()//3,333
var b = new Date; b.toLocaleString()//2018/7/13 下午3:43:39

3.valueOf()

valueOf()在對於陣列物件的時候返回本身

var a = [1,2,3]; a.valueOf()//[1,2,3];
a.valueOf() instanceOf() Array//true

#二、js數組轉換法

# 1.join()

Array.join()是Array.split()的逆向操作，前者是將陣列以參數單位(預設為逗號)合併成一個字串，後者是把字串切割成數組。支援數組與類別數組，不支援物件

var a = [1,2,3,4,5]; a.join()//'1,2,3,4,5'
var b = [1,undefined,2,null,3]; b.join()//'1,,2,,3'
var c = Array.prototype; c.join.call('hello','-')//'h-e-l-l-o'
var d = {1:'a',2:'b',length:3}; d.join()//'a,b'
var e = {1:'a',2:'b'}; e.join()//''

三、js數組資料結構操作方法

##數組的資料結構分為堆疊結構(後進後出)與佇列結構(先進先出)

堆疊結構(後進後出)：

1.push()

push()是把任意數量的參數逐一添加在末尾，改變原有數組,修改數組長度並返回

var a = [1,2]; a.push('11,22') - a//3 - [1,2,33,44]
var b = [3,4]; a.push([33.44]) - a//2 - [1,2,[33,44]]
Array.prototype.push.apply(a,b)//[1,2,3,4]
Array.prototype.push.call(a,b)//[1,2,[3,4]]

push()也可以在對像中添加參數。新增後物件會變成數組對象，新加入的元素的鍵對應數組的索引，並且物件有一個length屬性

var c = {}; Array.prototype.push.call(c,1) //{0:1,length:1}2.pop()

pop()把陣列中最後一項移除，傳回陣列長度、接著修改陣列長度改變原有陣列

var a = [1,2,3]; a.pop() - a//3 - [1,2];
//如果数组本身是空数组，则返回undefined
var b = []; b.pop()//undefined

佇列結構(前進前出)：

1.shift()

#shift()移除陣列中第一項，傳回移除的元素，然後修改陣列長度改變陣列

var a = [1,2,3]; a.shift() - a//1 - [2,3];

#2.unshift()

unshift()在陣列的起始位置加入任意參數修改陣列長度，傳回陣列長度改變陣列

var a = [1,2,3]; a.unshift(4,5) - a//5 - [1,2,3,4,5]

四、js陣列排序方法

1.reverse()

reverse()用於反轉數組的順序，修改原始數組，並傳回目前數組

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

# 2.sort()

sort()預設是改變陣列為升序排序，sort會預設的呼叫每個陣列項目toString()

var a = [1,2,3,4,5]; a.sort() //[1,2,3,4,5]
var b = [1,2,12,13]; c.sort() //[1,12,13,2]
var c = [1,2,'1a','2b']; c.sort() //[1,'1a',2,'2b'];

如果陣列中含有undefined，則undefined會排到尾部

var d = [1,3,undefined,2]; d.sort() //[1,2,3,undefined]

如果sort有參數的時候(參數必須是一個函數);如果函數return的值是正數或者第一個參數減去第二個參數，則為正序，否則為反序。如果存在字串，則會為最小。依照順序放到起始位置

function sortNumber(a,b){
　　return b-a
}
var e = [1,2,3]; e.sort(sortNumber)//[3,2,1]; 
var f = ['1a',1,'2b',2,3]; f.sort()//['1a','2b',3,2,1];

如果sort參數是函數傳回的是隨機正負數，則會隨機數組書序

function sortRandom(a,b){
　　return Math.random()-0.5
}
var g = [1,2,3,4,5]; g.sort(sortRandom)//[2,1,5,4,3]（此为随机顺序）

3.concat()

concat()方法是基於目前陣列建立一個新陣列然後把接收的參數放到結尾，不影響原始陣列

var a = [1,2]; b = [3,4]; a.concat - a//[1,2,3,4] - [1,2];五.创建子数组方法

4.slice()

slice()方法截取參數第一位起始位置，和第二位終止位數。並建立一個新的陣列。如果沒有參數，那就是全部截取

var a = [1,2,3,4,5];a.slice(2,4)//[3,4,5]
var a = [1,2,3,4,5];a.slice(2)//[3,4,5]
var a = [1,2,3,4,5];a.slice(-3)//[3,4,5] 
var a = [3,4,5];a.slice()//[3,4,5]

#五.js數組刪改方法

1.splice()

splice()接收三個參數，第一個參數是位置必填的，第二個參數是要刪除的數量必填,如果只有一個參數，則全部刪除數組、第二個參數以後都是是新增項目選填。傳回的是刪除的陣列###

var a = [1,2,3]; a.splice(2,0,1)-a//[]-[1,2,1,3];
var b = [1,2,3]; a.splice(2,1,1)-a//[3]-[1,2,1];
var c = [1,2,3]; a.splice(2)-a//[1,2,3]-[]
var d = [1,2,3]; a.splice(2,1,4,5)-a//[3]-[1,2,4,5]

######2.indexOf()##########indexOf()傳回是第一個參數首次出現的位置，當有第二個參數n的出現的時候，回傳的是，從第n個元素之前的元素不計算是否首次出現###

var a = ['a','b','c',a,2,3]; a.indexOf('a')//0
var a = ['a','b','c',a,2,3]; a.indexOf('a',1)//4
var a = ['a','b','c',1,2,3]; a.indexOf('a',-5)//0

######3.lastIndexOf()########lastIndexOf( )於indexOf()不同的是：從右往左查###

var a = ['a','b','c',a,2,3]; a.indexOf('a')//4
var a = ['a','b','c',a,2,3]; a.indexOf('a'，1)//0
var a = ['a','b','c',a,2,3]; a.indexOf('a'，-1)//0

##########六.js數組歸併的方法##########################################################1 .reduce()#########reduce()方法第一個參數是將指定的函數陣列進行循環遍歷以自訂的形式組合，產生單一值。參數接收四個（初始變量，當前變量，當前索引，原始數組物件），reduce的第二個參數是指定一個參入的初始值。 ###

var a = [1,2,3,4,5];
a.reduce(function(x,y){return x+y}) // 15
a.reduce(function(x,y){return x+y},3)//18

######2.reduceRight()#########reduceRight()於reduce()不同在於索引值由高到低的###

a.reduce(function(x,y){console.log(x,y);return x+y},0)
// 5,4 9,3 12,2 14,1 15,0

###### ###七.js陣列迭代方法###############1.map()#########map()給函數陣列的每一項執行指定的的函數，並傳回每次函數呼叫的結果組成數組###

var a = [1,2,3]; a.map(function(item,index,arr){return item*2})
//[2,4,6]
var b = ['aa','bb','cc'];
a.map(function(item,index,b){return this[item]})
//['aa','bb','cc'];

map()日常中多用于去解析对象中的属性

var c = {[name:1,value:2],[name:11,value:22]}
c.map(function(item){return item.name})//[1,11]

2.forEach()

forEach()给函数数组的每一项运行指定的函数(于map()对比不同于没有返回值)。forEach()可接受第二参数，用来改变this的指向。

var a = {
    name:'111'，
    arr:[1,2,3],
    value:function(){
        console.log(this);
        this.arr.forEach(function(){
        console.log(this);
        })
    }
}//循环外this指向value方法，循环内指向a对象
var b = {
　　name:'111'，
　　arr:[1,2,3],
　　value:function(){
　　　　console.log(this);
　　　　this.arr.forEach(function(){
　　　　　　console.log(this);
　　　　}，this)
　　}
}//全文的this全部都指向对象a

3.filter()

filter()给函数数组的每一项运行指定的函数，并返回制定规则返回True的项的数组。该方法多用于查询,第二个参数值指定this指向

var a = [1,2,3];a.filter(function(item){return item>1)//[2,3];

4.some()

filter()给函数数组的每一项运行指定的函数进行筛选，如果都返回false，则返回false。反之则返回true

a = [1,2,3,4,5];
a.some(function(item){return item === 3;})//true
a.some(function(item){return item === 6;})//false

5.every()

every()给函数数组的每一项运行指定的函数进行筛选，如果有返回false，则返回false。反之如果全部返回true，则返回true;空数组会返回true

a = [1,2,3,4,5];
a.every(function(item){return item === 3;})//false
a.every(function(item){return item < 6;})//true

相关推荐：

JS中数组重排序方法

js数组方法

以上是六種JS數組使用方法實例總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！