您的位置:首页 > Web前端 > JavaScript

JavaScript Array数组方法详解

2019-01-11 20:36 441 查看

JavaScript Array数组方法详解

Array类型是ECMAScript中最常用的引用类型。ECMAScript中的数据与其它大多数语言中的数组有着相当大的区别。 虽然ECMAScript中的数据与其它语言中的数组一样都是数据的有序列表,但不同的是,ECMAScript数组中的每一项可以保存任何类型的数据,无论是数值、字符串或者是对象。同时,ECMAScript中的数组大小是可以动态调整的,即可以根据数据的添加自动增长以容纳新增的数据。

下面总结一下JavaScript中数组常用的操作函数及用法。

创建数组

创建数组主要有构造函数和数组字面量两种方法,如下所示:

1、let arr = new Array();
2、let arr = [];

对于构造函数,我们可以传递一个数值创建包含给定项数的数组,如下:

1、let arr = new Array(3);    //=>数组长度为3

也可以直接传递存放于数组中的值,如下:

1、let arr = new Array("red","green","blue");

不论哪种方式,推荐使用数组字面量的形式来创建数组。

检测数组

对于单一的全局执行环境而言,使用instanceof操作符就可以检测是否为数组,
例如:

1、let arr = [1,2,3];
2、console.log(arr instanceof Array);   //true

Array.isArray()

但如果网页中包含多个框架,也就包含多个全局执行环境,
Array.isArray()方法可以用来确定某个值是否为数组,而不管它是在哪个全局执行环境中被创建的,如下:

if(Array.isArray(arr)){
//执行某些操作
}

数组字符串转换
toLocaleString()
toString()
valueof()

每个对象都具有toLocaleString()、toString()和valueof()方法。调用数组的toString()方法会返回数组中每个值的字符串形式拼接而成并且以逗号分隔的字符串,调用数组的valueof()方法返回的还是数组,实际上调用的是数组每一项的toString()方法,
如下:

let arr = ["red","green","blue"];
console.log(arr.toString());   //red,green,blue
console.log(arr.valueof());    //red,green,blue
console.log(arr);              //red,green,blue
而调用数组的toLocaleString()方法,与toString()不同的是它会调用数组每一项的toLocaleString()方法,将每一项toLocaleString()方法的返回值以逗号分隔拼接成一个字符串。而使用join()方法,可以使用不同的分隔符来构建这个字符串,如下:
let arr = ["red","green","blue"];
console.log(arr.join(","));   //red,green,blue
console.log(arr.join("||"));   //red||green||blue

push()
pop()

push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改修改后数组的长度,
pop()与push()相反,它从数组末尾移除最后一项,并返回移除的项
例如:

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

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

unshift()
shift()

unshift()方法与shift()用途相反,它能够在数组前端添加任意个项并返回新数组的长度,例如:

let arr = [1,2,3];
arr.shift();   //1
arr.shift();   //2
console.log(arr);   //[3]

let arr = [1,2,3];
arr.unshift(4);   //返回长度4
arr.unshift(5);   //返回长度5
console.log(arr);   //[1,2,3,4,5]

reverse()

它会反转数据项的顺序,
例如:

let arr = [1,2,3];
arr.reverse();
console.log(arr);   //[3,2,1]

sort()

可以对数组进行排序,不过它的默认排序方式并不是大小,而是根据对应字符串逐个编码排序的。sort()方法可以接收一个比较函数,进行自定义排序,
例如:

function compare(value1,value2){
return value1-value2;
}
let arr = [1,3,2,5,4];
arr.sort(compare);
console.log(arr);   //[1,2,3,4,5]

concat()

会创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组,原来的数组不变,
例如:

let arr = [1,2,3];
let arr2 = arr.concat(4,[5,6]);
console.log(arr);   //[1,2,3]
console.log(arr2);   //[1,2,3,4,5,6]

fill()

使用自己想要的参数替换原数组内容,但是会改变原来的数组。
该方法有三个参数:

  • fill(value, start, end)

    value:想要替换的内容。

  • start:开始位置(数组的下标),包括此位置。

  • end:替换结束位置(数组的下标),不包括此位置,如果省略不写就默认为数组结束。

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

slice()

接收一个或两个参数,即要返回项的开始位置和结束位置。如果只要一个参数,则返回从指定位置开始到数组结束的所有项。如果接收两个参数,则返回起始和结束位置之间的所有项但不包括结束位置的项,例如:

let arr = [1,2,3,4,5];
let arr2 = arr.slice(1);   //[2,3,4,5]
let arr3 = arr.slice(1,3);   //[2,3]
  • 注意,slice()方法不会影响原来的数组。
      
    splice()

splice()方法可以接收三个参数,第一个参数表示添加或删除项目的位置,第二个参数表示要删除的项目数量,第二个参数表示向数组中添加的新项目(可选),通过提供不同的参数可以实现删除、插入和替换等功能,例如:

let arr = [1,2,3,4,5];
arr.splice(2,0,11,22);   //从位置2插入两项,没有删除
console.log(arr);   //[1,2,11,22,3,4,5]

arr.splice(2,2,33,44);   //从位置2开始删除两项,插入两项,返回被删除的项
console.log(arr);   //[1,2,33,44,4,5]

arr.splice(1,1);   //从位置1开始删除1项,返回被删除的项
console.log(arr);   //[1,33,44,4,5]

indexOf()
lastIndexOf()

这两个方法都接收两个参数:要查找的项和表示查找起点位置的索引(可选)。
indexOf()方法从数组的开头向后查找,
lastIndexOf()则从数组的末尾向前查找,
例如:

let arr = [1,2,3,4,5,4,3,2,1];
console.log(arr.indexOf(4));   //3
console.log(arr.lastIndexOf(4));   //5

console.log(arr.indexOf(4,4));   //5
console.log(arr.lastIndexOf(4,4));   //3

every()
some()

every()方法和some()方法是相似的。
对于every()方法来说,传入的函数必须对每一项都返回true,这个方法才返回true。
而对于some(),传入的函数只要对数组中的任意一项返回true,该方法就返回true。
例子如下:

let arr = [1,2,3,4,5,4,3,2,1];
let everyResult = arr.every(function(item,index,array){
return (item>2);
});
console.log(everyResult);   //false,并不是全部大于2

let someResult= arr.some(function(item,index,array){
return (item>2);
});
console.log(someResult);   //true,某一项大于2即可

filter()

根据给定的函数确定是否在返回的数组中包含某一项,例如:

let arr = [1,2,3,4,5,4,3,2,1];
let filterResult = arr.filter(function(item,index,array){
return (item>2);
});
console.log(filterResult);   //[3,4,5,4,3],返回所有数值都大于2的一个数组

map()

对于数组中的每一项都会运行给定的函数,然后将每一项函数运行结果组成的数组返回,例如:

let arr = [1,2,3,4,5,4,3,2,1];
let mapResult = arr.map(function(item,index,array){
return item*2;
});
console.log(mapResult);   //[2,4,6,8,10,8,6,4,2],原先数组每一项乘以2后返回

forEach()

它只对数组中的每一项运行给定函数,没有返回值,例如:

let arr = [1,2,3,4,5,4,3,2,1];
arr.forEach((item,index,array)=>{
//执行某些操作
});

reduce()
reduceRight()

这两个方法都会迭代数组中的所有项,然后返回一个最终的值。
**reduce()**从第一项开始逐渐遍历到最后一项,
**reduceRight()**从最后一项开始遍历到第一项结束。这两个函数都接收四个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传递给下一项。例如,使用reduce()方法求数组所有项的和:

let arr = [1,2,3,4,5];
let sum = arr.reduce(function(pre,cur,index,array){
return pre+cur;
});
console.log(sum);   //15

第一次执行回调函数,pre是1,cur是2。
第二次,pre是3(1+2),cur是3。
这个过程会把数组的每一项都访问一遍,最后返回结果。
reduceRight()方法与reduce()类似,只不过方向相反而已。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: