js中常用操作数组的方法

Posted 2021-08-28 KyleHsu

这里列举的方法有：

---

1. pushpop
2. shift
3. unshift
4. splice
5. sort
6. reverse
7. Vue.set

点击按钮进行操作

---

html代码：

  <div id="app">
    <h3>操作数组的方法：</h3>
    <hr/>
    <h4>其中可以做到操作数据是响应式的有:push、pop、shift、unshift、splice、sort、reverse、Vue.set</h4>
    <span><h4>注意：<p style="color: brown;font-weight: bold;">通过数组的索引值修改数组元素</p></h4></span>
    <ul>
      <li v-for="item in phones" :key="item">{{item}}</li>
    </ul>
    <button @click="btn1Click">push末尾添加</button>
    <button @click="btn2Click">pop未尾删除1个</button>
    <button @click="btn3Click">shift头部删除1个</button>
    <button @click="btn4Click">unshift头部添加</button>
    <button @click="btn5Click">splice删除/插入/替换</button>
    <button @click="btn6Click">sort排序</button>
    <button @click="btn7Click">reverse反转</button>
    <button @click="btn8Click">Vue的set方法</button>
  </div>

---

javascript代码：

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:\'#app\',
      data:{
        phones: [\'iPhone 12 Pro\', \'XiaoMi 11\', \'Huawei Mate 40 \', \'Samsung s20 Ultra\',\'Lenovo Z2K Pro\',\'iPhone 11\']
      },
      methods:{
        btn1Click(){
          // push()：向数组的末尾添加一个或多个元素，并返回新的长度
          this.phones.push(\'push\',\'push again\')
        },
        btn2Click(){
          // 2.pop(): 删除数组中的最后一个元素
          this.phones.pop()
        },
        btn3Click(){
          // 3.shift(): 删除数组中的第一个元素
          this.phones.shift()
        },
        btn4Click(){
          // 4.unshift(): 在数组最前面添加元素
          this.phones.unshift(\'unshift 1\',\'unshift 2\')
        },
        btn5Click(){
        // 5.splice作用: 删除元素/插入元素/替换元素
        // 参数：(从第几个元素开始操作,删除/替换几个元素,删除/替换成/插入 什么)
        // 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
        // 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
        // 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
          this.phones.splice(\'1\',\'2\',\'诺基亚\',\'摩托罗拉\')
        },
        btn6Click(){
          // 4.sort(): 对数组元素进行排序
          this.phones.sort()
        },
        btn7Click(){
          // 4.reverse(): 把数据组元素进行反转
          this.phones.reverse()
        },
        btn8Click(){
          // Vue.set(要修改的对象,修改第几个元素,修改后的值)
          Vue.set(this.phones, 0, \'I am the first One\')
        }
      }
    })
  </script>