当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 数组方法详解

数组方法详解

2019年09月03日  | 移动技术网IT编程  | 我要评论

js数组的方法众多,平时在使用的时候,容易忘记某些不常用的数组方法,而且时长把两个差不多的方法搞混。而且es6在es5的基础上又新增了一些方法,为了方便记忆,就写篇博客方便记忆,没事的时候拿出来看看。

数组方法:

方法 用法  是否改变原有数组
push 在最后一位新增一个或多个数据,返回数组的长度  y
pop 删除最后一位,并返回删除的数据 y
unshift 在第一位新增一个或多个数据,返回数组的长度 y
shift 删除第一位,并返回删除的数据 y
join 使用分隔符,将数组转为字符串并返回 n
tostring 直接转为字符串,并返回 n
slice 截取指定位置的数组,并返回截取的数组。 n
spclice 删除指定位置项,并替换,返回删除的数据 y
sort 排序(字符规则),返回结果 y
reverse 反转数组 y
valueof 返回对象数组的原始值 n
indexof 查询并返回数组的索引 n
lastindexof 从尾部开始查询并返回数据的索引 n
foreach 参数为回调函数,会遍历数组所有的项,回调函数接受三个参数,分别为value,index,self。无返回值 n
map 同foreach,同时回电函数返回布尔值,组成新数组由map返回 n
filter 同foreach,同时回调函数返回布尔值,为true的数据组成新数组由filter返回 n
every 同foreach,同时回调函数返回布尔值,全部为true,由every返回true n
some 同foreach,同时回调函数返回布尔值,只要由一个为true,由some返回true n
reduce 归并,同foreach,迭代数组的所有项,并构建一个最终值,由reduce返回 n
reduceright 反向归并,同foreach,迭代数组的所有项,并构建一个最终值,由reduceright返回 n

 

1.push()

用法:在数组的最后一位添加数据,同时返回插入后的数组长度。

var arr = [9,2,3,4,5];

var a = arr.push(8);
// 返回数组长度
console.log(a);
console.log(arr);
 
结果为:  6
      9 2 3 4 5 8
 
2.pop
用法:删除最后一位,并返回删除的数据
var arr = [9,2,3,4,5];
 
var a1 = arr.pop();
// 返回数组最后一个数
console.log(a1)
console.log(arr)
结果为: 5 
     9 2 3 4
 
3.unshift
用法:在第一位新增数据,返回操作后的数组长度
 
var arr = [9,2,3,4,5];
 
var c = arr.unshift(3);
// 返回数组的长度
console.log(c)
console.log(arr);
 
结果为:6
    6 9 2 3 4 5
 
4.shift
用法:删除第一位,并返回删除的数据
var arr = [9,2,3,4,5];
 
var b = arr.shift();
// 返回数组的第一个数
console.log(b);
console.log(arr)
 
5.join
用法:使用分隔符,将数组转为字符串并返回
 
var arr = [9,2,3,4,5];
 
var str = arr.join( " ," );
console.log(str);
console.log(arr);
 
结果:9,2,3,4,5
     9 2 3 4 5
 
6.tostring
用法:
var arr = [9,2,3,4,5];
document.write(arr.tostring());
 
结果为:9,2,3,4,5
 
7.slice
 
var arr = [9,2,3,4,5];
 
8.splice
用法:删除指定位置,并替换,返回删除的数据
var arr = [9,2,3,4,5];
 
var d = arr.splice(2,2,10,24);
// splice() 方法返回一个包含已删除项的数组:
console.log(d);
console.log(arr);
 
结果为:3,4
    9,2,10,24,5
 
9.sort
用法:对数组中的元素进行排序,默认是升序
var arr = [9,2,3,4,5];
 
console.log(arr.sort());
console.log(arr);
结果为 [2,3,4,5,9 ]
    [2,3,4,5,9 ]
 
但是在排序前,会先调用数组的tostring方法,将每个元素都转成字符之后,再进行排序,此时会按照字符串的排序,逐位比较,进行排序。
var arr = [91,23,43,54,115];
 
console.log(arr.sort());
console.log(arr);
 
结果为:[115,23,43,54,91]
    [115,23,43,54,91]
 
如果需要按照数值排序,需要传参.
var arr = [91,23,43,54,115];
 
console.log(arr.sort(fn));
console.log(arr);
 
function fn(a,b){
  return a-b
}
 
结果为:[ 23,43,54,91,115 ]
    [ 23,43,54,91,115 ]
10.reverse
 用法:反转数组
var arr = [9,2,3,4,5];
 
console.log(arr.reverse());
 
结果为:[5,4,3,2,9]
 
11.valueof
 用法:返回数组对象的原始值
 
valueof() 方法通常由 javascript 在后台自动调用,并不显式地出现在代码中。
 
12.indexof
 
用法:查询并返回数据的索引
 
var arr = [9,2,3,4,5];
console.log(arr.indexof(4));
 
结果为:3
 
13.lastindexof
 
 用法:反向查询并返回数据的索引
 
var arr = [9,2,3,4,5];
console.log(arr.lastindextof(3));
 
结果为:2 
14.foreach
 
用法:参数为回调函数,会遍历数组所有的项,回调函数接受三个参数,分别为value,index,self;foreach没有返回值
 
var arr = [9,2,3,4,5];
 
var a= arr.foreach(function(value,index,self){
  console.log(value +“,”+ index+“,” + self);
})
 
结果为:9,0, 9,2,3,4,5
    2,1, 9,2,3,4,5
    3,2, 9,2,3,4,5
    4,3, 9,2,3,4,5
    5,4, 9,2,3,4,5
15.map
 用法:同foreach,同foreach,同时回调函数返回数据,组成新数组由map返回
var arr = [9,2,3,4,5];
 
var a  = arr.map(function( value,index,self ){
  return 2 + value;
})
console.log(a)
结果为:            11
       4
       5
       6
       7
16.filter
 
用法:同foreach,同时回调函数返回布尔值,为true的数据组成新数组由filter返回
 
var arr = [9,2,3,4,5];
 
var a = arr.filter(function(value,index,0){
  return value>4;
})
console.log(a);
结果为:[ 9,5 ]
 
17.some
 用法:同foreach(),判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。
var arr = [9,2,3,4,5];
var a = arr.some(function(value,index,self){
  return value>4
})
 console.log(a)
 
结果为:[9,2,3,4,5]
 
18.every
 
 用法:同foreach(),判断数组中是否存在满足条件的项,只有所有项满足条件,才会返回true。
var arr = [9,2,3,4,5];
var a = arr.some(function(value,index,self){
  return value>4
})
 console.log(a)
 
结果为:[]
 
19.reduce
用法: 从数组的第一项开始,逐个遍历到最后,迭代数组的所有项,然后构建一个最终返回的值。接受四个参数,分别为 total, currentvalue, currentindex, arr。reduce() 对于空数组是不会执行回调函数的。

var numbers = [15.5, 2.3, 1.1, 4.7]; function getsum(total, num) {
  return total + math.round(num);
}
 
function myfunction(item) {
  document.getelementbyid("demo").innerhtml = numbers.reduce(getsum, 0);
}
 
结果为:24
 
20.reduceright
 
用法:同reduce。但索引方向与reduce相反。
var numbers = [2, 45, 30, 100];
 
function getsum(total, num) {
  return total - num;
}
function myfunction(item) {
  document.getelementbyid("demo").innerhtml = numbers.reduceright(getsum);
}
结果为:23

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网