Vue.set( )和多维数组降维以及数组方法是否改变原数组

一个好好的程序员

已于 2022-07-11 22:22:22 修改

阅读量575

点赞数

文章标签： vue.js

于 2022-07-01 21:20:27 首次发布

本文链接：https://blog.csdn.net/m0_62823653/article/details/125565576

版权

第一部分：多维数组降维的两种方式

第一种

//多维数组降维
let arr = [[222,333,444],[55,66,77]]
arr=arr+''
console.log(arr)  //222,333,444,55,66,77
console.log(Object.prototype.toString.call(arr))//String
arr = arr.split(',')
console.log(arr)  // [ '222', '333', '444', '55', '66', '77' ]

第二种

// 
let arr = [111,222,333,444,[555,666,777,[888,999]]]
console.log(arr.flat(1))//[111,222,333,444,555,666,777,[888,999]]
// 
let arr = [111,222,333,444,[555,666,777,[888,999]]]
console.log(arr.flat(2))//[111,222,333,444,555,666,777,888,999]

 // 使用 Infinity 作为深度，展开任意深度的嵌套数组
console.log(arr3.flat(Infinity))

第二部分：Vue的set方法在数组中使用的情况

不改变原数组的方法

filter：过滤数组中某些元素，返回符合条件的元素组成的新数组
concat：合并两个或两个以上的数组，可以链式调用，返回合并后的数组
slice：切割数组中某一段元素，返回一个切割出来的数组
map：使用map方法会产生一个新的数组，数组的每一项就是我们return出去的值（所以map方法必须有返回值，如果没有return，那么新数组的每一项都为undefined），数组的个数与原数组一样
some：会遍历数组中的每个元素，让每个值都执行一遍callback函数,如果有一个元素满足条件，返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。
every：检测数组所有元素是否满足条件
forEach：遍历数组

改变原数组的方法

push()     //作用：在数组最后面添加元素，返回值是数组长度
unshift()  //作用：在数组最前面添加数组，返回值是数组长度
pop()      //作用：删除数组最后一个元素，返回值是删除的元素
shift()    //作用：删除数组第一个元素，返回值是删除的元素
splice()   //作用：根据数组的索引进行删除元素，返回值是含有被删除元素的数组
sort()     //作用：数组排序
reverse()  //作用：数组翻转

直接通过数组下标修改是无法触发响应式的，所以使用set

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">
   <h2>
      {{message}}
   </h2>
   <button @click="fn">点我</button>
</div>
</body>
<script>
   new Vue({
       data(){
           return {
               message:['张三',18,19,20]
           }
       },
       methods:{
           fn:function(){
               // 尽管data中的数据改了  但是页面不会改
               // 直接修改数组下标是没有响应式的
               // 此时需要用到Vue.set()方法
               // 将数组下标为3的值改为李四
               Vue.set(this.message,3,'李四')
           }
       }
   }).$mount('#app')
</script>

</html>

第三部分：Vue的set方法在对象中使用的情况

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">
   <h2>
      {{message}}
   </h2>
   <button @click="fn">点我</button>
</div>
</body>
<script>
   new Vue({
       data(){
           return {
               message:{name:"张三",age:18}
           }
       },
       methods:{
           fn:function(){
               /*
               在对象里面修改对象里面的值会有响应，但是如果新增对象则无响应
               this.message.hbooy=['睡觉','吃饭','打豆豆']
               */
               //此时需要用到Vue.set()
               Vue.set(this.message,'hbooy','[睡觉,吃饭,打豆豆]')
           }
       }
   }).$mount('#app')
</script>

</html>