javascript - 在 .push()-method 之后,一个数组仍然引用第二个数组(JS/vue.js)

标签 javascript arrays vue.js

我想要两个用日期填充的数组。第一个应该具有字符串格式的日期,第二个应该是与日期对象相同的日期。

methods: {
    test() {
        let employments = [
            { begin: '01.01.2000', end: '01.01.2010' },
            { begin: '01.01.3000', end: '01.01.3010' },
            { begin: '01.01.4000', end: '01.01.4010' }
        ];
        let items = [];
        for(let i = 0; i <  employments.length; i++) {
            items.push(employments[i]);
        }
        for(let i = 0; i < items.length; i++ ) {
            // splitting it up for the correct format
            let begin = items[i].begin.split('.').reverse().join('-');
            let end = items[i].end.split('.').reverse().join('-');
            items[i].begin = new Date(begin);
            items[i].end = new Date(end);
        }
        console.log('items:');
        console.log(items);
        console.log('this.employments:');
        console.log(employments);
    }
}

我希望有两个不同的输出。一个包含字符串,另一个包含日期对象。我得到的是两个带有日期对象的数组。我只是不明白为什么。

我也试过直接给项目赋就业(比如“let items = employments;”)而不是使用推送方法,但这也没有用。

提前致谢

最佳答案

您需要push() 对象的副本。您的对象是浅对象,因此您可以使用扩展运算符创建副本。

for(let i = 0; i <  employments.length; i++) {
     items.push({...employments[i]});
}

或者你可以简单地做

const items = employments.map(x => ({...x}))

您不需要创建另一个数组然后将其插入其中。只需在 employments 上使用 map() 并更改这两个属性。此外,使用一个单独的函数来创建 Date 对象。

methods: {
    test() {
        let employments = [
            { begin: '01.01.2000', end: '01.01.2010' },
            { begin: '01.01.3000', end: '01.01.3010' },
            { begin: '01.01.4000', end: '01.01.4010' }
        ];
        const format = str => new Date(str.split('.').reverse().join('-'));

        let items = employments.map(({end,start}) => 
                          ({
                              end: format(end),
                              start:format(start)
                          })
                    )

    }
}

关于javascript - 在 .push()-method 之后,一个数组仍然引用第二个数组(JS/vue.js),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56446055/

相关文章:

javascript - 如何使用Lodash的unionBy并合并嵌套数组?

javascript - 如何在 Javascript 中对数组中的对象集合进行排序?

javascript - 如何使用 vue-cli-3 设置从我的 webpack 构建中排除一个目录

javascript - 在月份/日期选择器上限制年份

javascript - React Redux Redux Form - 从 <Field> 内移动函数会产生错误

javascript - Nodemon 检查/调试不起作用?

javascript - 在加载时显示隐藏数据并选中/取消选中单选按钮

c - 用 char 数组成员填充 union

javascript - 获取元素的offsetHeight

javascript - Vue 3 : What's the proper way of handling event listeners like "visibilitychange" and "offline"?