Javascript数组方法详解

Javascript数组方法详解

栈方法

(1)push()

可以接受任意数量的参数,把它们依次添加到数组末尾

     var x=["red","pick"];
        x.push("green");
        for(var i=0;i<x.length;i++){
            console.log(x[i]); //依次输出 red,pick,green
        }
        console.log(x.length);//数组长度为3

(2)pop()

可以接受任意数量的参数,从数组末尾移除最后一项

 var x=["red","pick"];
        x.pop();
        for(var i=0;i<x.length;i++){
            console.log(x[i]); //依次输出 red
        }
        console.log(x.length);//数组长度为1

队列方法

(3)shift

可以接受任意数量的参数,删除或取得数组最前面一项

 var x=["red","pick"];
       var s= x.shift();
       console.log(s)//输出删除的最前面的一项 red
        for(var i=0;i<x.length;i++){
            console.log(x[i]); //依次输出 pick
        }
        console.log(x.length);//数组长度为1

(4)unshift

可以接受任意数量的参数,在数组前面添加数据

  var x=["red","pick"];
        x.unshift("blue","green");
        for(var i=0;i<x.length;i++){
            console.log(x[i]); //依次输出 blue green red pick
        }
        console.log(x.length);//数组长度为4

重排序方法

(5)reverse

反转数组项的顺序

 var x=[1,2,3,4,5];
        x.reverse();
        console.log(x);//输出 Array(5) [ 5, 4, 3, 2, 1 ]

(6)sort

扫描二维码关注公众号,回复: 12643149 查看本文章

sort()方法按升序排列数组----就是从小到大

   var x=[9,0,3,7,5];
        x.sort();
        console.log(x);//输出 Array(5) [ 0, 3, 5, 7, 9 ]

操作方法

(7)concat

concatt()方法可以根据当前数组的所有项创建一个新的数组(意思就是复制一个副本)

 var x=["red","blue","yellow"];
        var y=x.concat(["black","brown"]);
        console.log(x);//  Array(3) [ "red", "blue", "yellow" ]
        console.log(y);// Array(5) [ "red", "blue", "yellow", "black", "brown" ]

(8)slice

slice()方法可以返回一个新的数组,当只有一个参数的时候,
slice()返回从该参数位置开始到当前数组的所有项。
当有2个参数的时候,slice()返回起始和结束位置之间的所有项(不包括结束位置的项)。

  var x=["red","blue","yellow","black","brown"];
       var y= x.slice(2); 
        console.log(y); // Array(3) [ "yellow", "black", "brown" ]
       var z= x.slice(2,3);
        console.log(z); // Array [ "yellow" ]

(9)splice

删除:可以删除任意项,splice(0,2)
插入: splice(2,0,“xiao”,“ming”) 从位置2开始插入字符串“xiao”,“ming”
替换:splice(1,1,“purple”,“orange”) 插入两项,删除一项

  var x=["red","blue","yellow","black","brown"];
 
         x.splice(0,2); //删除了前面2个
        console.log(x); // Array(3) [ "yellow", "black", "brown" ]
        x.splice(2,0,"xiao","ming");
        console.log(x); // Array(5) [ "yellow", "black", "xiao", "ming", "brown" ]
        x.splice(1,2,"purple","orange"); //1代表从下标为1位置开始,2代表替换2个
 		 console.log(x); //Array(5) [ "yellow", "purple", "orange", "ming", "brown" ]

位置方法

(10)indexof

indexof()方法表示查找起点位置的索引(索引0开始往后找)

   var x=[2,4,6,3,1];
       console.log(x.indexOf(2)); //0  2在索引0的位置上

(11)lastindexof

indexof()方法表示从后往前找

 var x=[2,4,6,3,1,3,2,1];
       console.log(x.lastIndexOf(2)); //6 

迭代方法

*(12)forEach()

forEach() 方法为每个数组元素调用一次函数(回调函数)。

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

(13)map

map() 方法通过对每个数组元素执行函数来创建新数组。

map() 方法不会对没有值的数组元素执行函数。

map() 方法不会更改原始数组。

//这个例子将每个数组值乘以2
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

(14)filter

filter() 方法创建一个包含通过测试的数组元素的新数组。

//这个例子用值大于 18 的元素创建一个新数组
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

(15)every

every() 方法检查所有数组值是否通过测试。

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {  //项目值 项目索引 数组本身
  return value > 18;
}

(15)reduce

reduce() 方法在每个数组元素上运行函数,以生成(减少它)单个值。

reduce() 方法在数组中从左到右工作。另请参见 reduceRight()。

reduce() 方法不会减少原始数组。

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

(16)reduceRight

reduceRight() 方法在每个数组元素上运行函数,以生成(减少它)单个值。

reduceRight() 方法在数组中从左到右工作。另请参见 reduce()。

reduceRight() 方法不会减少原始数组。

//这个例子确定数组中所有数字的总和:
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

猜你喜欢

转载自blog.csdn.net/qq_41309350/article/details/113250775