javascript中的数组方法

方法 描述
concat() 连接两个或更多的数组,并返回结果。
copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中。
every() 检测数值元素的每个元素是否都符合条件。
fill() 使用一个固定值来填充数组。
filter() 检测数值元素,并返回符合条件所有元素的数组。
find() 返回符合传入测试(函数)条件的数组元素。
findIndex() 返回符合传入测试(函数)条件的数组元素索引。
forEach() 数组每个元素都执行一次回调函数。
indexOf() 搜索数组中的元素,并返回它所在的位置。
join() 把数组的所有元素放入一个字符串。
lastIndexOf() 返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
map() 通过指定函数处理数组的每个元素,并返回处理后的数组。
pop() 删除数组的最后一个元素并返回删除的元素。
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
reduce() 将数组元素计算为一个值(从左到右)。
reduceRight() 将数组元素计算为一个值(从右到左)。
reverse() 反转数组的元素顺序。
shift() 删除并返回数组的第一个元素。
slice() 选取数组的的一部分,并返回一个新数组。
some() 检测数组元素中是否有元素符合指定条件。
sort() 对数组的元素进行排序。
splice() 从数组中添加或删除元素。
toString() 把数组转换为字符串,并返回结果。
unshift() 向数组的开头添加一个或更多元素,并返回新的长度。
valueOf() 返回数组对象的原始值。

数组创建

JavaScript中创建数组有两种方式,第一种是使用 Array 构造函数:

var arr1 = new Array(); //创建一个空数组
var arr2 = new Array(20); // 创建一个包含20项的数组
var arr3 = new Array("lily","lucy","Tom");  // 创建一个包含3个字符串的数组
 
 
  • 1
  • 2
  • 3

创建数组的第二种基本方式是使用数组字面量表示法:

var arr4 = []; //创建一个空数组
var arr5 = [20]; // 创建一个包含1项的数组
var arr6 = ["lily","lucy","Tom"];  // 创建一个包含3个字符串的数组
 
 
  • 1
  • 2
  • 3

在读取和设置数组的值时,要使用方括号并提供相应值的基于 0 的数字索引:

var arr6 = ["lily","lucy","Tom"];  // 创建一个包含3个字符串的数组
alert(arr6[0]); //lily
arr6[1] = "mary"; //修改第二项为mary
arr6[3] = "sean"; //增加第四项为sean
 
 
  • 1
  • 2
  • 3
  • 4

JavaScript中数组的length属性是可以修改的,看下面的示例:

var arr = ["lily","lucy","Tom"];  // 创建一个包含3个字符串的数组
arr[arr.length] = "sean"; //在下标为3处(也就是数组尾部)添加一项"sean"
arr.length = arr.length-1; //将数组的最后一项删除
 
 
  • 1
  • 2
  • 3

 Array.isArray()方法。这个方法的目的是最终确定某个值到底是不是数组,而不管它是在哪个全局执行环境中创建的。

数组方法

1、 join()

 功能:将数组中所有元素都转化为字符串并连接在一起。
 输入: 分隔符,默认为逗号
 输出:分隔符分割的字符串
 举例:

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
var a = [1,2,3];
a.join(); // =>"1,2,3"
a.join(";");// =>"1;2;3"
 
 
  • 1
  • 2
  • 3

2、 reverse()

功能:将数组中的元素颠倒顺序。
输入:无
输出:逆序的数组
举例:

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
var a = [1,2,3];
a.reverse.join()// =>"3,2,1"
 
 
  • 1
  • 2

3、sort() 
功能:按升序排列数组项——即最小的值位于最前面,最大的值排在最后面 
输入:比较函数或null。null时表示按照字母表顺序排序;传入带两个参数的比较函数时;第一个参数在前,则返回小于0的数值;第一个参数在后,则返回大于0的数组 
输出:排序后数组 
注意:改变了原数组 。sort()方法会调用每个数组项的 toString()转型方法,然后比较得到的字符串,以确定如何排序
举例:

var a = [22,33,11111,4444];
a.sort();// =>11111,22,33,4444
a.sort(function(a,b){
    return a-b;
});// => 22,33,4444,11111
a.sort(function(a,b){return b-a})// =>11111,4444,33,22
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等则返回 0,如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数:

function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [3, 13, 24, 51]
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

如果需要通过比较函数产生降序排序的结果,只要交换比较函数返回的值即可:

function compare(value1, value2) {
    if (value1 < value2) {
        return 1;
    } else if (value1 > value2) {
        return -1;
    } else {
        return 0;
    }
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [51, 24, 13, 3]

4、concat() 
功能:数组拼接的功能 
输入:待拼接的元素;如果参数中有数组,则连接的是数组元素,而非数组本身;但是不支持递归,不修改调用的数组。 
输出:拼接后的新数组 
注意:新建的数组,原数组不改变。 
举例:

var a = [1,2,3];
a.concat(4,5) // =>[1,2,3,4,5]
a.concat([4,5]) // =>[1,2,3,4,5]
a.concat(4,[5,[6,7]]) //[1,2,3,4,5,[6,7]]
 
 
  • 1
  • 2
  • 3
  • 4

传入的不是数组,则直接把参数添加到数组后面,如果传入的是数组,则将数组中的各个项添加到数组中。但是如果传入的是一个二维数组,那么也会把这一数组项当作一项添加

5、slice() 
功能:获取原数组的片段或子数组 
输入:片段的开始和结束 
输出:返回的数组包含第一个参数指定的位置和所有到但不含第二个参数指定位置之间的所有元素。如果为负数,表示相对于数组中最后一个元素的位置。 只有一个参数的情况下, slice()方法返回从该参数指定位置开始到当前数组末尾的所有项,两个参数都是负数,arr.slice(-4,-1);所以都加上数组长度5转换成正数,因此相当于slice(1,4)。
注意:新建的数组,原数组不改变。 
举例:

var a = [1,2,3,4,5];
a.slice(0,3);// =>[1,2,3]
a.slice(3);// =>[4,5]
a.slice(1,-1)// =>[2,3,4]
 
 
  • 1
  • 2
  • 3
  • 4

6、splice() 

splice():很强大的数组方法,它有很多种用法,可以实现删除、插入和替换。

  • 删除:可以删除任意数量的项,只需指定 2 个参数:要删除的第一项的位置和要删除的项数。例如, splice(0,2)会删除数组中的前两项。
  • 插入:可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、 0(要删除的项数)和要插入的项。例如,splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
  • 替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如,splice (2,1,4,6)会删除当前数组位置 2 的项,然后再从位置 2 开始插入4和6。

splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项,如果没有删除任何项,则返回一个空数组。

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]

var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); // []

var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3); //[7]

 
 
  • 1
  • 2
  • 3

7、push()和pop() 
功能:push(): 可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。 
  pop():数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。
输入:push输入为插入的元素;pop输入为空 
输出:push为新长度;pop为返回的数组元素 
举例:

var stack = [];
stack.push(1,2);// =>stack:[1,2],返回2
stack.pop();// => stack: [1],返回2
 
 
  • 1
  • 2
  • 3

8、unshift()和shift 
功能:shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 。 
  unshift:将参数添加到原数组开头,并返回数组的长度 。

9、toString()和toLocaleString() 
功能:将数组的每个元素转化为字符串,并且输出用逗号分隔的字符串列表。功能类似join(); 
输入:无 
输出:字符串 
举例:

[1,2,3].toString() // =>'1,2,3'
 
 
  • 1

***********以下为es5中新增的9个方法********* 
10、forEach() 
功能:对数组进行遍历循环,对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型,默认有传参,参数 分别为:遍历的数组内容;第对应的数组索引,数组本身。
输入:输入为一个待遍历函数,函数的参数依次为:数组元素、元素的索引、数组本身 
输出:只是执行了遍历函数,无特定返回 
举例:

var data = [1,2,3,4,5];
data.forEach(function(v,i,a){a[i] = v + 1;});
data // =>[2,3,4,5,6]
 
 
  • 1
  • 2
  • 3

11、map() 
功能:指“映射”,对数组中的每一项运行给定函数,返回每次函数调用的结果组成的新数组。
输入:和forEach一样 
输出:执行完函数的新数组 
注意:返回新数组,不修改原数组 
举例:

a = [1,2,3];
b = a.map(function(x){return x*x;}); // =>[1,4,9]
 
 
  • 1
  • 2

12、filter() 
功能:“过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。 
输入:执行逻辑判断的函数,该函数返回true或false,参数类似forEach和map() 
输出:如果执行输入函数返回值为true,则传递给判定函数的元素是这个子集的成员 
举例:

a = [5,4,3,2,1];
smallvalues = a.filter(function(x){return x<3});// =>[2,1]
 
 
  • 1
  • 2

13、every()和some() 
功能:every():判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。some():判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。 

输入:特定函数 
输出:true 或者false 
举例:

var a = [1,2,3,4,5];
a.every(function(x){return x<10;}) // =>true
 
 
  • 1
  • 2

14、reduce()和reduceRight() 
功能:使用指定的函数将数组元素进行组合,生成单个值。实现迭代数组的所有项,然后构建一个最终返回的值。reduce()方法从   数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。 
输入:两个参数,第一个是在每一项上调用的函数。第二个(可选)的参数是一个传递给函数的初始值。 传给 reduce()和 reduceRight()的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数 自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。
注意:执行化简的函数的第一个参数为目前为止化简操作累积的结果。 

下面代码用reduce()实现数组求和,数组一开始加了一个初始值10。

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);
console.log(sum); //25

15、indexOf()和lastIndexOf() 
功能:搜索整个数组中具有给定值得元素,返回找到的第一个元素的索引或者如果没有找到就返回-1.lastIndexOf为反向搜索。 indexOf():接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。 lastIndexOf:接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的末尾开始向前查找。

输入:元素的值。 

输入:索引值

注意:在比较第一个参数与数组中的每一项时,会使用全等操作符。

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

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

console.log(arr.indexOf("5")); //-1

*************************华丽分割ES6扩展************************* 
16、Array.from() 
功能:将两类对象转为真正的数组:类似数组的对象和可遍历的对象 
输入:待转换的对象,第二个参数可选,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。 
输入:数组 
举例:

let arrayLike = {
       '0':'a',
       '1':'b',
       '2':'c',
       length:3
};
let arr2 = Array.from(arrayLike);// =>['a','b','c']
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

17、Array.of() 
功能:将一组值,转换为数组。 
输入:数组元素 
输出:数组 
举例:

Array.of(2,11,3)// =>[2,11,3]
Array.of(3)// =>[3]
 
 
  • 1
  • 2

18、copyWithin() 
功能:在当前数组内部,将指定位置的成员复制到其他位置,返回当前数组。 
输入:第一个参数(从该位置开始替换数据);第二个参数可选(从该位置开始读取数据,默认为0,负值表示倒数);第三个参数(到该位置前停止读取,默认为数组长度) 
输出:返回当前替换后的数组。 
注意:改变了当前数组 
举例:

[1, 2, 3, 4, 5].copyWithin(0, 3) //=> [4, 5, 3, 4, 5]
 
 
  • 1

19、find()和findIndex() 
功能:找到第一个符合条件的数组成员。 
输入:回调函数,所有数组成员依次执行该函数,直到找到第一个返回值为true的成员。回调函数可以接受三个参数,依次为值,位置,原数组。 
输出:find()返回找到的成员;findIndex()返回成员的位置。 
举例:

[1,5,10,15].find(function(value,index,arr){
    return value > 9;
})// =>10
 
 
  • 1
  • 2
  • 3

20、fill() 
功能:使用给定的值,填充一个数组。 
输入:第一个参数为待填充的值,第二和第三参数可选,分别表示填充的起始和结束位置(不包括)。 
输出:填充后的数组 
举例:

['a', 'b', 'c'].fill(7, 1, 2)
// =>['a', 7, 'c']
 
 
  • 1
  • 2

21、entries()、keys()、values() 
功能:用于遍历数组,可以用for…of循环进行遍历。区别是keys()是对键名的遍历、values是对键值的遍历、entries()是对键值对的遍历。 
输入:无 
输出:遍历器对象 
举例:

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// =>0
// =>1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// =>'a'
// =>'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// =>0 "a"
// =>1 "b"
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

如果不使用for…of循环,可以手动调用遍历器对象的next方法,进行遍历。

22、includes() 
功能:表示某个数组是否包含给定的值 
输入:第一个参数必选(待检查的给定值),第二个参数可选,表示搜索的起始位置,默认为0,负数表示倒数的位置。 
输出:一个布尔值。 
注意:和indexOf的区别,indexOf进行了运算符的强比对,会导致对NaN误判。 
举例

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, NaN].includes(NaN); // true

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);
console.log(sum); //25


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值