(四)js数组方法一

ES5数组方法:
Array.prototype.filter()
 
  • 对数组元素进行过滤
  • 三个参数:元素值,下标,原数组
  • 返回:过滤后符合条件的数组,不会改变原数组
let arr = [2,4,6,7,8];
let res = arr.filter(function(item,index,array) {
    return (item > 3);
})
console.log(res);//6,7,8
 
var arr10=[1,2,3,4,5,6,7,8,9,10];
arr10.filter(function(item,index){     //[2,4]
    return item%2==0 && index<5;
});
console.log(arr10);         //[1,2,3,4,5,6,7,8,9,10]
 
Array.prototype.indexOf()
 
  • 查找数组元素
  • 两个参数:需要查找的元素,从那开始的下标
  • 返回:若找到则返回找到元素的下标,若找不到则返回-1,不会改变原数组
<script type="text/javascript">
    var str="Hello world!"
    document.write(str.indexOf("Hello") + "<br />");//0
    document.write(str.indexOf("World") + "<br />");//-1
    document.write(str.indexOf("world"));//0
 
    var arr13=[1,2,3,2,1];
    arr13.indexOf(1,-1);   //查找1,且从-1的位置开始从左到右开始找,那么应该就是最后一个元素,即4
    arr13.indexOf(2,-1);   //查找2,且从-1的位置开始从左到右开始找,那么则没有,返回-1
    //lastIndexOf()   //跟indexOf()方法一样,只是这是从右到左开始找元素索引值.
    // 注意这里的索引值都是不变的,不可能从右到左,那索引值也从右到左开始数, arr13的索引值一直都是0,1,2,3,4
    arr13.lastIndexOf(2,-2)   //查找2,从-2开始找,返回3
</script>

  

通常,我们采用 !== -1来进行事件处理
 
Array.prototype.join()
 
  • 将数组转化为字符串,并且以某个分隔符进行连接,默认是使用的逗号“ , ”
  • 参数:拼接的字符串
  • 返回:拼接后的字符串,不会改变原数组
 
var arr1=[1,2,3];
console.log(arr1.join('_'));

  

可以使用join()来封装一个函数,连续打印重复的字符,并且可以指定重复一个字符串多少次;
原理:假设n为3,那么new Array(4)就是新建一个长度为4的空的数组[,,,],现在用字符‘a’串起来,正好是三个连接符,所以返回的是aaa
function repeatArray(str,n){
      console.log(new Array(n+1).join(str));}
repeatArray('a',3);    //aaa
repeatArray('Hi',5);   //HiHiHiHiHi
 
Array.prototype.reverse()
  • 将数组中的元素顺序颠倒。注意:这个方法会改变原数组的。
  • 参数:无
  • 返回:被打乱顺序后的原数组,会改变原数组
var arr2=[1,2,3];
arr2.reverse();
console.log(arr2); //这时候arr2调用完reverse方法后,就已经改变了arr2数组了,即原数组被修改

  

 
Array.prototype.sort()
  • 默认是已字母的顺序进行排序, 如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。
  • 参数:一般为一个函数
  • 返回:数组的引用,会改变原数组
Eg:数组元素为字母的排序
var arr3=["a","d","c","b"];
arr3.sort();
console.log(arr3);    //返回["a","b","c","d"]

  

 
Eg:数组元素为数字的排序
var arr4=[13,5,24,41,3];
arr4.sort();        //[13,,24,3,5,41]不是我们想要的结果
arr4.sort(function(a,b){
     return a-b;      //因为减号这个操作符,默认是可以将字符串转化为number类型的
});

  

 
Eg:数组元素为对象的排序
var arr5=[{age:25},{age:3},{age:6}];
arr5.sort();   //排序无效,仍然是按照字母顺序进行排序的
arr5.sort(function(a,b){      //按照数字大小进行排序了
     return a.age- b.age;
});

  

 
Array.prototype.concat()
  • 合并数组
  • 参数: 数组
  • 返回:合并后的新的数组,不会改变原数组
var arr6=[1,2,3];
console.log(arr6.concat([4,6,7]));     //[1,2,3,4,6,7]
console.log(arr6.concat([11,12],13));   //[1,2,3,11,12,13]
console.log(arr6.concat([11,[12,13]]));  //[1,2,3,11,[12,13]];

  

 
Array.prototype.slice()
  • 裁剪数组
  • 参数:两个参数,起始点的下标,结束位置的下标
  • 返回:裁剪后的数组,不会改变原数组
var arr7=[1,2,3,4,5];
arr7.slice(1,3);    //返回[2,3]
arr7.slice(1);      //[2,3,4,5] 如果只有一个参数的话,就表示开始位置索引到数组末尾所有元素
arr7.slice(1,-1);   //[2,3,4]    -1表示数组的最后一个元素,根据左闭右开原则
arr7.slice(-4,-3);   //[2]       -1表示数组的最后一个元素,-2就是倒数第二个,以此类推

  

 
Array.prototype.splice()
  • splice()  数组拼接,删除从某个索引值开始的几个元素后,再重新拼接成数组。
  • 参数:两个,起始点下标,拼接的数量
  • 返回:拼接后的数组,会改变原数组
var arr8=[1,2,3,4,5];
//arr8.splice(2);     //[1,2]    删除从索引值2开始往后的所有元素3,4,5之后,拼接的数组为[1,2]
//arr8.splice(2,2);  //[1,2,5]; 删除从索引值2开始往后的两个元素3,4之后,拼接的数组是[1,2,5]
arr8.splice(1,1,"a","b");   //[1,"a","b",3,4,5] 删除索引值1开始的一个元素2,然后在这个位置添加两个元素:"a","b"

  

 
Array.prototype.forEach()
  • 数组的便利 forEach(function(item,index,array){})    数组中循环遍历方法的一种,还有for in; item表示元素本身,index是索引值
  • 参数:函数(三个形参),item元素本身,index为下标,array为原数组
  • 返回:便利后的每个数组元素,不会改变原数组
 
var arr = [12,14,15,17];
arr.forEach( function(item,index,array) {
    console.log(item);//12,14,15,17
    console.log(index);//0,1,2,3
    console.log(array);//[12,14,15,17]
})

  

 
Array.prototype.map()
  • 数组中循环遍历方法
  • 参数:函数(item)item为便利后的数组的每个元素
  • 返回:便利后的数组的每个元素,不会改变原数组
 
Array.prototype.some()
  • 判断数组中的元素是否满足条件,只要有一个满足条件就返回true
  • 参数:函数(item)每个元素
  • 返回:true/false,只要有一个满足就返回true,不会改变原数组
arr: function () {
    var array = [1,2,3,4,5];
    array.some(function (item) {
        var a = item< 4? item: "false"
        console.log(a);//1,2,3,false
    })
}

  

Array.prototype.every()
  • 判断数组中的每一个元素是不是都满足一个条件
  • 参数:函数(item)每个元素
  • 返回:true/false,都满足为true,有一个不满足都为false,不会改变原数组
 
var arr11=[1,2,3,4,5];
arr11.every(function(item){        //false 不是每个元素都符合条件
    return item>4
});

  

 
Array.prototype.reduce()
  • 每两个两个一起进行判断,得到的值作为新的x值.m参数指定为m为第一个x,(m可以省略)从左到右依次.
  • 参数:函数(x,y)
  • 返回:比较后的元素,不会改变原数组
var arr12=[3,6,9];
arr12.reduce(function(x,y){
    return x>y?x:y;
})
//reduceRight(function(x,y){});   //方法和reduce一样,只是这次是从右向左开始依次进行判断取值.

  

 
Array.prototype.shift()
  • 删除数组的第一个元素
  • 参数:无
  • 返回:返回被删除的元素,如果数组为空则返回undefined,会改变原数组
arr: function () {
    var array = [1,2,3,4,5];
    console.log(array.shift());//1
   console.log(array);//[2,3,4,5]
}

  

 
Array.prototype.unshift()
  • 在数组开头添加元素
  • 参数:添加的元素,可为多个
  • 返回:返回新的数组的长度,会改变原数组
arr: function () {
    var array = [1,2,3,4,5];
    console.log(array.unshift(0,2));//数组长度7
    console.log(array);//[0,2,1,2,3,4,5]
}

  

 
Array.prototype.pop()
  • 删除数组的最后一个元素
  • 参数:无
  • 返回:被删除的元素,会改变原数组
arr: function () {
    var array = [1,2,3,4,5];
    console.log(array.pop());//被删除元素5
    console.log(array);//[1,2,3,4]
}

  

 
Array.prototype.push()
  • 向数组末尾添加元素
  • 参数:无
  • 返回:新的数组长度,会改变原数组
arr: function () {
    var array = [1,2,3,4,5];
    console.log(array.push(6,7));//数组长度7
    console.log(array);//[1,2,3,4,5,6,7]
}

  

 
 
posted @ 2018-07-19 14:43  狗尾草的博客  阅读(283)  评论(0编辑  收藏  举报