使用扩展运算符克隆数组并内联添加
是一种常见的数组操作技巧。扩展运算符（Spread Operator）是ES6引入的语法，用于展开数组或对象。
在JavaScript中，可以使用扩展运算符克隆一个数组，并在克隆的数组中内联添加新的元素。具体步骤如下：
- 克隆数组：使用扩展运算符将原始数组展开，创建一个新的数组副本。这样做可以确保原始数组不会被修改。
const originalArray = [1, 2, 3];
const clonedArray = [...originalArray];- 内联添加元素：在克隆的数组中使用数组的push()方法或直接通过索引赋值的方式添加新的元素。
clonedArray.push(4); // 使用push()方法添加元素
clonedArray[0] = 0; // 直接通过索引赋值添加元素完整的答案如下：
使用扩展运算符克隆数组并内联添加是一种常见的数组操作技巧。扩展运算符是ES6引入的语法，用于展开数组或对象。在JavaScript中，可以按以下步骤进行操作：
- 克隆数组：使用扩展运算符将原始数组展开，创建一个新的数组副本。这样做可以确保原始数组不会被修改。例如，可以使用以下代码克隆一个名为originalArray的数组：
const originalArray = [1, 2, 3];
const clonedArray = [...originalArray];- 内联添加元素：在克隆的数组中使用数组的push()方法或直接通过索引赋值的方式添加新的元素。例如，可以使用以下代码在克隆的数组中添加新的元素：
clonedArray.push(4); // 使用push()方法添加元素
clonedArray[0] = 0; // 直接通过索引赋值添加元素这种技巧可以方便地克隆数组并在克隆的数组中进行元素的添加操作。它在许多场景中都非常有用，例如在处理数据时需要保留原始数据的同时进行修改或扩展。如果你想了解更多关于JavaScript数组操作的信息，可以参考腾讯云的云开发文档中关于JavaScript数组的介绍：JavaScript数组操作。
相关·内容
我正在尝试将数组添加到全局数组中。然后将该数组保存到AsyncStorage。但我似乎不能做到这一点，我也不确定为什么。
它似乎在推送到该数组时出现了问题。
我试过按任何键，但仍然不能解决我的问题。
//for saving all transactions
let exchanges =[ x = ''];
class AddScreen extends React.Component {
constructor(props) {
i=0;
super(props);
this.state = {text: '', name:'',am
浏览 2提问于2019-07-12得票数 2
2回答
我想知道有没有人知道那个传真机
cosnt newArray = [...oldArray];
使房倒法
const newArray = _.clone(oldArray);
过时了？
或者更重要的是，如果这两种方法都更有效？
*注意，这是一个浅克隆，只是希望在一个新数组中的对象引用。
谢谢!
浏览 1提问于2019-11-04得票数 5
回答已采纳
在我的状态中有一个名为names的对象数组，我试图将此数组的副本复制到状态为shuffledNames的另一个对象数组中，但当我使用下面的代码对shuffledNames进行混洗时，原始names会更改in以匹配新的混洗in。有关示例，请参阅下面的图片。我尝试过使用.concat()、.slice()。我不知道该怎么做了。
handleSort = () => {
let tempName = [...this.state.names];
let shuffledNames = tempName;
for (let i = shuffledNames.length; i-
浏览 1提问于2021-12-04得票数 0
我把一个数组等号设置成另一个数组
orders = [
{
'id': PROCESSING,
'displayName': 'Processing'
},
{
'id': SHIPPED,
'displayName': 'Shipped'
}
];
cloneOrde
浏览 0提问于2018-11-12得票数 1
回答已采纳
当我在我的应用程序中使用下面的代码时，我得到了lint错误。
数组原型是只读的，不应添加属性。使用扩展运算符而不是'.apply()‘。请指教
Array.prototype.pushArray = function(arr) {
this.push.apply(this, arr);
};
浏览 2提问于2017-09-12得票数 2
我在我的Vue项目中使用Vue.Draggable，并试图从sider拖动(克隆)一个按钮到一个可拖动的组件中。
当我将按钮克隆到组件中时，我想修改数据。但我发现，当我修改与组件绑定的列表中的数据时，sider使用的原始列表会自动更改。
在Vue.Draggable中有没有某种同步机制？我只想更改组件中的对象数据。
我尝试使用Chrome浏览器中的vue扩展来手动修改list2中的对象。而且这种情况仍然会发生。所以我认为这可能不是我代码中的bug。
addEntity (conditionID, entity) {
if (!entity.forChoose)
浏览 9提问于2019-11-07得票数 0
2回答
影响反应状态的克隆阵列
、、、、
在我的react应用程序中，克隆数组存在问题。
我将包含数据的数组导入到名为ApplicationsData的应用程序中。这是一组物体。
import ApplicationsData from '../Store/Applications';
App组件具有以下状态：
constructor(props) {
super(props);
this.state = {
isOn: true,
untouchedApplications: [...ApplicationsData],
application
浏览 1提问于2020-06-20得票数 0
回答已采纳
所以我创建了小提琴：https://jsfiddle.net/4ex7uh8g/ 问题是我不理解这把小提琴的特定代码行中的语法差异。看一下JavaScript选项卡中的24行。这里它使用了这样的语法：<div style={{...spanStyle}}>我也试过使用这样的语法：<div style={spanStyle}>，它也工作得很好，当我检查样式属性时，它注入的是相同的，所以对我来说，看起来一切都是一样的，只是语法上的不同，但我不是很确定，当我选择一个而不是另一个时，会不会遗漏了什么或误解了？ 我也读过这个帖子：What do these three dots
浏览 33提问于2021-01-23得票数 4
回答已采纳
我想从某个索引映射嵌套的json。
例如，如果我的json是以下内容：
{"data":[{id:1,name:"NAV"},{id:2,name:"Rick"},{id:3,name:"Ceil"}]}
我希望从第一个索引开始映射这个json，即id =1 name :rick，并将其映射到nav，这样映射的顺序如下：
{id:2,name:"Rick"}
{id:3,name:"Ceil"}
{id:1,name:"NAV"}
类似于循环数组或队列，我不知道如
浏览 0提问于2019-05-30得票数 0
回答已采纳
在我的反应元件中有这个状态->
const [employeeState, setEmployee] = useState({
"empName": null,
"Age": null,
"depts": [], //depts is an array of objects
"groups": [] //group is an array of objects
});
对于部门和组，我有一个独立的状态，如下所示->
const depts = {
浏览 7提问于2019-11-08得票数 1
回答已采纳
我正在开发一个angular2应用程序，它利用几个服务来共享整个应用程序的日期。
在我的应用程序的一部分，我有一个编辑功能，允许用户修改数组中的数据。
在这种情况下，当用户修改组件中的属性时，服务中的相应数据也会在不直接设置的情况下被修改。
我已经学习了大约6个月的角度，但我知道设置一个数组等于另一个数组实际上是指向同一个对象。因此，在这种情况下，我在服务中有一个方法，它将数组作为片()返回，我认为它应该创建新的数组，以避免用户能够直接修改服务数据。
我正在开发的整个应用程序相当复杂，但我能够创建一个赤裸的角度应用程序来演示正在发生的事情。
test.component.html：
<d
浏览 1提问于2019-04-03得票数 1
回答已采纳
又是一个令人困惑的问题：
在这里，我将数组复制到另一个变量中，当我在另一个变量中更改了某些内容时，我希望不会更改原始数组，但两个数组都更改了为什么？
const groups = [[1, 2, 3, 4 ,5], [2,3]];
const sets = [...groups];
sets[1].push(9000); // I just push a number into sets NOT groups
console.log(sets);
console.log(groups);
只有当我们有一个数组的数组时才会发生这种情况！
我遗漏了什么以及如何修复它？
浏览 0提问于2020-10-02得票数 0
2回答
我是一个真正的web编程新手，我试着用vue.js回答问题。
export default {
// I want to an if (character == "Passé" then do this steps")
"steps": [
{
"id": 1,
"background": jpg.village,
"title": "Votre aventure épique commence ici. Pour découvrir
浏览 0提问于2021-02-15得票数 0
1回答
我用p5js做了一个绘图应用程序--我有一个叫做points的多维数组，它由形状组成，形状的点有x，y坐标。所以： shapes[0][0] = [10,10]
shapes[1][3] = [47,98] 等。 我有一个mousePressed函数。在按下鼠标时，在操作这些形状的点之前，我希望将原始形状数组存储为undoArr。 然后，当用户拖动鼠标时，形状数组中的坐标将被更新。如果用户决定撤销，我有一个函数keyPressed，我希望能够用来自undoArr的值填充shapes数组。 但是不管我怎么尝试-似乎撤销数组和形状数组总是有相同的值，这很奇怪，因为如果我在形状数组中记录坐标的状态
浏览 19提问于2019-03-10得票数 1
回答已采纳
1回答
因此，我有一个名为Columns.js的文件，其中包含以下代码： const cols = {
key1:val1,
key2:val2,
...
...
}
export default cols; 现在，我有另一个名为Widget.js的文件，它包含以下代码： //other imports
import cols from './Columns';
//import Table and TableLoader
export default function Widget(){
const data,error,loading... = useQuery(//some
浏览 18提问于2021-07-20得票数 1
回答已采纳
我试图使用react中的select下拉列表按属性对对象数组进行排序。
数据是使用useState()钩子在父容器中定义的，我正在将一个onSortChange函数传递给子选择组件DataSelector。数据由另一个组件DataList显示为一个列表。下面是演示的最小示例(减去为了简洁起见的导入)：
父容器：
const ParentContainer = () => {
const [data, setData] = useState([]);
useEffect( () => {
populateData();
}, []);
浏览 4提问于2021-05-14得票数 2
回答已采纳
1回答
我有一个表，其中填充了来自对象数组的数据。
这些数据是通过websockets收集的。套接字侦听3个不同的事件，并根据事件对数组执行以下操作之一：
用户可以添加一个条目
以下是代码：
interface TableEntry {
address: string;
amount: string;
children?: React.ReactNode;
}
export const TableComponent: FC = () => {
const socket = useContext(SocketContext);
const [entriesArray, set
浏览 1提问于2022-09-26得票数 0
回答已采纳
示例1
我有一段代码将一个扩展数组推入另一个数组：
const hobbies = ['Sports', 'Cooking'];
const activeHobbies = ['Hiking'];
activeHobbies.push(...hobbies);
console.log(activeHobbies); //['Hiking', 'Sports', 'Cooking']
hobbies.push('Skiing');
console.log(hobbies); //[
浏览 5提问于2022-10-24得票数 0
1回答
因此，我在父组件中有一个子组件，我想将状态的克隆传递给子组件，并在其上执行一些操作，但我得到的是，当我更改子组件时，父组件的状态也会发生变化，我不希望它们分开。呼叫儿童通讯：<UpdateTasksModal Tasks={this.state.Tasks.filter(x => x.selected == true)} />儿童通讯：
const [Tasks, setTasks] = useState(props.Tasks)
useEffect(() => {
setTasks( props.Tasks )
}, [pro
浏览 2提问于2020-07-25得票数 0
回答已采纳
我从API中获取数据，然后在状态中保存一个数组。当我试图使用输入修改数组中的对象中的特定字段时，我得到了以下错误：“Uncaught:无法赋值给只读属性”的对象“#”的“数量”。
状态(我使用RTK查询)：
const { data: Florists_data, refetch } = useGetFloristQuery(Number(sessionStorage.getItem('florist_id')));
const [flowersData, setFlowersData] = useState(Florists_data?.florist[0].flowers)
浏览 15提问于2022-02-08得票数 1
回答已采纳
我正在用JavaScript做一个小游戏来帮助我学习它。这个游戏基于一组瓷砖，每个瓷砖都有不同的值。
当它启动时，它将一个对象放入每个单元格中，然后继续下一个单元格，更改值。
它总是显示最后一个单元格的属性。有没有什么方法可以让单元格具有不同的值，而不需要制作大量不同的对象？
如果问题不清楚，很抱歉。我对JavaScript非常陌生。
浏览 25提问于2019-06-09得票数 1
我使用spread操作符更改了数组引用，但是包含旧值的数组仍然根据inital对象发生变化。
--我还无法复制发生在最小示例上的错误。说真的，我完全不知道发生了什么。
在我真正的代码中，唯一能让它工作的是使用下面的代码，而不是扩展操作符或其他可以用来更改引用的东西。
JSON.parse(JSON.stringify(array))
除此之外，绝对没有工作，即使使用扩展运算符改变了引用。
我在下面放了一个堆栈闪电战和一个代码片段(虽然它们的行为与我的代码不同，但它们的行为是正确的，而我的代码却并非如此)。
import {
Component,
OnInit
} from
浏览 2提问于2020-01-09得票数 2
回答已采纳
我尝试过这种方法：
this.plans = [];
this.plansCopy = [...this.plans];
它似乎不起作用，导致返回重复。
浏览 0提问于2017-12-13得票数 8
回答已采纳
Array.prototype.myUcase = function() {
for (i = 0; i < this.length; i++) {
this[i] = this[i].toUpperCase();
}
}; 但是字符串是不可变的。为什么在这种情况下为字符串重新赋值是可行的？
浏览 25提问于2019-12-13得票数 0
1回答
遇到使用扩展语法创建新对象的概念，如下所示
const human = { age: 20 };
const john = { ...human };
john.age = 10;
console.log(human.age); // 20
console.log(john.age); // 10
如上所述，人类对象可以保留其原始值。现在来看一下下面的代码：
const human = { age: 20, cars: ["toyota", "honda"] };
const john = { ...human };
john.cars[1] = &
浏览 20提问于2018-05-27得票数 4
回答已采纳
1回答
当我试图在我的小项目中按字母顺序对标题进行排序时，我遇到了一个问题。有一个变量"sortedRows"，用于存储使用"sort“函数后的排序行。该网页如下所示。 ? function sortTitle(){
const rows = Array.from(document.querySelectorAll(".tbody")); # get the table rows
const sortedRows = rows.sort((a, b) => {
const aText = a.queryS
浏览 14提问于2021-09-26得票数 0
我有一个受欢迎的方法，根据返回值，有条件地检查数组中的现有项，组件Recipe_serving显示。我在这里注意到的是，当我向数组(likedList)子组件重命名器中添加一个项时，条件是检查的，但是当我删除项时，即使使用了setState，也不会发生重新呈现。
class App extends Component {
state = {
result:[],
recipe:{},
isActive:"47746",
addToShopping: [],
likedList:[]
}
setActiveId=(id)=&g
浏览 0提问于2019-04-03得票数 2
回答已采纳
2回答
我正在使用扩展语法替换数组中的对象，但我不能将该对象添加为我的数组的新条目。
state = {8xf0y6ziyjabvozdd253nd:[
{
"id": "894tuq4ut84ut8v4t8wun89g",
"parentId": "8xf0y6ziyjabvozdd253nd",
"timestamp": 1503045227866,
"body": "Hi there! I ams a COMMENTSsg.",
"a
浏览 0提问于2017-08-19得票数 0
我用的是vuex打字本。这是一个存储模块：
import { getStoreAccessors } from "vuex-typescript";
import Vue from "vue";
import store from "../../store";
import { ActionContext } from "vuex";
class State {
history: Array<object>;
}
const state: State = {
history: [],
};
export c
浏览 0提问于2018-07-12得票数 0
回答已采纳
下面的代码是React原住民演示中的一段，我怀疑在这段代码中'...this‘的含义是什么，谢谢
render: function() {
return (
<View style={styles.container}>
<View
style={styles.center}
{...this._panResponder.panHandlers}
>
<Text>Like</Te
浏览 1提问于2016-03-15得票数 0
回答已采纳
我有一个数组，如下所示： weekStore = [
{week: 1, weekTimes: ["mon01", "tue01"]},
{week: 2, weekTimes: []}
]; 在某些情况下，会发生这种情况： weekStore[1].weekTimes = weekStore[0].weekTimes; 它有我想要的效果。但是，如果我随后更改它，如下所示： weekStore[0].weekTimes = ["mon01","wed01"]; 然后数组转到： weekStore = [
{week:
浏览 28提问于2020-07-18得票数 0
2回答
我在提供者@Injectable上声明一个数组，以便在不同的组件中使用它。
normeList: any[] = [
{
name: 'choice 1',
type:'false'
},
{
name: 'choice 2',
type:'false'
}
];
在组件上，我分配了这样的数组：
this.myArray = [].concat(this.sharedListDeclarationProvider.normeList);
在观点
浏览 0提问于2018-10-08得票数 0
回答已采纳
1回答
我在一个React应用程序中注意到以下内容：
<UserList
{...{ userIdsTyping, users }}
/>
{...{ userIdsTyping, users }}到底在这里做什么？我知道它将子组件传递给UserList组件，但是扩展操作符在这里是如何工作的呢？它与userIdsTyping和users有什么交互作用？
浏览 2提问于2017-11-09得票数 3
回答已采纳
我不能推送到fetchedSpendings状态数组，它在获取之后已经有数据了。 Reducer.js import {FETCH_SPENDINGS, PUSH_SPENDING } from './types'
const initialState = {
fetchedSpendings: []
}
export const dataReducer = (state = initialState, action) => {
switch(action.type){
case PUSH_SPENDING:
浏览 30提问于2021-01-09得票数 0
回答已采纳
3回答
我观看了关于react js的过程，并在其中添加了一个新项到数组(钩子)，如下所示： useState([new item , old Array]); 但我重复一遍，数组变成了一个对象 无论我搜索什么，我都会看到以下结果： useState([ old array ,new item ]); 但这种方法在课程中效果很好。
浏览 39提问于2021-04-05得票数 1
回答已采纳
1回答
第一个console.log(this.state.dataSource)的数据blob给了我
[ { date: '2017-07-13',
images:
[ { image: 'assets-library://asset/asset.JPG?id=8855847A-7157-4D04-8E71-43746BED3E2E&ext=JPG',
selected: false } ],
key: 0 }]
第二个console.log(this.state.dataSource)提供了数
浏览 0提问于2017-07-13得票数 0
为什么在地图中运行时使用扩展运算符复制数组，修改原始数组？，我在这里应该做什么才能不改变原始数组？
const data = {hello : "10"};
const prop = [{name : "hello", color: "red", value : ""}]
const copyProp = [ ...prop ]
copyProp.map(el => {
el.value = data[el.name] || ""
浏览 4提问于2020-06-10得票数 3
回答已采纳
return items.map(item => ({
...item,
score: Math.round((item.rate / 100) * 5)
}));
我知道它会更改每个对象的score值，items。但是为什么会有...item
使用它有什么好处？
它等于这个吗？：
return items.map(item => ({
item.score: Math.round((item.rate / 100) * 5);
return item;
}));
浏览 6提问于2019-10-28得票数 1
回答已采纳
我试图为Context#getString(id, args)方法创建一个包装器，因此我编写的代码更少：
fun Context.string(@StringRes strId: Int, vararg fmtArgs: Any?) = getString(strId, fmtArgs)
当调用函数时，会产生以下堆栈跟踪：
2020-04-17 13:26:20.778 24143-24143/mypackage E/ERROR: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)
Caused by
浏览 7提问于2020-04-17得票数 1
回答已采纳
3回答
考虑这两行代码：
>> Array(3)
Array(3) [ <3 empty slots> ]
>> [...Array(3)]
Array(3) [ undefined, undefined, undefined ]
数组构造函数返回什么使它与第二个结果有根本的不同？
数组有“空槽”意味着什么？这能通过JS中的“正常”手段来实现吗？
扩展一个空槽数组意味着什么，为什么这样转换回数组时它会改变呢？
浏览 12提问于2022-08-08得票数 0
如何使用setState更新单个事件的值？我也很高兴看到它是如何在React之外完成的。
state = {events: [{
event1:{
name: 'Name 1',
id: 1,
},
},{
event2:{
name: 'Name 2',
id: 2,
},
},{
event3:{
name: 'Name 3',
id: 3,
},
}]}
浏览 14提问于2018-09-09得票数 0
我测试了一些C代码，发现了一个奇怪的编译器错误
下面的代码不会编译
#include<stdio.h>
void main()
{
int length=6;
__asm
{
mov eax,length
}
}
Visual报告以下错误
test.c(7) : error C2400: inline assembler syntax error in 'second operand';
found 'newline'
但是，我注意到如果我将变量的名称更改为其他东西--比如lengths --
浏览 2提问于2013-11-18得票数 8
回答已采纳
我希望修改和数组在react和插入特定索引的元素。我的状态是这样的：
this.state = {arr: ['', '', '', '' ]}
我想要做的是编译这个arr[index] = 'random element'以响应js setState语法。我想做的是：
this.setState({ arr[index]: 'random element' })
但失败了泰！
浏览 3提问于2016-10-09得票数 27
回答已采纳
我正在使用的游戏引擎在调试版本中太慢，不可能对游戏进行调试。我希望编译器内联小函数(特别是在Vector/Matrix和容器类中)。这可能会也可能不会在调试版本中加速游戏。在大量分析并试图找出瓶颈之前，我认为我应该先尝试一下，因为我必须做最少的工作，结果可能会很有希望。
那么，有没有办法让Visual C++编译器在调试版本中内联函数呢？
浏览 1提问于2011-09-22得票数 8
回答已采纳
如何在Angular中克隆数组类对象？
ParentModel {
id: number;
child1Id: number;
child2Id: number;
child1 : ChildModel;
child2 : ChildModel;
}
ChildModel{
id: number;
}
parents: ParentModel [] = [];
如何通过充满其子代来成功克隆双亲？
编辑:在搜索之后没有办法做到这一点，我们不能用typescript/Angular做最简单的事情:)
我创建了新的对象，并手动分配每个值进行复制。还可以手动分配子组件的
浏览 0提问于2019-05-22得票数 0
2回答
如何填充复杂的反应状态？
、、、
const [content, setContent] = useState([
{main: '', li:[''] },
]); 我正在寻找一种方法来添加新的项目到content.li？我已经试着用 Array.push('new') 但是失败了。这是一个动态表单，具有可变的输入量。
浏览 8提问于2020-12-14得票数 0
1回答
反应导航扩展算子
、、
我正在使用，下面的示例提供了导航选项。我不知道传真机在这里做什么..。
class ProfileScreen extends React.Component {
static navigationOptions = {
header: (navigation, defaultHeader) => ({
...defaultHeader,
visible: true,
}),
}
...
}
浏览 4提问于2017-03-15得票数 1
回答已采纳
已经安装了一个的前提实例。此实例中有Visual项目。将Visual 2015连接到其中一个项目的最简单方法是什么？
使用GitHub，您可以选择“连接到GitHub”，如下所示：
然后粘贴存储库url。下拉列表中没有GitLab选项。配置Visual 2015以使用gitlab存储库中的解决方案的最简单方法是什么？在工作中，我的意思是让您通常的源代码管理绑定到存储库。
请注意，这个问题在连接到任何不是GitHub的git存储库时可能很有用，并且不直接支持内置的Visual菜单，而不仅仅是GitLab存储库。
浏览 2提问于2016-02-03得票数 30
回答已采纳
我有一个对象，它包含从文件中读取的数据(称为数据)。我将属性(称为图像)克隆到另一个对象(称为tempixy )，并从克隆中的每个元素中删除了一个属性(称为src)，但出于某种原因，该属性也从原始对象中删除。
我也尝试用Object.assign({}, data.images)克隆对象，但仍然无法工作。
我知道可以直接访问事件，但我不喜欢。
function openFile(evt) {
const fileReader = new FileReader();
fileReader.readAsText(evt.target.files[0], "UTF-
浏览 3提问于2022-03-13得票数 0
回答已采纳
在ECMAScript 6中添加rest参数的用途是什么？
例如，在ECMAScript 5中，您可以执行以下操作以获得从第二个元素开始的参数数组：
// ES 5
store('Joe', 'money');
store('Jane', 'letters', 'certificates');
function store(name) {
var items = [].slice.call(arguments, 1); //['money'] in first case
items.forE
浏览 4提问于2013-12-12得票数 19
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
