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

会改变原数组

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)

  • 1
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奈子米

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值