数组方法的总结和运用

495 阅读7分钟

一些对数组的处理方式呢,小伙伴们可能记忆不是很深刻了。总结一下,帮助小伙伴们温故知新

1:数组反序&排序&乱序的方法

  • js 基础——sort方法:

arrayObject.sort(sortby);

参数:定义排序规则(正序、倒序、按字段排序)的函数;

返回值:对数组的引用。请注意,数组在原数组上进行排序,不生成副本

无参数时,默认为正序排序(数值数组按数值正序,字符串数组按字符正序)。

要实现不同的排序方式,只需实现sort的输入参数函数即可。

  • 如果传入的参数是0,两个数位置不变
  • 如果参数小于0,就交换位置
  • 如果参数大于0,就不交换位置

正序

let sb=[1,5,9,3,5,7,8]

console.log(sb,sb.sort((a,b)=>a-b))//[1, 3, 5, 5, 7, 8, 9]

倒序

let sb=[1,5,9,3,5,7,8]

console.log(sb,sb.sort((a,b)=>b-a))//[9, 8, 7, 5, 5, 3, 1]

随机

var arr = [1, 2, 3, 4, 5, 6]; 
arr.sort(function(){ return Math.random() - 0.5; }); 
console.log(arr)

ps: reverse() 方法能够颠倒数组元素的排列顺序,该方法不需要参数。 reverse方法(个人很少用)

var a = [1,2,3,4,5];  //定义数组
a.reverse();  //颠倒数组顺序
console.log(a);  //返回数组[5,4,3,2,1]

2:数组的拼接concat

返回新数组

let arr=[1,2]
console.log(arr.concat(4,5))//[1,2,4,5]
console.log(arr.concat([4,5]))//[1,2,4,5]
console.log(arr.concat([4,[5]]))//[1, 2, 4, Array(1)],不能拼接多维数组
当然,用ES6会更方便
console.log([...arr,3,4])//[1,2,4,5]

3:删改的方法splice--slice(重点)

slice方法

arrayObject.slice(start,end),原数组不变,返回新数组

参数

start 必需

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

end 可选

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

//左闭右开[),采取取左不取右的原则
let arr=[1,2,3,4,5]
console .log(arr.slice(2))// [3, 4,5],传一个参数,截取这个参数的长度舍弃
console .log(arr.slice(2,4))//[3,4]//左闭右开[),采取取左不取右的原则
console .log(arr.slice(4,2))//不能交换位置,无法反序
console .log(arr.slice(-2))//[4,5].负数会从末尾向前面数。同样遵循左闭右开
console .log(arr.slice(-2,-1))//[4]

利用slice可将字符串转换为数组

let str='123456';
console.log(Array.prototype.slice.call(str))

splice

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

注释:该方法会改变原始数组。

arrayObject.splice(index,howmany,item1,.....,itemX) 参数说明

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

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

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

//左闭右开[),采取取左不取右的原则
var arr=[1,2,3,4,5]
console .log(arr.splice(2))// [3, 4,5],传一个参数,截取这个参数的长度舍弃
console .log(arr.splice(-2))//[4,5]//左闭右开[),采取取左不取右的原则

arr.splice(0, 0, 8)
console.log(arr);//[8, 1, 2, 3,4,5]

arr.splice(0, 0, [8])
console.log(arr);//[Array(1), 1, 2, 3, 4, 5]

4:数组索引indexOf--lastindexOf

indexOf

从左向右查找

var arr=[1,2,3,4,5]
console .log(arr.indexOf(3))//2.返回他所在的索引.如果没有,返回-1

lastindexOf

逆序查找,从右向左

var arr=[1,2,3,4,5]
console .log(arr.lastIndexOf(3))//2返回他所在的索引.如果没有,返回-1


5:创建数组Array.of--Array.from

Array.of

Array.of是将一组数转换为数组 new Array(3),它会给我一个长度为3的数组。可我只想要一个里面存着3的数组,所以呢Array.of就应运而生

new Array(3)//(3) [empty × 3]
console.log(Array.of(1));//[1]
console.log(Array.of(1, 2, 3)); //[1, 2, 3]

Array.from

Array.from() : 将伪数组对象或可遍历对象转换为真数组

function makeArray() {
  return Array.from(arguments);
}
let arr = makeArray('a', 'b', 'c');

Array.from()的强大不止于此,它还能接受一个映射函数:

function cube() {
  return Array.from(arguments, value => value ** 3);
}
let arr = cube(1, 3, 5);

6:数组的充填fill

fill() 方法用于将一个固定值替换数组的元素。

array.fill(value, start, end)
value必需。填充的值。
start可选。开始填充位置。
end可选。停止填充位置 (默认为 array.length)
var arr = [1, 2, 3, 4, 5]
var arr1 = [1, 2, 3, 4, 5]
console.log(arr.fill(6)); //[6,6,6,6,6]
console.log(arr1.fill(6, 0, 3)); // [6, 6, 6, 4, 5]

7:查找数组成员includes--find--findindex

includes-

includes() 方法用于判断字符串是否包含指定的子字符串。

如果找到匹配的字符串则返回 true,否则返回 false。

注意:  includes() 方法区分大小写。

var arr1 = [1, 2, 3, 4, 5]
console.log(arr1.includes(5));//true

find

find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行:

  • 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 undefined

注意:  find() 对于空数组,函数是不会执行的。

注意:  find() 并没有改变数组的原始值。

array.find(function(currentValue, index, arr),thisValue)
var arr = [1, 2, 3, 4, 5]
var sb= arr.find(function(n){
return n>4
})
console.log(sb);//5

更细致的话请参考菜鸟

findindex

和find一样,不过是获取的索引

findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

var arr = [1, 2, 3, 4, 5]
var sb= arr.findIndex(function(n){
return n>4
})
console.log(sb);//4,这是索引值

8:forEach和forin还有forof

8-1:forEach

forEach是ES5中操作数组的一种方法,主要功能是遍历数组,forEach()方法用于调用数组的每一个元素,并将元素传递给回调函数。

array.forEach(function(Value, index, arr)=>{

}, thisValue)

forEach方法中的参数:

  • Value:必填,当前元素。

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

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

  • thisValue:可选,传递给函数的值一般用this值,如果这个参数为空,"undefined"会传递给"this"值。(这个参数一般很少填)


var arr = [1,2,3,4];
arr.forEach(alert);
 
//等价于
 
var arr = [1, 2, 3, 4];
for (var k = 0, length = arr.length; k < length; k++) {
    alert(array[k]);
}
.

8-2:forin

推荐在循环对象属性的时候,使用for...in

for in 遍历对象的key

一般不推荐遍历数组,因为for in遍历后的不能保证顺序,而且原型链上的属性也会被遍历到,

因此一般常用来遍历非数组的对象并且使用hasOwnProperty()方法去过滤掉原型链上的属性

var obj = {a:1, b:2, c:3};

for (var prop  in obj) {

console.log("obj."  + prop +  " = " + obj[prop]);

}

// 输出:

// "obj.a = 1"

// "obj.b = 2"

// "obj.c = 3"

总之, for – in 是用来循环带有字符串key的对象的方法。

8-3:forof

在遍历数组的时候的时候使用for...of

for of 遍历对象的value,只循环集合本身的元素:

与forEach()不同的是,它可以正确响应break、continue和return语句

语法
for (var value of myArray) {
console.log(value);
}

用法

let iterable = [10, 20, 30];
for (let value of iterable) {
console.log(value);
}
// 10
// 20
// 30

9:map

map()方法是通过循环的方式一个一个项的处理原来的数组,并返回新的数组,同时,不会改变原数组的值

map() 方法按照原始数组元素顺序依次处理元素。

注意: map() 不会对空数组进行检测。

注意: map() 不会改变原始数组。


array.map(function(item,index,arr), thisValue)

item 必需。当前元素;
index 可选。当前元素的索引;
arr 可选。当前元素所属的数组对象;
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。

为数组 arr 中的每个元素求二次方。不要直接修改数组 arr,结果返回新的数组

//map

let array = [1, 2, 3, 4, 5];
let newArray = array.map((item) => {
    return item * item;
})
console.log(newArray)  // [1, 4, 9, 16, 25]

10:filter处理数组中undefined--null

filter()方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组。 简单来说,设置一道龙门,越过龙门的,就被选出来。

filter()基本语法:
   arr.filter(callback[, thisArg])

filter()参数介绍:

参数名 说明

callback 用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)

callback 被调用时传入三个参数:
    元素的值
    元素的索引
    被遍历的数组

返回true表示保留该元素(通过测试),false则不保留。

thisArg 可选。执行 callback 时的用于 this 的值。

利用 filter 遍历出所有偶数:

let arr = [56, 15, 48, 3, 7];
let newArr = arr.filter(function (value, index, array) {
    return value % 2 === 0;
});
console.log(newArr)
// [56, 48]

利用 filter 进行数组去重:

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
var arr = [1,1,'RUNOOB','RUNOOB',true,true,15];
console.log(unique(arr))
// [1, "RUNOOB", true, 15]

filter处理数组中undefined--null

let arr = [1,'',2,null,3,NaN,4,undefined,5,'',6] 
let arr1 = arr.filter(Boolean); 
console.log(arr1);//[1,2,3,4,5,6]

11:some--every

every和some的基本语法与map,falter等相同,参数基本都是一个函数和一个参数

some

some()是对数组中每一项运行给定函数,如果该数组任意一个符合要求则函数返回true

 var a=[1,2,4,69,56,89]
     var some1=a.some((item)=>{
                return item > 88
            })
        console.log(some1)//true

every

every()是对数组中每一项运行给定函数,如果该数组所有数都满足,返回true。一旦有一项不满足则返回flase

var arr = [ 1, 2, 3, 4, 5, 6 ]; 
console.log( arr.every(function( item, index, array ){ 

console.log'item=' + item + ',index='+index+',array='+array ); 

 return item > 3; 

}));

12:reduce

reduce就不写了,有更详细的文章

js数组的reduce方法