javascript的filter、map数组深浅拷贝之展开语法的奇技淫巧

简介: javascript的filter、map数组深浅拷贝之展开语法的奇技淫巧

filter和map

filter筛选数据(数据一样)

filter不会改变原数组,返回一个新的数组
return 对true和false判断
返回return true的子项
不会修改原数组的子项

  • 长度:小于等于
  • 数据:子集

例1:

let array1=['yma16','china']
let array2=array1
// 对原数组筛选
let array3=array2.filter((item,index)=>{
   
  if(item=='china'){
   
     item='changed'
     console.log('原来子项',array2[index])
     return true
  }
})
console.log('array1',array1)
console.log('array2',array2)
console.log('array3',array3)
AI 代码解读

不对原来数组进行修改,产生原数组的子项
返回的数组是原数组的子集
例2:
即使数据被修改,返回的也是数据修改后子集

let array1=['yma16','china']
let array2=array1
// 对原数组筛选 修改子项
let array3=array2.filter((item,index)=>{
   
  if(item=='china'){
   
     console.log('原来子项',array2[index])
     array2[index]='changed'
     return true
  }
})
console.log('array1',array1)
console.log('array2',array2)
console.log('array3',array3)
AI 代码解读

由于赋值为浅拷贝,array2传递为引用,当array2修改时array1也被修改
例3:
如果子项为字典,修改字典数据,

let array1=[{
   name:'yma16',country:'china'}]
let array2=array1
// 对原数组筛选 新增age
let array3=array2.filter((item,index)=>{
   
  item.age=18
  return true
})
console.log('array1',array1)
console.log('array2',array2)
console.log('array3',array3)
AI 代码解读

map返回数组对象(长度一样)

数组map返回的不一定是他的子项

  • 数据:可以自定义
  • 长度:与原数组保持一致

例1:
map不会对数组进行筛选,如果不返回数据,则默认返回undefined作为子项

let array1=['yma16','china']
let array2=array1
// 返回新数组
let array3=array2.map((item,index)=>{
   
  if(item=='china'){
   
     item='changed'
     console.log('原来子项',array2[index])
     return item
  }
})
console.log('array1',array1)
console.log('array2',array2)
console.log('array3',array3)
AI 代码解读

深浅拷贝

浅拷贝

普通的赋值为浅拷贝,传递的是引用
例1:

let array1=['yma16','china']
let array2=array1
// 浅拷贝
array2.map((o,index)=>{
   
  array2[index]='我是array2'
})
console.log('array1',array1)
console.log('array2',array2)
AI 代码解读

数组的深拷贝

数组的深拷贝
JSON.stringify将对象解析为字符串
JSON.parse将字符串解析为键值对
相辅相成
例1:
深拷贝数组,其地址指向不同

let array1=['yma16','china']
let array2=JSON.parse(JSON.stringify(array1))
// 深拷贝
array2.map((o,index)=>{
   
  array2[index]='我是array2'
})
console.log('array1',array1)
console.log('array2',array2)
AI 代码解读

奇淫巧计

展开语法...
展开语法和 Object.assign() 行为一致, 执行的都是浅拷贝(只遍历一层),可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造字面量对象时, 将对象表达式按key-value的方式展开
例:展开语法深拷贝数组

let array1=['yma16','china']
let array2=[...array1]
// 深拷贝
array2.map((o,index)=>{
   
  array2[index]='我是array2'
})
console.log('array1',array1)
console.log('array2',array2)
VM1696:7 array1 (2) ["yma16", "china"]
VM1696:8 array2 (2) ["我是array2", "我是array2"]
AI 代码解读

数组去重

function noRepeat(arr) {
   
  return [...new Set(arr)]
}
AI 代码解读
function noRepeat(arr) {
   
  return Array.from(new Set(arr))
}
AI 代码解读

数组最大、最小

最大

function arrayMax(arr) {
   
  return Math.max(...arr);
}
AI 代码解读

最小

function arrayMin(arr) {
   
  return Math.min(...arr);
}
AI 代码解读

数组某个值的出现次数

function countOccurrences(arr, value) {
   
  return arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);
}
AI 代码解读

返回两个数组的不同元素

function diffrence(arrA, arrB) {
   
  return arrA.filter(v => !arrB.includes(v))
}
AI 代码解读

返回两个数组的相同元素

function intersection(arr1, arr2) {
   
  return arr2.filter(v => arr1.includes(v))
}
AI 代码解读
目录
打赏
0
0
0
0
52
分享
相关文章
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
69 2
|
5月前
|
js删除数组中已知下标的元素
js删除数组中已知下标的元素
75 4
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
55 5
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
84 1
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
135 1
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
105 0

热门文章

最新文章