前端数组方法汇总

前端数组方法汇总

下面是我们在前端开发中经常使用到的一些关于数组的方法，包括数组的创建等等，你可以通过点击下面的锚点链接来查看，希望对你有帮助。

目录

• 前端数组方法汇总
  • 创建数组
    • new Array()
  • 检测数组
    • object instanceof constructor
    • Array.isArray(value)
  • 转换方法
    • toString()
    • join()
  • 栈方法
    • push()
    • pop()
  • 队列方法
    • shift()
    • unshift()
  • 重排序方法
    • reverse()
    • sort()
  • 操作方法
    • concat()
    • slice()
    • splice()
      • 删除
      • 插入
      • 替换
  • 位置方法
    • indexOf()
    • lastIndexOf()
  • 迭代方法
    • every()
    • filter()
    • forEach()
    • map()
    • some()
  • 归并方法
    • reduce()
    • reduceRight()

创建数组

new Array()

创建数组的方式有两种，第一种方式就是使用Array构造函数

var arr=new Array()

如果你预先知道数组的个数，那么你可以给构造函数传递参数，构造函数length的值就是这个参数

var arr=new Array(10);
console.log(arr.length)//10

也可以向构造函数中传递Array数组中的包含的每一项

var arr=new Array('apple','oriange');
console.log(arr)//[ 'apple', 'oriange' ]

创建数组的第二种方式就是字面量表示法

var color=['blue','green','pink','yellow'];
var num=[1,2,3,4];

检测数组

object instanceof constructor

instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置，如果返回true，也就是说明可以通过右边的构造函数来得到左边的对象（js中一切皆对象）

var  value  = [1, 2, 3];
console.log(value  instanceof  Array)//结果是true，说明value是数组

Array.isArray(value)

上面方法不能有效检出不能环境下生成的数组，也就是环境A下利用构造函数生成的arr1,环境B下生成的Arr2,如果在环境下检测环境环境B下面生成的内容，有可能会出错
es5中新增的方法。不管是在什么环境下生产的，都可以精准的判断这个值是不是数组

var  value  = [1, 2, 3];
console.log(Array.isArray(value))//结果是true，说明value一定是个数组

转换方法

toString()

显式调用toString将数组转换为字符串，数组中的每个值用','连接

var color=['blue','green','pink','yellow'];
console.log(color.toString())//blue,green,pink,yellow

join()

join()方法将数组切割成为字符串，字符串的每一项用join的参数分隔,不传递参数默认按','分隔

var color=['blue','green','pink','yellow'];
console.log(color.join())//blue,green,pink,yellow
console.log(color.join('?'));//blue?green?pink?yellow

栈方法

push()

push方法接收任意数量的参数，把他们逐个放在数组的末尾，返回修改后的数组长度。

var  color  = ['blue'];
var  len  =  color.push('green', 'pink');
console.log(color)//[ 'blue', 'green', 'pink' ]
console.log(len)//3

pop()

pop方法从数组末尾移除最后一项，返回移除的内容。

var  color  = ['blue', 'green'];
var  count  =  color.pop();
console.log(count);//green
console.log(color);//[ 'blue' ]
console.log(color.length);//1

队列方法

shift()

移除数组中的第一项并返回，同时将数组长度减一

var  color  = ['blue', 'green'];
var  count  =  color.shift();
console.log(color);//[ 'green' ]
console.log(count);//blue
console.log(color.length);//1

unshift()

在数组的前端添加项，返回添加后数组的长度。

var  color  = ['blue', 'green'];
var  len  =  color.unshift('pink');
console.log(color);//[ 'pink', 'blue', 'green' ]
console.log(len);//3

重排序方法

reverse()

将数组的先后顺序颠倒，即为第一项变成最后一项，最后一项变为第一项，数组长度不变

var  color  = ['blue', 'green'];
color.reverse()
console.log(newColor);//[ 'green', 'blue' ]
console.log(color.length);//2

sort()

将数组中的每一项按照升序排列，最小值在前面，最大值在后面

var  arr  = [1, 2, 10, 23]
arr.sort();
console.log(arr)

操作方法

concat()

添加一个数组到当前数组中，并返回一个合并后的新数组。

var  color  = ['blue', 'green'];
var  color2  =  color.concat('yellow');
var  color3  =  color.concat(['yellow', 'blank', 'red']);
console.log(color);//[ 'blue', 'green' ]
console.log(color2);//[ 'blue', 'green', 'yellow' ]
console.log(color3);//[ 'blue', 'green', 'yellow', 'blank', 'red' ]

slice()

slice方法是基于当前数组并根据参数截取对应位置的数组内容，返回一个新的数组，可以接受两个参数，起始位置和结束位置。表示截取从其实位置到结束位置的数组内容。也可以只接受一个参数，表示截取从起始位置到原数组末尾的数组内容。

var  color  = ['blue', 'green', 'yellow', 'blank', 'red'];
var  color1  =  color.slice(1, 3);
var  color2  =  color.slice(1);
console.log(color1);//[ 'green', 'yellow' ]
console.log(color2);//[ 'green', 'yellow', 'blank', 'red' ]

如果参数的第二项不传，则隐式的表示为参数是-1，也就是数组长度加一项位置

splice()

splice方法可以向数组中删除，插入，替换任意数量的项。

删除

接受两个参数，第一个参数表示要从哪里开始删除，第二个项表示删除的个数。

var  color  = ['blue', 'green', 'yellow', 'blank', 'red'];
var  recolor  =  color.splice(0, 2);//从第0个开始删除两个
console.log(color);//[ 'yellow', 'blank', 'red' ]
console.log(recolor);//[ 'blue', 'green' ]

插入

接受三个参数，第一个参数为起始位置（从哪里开始插入），第二个参数为要删除的个数（0），第三个参数为要插入的项。

var  color  = ['blue', 'green', 'yellow', 'blank', 'red'];
var  recolor  =  color.splice(2, 0, '#e4393c');//从第二个位置开始，删除0个，并插入项#e4393c
console.log(color);//[ 'blue', 'green', '#e4393c', 'yellow', 'blank', 'red' ]

替换

接受三个参数，第一个参数为起始位置（从哪里开始插入），第二个参数为要删除的个数，第三个参数为要插入的项。

var  color  = ['blue', 'green', 'yellow', 'blank', 'red'];
var  recolor  =  color.splice(2, 1, '#e4393c');//从第二个位置开始删除一项，并从第二个位置开始插入项#e4393c
console.log(color);//[ 'blue', 'green', '#e4393c', 'blank', 'red' ]

位置方法

indexOf()

indexOf方法是从数组起始位置开始向后查找，找到了返回对应的索引值，找不到返回-1

var  numberArr  = [1, 2, 3, 4, 5, 6, 7];
var  index  =  numberArr.indexOf(3)//2
console.log(index)

lastIndexOf()

lastIndexOf方法是从数组末尾位置开始向前查找，找到了返回对应的索引值，找不到返回-1

var  numberArr  = [1, 2, 3, 4, 5, 6, 7];
var  index  =  numberArr.lastIndexOf(2)//1
console.log(index)

迭代方法

every()

every循环数组的每一项，并给定一个函数。如果该函数对每一项都返回true，那么结果就是true，否则返回false。接收一个回调函数，回调函数中有三个参数，第一个为循环中的每一项，第二个参数为当前项的下标，第三项为数组本身。

var  numberArr  = [1, 2, 3, 4, 5, 6, 7];
// var index = numberArr.lastIndexOf(2)
// console.log(index)
var  res  =  numberArr.every(function (item, index, array) {
console.log(item, index, array)
return (item  >  2)
})
console.log(res)

filter()

filter方法循环数组中的每一项，并给定一个函数，返回函数中返回true项的集合。回调函数中有三个参数，第一个为循环中的每一项，第二个参数为当前项的下标，第三项为数组本身。

var  numberArr  = [1, 2, 3, 4, 5, 6, 7];
var  res  =  numberArr.filter(function (item, index, array) {
return (item  <  2)
})
console.log(res)//1

forEach()

操作函数中的每一项，这个函数没有返回值.你可以利用这个函数操作数组中的每一项，并根据自己的要求生成新的函数或者一些判断等等

var  numberArr  = [1, 2, 3, 4, 5, 6, 7];
numberArr.forEach(function (item, index, array) {
//执行某些操作
})

map()

操作函数中的每一项,返回每次函数调用的结果组成的数组。

var  numberArr  = [1, 2, 3, 4, 5, 6, 7];
var  res  =  numberArr.map(function (item, index, array) {
return  item  *  2
});
console.log(res);//[ 2, 4, 6, 8, 10, 12, 14 ]

some()

给数组中的每一项给定一个函数，只有有一项符合给定函数要求就返回true，否则返回false。

var  numberArr  = [1, 2, 3, 4, 5, 6, 7];
var  res  =  numberArr.some(function (item, index, array) {
return  item  >  5
})
console.log(res)//true

归并方法

reduce()

从第一项迭代数组的所有项，并返回一个新的值。接受两个参数，一个在每一项上面都调用的函数，一个是归并基础的初始值（可选参数）。其中调用函数接受四个参数（前一个值，当前值，项的索引，原数组对象）

var  val  = [1, 2, 3, 4, 5];
var  res  =  val.reduce(function (pre, cur, index, array) {
return  pre  +  cur
}, null)
console.log(res)//15

reduceRight()

和reduce方法不同的就是遍历的初始位置是从数组的最后一项开始向数组的第一项遍历，其他的使用完全一致。

var  val  = [1, 2, 3, 4, 5];
var  res  =  val.reduceRight(function (pre, cur, index, array) {
return  pre  +  cur
}, null)
console.log(res)//15