六种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数组方法

Atas ialah kandungan terperinci 六种JS数组使用方法实例总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!