设为首页收藏本站
开启辅助访问

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

 您所在的位置：网站首页 › js复制数组数据 › javascript的filter、map数组深浅拷贝之展开语法的奇技淫巧

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

2024-07-03 11:19| 来源: 网络整理| 查看: 265

javascript的小技巧笔记 filter和mapfilter筛选数据（数据一样）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)

在这里插入图片描述 不对原来数组进行修改，产生原数组的子项 返回的数组是原数组的子集 例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)

在这里插入图片描述 由于赋值为浅拷贝，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)

在这里插入图片描述

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)

在这里插入图片描述

深浅拷贝 浅拷贝

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

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

在这里插入图片描述

数组的深拷贝

数组的深拷贝 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)

在这里插入图片描述

奇淫巧计

展开语法… 展开语法和 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"]

在这里插入图片描述

数组去重 function noRepeat(arr) { return [...new Set(arr)] } function noRepeat(arr) { return Array.from(new Set(arr)) }

在这里插入图片描述

数组最大、最小

最大

function arrayMax(arr) { return Math.max(...arr); }

最小

function arrayMin(arr) { return Math.min(...arr); }

在这里插入图片描述

数组某个值的出现次数 function countOccurrences(arr, value) { return arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0); } 返回两个数组的不同元素 function diffrence(arrA, arrB) { return arrA.filter(v => !arrB.includes(v)) } 返回两个数组的相同元素 function intersection(arr1, arr2) { return arr2.filter(v => arr1.includes(v)) }

在这里插入图片描述



【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3