zoukankan      html  css  js  c++  java
  • 9 vue.js 被观察数组的变异方法

    vue.js 包装了被观察数组的变异方法

    它们能触发视图更新 

    demo=====

    默认data中默认数组为 myArr=[1,2,3]

    针对以下方法,返回值为对应展示:

    push() 方法 向数组的末尾添加一个或多个元素,并返回新的长度。

     console.log('返回值是' + this.myArr.push(4))

    ==>返回值是4 , 原始数组改为[1,2,3,4]

    pop()  方法用于删除并返回数组的最后一个元素。

      console.log('返回值是' + this.myArr.pop(4))

       console.log('返回值是' + this.myArr.pop())

    ==>返回值是3   ,原始数组改为[1,2]

    shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

       console.log('返回值是' + this.myArr.shift())

    ==> 返回值是1  , 原始数组改为[2,3]

    unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

    console.log('返回值是' + this.myArr.unshift())

    ==> 返回值是3 , 原始数组是 [1,2,3]

       console.log('返回值是' + this.myArr.unshift(4))

    ==> 返回值是4 , 原始数组改为 [4,1,2,3]

    splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

    splice( index, num , value)可通俗这么理解,splice有3个参数,第一个是index值 , 从0到n 【添加或者删除项目的位置,使用负数可从数组结尾处规定位置】, 第二个位置是要删除的项目数量。如果设置为 0,则不会删除项目。,第三个是需要添加的值

     console.log('返回值是' + this.myArr.splice(2,0,'ceshi'))  ,从index值为2开始, 删除 0个项目,添加ceshi

    ==>返回值是 '' ,空, 原始数组改为 [1,2,'ceshi' ,3]

       console.log('返回值是' + this.myArr.splice(2,1,'ceshi')) ,从index值为2 开始,删除1个项目,添加‘ceshi’

    ==》返回值是3 (被删除的值) , 原始数组改为[1 ,2, 'ceshi']

      console.log('返回值是' + this.myArr.splice(1,2,'ceshi'))  , 从index值为1 开始,删除2个项目,添加‘ceshi’

    ==>返回值是 2,3  (被删除的值) ,原始数组改为[1, 'ceshi']

     console.log('返回值是' + this.myArr.splice(1,2))  ,从index值为1 开始,删除2个项目,不添加任何 

    ==》返回值是 2,3(被删除的值) ,原始数组改为[1]

       console.log('返回值是' + this.myArr.splice(-1,1)) ,从倒数第几位开始,不是按照index值计算,比如删除第一个就是-1 ,删除倒数第二个就是 -2  ,  删除1个项目,不添加,

    ==》返回值是3 (被删除的值) 原始数组改为[1,2]

    比如原始数组 arr =[ 1,2,3,4,5]

    arr.splice (-1,3 ) ,当前倒数第一位开始,删除3个。 但是从当前位置开始,不够3 个。 则,只删除最后一个。 

    返回值情况是

    如果是从第三位开始删

    arr =[ 1,2,3,4,5]

    arr.splice (-3,3 ) 

     返回值是 [3,4,5 ],被删除的3个值。 这种情况我们不是太常见 。 通常都是删除最后一个。 

    arr =[ 1,2,3,4,5]

    arr.splice (-1,1 )

    sort() 方法用于对数组的元素进行排序。

    arr =[7,6,4, 1,3,3,5,8]
    (8) [7, 6, 4, 1, 3, 3, 5, 8]
    arr.sort((a,b) =>{ return a , b})
    (8) [8, 5, 3, 3, 1, 4, 6, 7]
    arr.sort((a,b) =>{ return b -a })
    (8) [8, 7, 6, 5, 4, 3, 3, 1]
    arr.sort((a,b) =>{ return a-b})
    (8) [1, 3, 3, 4, 5, 6, 7, 8]

    reverse() 方法用于颠倒数组中元素的顺序。

    arr=[3,2,4,1,9]
    (5) [3, 2, 4, 1, 9]
    arr.reverse()
    (5) [9, 1, 4, 2, 3]

     

    其他

    filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

    concat() 方法用于连接两个或多个数组。

    slice() 方法可从已有的数组中返回选定的元素。

    split() 方法用于把一个字符串分割成字符串数组。

  • 相关阅读:
    laravel passport 全局捕获 401 ,返回数据给前台
    服务器上每次执行git pull,都提示输入用户名和密码
    jQuery-File-Upload 使用,jQuery-File-Upload上传插件
    Java返回结果封装,SpringBoot返回结果封装
    Java Spring文件上传,Java文件上传,Java通用文件上传
    Mdb文件工具类,UCanAccess使用,Access数据库操作
    Access MDB文件解析查询,Access数据库解析工具类MdbUtils
    jquery easyui combogrid Uncaught TypeError:Cannot read property
    soap调用Jar包冲突,SOAPMessageContext
    js打开新窗口,js打开居中窗口,js打开自定义窗口
  • 原文地址:https://www.cnblogs.com/maomao-Sunshine/p/11679844.html
Copyright © 2011-2022 走看看