数组方法(会不会改变原数组)

会改变原数组

1.arr.push() 从后面添加元素，返回值为添加完后的数组的长度  (尾增)

let arr = [1,2,3,4,5]
console.log(arr.push(5))   // 6
console.log(arr) // [1,2,3,4,5,5]

 2.arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素 (尾删)

let arr = [1,2,3,4,5]
console.log(arr.pop())     // 5
console.log(arr)  //[1,2,3,4]

 3.arr.shift() 从前面删除元素，只能删除一个 返回值是删除的元素      空即为undefined (头删)

let arr = [1,2,3,4,5]
console.log(arr.shift())  // 1
console.log(arr)   // [2,3,4,5]

4.arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度 (头增)

let arr = [1,2,3,4,5]
console.log(arr.unshift(2))    // 6
console.log(arr)  //[2,1,2,3,4,5]

5.arr.splice(i,n) 删除从i(索引值)开始之后的那个元素。返回值是删除的元素 (增删)

　参数： i 索引值      n 个数

let arr = [1,2,3,4,5]
console.log(arr.splice(2,2))     //[3,4] 从下标2开始删, 删2个
console.log(arr)    // [1,2,5]

6.reverse：颠倒数组顺序  (倒序)

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

console.log(arr.reverse())   //[5,4,3,2,1]

7.sort：对数组排序

默认情况下根据字符编码进行排序

var arr = [1,3,6,2,10]
arr.sort();//[1, 10, 2, 3, 6]

sort排序允许接受一个参数（函数），这个函数接受2个形参a,b,并且通过冒泡的方式比较。

arr.sort = (function(a,b){

return (a -b)})  //[1,2,3,6,10]   升序排列    ~或者~      
return(b-a)      //  [10,6,3,2,1]  降序排列

不改变原数组

1. arr.concat() 连接两个数组 返回值为连接后的新数组 (合并)

let arr = [1,2,3,4,5]
console.log(arr.concat([1,2]))  // [1,2,3,4,5,1,2]
console.log(arr)   // [1,2,3,4,5]

2.str.split() 将字符串转化为数组  //    arr.join()将数组转为字符串

let str = '123456'
console.log(str.split('')) // ["1", "2", "3", "4", "5", "6"]

let arr = [1,2,3,4,5]
console.log(arr.join(''))    //    12345

3.arr.slice(start,end) 从某个已有的数组返回选定的元素，从start位开始返回到end（包括start不包括end）如果是负数，表示从数组尾部进行计算（同样：包括start不包括end）

let arr = [1,2,3,4,5,6,7]

console.log(arr.slice(2,5))    //  [3,4,5]   返回修剪下来的数组  不改变原数组

(slice和splice的区别:    splice会改变原数组, 而slice不会改变原数组)

下面是ES6 新增的数组方法, 同样不会改变原数组

4.forEach() 遍历数组，无返回值，不改变原数组，仅仅只是遍历、常用于注册组件、指令等等。

 5.map() 用于遍历数组，返回一个新的数组，不改变原数组的值(多用于计算)

 

 6.filter 过滤某个条件的数组，不改变原来的数组的值

 7.reduce() 数组的前后两项进行某种计算。然后返回其值，并继续计算。不改变原数组，返回计算的最终结果

 

 8.some() 遍历数组每一项,只要其中一项有,就返回 true,则停止遍历，结果返回 true。没有的话, 放回 false          不改变原数组

 

 9.every() 遍历每一项，如果其中每一项都返回 true 时，最终返回 true,有一项不为true 就会返回false

 

另外数组的更新变异方法有：

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

      push()    数组的尾部追加元素   返回数组的新长度

      pop()     数组的尾部删除      返回删除元素

      shift()   数组的头部删除      返回删除元素

      unshift() 数组的头部增加      返回数组的长度

      splice()  数组的添加， 删除

      sort()    数组的排序

      reverse() 数组的倒序，反转

      问： concat/map/filter/slice是不是数组的更新变异方法？ 不是

     

 问： Object.definePropety的缺陷？  vue3.0 采用解决es-6 的proxy

      1: 例如： vm.arr[0] = 100

      发现根据数组下标更改元素， 数据改变了， 但是视图不变

      解决办法： vm.arr.splice(0,1,100)||Vue.set(vm.arr,0,100) 这个是Vue的全局api方法

      2： 当修改数组长度的时候

      vm.arr.length = 2   数据改变， 视图不变

      解决方案： vm.arr.splice(2)

      3: 动态给对象添加新的属性的时候， 不会渲染，

      vue.user.age = 18  数据改变了， 但是视图不变 构不成响应式数据， 不能对age增加get 与set

      Vue.set(vm.user,'age', 18)