JavaScript的数组方法复习

887 阅读6分钟

JavaScript数组方法

字符串和数组转换

数组转字符串

  let gossip=['乾','坤']
  console.log(gossip.toString());//乾,坤
  let gossip=['乾','坤']
  console.log(gossip.toLocaleString());//乾,坤
  let gossip=['乾','坤']
  console.log(String(gossip));//乾,坤
  let gossip=['乾','坤']
  console.log(gossip.join('|'));//乾|坤
//join的参数是连接起来的字符

字符串转字符

  let gossip='乾(☰)、坎(☵)、艮(☶)、震(☳)、巽(☴)、离(☲)、坤(☷)、兑(☱)'
  console.log(gossip.split('、'));//["乾(☰)", "坎(☵)", "艮(☶)", "震(☳)", "巽(☴)", "离(☲)", "坤(☷)", "兑(☱)"]
  let gossip='乾坎艮震巽离坤兑'
  console.log(Array.from(gossip));//["乾", "坎", "艮", "震", "巽", "离", "坤", "兑"]
	//有length属性的都可以转
  let gossip='乾坎艮震巽离坤兑'
  console.log([...gossip]);//["乾", "坎", "艮", "震", "巽", "离", "坤", "兑"]

改变原数组的方法

push和pop后增后减

let gossip=['乾','坤']
let newGossip = gossip.push('坎')//最后面增加一个
console.log(gossip);// ["乾", "坤", "坎"]  
console.log(newGossip);//  3  //3是新数组的长度

let gossip=["乾", "坤", "坎"]
let newGossip = gossip.pop()//最后面减少一个
console.log(gossip);// ["乾", "坤"]  
console.log(newGossip);//  坎  //这是删除的项

unshift和shift前增前减

let gossip=['乾','坤']
let newGossip = gossip.unshift('坎')//最前面增加一个
console.log(gossip);// [ "坎","乾", "坤"]  
console.log(newGossip);//  3  //3是新数组的长度

let gossip=["乾", "坤", "坎"]
let newGossip = gossip.shift()//最前面减少一个
console.log(gossip);// ["坤", "坎"]  
console.log(newGossip);//  乾  //这是删除的项

splice的增删改

 let gossip=["乾", "坎", "艮", "震", "巽", "离", "坤", "兑"]
  let narr=gossip.splice(3)
  console.log(gossip);//["乾", "坎", "艮"]
  console.log(narr);// ["震", "巽", "离", "坤", "兑"]
//只有一个参数时,是截取开始的位置不包括,返回截取的项
  let gossip=["乾", "坎", "艮", "震", "巽", "离", "坤", "兑"]
  console.log(gossip);// ["乾", "坎", "艮", "离", "坤", "兑"]
  console.log(gossip.splice(3,2));//["震", "巽"]
//两个参数,第一个表示开始截取的位置不包括,第二个表示截取的数量,返回截取的项
  let gossip=["乾", "坎", "艮", "震", "巽", "离", "坤", "兑"]
  let narr=gossip.splice(3,2,'甲','乙')
  console.log(gossip);//["乾", "坎", "艮", "甲", "乙", "离", "坤", "兑"]
  console.log(narr);//["震", "巽"]
//三个参数,第一个表示开始截取的位置不包括,第二个表示截取的数量,后面表示截取位置增加的项,返回截取的项

reverse翻转

let gossip=["乾", "坤", "坎","艮","震","巽","离","兑"]
gossip.reverse()//前后翻转
console.log(gossip);// ["兑", "离", "巽", "震", "艮", "坎", "坤", "乾"] 

sort排序

  let arr=['car','apple','chrome','body','android']
  console.log(arr.sort());//["android", "apple", "body", "car", "chrome"]
  //按照第一个字母的Unicode码顺序排列,相同时看第二个,一直到最后
  let arr=['11','9','25','10','34']
  console.log(arr.sort());//["10", "11", "25", "34", "9"]
  //按照第一位的数字大小排列,第一位相同时看第二位,一直到最后

sort的参数里面可以有函数,返回值决定排序顺序

返回值<0,换位

返回值>=0,不变

  let arr=['11','9','25','10','34']
  console.log(arr.sort((a,b)=>{return a-b}));//["9", "10", "11", "25", "34", "121"]

copyWithin复制内容替换其他位置

三个参数

第一个参数:替换开始的位置,包裹该位置

第二个参数:复制内容开始的地方默认0,负数从末尾开始,包裹该位置

第三个参数:复制内容结束的位置默认结尾负数从末尾开始,不包裹该位置

 let arr=['1','2','3','4','5','6','7','8','9']
  console.log(arr.copyWithin(1,2,4));//["1", "3", "4", "4", "5", "6", "7", "8", "9"]

fill填充

三个参数

第一个参数:要填充的值

第二个参数:填充开始的地方默认0负数从末尾开始,包裹该位置

第三个参数:填充结束的位置默认结尾负数从末尾开始,不包裹该位置

  let arr=['1','2','3']
  console.log(arr.fill(1));//[1, 1, 1]
 //只有一个参数情况
  let arr=['1','2','3']
  console.log(arr.fill("5",1,2));//["1", "5", "3"]

不改变原数组的方法

slice截取

两个参数

第一个参数:截取开始的地方包括负数从末尾开始

第二个参数:截取结束的位置,默认结尾不包括负数从末尾开始

  let gossip=["乾", "坎", "艮", "震", "巽", "离", "坤", "兑"]
  console.log(gossip.slice(0,5));// ["乾", "坎", "艮", "震", "巽"]

concat数组合并

  let gossips=["乾", "坎", "艮", "震"]
  let gossipx=["巽", "离", "坤", "兑"]
  console.log(gossips.concat(gossipx));//["乾", "坎", "艮", "震", "巽", "离", "坤", "兑"]

indexof查看值是否存在

两个参数

第一个一个参数:查询的值

第二个参数:查询开始的位置包括该位置,默认为0,接受负数

  let gossip=["乾", "坎", "艮", "震","乾", "坎", "艮", "震",]
  console.log(gossip.indexOf('艮',3));//6
  //返回值的位置,没有返回-1

lastIndexof查看值是否存在

和indexof的区别是从后面往前查询,第二个参数大于数组长度时会全部查找,

includes查看值是否存在

这是对上面两个方法的补充,上面两个方法不能识别NaN,返回的值不是布尔值需要判断

  let gossip=["乾", "坎", "艮", "震","乾", "坎", "艮", "震",]
  console.log(gossip.includes('艮',6));//true
  //返回值为布尔值,第一参数是查找的值,第二个是开始的位置,接受负数,默认0,负数的值超过数组长度就会全部查找

...扩展运算符数组的用法

这是我用起来感觉最香的的东西,能把数组拆开和合并,

  let gossip=["乾", "坎", "艮", "震","乾", "坎", "艮", "震",]
  console.log(...gossip);//乾 坎 艮 震 乾 坎 艮 震
  //拆开
  let gossips=["乾", "坎", "艮", "震"]
  let gossipx=["巽", "离", "坤", "兑"]
  console.log([...gossips,...gossipx]);//["乾", "坎", "艮", "震", "巽", "离", "坤", "兑"]
  //合并

常用于函数的参数不知道有多少时的获取

  function see(...arr) {
    console.log(arr);
  }
  see("乾", "坎", "艮", "震")//["乾", "坎", "艮", "震"]
//传多少参数,接多少参数

遍历数组

for循环我们直接过

forEach

两参数

第一个参数:回调函数,控制数组

第二个参数:回调函数的this指向

    let gossips=["乾", "坎",, "艮", "震"]
    let obj = { name: '不忘' };
    let result=gossips.forEach(function(value,index,array){//第一个参数是数组的值,第二个是数组的索引,第三个是数组
        array[index]=value+"-"+this.name;
        return 1
    },obj)
    console.log(gossips);//["乾-不忘", "坎-不忘", empty, "艮-不忘", "震-不忘"]
    console.log(result);//undefined
	//无论返回什么都是undefined
    //一共循环四次,空的项不循环

every是否全部符合条件

  let arr = [1,2,3,4,5,6,7,8,9];
  let result=arr.every((value)=>{
    return value <10
  })
  console.log(result);//true
//和forEach差不多,就是返回一个条件,全部满足返回true

some是否有满足条件的项

  let arr = [1,2,3,4,5,6,7,8,9];
  let result=arr.some((value)=>{
    return value <2
  })
  console.log(result);//true
//和every差不多,区别是只要一个条件满足就返回true

filter过滤

   let arr = [1,2,3,4,5,6,7,8,9];
  let result=arr.filter((value)=>{
    return value <5
  })
  console.log(result);//[1, 2, 3, 4]
//差不多,返回的是满足条件的项

map对每个项同样操作

  let arr = [1,2,3,4,5,6,7,8,9];
  let result=arr.map((value)=>{
    return value+1
  })
  console.log(result);//[2, 3, 4, 5, 6, 7, 8, 9, 10]
//差不多,区别是返回的方法可以对每一项进行一样的操作

find查找

  let arr = [1,2,3,4,5,6,7,8,9];
  let result=arr.find((value,index,array)=>{
    return value>7;
  })
  console.log(result);//8
//差不多,区别是返回第一个满足条件的项,没有返回nuderfind

findIndex查找

  let arr = [1,2,3,4,5,6,7,8,9];
  let result=arr.findIndex((value,index,array)=>{
    return value>7;
  })
  console.log(result);//true
//和find差不多,返回的是索引,没有返回-1

reduce累加

两个参数,

第一个参数:回调函数

第二个参数:是最开始的值

  let arr = [1,2,3,4,5,6,7,8,9];
  let result=arr.reduce((total,value,index,array)=>{//total是最开始的值,value是每一项的值,index是索引,array是数组
    return total+value;
  },0)//设置开始值total为0
  console.log(result);//45
//这里每次循环返回的值都会传给total,最终的返回值是最后的total值

reduceRight累加

和reduce一样,就是从后面开始往前累计执行

array Iterator迭代器

entries

 let gossip=["乾", "坎", "艮", "震","乾", "坎", "艮", "震",]
 let entries=gossip.entries()
 console.log(entries.next());//{value:[0,"乾"],done:false}
 console.log(entries.next());//{value:[1,"坎"],done:false}
//当执行到第八次的时候done会变成true,表示遍历完了

keys

和entries差不多,就是value显示索引

values

和entries差不多,就是value显示值

for...in....

 let gossip=["乾", "坎", "艮", "震","乾", "坎", "艮", "震",]
 for (const value in gossip) {
   console.log(value);
 }
//遍历索引

for...of....

 let gossip=["乾", "坎", "艮", "震","乾", "坎", "艮", "震",]
 for (const value of gossip) {
   console.log(value);
 }
//遍历值