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个位置添加,就找第四个位置的数字,后面添加一个就是第五个位置
    在这里插入图片描述

2.修改数组中的元素

  • 替换数组中的元素
    arr.splice(index,1,'x')将index位置的元素替换为'x'(也就是删一个又加了一个)
    arr[9] = 'x'
  • 只要知道索引(下标),修改就很简单
  • 反转顺序(修改了原来的数组)
    arr.reverse()
    在这里插入图片描述
    题目:反转一个字符串最优法
    字符串——>数组——>反转——>字符串
let s = 'abcde'
s.split('')
s.split('').reverse()
s.split('').reverse().join('')

在这里插入图片描述

  • 自定义顺序
    系统不知道谁大谁小,如排名就是1在前,因此需要自己设定
    1.arr.sort()默认排序,小的在前大的在后
    在这里插入图片描述
    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
 }
})

在这里插入图片描述

  • 数组里是对象的自定义排序
    只需要告诉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
  }
})

在这里插入图片描述

  • 自定义排序简便形式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
    在这里插入图片描述
    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:[]),[])

数组变换综合题目

  • 数组变换
    在这里插入图片描述
    答案:
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:[]})
  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: JavaScript 中的 `map` 和 `filter` 方法都是数组的内置方法,用于处理数组元素。 - `map` 方法:将数组中的每一个元素映射到另一个数组中,并返回新数组。它会对数组中的每个元素执行一次提供的回调函数,并将回调函数的返回值存储到新的数组中。 - `filter` 方法:通过过滤数组元素创建新的数组。它会对数组中的每个元素执行一次提供的回调函数,如果回调函数的返回值为 `true`,则将该元素存储到新的数组中。 总之,`map` 方法适用于对数组元素进行修改,而 `filter` 方法适用于从数组中选择符合特定条件的元素。 ### 回答2: JavaScript中的数组map方法和filter方法是两种常用的数组操作方法,它们有以下区别: 1. 功能不同:map方法用于对数组中的每个元素进行处理,并返回一个新的数组,新数组元素是原数组经过处理后的结果;而filter方法用于根据指定条件对数组中元素进行筛选,并返回一个新的数组,新数组包含满足条件的元素。 2. 返回值不同:map方法返回一个新的数组,该数组的长度和原数组相同,但元素是经过处理后的结果;而filter方法返回一个新的数组,该数组的长度可能小于或等于原数组,只包含满足条件的元素。 3. 处理方式不同:map方法会遍历数组中的每个元素,并执行回调函数来处理每个元素;而filter方法也会遍历数组中的每个元素,但会根据指定的条件判断是否保留该元素。 示例使用: ``` // map方法示例 const numbers = [1, 2, 3, 4, 5]; const multipliedNumbers = numbers.map(num => num * 2); console.log(multipliedNumbers); // 输出: [2, 4, 6, 8, 10] // filter方法示例 const words = ['hello', 'world', 'javascript', 'map', 'filter']; const filteredWords = words.filter(word => word.length > 5); console.log(filteredWords); // 输出: ['javascript', 'filter'] ``` 综上所述,数组map方法和filter方法在功能、返回值和处理方式等方面存在明显区别,可以根据具体需求选择使用。 ### 回答3: JavaScript中的数组map方法和filter方法都是用来处理数组的方法,但有着不同的功能和用途。 map方法是对数组中的每个元素进行遍历,并将每个元素经过处理后生成一个新的数组。它接受一个回调函数作为参数,在每次遍历数组的过程中将数组的当前元素传递给回调函数进行处理,然后将处理后的结果存入新的数组中。最终返回处理后的新数组。例如: ```javascript const arr = [1, 2, 3]; const newArr = arr.map((item) => item * 2); console.log(newArr); // [2, 4, 6] ``` filter方法则是根据指定的条件对数组进行筛选过滤,返回满足条件的元素组成的新数组。它也接受一个回调函数作为参数,在每次遍历数组的过程中将数组的当前元素传递给回调函数进行判断,如果回调函数返回true,则将该元素添加到新数组中,否则忽略该元素。最终返回满足条件的新数组。例如: ```javascript const arr = [1, 2, 3, 4, 5]; const newArr = arr.filter((item) => item % 2 === 0); console.log(newArr); // [2, 4] ``` 可以看出,map方法主要用于对数组中的每个元素进行处理和转换,而filter方法主要用于对数组进行筛选和过滤。它们的使用场景和用途是不同的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值