科技知識動態:六種JS數組使用方法實例總結

導讀跟大家講解下有關六種JS數組使用方法實例總結,相信小伙伴們對這個話題應該也很關注吧,現在就為小伙伴們說說六種JS數組使用方法實例總結,

跟大家講解下有關六種JS數組使用方法實例總結,相信小伙伴們對這個話題應該也很關注吧,現在就為小伙伴們說說六種JS數組使用方法實例總結,小編也收集到了有關六種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,333var 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];//如果數組本身是空數組,則返回undefinedvar 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')//0var a = ['a','b','c',a,2,3]; a.indexOf('a',1)//4var 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')//4var a = ['a','b','c',a,2,3]; a.indexOf('a',1)//0var 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}) // 15a.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;})//truea.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;})//falsea.every(function(item){return item < 6;})//true

相關推薦:

JS中數組重排序方法

js數組方法

以上就是六種JS數組使用方法實例總結的詳細內容,更多請關注php中文網其它相關文章!

來源:php中文網

免責聲明:本文由用戶上傳,如有侵權請聯系刪除!