一些对数组的处理方式呢,小伙伴们可能记忆不是很深刻了。总结一下,帮助小伙伴们温故知新
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就不写了,有更详细的文章