JS数组方法

于 2021-09-22 15:30:26 发布
阅读量71 收藏
点赞数
分类专栏： JS 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39407703/article/details/108478280
版权

1.迭代方法

迭代方法在下面的众多遍历方法中，有很多方法都需要指定一个回调函数作为参数。在每一个数组元素都分别执行完回调函数之前，数组的length属性会被缓存在某个地方，所以，如果你在回调函数中为当前数组添加了新的元素，那么那些新添加的元素是不会被遍历到的。此外，如果在回调函数中对当前数组进行了其它修改，比如改变某个元素的值或者删掉某个元素，那么随后的遍历操作可能会受到未预期的影响。总之，不要尝试在遍历过程中对原数组进行任何修改，虽然规范对这样的操作进行了详细的定义，但为了可读性和可维护性，请不要这样做。

forEach

array.forEach(function(ele,index,arr){},arg2)
// forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
// 没有返回值 会改变原数组。
// 无法跳出循环。
// arg2 用来改变this指向 不传则默认指向window 若使用箭头函数则无法修改this指向

//重写forEach函数
Array.prototype.myForEach = function(fn){
    var arr = this,
        len = arr.length,
        arg2 = arguments[1] || window;
    for(var i=0; i<len; i++){
        fn.apply(arg2,[arr[i],i,arr]);
    }
}

filter

array.filter(function(ele,index,arr){
    return true;
},arg2)
// filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
// 过滤 每次返回一个布尔值 如果是true 就添加到返回的数组中
// 返回一个新数组 新数组的改变不影响原数组
// arg2 用来改变this指向 不传则默认指向window 若使用箭头函数则无法修改this指向

//重写filter函数
Array.prototype.myFilter = function(fn){
    var arr = this,
        len = arr.length,
        arg2 = arguments[1] || window,
        newArr = [],
        item;
    for(var i=0;i<len;i++){
        //用深拷贝 否则改变新数组 原数组会受到影响
        item = tools.deepClone(arr[i])
        fn.apply(arg2,[arr[i]],i,arr) ? newArr.push(item) : ""
    }
    return newArr;
};

map

array.map(function(ele,index,arr){
    return ele;
},arg2)
// 映射 数组中的元素为原始数组元素调用函数处理后的值
// 返回一个新数组  新数组的改变不影响原数组  但在map中改变ele会改变原数组
// arg2 用来改变this指向 不传则默认指向window 若使用箭头函数则无法修改this指向

//重写map函数  使在map中改变ele也不会改变原数组
Array.prototype.myMap = function (fn) {
    var arr = this,
        len = arr.length,
        arg2 = arguments[1] || window,
        newArr = [],
        item;
    for (var i = 0; i < len; i++) {
        //判断值的类型是否需要深拷贝 因为深拷贝基本数据类型会返回{}
        item = typeof(arr[i])==="object" ? deepClone(arr[i]) : arr[i];
        newArr.push(fn.apply(arg2, [item, i, arr]));
    }
    return newArr;
};

some

array.some(function(currentValue,index,arr){},arg2)
// some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
// 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
// 如果没有满足条件的元素，则返回false。
// 返回一个布尔值 不会改变原始数组  不会对空数组进行检测。
// arg2 用来改变this指向 不传则默认指向window 若使用箭头函数则无法修改this指向

//重写some函数
Array.prototype.mySome = function(fn){
    var arr = this,
        len = arr.length,
        arg2 = arguments[1] || window,
        res = false;
    for(var i=0;i<len;i++){
        if(fn.apply(arg2,[arr[i],i.arr])){
            res = true;
            break;
        }
    }
    return res;
};

every

array.every(function(currentValue,index,arr){}，arg2)
// every() 方法用于检测数组所有元素是否都符合指定条件。
// 如果数组中检测到有一个元素不满足，则表达式返回 false ，且剩余的元素不会再进行检测。
// 如果所有元素都满足条件，则返回 true。
// 返回一个布尔值 不会改变原始数组  不会对空数组进行检测。
// arg2 用来改变this指向 不传则默认指向window 若使用箭头函数则无法修改this指向

//重写every函数
Array.prototype.myEvery = function(fn){
    var arr = this,
        len = arr.length,
        arg2 = arguments[1] || window,
        res = true;
    for(var i=0;i<len;i++){
        if(!fn.apply(arg2,[arr[i],i.arr])){
            res = false;
            break;
        }
    }
    return res;
};

reduce / reduceRight

array.reduce(function(prev, ele, index, arr){
    return prev;
}, initialValue)
// reduce 数组归纳 先判断是否满足条件如果满足再往新数组中放
// 第二个参数必传 作为prev的初始值 否则prev没有值
// 无第三个参数 无法改变this指向
// 返回prev 否则第一次为初始值initialValue 下一次起都为undefined
// 返回的prev可以是数组也可以是对象


//重写reduce函数 可改变this指向
Array.prototype.myReduce = function(fn,initialValue){
    var arr = this,
        len = arr.length,
        arg3 = arguments[2] || window;
    for(var i= 0; i<len; i++){
        initialValue = fn.apply(arg3,[initialValue,arr[i],i,arr]);
    }
    return initialValue;
}


//重写reduceRight函数 可改变this指向  
//和reduce区别为 reduceRight为倒叙
Array.prototype.myReduceRight = function (fn, initialValue) {
    var arr = this,
        len = arr.length,
        arg3 = arguments[2] || window;
    for(var i=len-1; i>=0; i--){
        initialValue = fn.apply(arg3,[initialValue,arr[i],i,arr])
    }
    return initialValue;
}

find / findIndex

// 若找到返回那个值并停止循环,找不到返回undefined
// arg2 用来改变this指向 不传则默认指向window 若使用箭头函数则无法修改this指向
array.find(function(ele,index,arr){},arg2)

// 若找到返回那个值的索引并停止循环,找不到返回-1
// arg2 用来改变this指向 不传则默认指向window 若使用箭头函数则无法修改this指向
array.findIndex(function(ele,index,arr){},arg2)

2.修改器方法

下面的这些方法会改变调用它们的对象自身的值：

sort

//默认按照ascii码来排序
//sort() 方法用于对数组的元素进行排序。使用数字排序，你必须通过一个函数作为参数来调用。
array.sort((a,b)=>{})
//返回值 如果返回一个负值 a排在前面  返回一个正值 b排在前面  0保持不动  ————冒泡排序法
arr.sort(function(a,b){
    if(a > b){
        return 1
    }else{
        return -1
    }
})
//简写
arr.sort(function(a,b){
    return a - b;
})

//随机排序
arr.sort(function(){
    var rand = Math.random(); //0-1开区间的随机数
    if(rand - 0.5 > 0){
        return 1
    }else{
        return -1
    }
})

//简写
arr.sort(function(){
    return Math.random() - 0.5;
})

splice

向/从数组中添加/删除项目，然后返回被删除的项目。
arr.splice(index,howmany)  删除
arr.splice(index,howmany,item) 添加

index:规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany：设置要删除项目的数量 0为添加
item:向数组添加的新项目

//场景：在数组的循环中删除元素
//原因：当删除掉了一个元素后，数组中元素的索引（下标）发生了实时变化，造成了程序的异常。
//方法：从后往前遍历数组元素。
var arr = [1, 2, 2, 3, 4, 5];
for (var i = arr.length - 1; i >= 0; i--) {
    if(arr[i] === 2) {
        arr.splice(i, 1);
    }
}

unshift / push / pop / shift

unshift:从数组头部添加
push:从数组尾部添加
pop:从数组头部删除
shift:从数组尾部删除

3.访问方法

下面的这些方法绝对不会改变调用它们的对象的值，只会返回一个新的数组或者返回一个其它的期望值。

concat

//数组拼接 返回一个新数组 原数组不变
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = arr1.concat(arr2);
console.log(arr3) // [1,2,3,4,5,6]

toString

//将数组转化为字符串
var arr1 = [1,2,3,4,5];
var result= arr1.toString();
console.log(result) //1,2,3,4,5

join

//用于把数组中的所有元素放入一个字符串,元素是通过指定的分隔符进行分隔的
//arg1:用什么进行分割,不传默认使用逗号分割
let arr = [1,2,3,4,5];
let result= arr.join(",")//1,2,3,4,5

includes

//用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false
//arg1:要查找的元素   arg2:从索引处开始查找
var arr = [1,2,3,4,5];
var result = arr.includes(1) //true
var result = arr.includes(1,1) //false

slice

//从已有的数组中返回选定的元素,该方法并不会修改数组,而是返回一个新数组

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

从开始的索引开始截取，截取到结束的那个索引的前一位

arr.slice(start,end)

let arr = [1,2,2,3,4,5];
let arr2 = arr.slice(1,4)//[2,2,3]

// 获取数组中倒数的第几个值
let array=[0,1,2,3,4,5,6,7,8,9];
console.log(array.slice(-1));// Result: [9]
console.log(array.slice(-2));// Result: [8, 9]
console.log(array.slice(-3));// Result: [7, 8, 9]

//对象数组分割成几个一组
var data = [
    { name: 'Liming', age: '21' },
    { name: 'Liming', age: '22' },
    { name: 'Liming', age: '23' },
    { name: 'Liming', age: '24' },
    { name: 'Liming', age: '25' },
    { name: 'Liming', age: '26' },
    { name: 'Liming', age: '27' },
    { name: 'Liming', age: '28' },
    { name: 'Liming', age: '29' },
    { name: 'Liming', age: '30' },
]
var result = [];
//将数据分割成4个一组
for (var i = 0; i < data.length; i += 4) {
    result.push(data.slice(i, i + 4));
}

indexOf / lastIndexOf

在数组中可以找到一个给定元素的第一个索引,如果不存在，则返回-1
arr.indexOf(searchElement,fromIndex)

在数组中可以找到一个给定元素的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。
arr.lastIndexOf(searchElement,fromIndex)
weixin_39407703
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值