js 数组方法学习总结

web_vivi
307 阅读5分钟

通过后盾人网站学习：doc.houdunren.com/js/4%20%E6%…

1.合并两个数组 let a=[1,2],b=[3,4]

  • contact let c = a.contact(b);
  • 扩展运算符 c = [...a,...b]

2.数组去重 let arr = [1,1,2,6,5,2,5,7]

new Set去重: arr= [... new Set(arr)]

3.常用方法：

  • 删除第一个元素shift()，
  • 删除最后一个元素 pop()，
  • 在开头添加一个元素 unshift()，
  • 在末尾添加一个元素 push()

4.填充元素fill

value：想要替换的内容。
start：开始位置（数组的下标），可以省略。
end：替换结束位置（数组的下标），如果省略不写就默认为数组结束。

array.fill(value, start, end)

5.截取

  • slice() start：开始位置（数组的下标）
    end：直到结束参数（不包括）为止
    不改变原数组，截取得数获得一个新数组
    //let arr=[1,2,3,4,5] let hd=arr.slice(1---start，3---end)
    //结果：arr=[1,2,3,4,5] hd=[2,3,4]
  • splice:
    • splice:截取功能 let arr=[1,2,3,4,5] let hd=arr.splice(1---起始位置，2---截取几个) ；改变原数组,从原数组中拿取出去; //结果 arr =[1,4,5] hd=[2,3]
    • splice:替换操作；arr.splice(1---从哪开始,1---删除几个,"后盾人"--追加内容)； //arr [1,'后盾人',3,4,5] ；
    • splice:增加操作；arr.splice(1---从哪开始,0---删除几个,"后盾人"，"hdms"--追加内容)；//arr [1,'后盾人','hdms',2,3,4,5] ；

6.清空数组；

  • let arr=[]; //推荐 let arr= [1,2,3] ,hd=arr; arr=[]; //arr []--改变原来得地址指向,新指向一个地址; hd [1,2,3]
  • arr.length=0;//推荐 let arr= [1,2,3] ,hd=arr; arr.length=0; //arr [] hd[] ---改变原来地址里面数组得值；所以都变成了空； 想把所有得数组全部清除，推荐使用length=0;
  • arr.splice(0,arr.length); //用截取功能全部截取清除

7.复制（数组内部移动）

copyWithin(3---复制到哪去，1---从哪开始复制，2---到哪结束复制)；
let hd=[1,2,3,4,5,6] ; hd.copyWithin(2,0,1); //hd [1,2,1,2,5,6];

8.数组查找

  • indexOf(2--查找得值,3---从哪个位置开始向右查找); //返回位置，没有返回-1；
  • lastIndexOf(2--查找得值,-3---从后面哪个位置向前查找); //从后面开始查找，，没有返回-1；
  • includes(1); //返回布尔类型；
    • 方法实现原理 function includes(arr,find){for(const value of array) if(value===find) return true; return false;} includes([1,2,3],3) //true includes([1,2,3],99) //false
    • 对于数组里面得引用类型是查找不到的； let arr= [{name:'js'},{name:'css'}];arr.includes({name:'css'}) //false;
  • find();//返回值；let arr= [{name:'js'},{name:'css'}]; let status=arr.find(item=>{ return item.name=='css'}) //status {name:"css"} 当找不到时是undefined;
    • find 实现原理:
      • 普通方法： function find(arr,callBack){for(value of arr) if (callBack(value) === true) return value;return undefined} let arr = [1,2,3] find(arr,function(item){return item ===2});
      • 原型链方法：Array.prototype.findValue= function(callBack){ for(value of this) if (callBack(value) === true) return value;return undefined}} let arr = [1,2,3] arr.findValue(function(item){return item ===2});
  • findIndex();//返回具体位置；let status=arr.findIndex(item=>{ return item.name=='css'}) //status为 1 找不到是-1;

9.数组排序

sort; arr.sort(function(a,b){return a-b; //a-b 从小到大； b-a 从大到小})

10.扩展方法

every、some、filter、map、reduce

  • every 方法,所有数据返回为真就为真
    • let arr = ['hdms','lsmy']; arr.every((value---值,index---索引,arr ---原数组){return true;})
    • let user = [{name:'张三',js:89},{name:'李四',js:99},{name:'王五',js:55}]; const res = user.every(item=>{return item.js>=60}); res?'全部同学及格':'有同学未及格'

var a = [1,2,3,4,5,6];
var b = a.every(function(x){
    return x < 8;
});
var c = a.every(function(x){
    return x < 5;
})
console.log(b); //这里返回true
console.log(c); //这里返回false
  • some方法，当任何一个数据返回为真就返回为真；
var a = [1,2,3,4,5,6]
var b = a.some(function(x){
        return x > 10;
    })
var c = a.some(function(x){
        return x > 5;
    })
console.log(b) //这里返回false
console.log(c) //这里返回true
  • filter: 过滤操作,筛选：
    • newArray=arr.filter((item--值，index---索引, arr---元数组)){return true；//当返回为真的时候就保留,当返回为假时就过滤掉了}
    • 过滤函数原理：let hd= [1,2,3,4];
      • function filter(arr,export){ let newArray = [] ;for(const value of arr){ if(export.includes(value)===false) newArray.push(value);} return newArray;} filter(hd,[2,3]);//[1,4]
      • function filter(arr,callback){let newArray = [] ; for(const value of arr) if(callback(value)===true)newArray.push(value); return newArray;} filter(hd,function(item){item>2}); //[3,4]
  • map 映射操作(对数组进行二次操作，返回一个新数组)：
    • let arr=['hdcms','houdunren']; let hd= arr.map(item=>{retun 后盾人-${item}}); //arr : ['hdcms','houdunren']; hd:['后盾人-hdcms','后盾人-houdunren']; //数组里面是值类型(字符串,数字)的，不会改变原数组；
    • let arr =[{name:'js'},{name:'css'}]; arr.map{item=>{item.click=100; return item}}; // item运用的是内存地址；arr:[{name:'js',click:'100'},{name:'css',click:'100'}] //数组里面是引用类型(数组以及对象)的，直接使用会改变原数组；
      • 用Object.assign()保持元素组不变； let hd= arr.map(item=>{ return Object.assign({click:'100'},item)}); //arr:[{name:'js'},{name:'css'}] ； hd:[{name:'js',click:'100'},{name:'css',click:'100'}]
      • 直接返回整个对象： let hd= arr.map(item=>{ return {name:item.name,click:'100'}}); //arr:[{name:'js'},{name:'css'}] ； hd:[{name:'js',click:'100'},{name:'css',click:'100'}]
    • let Lesson = { site:'后盾人',lists:['js','css','mysql'],show() { return this.lists.map(function(){this.site + value},this ---因为map是可以有第二个参数,这是这个参数会把这个参数变成this) }} ;
  • reduce 方法： let arr =[1,2,3,4,5];

    • arr.reduce(function(pre--返回值(当没有设置返回值时是arr[0]--1),value--值,index--索引,array---原数组)){ console.log(pre,value); } // 1,2 undefined,3 undefined,4 undefined,5

    • arr.reduce(function(pre,value){console.log(pre,value); return 99}) // 1,2 99,3 99,4 99,5\

    • arr.reduce(function(pre,value){console.log(pre,value); return 99},0--初始返回值) //0,1 99,2 99,3 99,4 99,5 当传了初始值会比没有初始值的多打印一次;

    • let arr=[1,2,3,5,99] 寻找最大值 function arrMax(arr){return arr.reduce(function(pre,value){return pre>value?pre:value})} arrMax(arr) //99

    • let arr=[1,2,3,1,1] 寻找某个值在数组中出现的次数 function mun(arr,item){return arr.reduce(function(pre,value,index,array){ total=pre+=value==item?1:0; return total;},0)} mun(arr,1); //3

    • 例子： let arr= [{name:'iphone',price:12000},{name:'imac',price:25000},{name:'ipad',price:3600}];

      • 查看购物车中最贵的商品 arr.reduce(function(item,value){return item.price>value.price?item.price:value.price;}); //25000
      • 计算购物车商品总和 arr.reduce(function(total,value){return total+=value.price},0)；//40600
      • 获取价格超过一万元商品的名称 let newArr= arr.reduce(function(arr,value){if(value.price>10000) arr.push(value)},[]).map(item=>item.name)； //['iphone','imac'];
      • 数组去重 let arr=[1,2,3,4,3,4,5] arr.reduce((arr,cur)=>{if(arr.includes(cur)==false) arr.push(cur)},[]);
      • 商品去重：arr.reduce((arr,cur)=>{ let find = arr.find(v)=>{v.name==cur.name;} if(!find) arr.push(cur); return arr},[])；
avatar
文章
阅读
粉丝