长风破浪会有时
直挂云帆济沧海

js数组的常用方法详解

 js开发当中,用得最多的应该就是数组ARRAY了,接下来,就让阿锋哥教你怎么去操作js的数组方法。

   1.join()方法

    join()方法是将数组转成字符串,方法只接收一个参数。

  var arr=[1,2,3,4];    
  console.log(arr.join()); //1,2,3,4
  console.log(arr.join(":")); //1:2:3:4
  console.log(arr); //[1,2,3,4],该操作不会对原数组产生变化

   2.split()方法

   split()方法是将字符串转为数组。

var family = "afengge,aqiaomei,aliaoliao";
 console.log(family.split(","));//这个就是一个数组了。

   3.push()方法

   push()方法可向数组的末尾添加一个或多个元素,并返回新的长度。

  var arr=[1,2,3,4];
  var push_arr=arr.push(5);
  console.log(arr); //[1,2,3,4,5];
  console.log(push_arr); //5

    4.pop()方法

    pop():方法用于删除并返回数组的最后一个元素。

  var arr=[1,2,3,4];
  var pop_arr=arr.pop(); 
  console.log(arr); // [1,2,3];
  console.log(pop_arr); // 4

    5.shift()和unshift()方法

    shift():方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

    unshift():方法可向数组的开头添加一个或更多元素,并返回新的长度。

   var arr=[1,2,3,4];
   var shift_arr=arr.shift();
   console.log(arr); // [2, 3, 4]
   console.log(shift_arr); // 1
   //unshift
   var unshift_arr=arr.unshift(5);
   console.log(arr); // [5, 2, 3, 4]
   console.log(unshift_arr); // 4

    6.sort()方法

    sort()方法用于对数组的元素进行排序。

 var arr=[1,100,5,20];
 console.log(arr.sort()); // [1, 100, 20, 5]
 console.log(arr); // [1, 100, 20, 5] 
 console.log(arr.sort(function(a,b){return a - b};)); //升序 [1,5,20,100]
 console.log(arr.sort(function(a,b){return b-a})); //降序 [100,20,5,1]

   7.reverse()方法

   reverse()方法用于颠倒数组中元素的顺序。

  var arr=[1,2,3,4];
  console.log(arr.reverse()); // [4,3,2,1]
  console.log(arr); // [4,3,2,1] (原数组改变)

   8.concat()方法

   concat()方法用于连接两个数组,该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。

  var arr=[1,2,3,4];
  var arr2=[5,6,7] 
  var arrCopy = arr.concat(arr2);
  console.log(arr.concat()); // [1, 2, 3, 4] (复制数组)
  console.log(arrCopy); // [1, 2, 3, 4, 5,6,7]
  console.log(arr); // [1, 2, 3, 4] (原数组未改变)

   9.slice()方法

    slice()方法是用于数组截取。参数值为(start,end).start和end都为数组的下标值。

    start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

    end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

    var arr = [1,4,6,8,12];
    var arrCopy1 = arr.slice(1);	
    var arrCopy2 = arr.slice(0,4);	
    var arrCopy3 = arr.slice(1,-2);
    var arrCopy4 = arr.slice(-5,4);
    var arrCopy5 = arr.slice(-4,-1)
    console.log(arrCopy1);  // [4, 6, 8, 12]
    console.log(arrCopy2);  // [1, 4, 6, 8] 
    console.log(arrCopy3);  // [4, 6] 
    console.log(arrCopy4);  // [1, 4, 6, 8]
    console.log(arrCopy5);  // [4, 6, 8]
    console.log(arr);  // [1, 4, 6, 8, 12] (原数组未改变)

10.splice()方法

 splice()方法是向/从数组中添加/删除项目,然后返回被删除的项目。(该方法会改变原始数组);参数值为(index,howmany,item1,…,itemX)

index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

howmany:必需。要删除的项目数量。如果设置为0,则不会删除项目.

item1, …, itemX:可选。向数组添加的新项目。

    var arr = ["张三","李四","王五","马六","杨七"];
    /**************删除"王五"****************/
    var arrReplace1 = arr.splice(2,1);	
    console.log(arrReplace1);  // ["王五"] 
    console.log(arr);  // ["张三", "李四", "马六", "杨七"] (原数组改变)
    //删除多个
    var arrReplace2 = arr.splice(1,3);	
    console.log(arrReplace2);  //  ["李四", "马六","杨七"] 
    console.log(arr);  // ["张三"]
    /**************添加"小刚"****************/
    var arrReplace3 = arr.splice(1,0,"小徐");
    console.log(arrReplace3);  // [] (没有删除元素,所以返回的是空数组)
    console.log(arr);  // ["张三", "小徐"]
    //添加多个
    var arrReplace4 = arr.splice(3,0,"阿锋哥1","阿锋哥2","阿锋哥3");
    console.log(arrReplace4);  // []
    console.log(arr);  // ["张三", "小徐","阿锋哥1","阿锋哥2","阿锋哥3"]
    /**************"大徐"替换"小徐"****************/
    var arrReplace5 = arr.splice(1,1,"大徐");
    console.log(arrReplace5);  // ["小徐"]
    console.log(arr);  // ["张三", "大徐", "阿锋哥1","阿锋哥2","阿锋哥3"]
    //替换多个
    var arrReplace6 = arr.splice(1,4,"李四");
    console.log(arrReplace6);  // ["大徐",  "阿锋哥1","阿锋哥2","阿锋哥3"]
    console.log(arr);  // ["张三", "李四"]

   11.索引方法indexOf()和lastIndexOf()

    两个方法都返回要查找的项在数组中首次出现的位置,在没找到的情况下返回-1

    indexOf()——–array.indexOf(item,start) (从数组的开头(位置 0)开始向后查找)

    item: 必须。查找的元素。

    start:可选的整数参数。规定在数组中开始检索的位置。如省略该参数,则将从array[0]开始检索。

    lastIndexOf()——–array.lastIndexOf(item,start) (从数组的末尾开始向前查找)

    item: 必须。查找的元素。

    start:可选的整数参数。规定在数组中开始检索的位置。如省略该参数,则将从 array[array.length-1]开始检索。

    var arr = [1,4,7,10,7,18,7,26];
    console.log(arr.indexOf(7));        // 2
    console.log(arr.lastIndexOf(7));    // 6
    console.log(arr.indexOf(7,4));      // 4
    console.log(arr.lastIndexOf(7,2));  // 2
    console.log(arr.indexOf(5));        // -1

   12.forEach()、map()、filter()、some()、every()——更新迭代数组

    这几个方法语法都一样,都不会改变原数组。

    参数值也都是一样,为(item , index , arr){//do something}, thisValue)  

    item : 必需。当前元素

    index: 可选。当前元素的索引值。

    arr :  可选。当前元素所属的数组对象。

    thisValue: 可选。传递给函数的值一般用 “this” 值。如果这个参数为空, “undefined” 会传递给 “this” 值

    forEach():对数组进行遍历循环,这个方法没有返回值。

    var Arr = [1,11,111,1111];
    Arr.forEach(function(item, index, arr){
    	console.log(index+"--"+item+"--"+(arr === Arr));		
    })
    //0-1-true
    //1-11-true
    //2-111-true
    //3-1111-true

  map():指“映射”,方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

    var arr = [1,4,8,10];
    //新数组每个值加1
    var arr2 = arr.map(function(item,index,arr){
        return item+1;
    });
    console.log(arr2);  // [2, 5, 9, 11]
    //给每个值加上key
    var arr3 = arr2.map(function(item){
        return {"key" : item}
    });
    console.log(arr3); // [{"key" : 2},{"key":5},{"key":9},{"key":11}]

   filter(): “过滤”功能,创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

    var arr = [1,4,6,8,10];
    var result1 = arr.filter(function(item){
        return item>3;
    });
    console.log(result1);  // [4,6, 8, 10]
    var result2 = arr.filter(function(item){
        return item>"3";
    });
    console.log(result2);  // [4,6, 8, 10]

    every():判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。

    var arr = [1,4,6,8,10];
    var result1 = arr.every(function(item){
        return item< 11;
    });
    console.log(result1);  // true
    var result2 = arr.every(function(item){
        return item> 1;
    });
    console.log(result2);  // false

    some():判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。

    var arr = [1,4,6,8,10];
    var result1 = arr.some(function(item){
        return item> 10;
    });
    console.log(result1);  // false
    var result2 = arr.some(function(item){
        return item> 9;
    });
    console.log(result2);  // true

  13.reduce()、reduceRight()——归并方法

    这两个方法都会迭代数组中的所有项,然后生成一个最终返回值。他们都接收两个参数,第一个参数是每一项调用的函数,函数接受四个参数分别是初始值,当前值,索引值,和当前数组,函数需要返回一个值,这个值会在下一次迭代中作为初始值。第二个参数是迭代初始值,参数可选,如果缺省,初始值为数组第一项,从数组第一个项开始叠加,缺省参数要比正常传值少一次运算。

    reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。

    参数值为(total , cur , index , arr){//do something}, initialValue)

    total :必需。初始值, 或者每次计算结束后的返回值。

    cur :必需。当前元素。

    index :可选。当前元素的索引。

    arr:可选。当前元素所属的数组对象。

    initialValue:可选。传递给函数的初始值。

    var arr = [1,2,3,4,5];
	var result1 = arr.reduce(function(total,cur,index,arr){	
		console.log("total:"+total+",cur:"+cur+",index:"+index);
	    return total+cur;
	});
	console.log("结果:"+result1);
	// 输出
	// total:1,cur:2,index:1
	// total:3,cur:3,index:2
	// total:6,cur:4,index:3
	// total:10,cur:5,index:4
	// 结果:15
	var result2 = arr.reduceRight(function(total,cur,index,arr){	
		console.log("total:"+total+",cur:"+cur+",index:"+index);
	    return total+cur;
	},10);
	console.log("结果:"+result2);
	// 输出
	// total:10,cur:5,index:4
	// total:15,cur:4,index:3
	// total:19,cur:3,index:2
	// total:22,cur:2,index:1
	// total:24,cur:1,index:0
	// 结果:25

  以下为es6新方法

 14.Array.form()

    Array.form()方法是用于类似数组的对象(即有length属性的对象)和可遍历对象转为真正的数组。

    let json ={
	'0':'阿',
	'1':'锋',
	'2':'哥',
	length:3
    }
    let arr = Array.from(json);
    console.log(arr);//["阿","锋","哥"]

    15.Array.of()

    Array.of()方法是将一组值转变为数组,参数不分类型,只分数量,数量为0返回空数组。

    let arr1 = Array.of(1,2,3,"afengge");	
    let arr2 = Array.of([1,2,3]);
    let arr3 = Array.of(undefined);
    let arr4 = Array.of();
    console.log(arr1); // [1,2,3,"afengge"]
    console.log(arr2); // [[1, 2, 3]]
    console.log(arr3); // [undefined]
    console.log(arr4); // []

   16.find()方法

    注意:find() 对于空数组,函数是不会执行的。find() 并没有改变数组的原始值。

    方法返回通过测试(函数内判断)的数组的第一个元素的值。方法为数组中的每个元素都调用一次函数执行。当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。

    回调函数可以接收3个参数,依次为当前的值(item)、当前的位置(index)、原数组(arr);

    let Arr = [1,2,5,7,5,9];
    let result1 = Arr.find(function(item,index,arr){			
    	return item>7;
    });
    let result2 = Arr.find(function(item,index,arr){			
    	return item>9;
    });
    console.log(result1); // 9
    console.log(result2); // undefined
    
    //取json里大于9的第一个值
    let Arr = [
	{
        	id:1,
		name:"阿锋哥"
	},
	{
		id:2,
		name:"小巧妹"
	}		
    ];
    let obj = Arr.find(function(item,index,arr){			
    	return item.id===1;
    });
    console.log(obj.name); //"阿锋哥"

   17.findIndex ()

 findIndex()方法跟find()方法差不多,不过返回的是索引.如果没有符合条件的,返回的是-1,不是undefined.

    let Arr = [1,2,5,7,5,9];
    let result1 = Arr.findIndex(function(item,index,arr){			
    	return item>7;
    });
    let result2 = Arr.findIndex(function(item,index,arr){			
    	return item>9;
    });
    console.log(result1); // 5
    console.log(result2); // -1

  18.fill()——es6新方法

    fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

    参数值为(value,  start,  end)

    value:必需。填充的值。

    start:可选。开始填充位置。如果这个参数是负数,那么它规定的是从数组尾部开始算起。

    end:可选。停止填充位置 (默认为 array.length)。如果这个参数是负数,那么它规定的是从数组尾部开始算起。

    let arr = [1,2,3,4,5,6];
    arr.fill(0);  // [0, 0, 0, 0, 0, 0]
    arr.fill(0,1);  // [1, 0, 0, 0, 0, 0] 
    arr.fill(0,1,2);  // [1, 0, 3, 4, 5, 6]
    arr.fill(0,-1);  // [1, 2, 3, 4, 5, 0]
    arr.fill(0,1,-1);  // [1, 0, 0, 0, 0, 6]

    19. keys()、values()、entries()

    这三个方法都是返回一个遍历器对象,可用for…of循环遍历,唯一区别:keys()是对键名的遍历、values()对键值的遍历、entries()是对键值对的遍历。

    let arr = ["a","b","c","d"];
    for(let i of arr.keys()){
	console.log(i);//0,1,2,3
    }
    for(let i of arr.values()){
	console.log(i); //"a","b","c","d"
    }
    for(let i of arr.entries()){
        console.log(i);[0, "a"][1,"b"][2,"c"][3,"d"]
    }
    for(let [idx,item] of arr.entries()){
        console.log(idx+":"+item); // 0:"a" 1:"b" 2:"c" 3:"d"
    }

    20.includes()

    includes()方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

    参数值为(searchElement ,  fromIndex)

    searchElement : 必须。需要查找的元素值。

    fromIndex:可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

    let arr = ["a","b","c","d"];    
    let result1 = arr.includes("b");
    let result2 = arr.includes("b",2);
    let result3 = arr.includes("b",-1);
    let result4 = arr.includes("b",-3);
    console.log(result1);  // true
    console.log(result2);  // false
    console.log(result3);  // flase
    console.log(result4);  // true

    21.copyWithin()

    copyWithin()方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中,会覆盖原有成员.

    参数值为(target ,  start ,  end)

    target :必需。从该位置开始替换数据。

    start :可选。从该位置开始读取数据,默认为 0 。如果为负值,表示倒数。

    end: 可选。到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。

    let arr = [1,2,3,4,5,6];
    let result1 = [1,2,3,4,5,6].copyWithin(0);
    let result2 = [1,2,3,4,5,6].copyWithin(0,1);
    let result3 = [1,2,3,4,5,6].copyWithin(1,3,5);
    let result4 = [1,2,3,4,5,6].copyWithin(1,2,-1);
    let result5 = [1,2,3,4,5,6].copyWithin(1,-4,6);
    console.log(result1);  // [1, 2, 3, 4, 5, 6]
    console.log(result2);  // [2, 3, 4, 5, 6, 6]
    console.log(result3);  // [1, 4, 5, 4, 5, 6]
    console.log(result4);  // [1, 3, 4, 5, 5, 6]
    console.log(result5);  // [1, 3, 4, 5, 6, 6]
赞(2) 打赏
未经允许不得转载:阿锋哥前端开发经验分享 » js数组的常用方法详解
分享到: 更多 (0)

几百块就能做营销型企业网站?

查看详情

可怜可怜作者吧

支付宝扫一扫打赏

微信扫一扫打赏