使用map 和find重组数组对象

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      arr1Obj: [
        { code: "1", name: "文字1" },
        { code: "2", name: "文字2" },
        { code: "3", name: "文字3" },
        { code: "4", name: "文字4" },
        { code: "5", name: "文字5" },
      ],
      arr2Obj: [
        { code: "1", value: "98" },
        { code: "2", value: "48" },
        { code: "3", value: "90" },
      ],
    };
  },
  created() {
  	let arr1 = this.arr1Obj;
    let arr2 = this.arr2Obj;
    let arr = arr1.map((v) => {
        // eslint-disable-line no-unused-vars
        const newResult = arr2.find((item) => v.code === item.code) || {};
        return { name: v.name, value: newResult.value };
      });
      console.log(arr, "aaaa");
  },
};
</script>

在这里插入图片描述

<think>好的,我现在需要回答用户关于JavaScript数组操作方法的提问。首先,我得回忆一下自己知道的数组方法,然后系统地整理出来。用户可能希望得到一个结构清晰、分门别类的介绍,所以我应该按照不同的功能来分类这些方法,比如增删元素、遍历、转换、查找、排序等等。 首先,想到数组的基本操作,比如添加删除元素。常见的像push、pop、shift、unshift这些方法,属于修改原数组的方法。还有splice方法,功能比较强大,可以增删改。slice则是截取数组的一部分,不改变原数组。 接下来是遍历相关的方法。比如forEach、map、filter、reduce、some、every等,这些都属于高阶函数,用于处理数组的每个元素。需要区分哪些会改变原数组,哪些会产生新数组。例如,mapfilter都会返回新数组,而forEach只是遍历,不改变原数组。 然后是数组的转换方法,比如join,把数组转换成字符串;split是字符串的方法,但用户可能也会关心如何从字符串转数组。不过这里应该只关注数组本身的方法。 查找判断相关的方法,比如indexOf、lastIndexOf、includes(ES6)、findfindIndex(ES6)等。这些方法用于查找元素的位置或是否存在。还有someevery,可以判断数组元素是否满足某些条件。 排序反转的方法,sortreverse。需要注意的是sort默认是按字符串Unicode码点排序的,所以对数字排序可能需要自定义比较函数。 数组的合并与展开,concat方法用于合并数组,还有ES6的扩展运算符...,但扩展运算符属于语法,不是方法,不过可能用户会感兴趣。还有flatflatMap(ES2019),用于扁平化数组。 其他方法如Array.isArray判断是否是数组,fill填充数组,copyWithin复制数组的一部分到其他位置,这些可能不太常用,但需要提及。 另外,ES6新增的方法如Array.from,将类数组对象转为数组;entries、keys、values用于遍历数组的键值对。 需要注意,有些方法会修改原数组,如push、pop、splice、sort、reverse等,而有些则不会,如slice、map、filter等。这个区别对开发者来说很重要,需要指出来。 可能还需要提到一些ES6+的新特性,比如findfindIndex、includes,这些在旧版浏览器可能需要polyfill。但用户可能更关心方法的功能,而不是兼容性。 最后,应该给出一些示例代码,说明各个方法的用法,这样用户更容易理解。例如,push添加元素到末尾,返回新长度;pop删除最后一个元素,返回被删除的元素等。 在组织内容时,应该分点列出,每个分类下有几个方法,简要说明作用、参数、返回值,以及是否改变原数组。结构上可以用标题分开各个类别,如增删元素、遍历、转换、查找、排序等,这样用户查阅起来方便。 需要检查是否有遗漏的重要方法,比如reduceRight、toString、toLocaleString等,不过这些可能使用频率较低,可以简要提及。还有像flatflatMap这样的新方法,如果用户使用的环境支持ES6+,这些方法会很有用。 总结一下,我需要将数组方法按功能分类,每个类别下列举常用方法,说明其作用、用法示例、是否改变原数组,并注意涵盖ES6新增的方法。同时,保持语言简洁明了,结构清晰,便于用户理解后续参考。</think>JavaScript中对数组的操作方法非常丰富,下面按功能分类介绍常见方法: --- ### 一、增删元素 | 方法 | 说明 | 是否修改原数组 | |---------------|----------------------------------------------------------------------|----------------| | `push()` | 末尾添加元素,返回新长度。例:`arr.push(5)` | ✔️ | | `pop()` | 删除最后一个元素,返回被删除元素。例:`arr.pop()` | ✔️ | | `unshift()` | 开头添加元素,返回新长度。例:`arr.unshift(0)` | ✔️ | | `shift()` | 删除第一个元素,返回被删除元素。例:`arr.shift()` | ✔️ | | `splice()` | 增删改元素。例:`arr.splice(1, 0, 'a')`(从索引1删除0个,插入'a') | ✔️ | --- ### 二、遍历与转换 | 方法 | 说明 | 返回值 | |---------------|----------------------------------------------------------------------|----------------| | `forEach()` | 遍历数组,无返回值。例:`arr.forEach(item => console.log(item))` | ❌ | | `map()` | 映射新数组。例:`arr.map(x => x*2)` | 新数组 | | `filter()` | 过滤符合条件的元素。例:`arr.filter(x => x > 3)` | 新数组 | | `reduce()` | 累计计算。例:`arr.reduce((sum, x) => sum + x, 0)` | 累计结果 | | `join()` | 数组转字符串。例:`arr.join('-')` → `"a-b-c"` | 字符串 | --- ### 三、查找与判断 | 方法 | 说明 | 返回值 | |----------------|----------------------------------------------------------------------|----------------| | `indexOf()` | 查找元素首次出现的索引,不存在返回-1。例:`arr.indexOf(5)` | 数字 | | `includes()` | 判断是否包含元素(ES6)。例:`arr.includes(5)` | 布尔值 | | `find()` | 返回第一个符合条件的元素(ES6)。例:`arr.find(x => x > 3)` | 元素或`undefined`| | `some()` | 判断是否有元素符合条件。例:`arr.some(x => x % 2 === 0)` | 布尔值 | | `every()` | 判断所有元素是否符合条件。例:`arr.every(x => x > 0)` | 布尔值 | --- ### 四、排序与重组 | 方法 | 说明 | 是否修改原数组 | |---------------|----------------------------------------------------------------------|----------------| | `sort()` | 排序(默认按字符串Unicode排序)。例:`arr.sort((a,b) => a - b)` | ✔️ | | `reverse()` | 反转数组顺序。例:`arr.reverse()` | ✔️ | | `slice()` | 截取子数组。例:`arr.slice(1,3)`(含头不含尾) | ❌ | | `concat()` | 合并数组。例:`arr1.concat(arr2)` | ❌ | --- ### 五、其他实用方法 | 方法 | 说明 | 返回值 | |--------------------|----------------------------------------------------------------------|----------------| | `Array.isArray()` | 判断是否为数组。例:`Array.isArray(arr)` | 布尔值 | | `fill()` | 填充数组。例:`new Array(3).fill(0)` → `[0,0,0]`(ES6) | 修改后的原数组 | | `flat()` | 扁平化数组。例:`[1,[2,3]].flat()` → `[1,2,3]`(ES2019) | 新数组 | | `flatMap()` | 先映射后扁平化。例:`arr.flatMap(x => [x, x*2])`(ES2019) | 新数组 | --- ### 示例代码 ```javascript // 增删元素 let arr = [1, 2]; arr.push(3); // [1,2,3] arr.splice(1, 1, 'a'); // [1,'a',3] // 转换与遍历 const doubled = arr.map(x => x * 2); // [2, 'aa', 6](注意字符串计算) // 查找与判断 const hasEven = arr.some(x => x % 2 === 0); // true // 排序 arr.sort((a,b) => a - b); // [1,3,'a'](注意数值与字符串混合排序问题) ``` --- ### 关键点总结 1. **修改原数组**的方法:`push/pop/shift/unshift/splice/sort/reverse/fill` 2. **返回新数组**的方法:`map/filter/slice/concat/flat/flatMap` 3. **ES6+新增方法**:`includes/find/findIndex/Array.from/Array.of/flat/flatMap`
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值