4-16 JS数组(增加和修改数组中的元素、数组变换:map、filter、reduce)

1.增加数组中的元素

  • 在尾部加元素
    arr.push(newItem):修改arr,返回新长度(push推)
    arr.push(item1,item2)
  • 在头部加元素
    arr.unshift(newItem)
    arr.unshift(item1,item2)
  • 在中间添加元素
    arr.splice(index,0,'x')index(如:index=4,则在第4个位置,也是第三个位置的后面间隙)处插入x0表示什么都不删
    arr.splice(index,1)在index这个位置删掉一个
    arr.splice(index,0,'x','y')
    注意:确定添加的位置时,最好是找前一个位置。如:第5个位置添加,就找第四个位置的数字,后面添加一个就是第五个位置
    4-16 JS数组(增加和修改数组中的元素、数组变换:map、filter、reduce)_第1张图片

2.修改数组中的元素

  • 替换数组中的元素
    arr.splice(index,1,'x')将index位置的元素替换为'x'(也就是删一个又加了一个)
    arr[9] = 'x'
  • 只要知道索引(下标),修改就很简单
  • 反转顺序(修改了原来的数组)
    arr.reverse()
    4-16 JS数组(增加和修改数组中的元素、数组变换:map、filter、reduce)_第2张图片
    题目:反转一个字符串最优法
    字符串——>数组——>反转——>字符串
let s = 'abcde'
s.split('')
s.split('').reverse()
s.split('').reverse().join('')

4-16 JS数组(增加和修改数组中的元素、数组变换:map、filter、reduce)_第3张图片

  • 自定义顺序
    系统不知道谁大谁小,如排名就是1在前,因此需要自己设定
    1.arr.sort()默认排序,小的在前大的在后
    4-16 JS数组(增加和修改数组中的元素、数组变换:map、filter、reduce)_第4张图片
    2.arr.sort(function(a,b){ 1/0/-1 })需要用户自己设定数字大小比较方式,其中1表示前面一个(a)大,0表示一样大,-1表示后一个(b)
let arr = [5,2,4,3,1]
arr.sort(function(a,b){
   if(a>b){
   return -1//当a的数值大于b的数值时返回-1,则表示设定b大于a
 }else if(a===b){
   return 0
 }else{
  return 1
 }
})

4-16 JS数组(增加和修改数组中的元素、数组变换:map、filter、reduce)_第5张图片

  • 数组里是对象的自定义排序
    只需要告诉JS根据谁来排,谁才是大谁才是小
let arr = [
    {name:'小红',score: 99} ,{name:'小明',score: 82} ,{name:'小蓝',score: 00}
]
arr.sort(function(a,b){
   if(a.score>b.score){
    return -1
  }else if(a.score===b.score){
    return 0
  }else{
    return 1
  }
})

4-16 JS数组(增加和修改数组中的元素、数组变换:map、filter、reduce)_第6张图片

  • 自定义排序简便形式arr.sort((a,b))=>a-b
    如果减法式子返回正数,则表示前面一个a大,返回负数,则表示后一个b
let arr = [
    {name:'小红',score: 99} ,{name:'小明',score: 82} ,{name:'小蓝',score: 00}
]
arr.sort((a,b)=>a.score-b.score)//如果a大于b,则返回正数,则设定a>b
arr.sort((a,b)=>b.score-a.score)

数组变换

注意:不会改变原数组

  • map:一一映射
    n变n
    arr.map(item => item*item)变成平方,括号内是操作的箭头函数
  • filter:过滤操作
    n变少
    arr.filter(item => item%2 === 0?true:false)只要偶数
    其中:item%2 === 0?true:false等价于item%2 === 0
    因为语句本身就是:余数为0,是(true)则返回true,否(false)则返回false),本身就含有true和false,返回本身即可。
  • reduce:减少,合成(可以理解为用框子打劫的过程)
    n变1(也可以是n变n)
    1.arr.reduce((sum,item)=>{return sum+item},0)
    初始值为0,用当前的sum去操作(如加法)第一个的item,返回的值作为新的sum,又去操作下一个item,如此累计
    结果的初始值为0
    return的值作为下一次的sum
    4-16 JS数组(增加和修改数组中的元素、数组变换:map、filter、reduce)_第7张图片
    2.n变n,等价于map
    arr.reduce((result,item)=>{return result.concat(item*item )},[])
    初始值可以设定是空数组,每次不加起来,只要concat将空数组和item*item链接起来
    3.n变少,等价于filter
    (用框子打劫,问是不是偶数,不是就直接过,是就放进框子)
let arr = [1,2,3,4,5]
arr.reduce((result,item)=>{
if(item%2 === 0){
  return result.concat(item)//余数等于0,则item连接到result后面
 }else{
  return result //直接返回原样子,拿着框子走人
}
},[])

简化:变成?:表达式(没有return就不需要花括号),然后返回原样可以认为是返回空数组,都要返回则合在一起
arr.reduce((result,item)=>result.concat(item%2===0?item:[]),[])

数组变换综合题目

  • 数组变换
    4-16 JS数组(增加和修改数组中的元素、数组变换:map、filter、reduce)_第8张图片
    答案:
arr.reduce((result,item)=>{
  if(item.parent === null){
    result.id = item.id
    result['名称'] = item['名称']
  }else{
   result.children.push(item)
   delete item.parent
   item.children = null
  }
  return result
},{id:null,children:[]})

你可能感兴趣的:(JavaScript,javascript)