数组变异和非变异方法有哪些
时间: 2023-03-25 20:01:26 浏览: 103
数组变异方法包括:插入、删除、替换、交换、反转、排序等操作,这些操作会改变原数组的内容。
数组非变异方法包括:slice、concat、join、map、filter、reduce等操作,这些操作不会改变原数组的内容,而是返回一个新的数组。
相关问题
数组变异的方法有哪些 数组的方法整理
JavaScript 中,数组变异(Array Mutation)指的是对数组原有元素进行修改、增加或删除操作的方法。常用的数组变异方法有以下几种:
1. push():向数组末尾添加一个或多个元素,并返回新的长度。
2. pop():删除数组末尾的元素,并返回删除的元素。
3. shift():删除数组第一个元素,并返回删除的元素。
4. unshift():向数组开头添加一个或多个元素,并返回新的长度。
5. splice():从数组中删除元素或向数组中添加元素,返回被删除的元素。
6. sort():对数组进行排序,返回排序后的数组。
7. reverse():颠倒数组中元素的顺序,并返回颠倒后的数组。
除了上述数组变异方法之外,还有一些数组方法不会对原数组进行修改,而是返回一个新的数组。常用的这类数组方法有以下几种:
1. concat():将两个或多个数组合并成一个新数组,并返回新的数组。
2. slice():从数组中选取指定的元素,返回新的数组。
3. filter():过滤数组中的元素,返回符合条件的元素组成的新数组。
4. map():对数组中的每个元素进行处理,返回处理后的元素组成的新数组。
5. reduce():对数组中的元素进行累加或累积,返回累加或累积的结果。
6. find():查找数组中符合条件的第一个元素,并返回该元素。
7. findIndex():查找数组中符合条件的第一个元素的索引,并返回该索引。
8. indexOf():查找数组中指定元素的索引,并返回该索引。
9. lastIndexOf():查找数组中指定元素最后出现的索引,并返回该索引。
10. includes():判断数组中是否包含指定元素,返回布尔值。
需要注意的是,数组变异方法会直接修改原数组,而不是返回一个新数组。如果你需要保留原数组,可以先将原数组复制一份,然后对复制的数组进行操作。
给这数组外面两层要有命名
如果你想在 `data` 中给这个三重嵌套数组外面两层命名,你可以这样写:
```
data() {
return {
outerArray: [
{
name: 'array1',
middleArray: [
{
name: 'array1-1',
innerArray: [1, 2, 3]
},
{
name: 'array1-2',
innerArray: [4, 5, 6]
}
]
},
{
name: 'array2',
middleArray: [
{
name: 'array2-1',
innerArray: [7, 8, 9]
},
{
name: 'array2-2',
innerArray: [10, 11, 12]
}
]
}
]
}
}
```
这将在 `data` 中定义一个 `outerArray` 数组,它包含两个对象元素,每个对象元素都有一个 `name` 属性和一个 `middleArray` 属性。`middleArray` 属性也是一个数组,包含两个对象元素,每个对象元素有一个 `name` 属性和一个 `innerArray` 属性。`innerArray` 属性是一个数组,包含三个元素。
你可以使用多个 `v-for` 指令来遍历这个数组,例如:
```
<template>
<div>
<div v-for="(outerObj, outerIndex) in outerArray" :key="outerIndex">
<div>{{ outerObj.name }}</div>
<div v-for="(middleObj, middleIndex) in outerObj.middleArray" :key="middleIndex">
<div>{{ middleObj.name }}</div>
<div v-for="(innerValue, innerIndex) in middleObj.innerArray" :key="innerIndex">
{{ innerValue }}
</div>
</div>
</div>
</div>
</template>
```
这将输出 `outerArray` 中的每个元素。
需要注意的是,如果你需要在 Vue 中动态修改这个三重嵌套数组,你需要使用 Vue 提供的数组变异方法,例如 `push()`、`pop()`、`shift()`、`unshift()`、`splice()` 等。你也可以使用 Vue 提供的 `$set()` 方法来添加或替换数组中的元素。需要注意的是,如果你直接修改数组的某个元素,Vue 将无法检测到这个变化,所以不推荐这样做。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)