JQuery将多个动态对象(属性名相同，值不同)push进同一个数组，结果打印出的数组元素是同一个对象

旧城等待， 2021-06-11 15:12 300阅读 0赞

先上出现的问题图(vue框架)：

data: {
                keywords_list: [
                    {kid: 1},
                    {kid: 2},
                    {kid: 3},
                    {kid: 4},
                    {kid: 7},
                    {kid: 8},
                ]	
            },

现在是我要将其进行排序，这里用到了一个JQuery的一个可拖动排序插件：[https://jqueryui.com/sortable/][https_jqueryui.com_sortable]

好，这是刚开始我写的js：

sort_keywords: function(){
                    var result = [];
                    var single = {};
                    $("#sortable li").each(function(idx,ele){
                        single['kid'] = $(this).attr('id');
                        single['seq'] = idx;
                        result.push(single);            
                    })
                    console.log(result);
                },

在浏览器打印的是这样的：

![70][]

打印出的值既然全部是一样的，很显然这是一个错误的写法。

后来经过多次分析，想了一个多小时（都怪自己基础知识不牢固，这时间花的不值啊）

刚开始，以为定义了一个空对象，每次遍历的时候把kid赋值给single对象里的属性名为kid的属性就好了，然后再把single这个对象一次一次Push进数组就可以实现了。

后来发现，只要懂for循环的同学不难看出，由于每次遍历的kid都不同，虽然第一次成功push进数组，但是在第二次遍历之后，$(this).attr('id')这个值发生了改变，且赋值给同一个对象的同一个属性！又由于对象的属性唯一性，后面的值将替换之前的值，所以，层层遍历之后，对象属性kid的值将是最后一个遍历出来的$(this).attr('id')，所以在最后数组中的元素全部是一样的。

改正之后的js：

sort_keywords: function(){
                    var result = [];
                    $("#sortable li").each(function(idx,ele){
                        var single = {
                            kid: $(this).attr('id'),
                            seq: idx
                        };
                        result.push(single)            
                    })
                    console.log(result)
                },

打印出的结果：

![70 1][]

分析：

如果我们在内部定义一个对象，属性都已设置好，我们只需要把值赋值给属性名即可，这种方法为啥可行？是因为每次遍历的时候，都会新声明一个对象，然后传值，再push进数组。虽然这个同名对象会被后一轮遍历所替换，但是没关系啊！因为你已经把想要的值已经push进数组了呀！

\-------------------------------------------------------------------------------------------------------------------------------------------------------------------------更新一下关于JQuery一些常用的方法

1.$(this).index()

index() 方法返回指定元素相对于其他指定元素的 index 位置，这些元素可通过 jQuery 选择器或 DOM 元素来指定。如果未找到元素则返回-1。

示例：

<html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("li").click(function(){
        console.log($(this).index());
      });
    });
    </script>
    </head>
    <body>
    <ul>
      <li>Coffee</li>//点击第一个则打印出1
      <li>Milk</li>//点击第二个则打印出2
      <li>Soda</li>//点击第三个则打印出3
    </ul>
    </body>
    </html>

2.$(this).eq()

eq() 方法将匹配元素集缩减值指定 index 上的一个。其中eq()中的参数为整数，指示元素的位置（最小为 0）。如果是负数，则从集合中的最后一个元素往回计数。

示例：

<!DOCTYPE html>
    <html>
    <head>
      <style>
      div { width:60px; height:60px; margin:10px; float:left;
            border:2px solid blue; }
      .blue { background:blue; }
      </style>
      <script type="text/javascript" src="/jquery/jquery.js"></script>
    </head>
    
    <body>
    <ul>
      <li>list item 1</li>
      <li>list item 2</li>
      <li>list item 3</li>
      <li>list item 4</li>
      <li>list item 5</li>
    </ul>
    
    <script>
        $('li').eq(2).css('background-color', 'red');//即选中li第三个元素进行颜色重绘
    </script>
    </body>
    </html>

[https_jqueryui.com_sortable]: https://jqueryui.com/sortable/
[70]: /images/20210522/2a3fbc3616f94771806e4812c335f3cf.png
[70 1]: /images/20210522/2394b790ee104a0cbd1acb5f42786e72.png