20-07-数组方法及原理

于 2020-10-09 22:58:40 发布
阅读量105 收藏
点赞数
分类专栏： 20-面试题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ange997/article/details/108985127
版权

在这里插入图片描述
csdn数组方法链接

博客园数组方法链接

map 都条件映射

map地图 这里是映射

map方法的使用 ，对数组中每一个元素进行相同条件的加工，返回一个新的数组。
特点：

  1. map的返回值是一个数组
  2. map返回的新数组的元素个数和老数组的个数一样
  3. 新数组中装什么东西，看函数返回什么

使用

let arr = [1,2,3];
let newArr = arr.map(function (item) { // item是数组中的每一项
    return item*2;
})
console.log(newArr)	[2,4,6]

原理
只传入参数数组值

;(function(){
    function mymap(callback){
        let newArr = []
        for (let i = 0; i < this.length; i++) {
            newArr.push(callback(this[i]))
        }
        return newArr;
    }
    Array.prototype.mymap=mymap;
}())
let arr = [1,2,3];
let newArr = arr.mymap(function(item){
    return item*2;
})
console.log(newArr);

传入参数数组值和索引

;(function () {
    function mymap(callback) {
        // this 表示 arr
        let newArr = [];
        for(let i = 0; i<this.length; i++){
            newArr.push(callback(this[i],i))
        }
        return newArr;
    }
    Array.prototype.mymap = mymap;
}())
let arr = [1,2,3];
let newArr = arr.mymap(function (item,index) { 
    if(index%2 == 0){  
        return item*2  // 2  6
    }else{
        return item*3;  // 6
    }
})
console.log(newArr)		//[2,6,6]

reduce 累加求和

原意本质是 减少
reduce实现数组元素的累加
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

返回值不是一个数组，是一个数值，return 什么值就返回什么值

使用

let arr = [1,2,3];	//total合计， item是数组中的每一项
let res = arr.reduce(function (total,item) {
   // 第1次循环时：total是1  item是2
   // 第2次循环时：total是3  item是3
   // 第3次循环时：total是6  item没有值
   // console.log(total,item)
   return total+item;
})
console.log(res)	//6

//let re =arr.reduce(function(total,item){
//    return total+item
//},100)			//可以传参数，作为第一个total
//console.log(re);  //106

原理

; (function () {
    function myreduce(callback) {
        let total = this[0]
        for (let i = 1; i < this.length; i++) {
            total = callback(total, this[i])
        }
        return total;
    }
    Array.prototype.myreduce = myreduce;
}())
let arr = [1, 2, 3];
let res = arr.myreduce(function (total, item) {
    return total + item
})
console.log(res);

传参，带索引

;(function () {
    function myreduce(callback,initValue) {
        // this表示arr  [1,2,3]
        // let tatal = this[0]
        let total = initValue;
        for(let i=0; i<this.length; i++){
            total = callback(total, this[i],i)
        }
        return total;
    }
    Array.prototype.myreduce = myreduce;
}())
let arr = [1,2,3];
let res = arr.reduce(function (total,item,index) { 
    console.log(index)		//1		//2
    return total+item;
},100)
console.log(res)			//106

filter 过滤求数组

过滤出一个数组中符合要求的元素
特点：

  1. filter返回值肯定是数组
  2. 函数可以对数组中的元素进行过滤 过滤出来的元素放到新数组中

使用

let arr = [1,3,4,5,7,8];
/*let res =arr.filter(function(item,index){
    if(index%2===1){
        if(item%2===1){
            return true
        }
    }
})*/这三个作用是一样的
/*let res = arr.filter( function (item,index) {
        return index%2 === 1 && item%2 === 1
} )*/
let res = arr.filter((item,index)=>index%2===1 && item%2 ===1)
console.log(res);

原理

 ;(function () {
    function myfilter(callback) {
        let newArr = [];
        for(let i = 0;i<this.length;i++){
            if(callback(this[i],i)){
                newArr.push(this[i])
            }
        }
        return newArr;
    }
    Array.prototype.myfilter = myfilter;
}())
let arr = [1,3,4,5,7,8];
let res = arr.myfilter((item,index)=>index%2===1&&item%2===1)
console.log(res)	//[3,5]

find 满足条件第一个元素

find本意是查找的意思
find可以从数组中找到我们需要的元素
特点

  1. find的返回值是数组中的某个元素
  2. 查找满足条件的第1个元素

使用

let arr = [1,3,4,5,7,8];  
let res = arr.find((item,index) => index%2 == 1 && item%2 === 1)
console.log(res)  //3

原理

; (function () {
    function myfind(callback) {
       for(let i = 0; i<this.length;i++){
           if(callback(this[i],i)){
               return this[i]
           }
       }
    }
    Array.prototype.myfind = myfind;
}())
let arr = [1, 3, 4, 5, 7, 8];  //
let res= arr.myfind((item, index) => index % 2 == 1 && item % 2 === 1)
console.log(res)

findIndex 满足条件第一个索引

find可以从数组中找到我们满足条件的元素索引
特点

  1. find的返回值是数组中的某个元素索引
  2. 查找满足条件的第1个元素索引

使用

let arr = [1,3,4,5,7,8];  //
let res = arr.findIndex((item,index) => index%2 == 1 && item%2 === 1)
console.log(res)  //1

原理

; (function () {
   function myfindIndex(callback) {
      for(let i = 0; i<this.length;i++){
          if(callback(this[i],i)){
              return i
          }
      }
   }
   Array.prototype.myfindIndex = myfindIndex;
}())
let arr = [1, 3, 4, 5, 7, 8];  
let res=arr.myfindIndex((item,index) => index % 2==1&& item %2 === 1)
console.log(res)  //1

every 全满足条件返回true

every本意是所有的
特点

  1. 返回值要么是true 要么是false
  2. 只有数组中的每一项都满足条件 结果才是true

使用

let arr = [1,3,4,5,7,8];
// let res = arr.every((item,index) => item>3)
let res = arr.every(function (item,index) {
    return item>0;
})
console.log(res)  //true

原理

;(function () {
    function myevery(callback) {
        for(let i = 0;i<this.length;i++){
            if(!callback(this[i],i)){
                return false
            }
            return true
        }
    }
    Array.prototype.myevery = myevery;
}())
let arr = [1,3,4,5,7,8];
let res = arr.myevery(function (item,index) {
    return item>3;
})
console.log(res)  //false

some 有一个满足返回true

some 本意是一些的意思
特点

  1. some的结果也是true或false
  2. 有一个满足条件就是true ，否则就是false

使用

let arr = [1,1,1,10];
let res = arr.some(function (item,index) {
    return item>3;
})
console.log(res)	//true

原理

;(function () {
    function mysome(callback) {
        for (let i=0; i<this.length; i++){
            if(callback(this[i],i)){
                return true;
            }
        }
        return false;
    }
    Array.prototype.mysome = mysome;
}())
let arr = [1,1,1,10];
let res = arr.mysome(function (item,index) {
    return item>3;
})
console.log(res)  //true

concat 合并数组

本意是合并多个数组；合并多个字符串
可以把两个或多个数组合并成一个新的数组
返回值是一个数组，前面必须要有接收

数组调用该函数传参为元素可以直接添加到数组中

let arr = [1,2,3]
//arr.concat(4);
//console.log(arr);	//[1, 2, 3] 返回值必须要有接收
let newArr=arr.concat(4)
console.log(newArr);	// [1, 2, 3, 4]

使用

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [7,8,9];
let arr4 = [10,11,12];
console.log(arr1.concat(arr2))
console.log(arr1.concat(arr2).concat(arr3))
console.log(arr1.concat(arr2,arr3,arr4))

原理

;(function () {     // ES6中接收多个实参的写法  叫rest参数
    function myconcat(...values) {  
        let newArr = [];
        newArr.push(...this);
        if(values.length===0){
            return newArr;
        }
        values.forEach(value=>{
            if(Array.isArray(value)){
                newArr.push(...value)
            }else{  //concat参数不是数组
                newArr.push(value)
            }
        })
        return newArr;
    }
    Array.prototype.myconcat = myconcat;
}())
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [7,8,9];
let arr4 = [10,11,12];
console.log(arr1.myconcat(arr2,arr3,arr4,"hello"))
console.log(arr1.concat("hello"))

slice 截取数组

slice 本意是切下，切片的意思
在数组中的作用是根据条件截取数组中的某段组成新的数组。
特点

  1. 返回一个新的数组
  2. 返回的新的数组 它里面的元素由begin和end决定
  3. 截取的新数组包括 begin，不包括end
  4. 如果只有begin，那么表示从begin一直截取到最后
  5. 没有begin 也没有end，返回原数组

使用

let arr1 = [1,3,4,5,7,9];
let res1 = arr1.slice(2,4); // 2 4 代表都是索引
console.log(res1); //  [4, 5]

let res2 = arr1.slice(2); // 只有begin，那么表示从begin一直截取到最后
console.log(res2)

let res3 = arr1.slice();
console.log(res3) // [1, 3, 4, 5, 7, 9]

如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，
slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）
slice(-2，-1) 表示提取原数组中的倒数第二个元素到倒数最后一个元素（不包含最后一个元素）
原理

;(function () {
   function myslice(begin,end) {  // ES6中接收多个实参的写法  叫rest参数
       let newArr = [];
       // this 表示arr1
        // 如果要截取的数组是一个空的数组  什么也不做返回一个空数组
       if(this.length === 0){ return newArr; } 

       // 处理start特殊情况
       begin = begin || 0;
       if(begin<0){
           begin = this.length+begin
       }else if(begin >= this.length){
           return newArr
       }

       // 处理end的特殊情况 1）没有begin 没有end   2）有begin 没有end
       end = end || this.length
       if(end>this.length){
           end = this.length;
       }else if(end <= begin){
           return newArr
       }
       // 遍历下标在[begin end)区间中的所有元素，添加到newArr中
       for (let i=begin; i<end; i++){  
           newArr.push(this[i]); //
       }
       return newArr;
   }
   Array.prototype.myslice = myslice;
}())
let arr1 = [1,3,4,5,7,9];
let res1 = arr1.myslice(2,4); // 2 4 代表都是索引
console.log(res1); //  [4, 5]
let res2 = arr1.myslice(-2,-1); 
console.log(res2); // [4,5,7,9]
let res3 = arr1.myslice();
console.log(res3) // [1, 3, 4, 5, 7, 9]

flat 数组降维，打平

flat本意是平的，使变平
flat（）可以传参，传递的参数表示降维几次

使用

let arr = [1,2,[3,4,[5,6,[7,8]]]];
console.log(arr.flat()); // 降一维 [1, 2, 3, 4, Array(3)]
console.log(arr.flat().flat()); // 降二维 [1, 2, 3, 4, 5, 6, Array(2)]
console.log(arr.flat(3)); // 降三维 [1, 2, 3, 4, 5, 6, 7, 8]

原理

;(function () {
    function myflat() {
        // this 表示arr
        // 第一次循环：total是[]  item是 1
        // 第二次循环：total是[1]  item是2
        // 第三次循环：total是[1，2]  item是[3,4,[5,6]]
        return this.reduce((total,item)=>{
            if(Array.isArray(item)){
                return  total.concat(item.myflat())  // 完全打平
               // return  total.concat(item) // 降一维
            }else{
               return total.concat(item)
            }
        },[])
    }
    Array.prototype.myflat = myflat;
}())
let arr = [1,2,[3,4,[5,6,[7,8]]]];
console.log(arr.myflat()); 	//完全打平 [1, 2, 3, 4, 5, 6, 7, 8]
// 降一维 [1, 2, 3, 4, Array(3)]

unshift 头部添加元素

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
返回的是新数组的长度

ange997
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值