JavaScript数组操作方法

1、数组方法概括

方法名 版本 功能 是否改变原数组
push ES5 在数组的最后新增数据,返回数组被增加之后的长度
unshift   ES5  在数组的第一位增加新的数据, 返回数组被增加之后的长度  是 
 pop ES5 删除数组中的最后一位数据,返回被删除的数据 
 shift ES5 删除数组中的第一位数据,返回被删除的数据    是 
splice  ES5 删除指定索引的数据,返回被删除的数据 
 reverse ES5 将数组数据翻转,返回被翻转后的数据 
 join ES5 使用分隔符将数组内的所有数据转为字符类型 
slice   ES5   截取指定位置的数据,返回所截取的数据
 sort ES5 按字符的排序规则,将数组内的所有数据排序 ,返回排序后的数组  否 
indexOf ES5 根据传入的数据,查询在数组中的位置;返回索引
lastIndexOf ES5 根据传入的数据,从后向前查询在数组中的位置;返回索引
forEach ES5 参数为回调函数,会遍历数组所有的项,且回调函数接受三个参数,分别为value,index,self;没有返回值
map ES5 参数为回调函数,会遍历数组所有的项,且回调函数接受三个参数,分别为value,index,self;对每一项映射得到新数据,组成一个新数组;返回新数组
filter ES5 参数为回调函数,会遍历数组所有的项,且回调函数接受三个参数,分别为value,index,self;过滤掉符合条件的值,返回符合条件的数据组成的新数组
some ES5 参数为回调函数,会遍历数组所有的项,且回调函数接受三个参数,分别为value,index,self;查询数组中是否有符合条件的值,只有符合,停止查询;返回布尔值
every ES5 参数为回调函数,会遍历数组所有的项,且回调函数接受三个参数,分别为value,index,self;查询数组中是否有符合条件的值,必须全部符合,才为true;返回布尔值
concat ES5 用于连接两个或多个数组,该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
includes ES6 查询数组中是否包含一个指定的值;返回布尔值
findIndex ES6 查询目标元素,返回索引

2、方法详解

①push

功能:在数组的尾部新增数据,并返回被增加之后的长度;

参数:任意个,任意值;

1 var arr = ["hello",3,4,5,"world"];
2 var res = arr.push("a",8,"he");
3 console.log(res);       // hello,3,4,5,world,a,8.he

②unshift

功能:在数组的首位新增数据,并返回被增加之后的长度;

参数:任意个,任意值;

1 var arr = ["hello",3,4,5,"world"];
2 var res = arr.unshift("a",8,"he");
3 console.log(res);       // a,8,he,hello,3,4,5,world

③pop

功能:删除数组的最后一位数据,并返回该数据;

参数:无;

1 var arr = ["hello",3,4,5,"world"];
2 var res = arr.pop();
3 console.log(res);       // hello,3,4,5

④shift

功能:删除数组的第一位数据,并返回该数据;

参数:无;

1 var arr = ["hello",3,4,5,"world"];
2 var res = arr.shift();
3 console.log(res);       // 3,4,5,world

⑤splice

功能:根据参数的不同向数组中添加,或从数组删除,或替换数组中的元素,然后返回被删除或替换的元素;

参数:splice(start,num,data1,data2,...); 所有参数全部可选;

Ⅰ、不传参时:无操作;

1 var arr = ["hello",3,4,5,"world"];
2 var res = arr.splice();
3 console.log(res);       // hello,3,4,5,world

Ⅱ、只传入start位置的参数:表示从索引为start的数据开始删除,直到数组结束;

1 var arr = ["hello",3,4,5,"world"];
2 var res = arr.splice(2);
3 console.log(res);       // hello,3,4

Ⅲ、传入start和num位置的参数:表示从索引为start的数据开始删除,删除num个;

1 var arr = ["hello",3,4,5,"world"];
2 var res = arr.splice(2,1);
3 console.log(res);       // hello,3,4,world

Ⅳ、传入更多:表示从索引为start的数据开始删除,删除num个,并将第三个参数及后面所有参数,插入到start的位置;

1 var arr = ["hello",3,4,5,"world"];
2 var res = arr.splice(2,1,"a","b");
3 console.log(res);       // hello,3,4,a,b,world

⑥reverse

功能翻转数组及颠倒数组中的元素位置;

参数:无;

1 var arr = ["hello",3,4,5,"world"];
2 var res = arr.reverse();
3 console.log(res);       // world,5,4,3,hello

⑦join

功能使用分隔符将数组内的所有数据转为字符类型

参数参数可选,默认为","号,以传入的字符作为分隔符

1 var arr = ["hello",3,4,5,"world"];
2 var res = arr.join();
3 console.log(res);       // hello,3,4,5,world

⑧slice

功能截取指定位置的数据,返回所截取的数据

参数:slice(start,end),两个参数strat为必选,表示从第几位开始;end为可选,表示到第几位结束(不包含end位),省略表示到最后一位;start和end都可以为负数,负数时表示从最后一位开始算起,如-1表示最后一位;

1 var arr = ["hello",3,4,5,"world"];
2 var res = arr.slice(1,3);
3 console.log(res);       // 3,4

⑨sort

功能按字符的排序规则,将数组内的所有数据排序 ,返回排序后的数组

参数:无;

1 var numArr = [45,63,2456,163,79];
2 var res = numArr.sort();
3 console.log(res);          // 163, 2456, 45, 63, 79

⑩indexOf

功能根据指定的数据,从左向右,依次查询在数组中出现的位置,如果不存在指定的数据,返回-1;找到返回索引。

参数:indexOf(value, start);value为要查询的数据;start为可选,表示开始查询的位置,当start为负数时,从数组的尾部向前数

1 var arr = [22,24,34,42,56,13,78,76,45];
2 var res = arr.indexOf(24,0);
3 console.log(res);      // 1

lastIndexOf

功能根据指定的数据,从后向前,依次查询在数组中出现的位置,如果不存在指定的数据,返回-1;找到返回索引。

参数:indexOf(value, start);value为要查询的数据;start为可选,表示开始查询的位置,当start为负数时,从数组的尾部向前数

1 var arr = [22,24,34,42,56,13,78,76,45];
2 var res = arr.lastIndexOf(24,0);
3 console.log(res);      // 1

forEach

功能遍历数组,该方法没有返回值。

参数forEach(callback);回调函数callback默认有三个参数,分别为value数组的数据),index(对应的索引),self(数组自身);

1 var arr = [22,24,34,42,56,13,78,76,45];
2 var res = arr.forEach(function(value,index,self){
3      console.log(value,"---",index,"---",self);
4      console.log(index);     // 22, 24, 34, 42, 56, 13, 78, 76, 45
5 })
6 console.log(res);       // undefined

map

功能遍历数组,对每一项映射得到新的数组,返回新的数组;

参数:map(callback);回调函数callback默认有三个参数,分别为value数组的数据),index(对应的索引),self(数组自身);

1 var arr = [22,24,34,42,56,13,78,76,45];
2 var res = arr.map(function(value,index,self){
3      return value * 2;
4 })
5 console.log(res);      // 44, 48, 68, 84, 112, 26, 156, 152, 90

filter

功能遍历数组,过滤掉符合条件的值,返回符合条件的数据组成的新数组

参数:filter(callback);回调函数callback默认有三个参数,分别为value数组的数据),index(对应的索引),self(数组自身);

1 var arr = [22,24,34,42,56,13,78,76,45];
2 var res = arr.filter(function(value,index,self){
3      return value > 50;
4 })
5 console.log(res);      // 56, 78, 76

some

功能判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true,并停止遍历

参数:some(callback);回调函数callback默认有三个参数,分别为value数组的数据),index(对应的索引),self(数组自身);

1 var arr = [22,24,34,42,56,13,78,76,45];
2 var res = arr.some(function(value,index,self){
3      return value === 50;
4 })
5 console.log(res);      // false

every

功能判断数组中是否存在满足条件的项,必须全部满足条件,才会返回true,有一个不符合,就为false,同时停止遍历

参数:every(callback);回调函数callback默认有三个参数,分别为value数组的数据),index(对应的索引),self(数组自身);

1 var arr = [22,24,34,42,56,13,78,76,45];
2 var res = arr.every(function(value,index,self){
3      return value < 30;
4 })
5 console.log(res);      // false

concat

功能用于连接两个或多个数组,该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

参数concat(data1,data2,...);所有参数可选,要合并的数据;data为数组时,将data合并到原数组;data为具体数据时直接添加到原数组尾部;省略时创建原数组的副本

1 var arr1 = [1,2,3]
2 var arr2 = arr1.concat();
3 console.log(arr1);           //[1,2,3]---原数组
4 console.log(arr1 === arr2);  //false
5 console.log(arr2);           //[1,2,3]---原数组的副本
6 console.log(arr1.concat("hello","world"));           //[1,2,3,"hello","world"]
7 console.log(arr1.concat(["a","b"],[[3,4],{"name":"admin"}]));   //[1,2,3,"a","b",[3,4],{"name":"admin"}]
8 console.log(arr1);           //[1,2,3]---原数组未改变

includes

功能查询数组中是否包含一个指定的值;返回布尔值

参数:includes(data,index),两个参数data为查找的元素;index为起始位置(可选)

1 var arr = [22,24,34,42,56,13,78,76,45];
2 var res = arr.includes(24,0);
3 console.log(res);   // true

findIndex

功能查询目标元素,找到就返回该元素的索引,找不到就返回-1;

参数:findIndex(callback),回调函数callback默认有三个参数,分别为value数组的数据),index(对应的索引),self(数组自身)

1 var arr = [22,24,34,42,56,13,78,76,45];
2 var res = arr.findIndex(function(value,index,self){
3     console.log(value);     // 22,24,34,42,56,13,78,76,45
4     return value == 22;
5 });
6 console.log(res);     // 0

猜你喜欢

转载自www.cnblogs.com/z-royal/p/12750512.html