关于vue中使用的原生数组的常用方法

关于vue中使用的原生数组的常用方法

变更方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

push()

​ 是向数组的末尾推送元素

​ 返回的是新数组的长度

​ 推送的可以是数组，对象，一些其他元素–如下

<script>
     var arr = [3,34,12,31,45]
     var arr2 = [1,2,5]
     var obj = {arr1:2,arr2:'nihao'}
     var b= 4;
     arr.push(b)
     console.log(arr);// [3, 34, 12, 31, 45, 4]
     var add = arr.push(4,5)
     console.log(arr)//[3, 34, 12, 31, 45, 4, 4, 5]
     arr.push(arr2)
	 console.log(add);//8
     console.log(arr)//[3, 34, 12, 31, 45, 4, 4, 5, Array(3)]
     arr.push(obj)
     console.log(arr)// [3, 34, 12, 31, 45, 4, 4, 5, Array(3), {…}]
  </script>

pop()

​ 是把数组中的最后一个元素从数组中去除

​ 此函数的返回值是去除的那个元素

 var arr = [3,34,12,31,45]
 var arrre = arr.pop()
 console.log(arr);//[3, 34, 12, 31]
 console.log(arrre);//45

shift()

​ 是把数组中的第一个元素删除

​ 返回的是删除的那个元素

var arr = [3,34,12,31,45]
var del = arr.shift()
console.log(arr);// [34, 12, 31, 45]
console.log(del);//3

unshift()

​ 是向数组索引为0的位置添加元素

​ 返回值是新数组的长度

var arr = [3,34,12,31,45]
var add =  arr.unshift(45)
console.log(arr);//[45, 3, 34, 12, 31, 45]
console.log(add);//6

splice()

​ 可以删除数组中的元素，也可以向数组中添加元素，一举两得

​ 然后返回被删除的项目。该方法会改变原始数组

​ 删除元素返回的是一个数组

​ 添加元素返回的是一个空值

arrayObject.splice(index,howmany,item1,.....,itemX)

​ index是规定添加或者删除元素的位置，使用的是负数的话是从数组的最后一个元素开始查的

​ howmany：规定删除元素的个数

​ item1,…,itemX：是添加的元素

var arr = [3,34,12,31,45]
arr.splice(0,0,1,2,3)//在索引为0的地方开始添加
console.log(arr);//[1, 2, 3, 3, 34, 12, 31, 45]
var add = arr.splice(1,0,89)//在索引为1的地方添加
console.log(arr);//[1, 89, 2, 3, 3, 34, 12, 31, 45]
console.log(add);//[] 说明没有返回值
var del =  arr.splice(1,1)//从索引为1的位置开始删除
console.log(arr);//[1, 2, 3, 3, 34, 12, 31, 45]
console.log(del);//[89] 返回的是删除的值，是一个数组

sort()

​ sort(fun(a,b)) 方法用于对数组中的元素进行排序

​ fun(a,b) 中的a，b代表数组的前一个元素和后一个元素

​ 在使用的时候 a-b 代表 排列的是从小到大

​ 在使用的时候 b-a 代表 排列的是从大到小

var arr = [3,34,12,31,45]
    arr.sort()
    console.log(arr);//[12, 3, 31, 34, 45]
    arr.sort((a,b)=>{
      return a-b
    })
    console.log(arr);//[3, 12, 31, 34, 45]
    arr.sort((a,b)=>{
      return b-a
    })
    console.log(arr);//[45, 34, 31, 12, 3]

reverse()

​ 数组反转:颠倒数组中元素的位置

​ 该方法会改变原来的数组，而不会创建新的数组。

	var arr = [3,34,12,31,45]
    var arr1 = arr.sort()
    console.log(arr1);//接收排序后的数组，和arr的值相同
    console.log(arr);//[12, 3, 31, 34, 45]
    arr.sort((a,b)=>{
      return a-b
    })
    console.log(arr);//[3, 12, 31, 34, 45]
    arr.sort((a,b)=>{
      return b-a
    })
    console.log(arr);//[45, 34, 31, 12, 3]

替换数组

变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：

​ filter()：过滤，可以过滤数组中的元素，还可以作为过滤器使用

​ 会返回一个新数组，新数组中包含符合条件的所有元素，

array.filter(function(currentValue,index,arr){}, thisValue)

​ 函数方法中的参数意思：

​ currentValue:当前值

​ index：数组的下标

​ arr：是一个数组

​ thisValue：可以省略，是指定this的指向

​ 函数方法中有一个返回值-且返回值后面跟的是一个条件且条件的结果是布尔值

   var arr = [3,34,12,31,45]
    var arr1 = arr.filter(function(val,index,arr){
        return val>13
    })
    console.log(arr);//[3, 34, 12, 31, 45] 原数组未改变
    console.log(arr1);// [34, 31, 45]
    var arr2 = arr.filter(function(val,index,arr){
        return val*2 > 33
    })
    console.log(arr2);//[34, 31, 45]

concat()

​ 该方法用于连接两个或者多个数组

​ 该方法不会改变原有的数组，而仅仅会返回连接数组的一个副本

​ 可以把concat(a,b)中的参数拼接到数组中，a和b可以是数组，也可以是字符串

    var arr = [3,34,12,31,45]
    var arr1 = [6,7,8,9]
    var arr2 = [61,71,81,91]
    var newarr = arr.concat(2,4)//拼接concat和push的差异，push会改变原数组
    console.log(arr);//[3, 34, 12, 31, 45]
    console.log(arr1);//[3, 34, 12, 31, 45, 2, 4]
    var newarr1 = arr.concat(arr1)//相当于把arr1拼接到arr上，原数组不变返回一个新数组
    console.log(arr);//[3, 34, 12, 31, 45],原数组未发生改变
    console.log(newarr1);// [3, 34, 12, 31, 45, 6, 7, 8, 9]
    var newarr2 = arr.concat(arr1,arr2)
    console.log(newarr2);//[3, 34, 12, 31, 45, 6, 7, 8, 9, 61, 71, 81, 91]

slice()

​ 用于从已有的数组中选出选定的数组元素

​ slice(start,end)

​ start,指定数组元素从何处开始

​ end：指定数组元素从何处结束

​ 如果只写一个参数，就是从这个参数开始一直到最后

var arr = [3,34,12,31,45]
var newarr = arr.slice(2)
console.log(arr);//[3, 34, 12, 31, 45]
console.log(newarr);// [12, 31, 45]
var newarr1 = arr.slice(3)
console.log(newarr1);// [31, 45]
var newarr2 = arr.slice(2,4)
console.log(newarr2);//[12, 31]

补充数组的其他方法

arr.some()

​ 用于检测数组中的元素是否满足指定的条件

​ 如果满足指定的条件的话就返回true 如果都不满足指定的条件则返回false

​ 当检测出来第一个元素符合这个条件的时候就直接返回true后面的元素就不在判断

​ some() 不会对空数组进行检测。
​ some() 不会改变原始数组。

array.some(function(currentValue,index,arr),thisValue)

​ currentValue：当前数组的元素

​ index：当前数组的索引值

​ arr：当前数组

var arr = [3,34,12,31,45]
var flag = arr.some((val)=>{
  return val>12
})
console.log(flag);//true

arr.forEach()

​ 方法对数组的每个元素执行一次提供的函数。总是返回undefined

	arr.forEach(function(currentValue,index,arr){})

​ currentValue：当前数组的元素

​ index：当前数组的索引值

​ arr：当前数组

var arr = [3,34,12,31,45]
 arr.forEach((x)=>{
   console.log(x);//遍历出来arr中的所有元素
 })

js中的map方法
map方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
map()会按照数组中元素的顺序依次遍历处理数组中的元素
注意：
map不会对空数组进行检测，map不会改变原始数组

arr.map(function(currentValue,index,arr),thisValue)

参数说明
currentValue 必须 当前元素值
index 可选 当前元素的索引值
arr 可选 当前元素属于的数组对象。

forEach和Map函数用法相似
两者的区别：（两者的参数都是一致的，回调函数的参数也是一样的）
1、forEach()返回值是undefined，不可以链式调用。
2、map()返回一个新数组，原数组不会改变。callback参数返回的值就是数组中的新元素。