Vue v-for详细使用

置顶彩色之外

已于 2023-09-13 17:06:49 修改

阅读量4.4w

点赞数 29

分类专栏： # vue2 文章标签： vue.js elementui 前端 vue

于 2021-12-06 11:02:54 首次发布

CSDN-@活在风浪里001

本文链接：https://blog.csdn.net/m0_57904695/article/details/121742260

版权

vue2 专栏收录该内容

19 篇文章 9 订阅

订阅专栏

for in 遍历对象的key 和 value ❤❤❤

for of 遍历可迭代对象（包括数组、字符串、Map、Set 等）

for...in循环用于遍历对象中的可枚举属性。它会遍历对象自身以及继承的可枚举属性。以下是for...in循环的示例：

定义vue数据❤

    data: {
               //数组
                arr2: [{
                    title: '星期一'
                }, {
                    title: '星期二'
                }, {
                    title: '星期三'
                }],
                 //对象
                area: {
                    "A": ["安阳", "安徽"],
                    "B": ["北京", "保定"],
                    "C": ["长安", "长沙"]
                },
               
            },

vue循环数组❤❤❤❤

v-for循环数组的时候有两个参数第一个是数组项(表示数组中的每一项) 第二个是索引值也叫下标

 // v-for循环数组的时候有两个参数 第一个是数组项(表示数组中的每一项) 第二个是索引值 也叫下标 
 <div v-for="(item, index) in arr2">{{item}} ---- {{index}}</div>

vue循环对象❤❤❤❤

v-for循环对象的时候有三个参数第一个是键值对的值（value）第二个是键值对的键（key）第三个是下标

      // v-for循环对象的时候有三个参数 第一个是键值对的值（value）
      // 第二个是键值对的键（key）第三个是下标 (index)

       <div v-for="(value, key, index) in area">
            <h3>{{key}} ---- {{index}}</h3>
            <ul>
                <li v-for="item in value">{{item}}</li>//因为value是数组所以要再次循环
            </ul>
        </div>

效果❤

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_17,color_FFFFFF,t_70,g_se,x_16

四种创建对象的方法：❤❤❤

0、我们一般使用字面量的形式直接创建对象

var obj = {};

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

两种创建数组的方法：❤❤❤

var Arr1 = [];
var Arr2 = new Array();

对象的两种取值方式： ❤❤❤❤

console.log(obj.name);
console.log(obj[name]);

数组扁平化❤❤

 let arr1 = [1, 2, ['a', 'b', ['中', '文', [1, 2, 3, [11, 21, 31]]]], 3];
console.log(arr1.flat(Infinity)); //[1, 2, 'a', 'b', '中', '文', 1, 2, 3, 11, 21, 31, 3]

数组扁平化就是将一个多维数组转换为一个一维数组, 数组扁平化，我一般使用简单的方法，flat()小括号里写数字几，就拉平几次，默认不写拉平一次，也可以使用Infinity，全部拉平，也可以使用js方法拉平，先将转为字符串，就可以将数组全部拉平，但是是字符串，然后在转为数组，转为数组后，数组里也是字符串，map遍历将遍历项用Number强转数值型

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

    arr = arr.toString().split(',').map(item => Number(item))

    console.log(arr);

声明函数的6种方式

//命名函数

function fn(参数1，参数2，...){   //要执行的语句 }

//命名式函数表达式

var fn2 =function myfu( ){ }

//函数表达式

var fn1 = function(){ }

//立即执行的函数表达式

var fn3 =(function(n1,n2){ })();

//作为返回值的函数表达式（闭包）

return function(){ };

//Function构造器

var 变量名 = new Function("参数1","参数2",...,"参数n","函数体");

for in 遍历对象的key 和 value ❤❤❤

如果你想循环遍历一个普通对象（非可迭代对象），可以使用 for...in 循环。for...in 循环用于遍历对象的可枚举属性。

以下是 for...in 循环的使用示例：

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    const value = obj[key];
    console.log(key, value);
  }
}
// 输出：
// a 1
// b 2
// c 3

在上述示例中，我们使用 for...in 循环遍历了对象 obj 的可枚举属性。for...in 循环会迭代对象的每个属性（包括继承的属性），并将属性名赋值给声明的变量 key。在循环体内，我们可以通过 obj[key] 来获取属性的值。

注意，在 for...in 循环中，我们通常会使用 hasOwnProperty 方法来检查对象自身是否具有该属性。这是因为 for...in 循环会遍历对象原型链上的属性，而 hasOwnProperty 方法可以用来过滤掉继承的属性，只保留对象自身的属性。

需要注意的是，for...in 循环不保证遍历对象属性的顺序，因此在遍历对象时不要依赖属性的顺序。如果需要按照特定顺序遍历对象属性，可以使用其他方法，比如将属性名存储在数组中，然后按照数组的顺序进行遍历。

1 （包括继承的属性）

 var obj = {
        name: '大白',
        age: 2
    }
    var arr = []
    var arr1 = []
    for (let item in obj) {
        arr1.push(item) //key
        arr.push(obj[item]) //value
    }
    console.log(arr1); // ['name', 'age'] key
    console.log(arr) // ['大白', '2'] 值

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_12,color_FFFFFF,t_70,g_se,x_16

 let obj = {
        a: '1',
        b: '2',
        c: '3',
        d: '4'
    }
    for (let o in obj) {
        // console.log(o) //遍历的实际上是对象的属性名称 a,b,c,d
        console.log(obj[o]) //这个才是属性对应的值1，2，3，4
    }

        const obj = { a: 1, b: 2, c: 3 }

      //  Object.entries 对象名和值转数组 ['a', 1] ['b', 2] ['c', 3]
      console.log("😂👨🏾‍❤️‍👨🏼==>：", Object.entries(obj));

      //  Object.keys 获取对象的key ['a', 'b', 'c']
      console.log("😂👨🏾‍❤️‍👨🏼==>：", Object.keys(obj));

    for (let [key, value] of Object.entries(obj))
    {
        console.log(key);// a b c
        console.log(value);// 1 2 3

    }

for of 遍历可迭代对象（包括数组、字符串、Map、Set 等）

for...of 是 JavaScript 中用于遍历可迭代对象（包括数组、字符串、Map、Set 等）的语法结构。它提供了一种简洁的方式来迭代对象中的元素。

以下是 for...of 的使用示例：（数组、字符串、Map）

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

for (const item of arr) {
  console.log(item);
}
// 输出：1 2 3 4 5

const str = "Hello";

for (const char of str) {
  console.log(char);
}
// 输出：H e l l o

const map = new Map();
map.set("a", 1);
map.set("b", 2);
map.set("c", 3);

for (const [key, value] of map) {
  console.log(key, value);
}
// 输出：
// a 1
// b 2
// c 3

for...of 循环主要用于遍历可迭代对象（如数组、字符串、Map、Set 等），而不适用于普通对象。如果你想遍历普通对象的属性，可以使用 Object.keys() 或 Object.entries() 方法结合 for...of 循环来实现。

以下是一个示例，展示了如何使用 for...of 循环遍历对象的属性：

const obj = { a: 1, b: 2, c: 3 };

// 遍历对象的属性名
for (const key of Object.keys(obj)) {
  const value = obj[key];
  console.log(key, value);
}
// 输出：
// a 1
// b 2
// c 3

// 遍历对象的属性名和值
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}
// 输出：
// a 1
// b 2
// c 3

// fo in遍历数组和对象是遍历的key和value , fo of遍历数组和对象是value,
    //但不能遍历普通对象, 要需要配合Object.keys() 一起使用
    var person = {
        name: 'lang',
        age: 25,
        say: {
            eat: '火鸡面',
            city: '北京',
        }
    }
    for (var value of Object.keys(person)) {
        //使用Object.keys()方法获取对象key的数组
        // console.log(value); //name age say  遍历的是key
        console.log(person[value]); //lang 25  {eat: '火鸡面', city: '北京'} 遍历的是值

    }

总结:不管是for in还是for of遍历key直接打印遍历项（item），遍历value打印对象名[遍历项]

for...in循环用于遍历对象中的可枚举属性。它会遍历对象自身以及继承的可枚举属性。以下是for...in循环的示例：

const obj = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (const key in obj) {
  console.log(key + ': ' + obj[key]);
}

// name: John
// age: 30
// city: New York

for in / for of 遍历数组

for in 遍历数组是下标 for of遍历数组是key

//data 
 inputList: ["inputOne", "inputTwo", "inputThree"],

// for in 遍历数组
    for (const item in this.inputList) {
    
      console.log(item); //下标
    }

// for of 遍历数组
    for (const item of this.inputList) {
     
      console.log(item); //key
    }

map 使用：

Map 是 JavaScript 中的一种数据结构，用于存储键值对的集合。Map 中的键和值可以是任意类型的数据，并且保持插入顺序。你可以使用 new Map() 创建一个空的 Map 对象，也可以使用数组等迭代对象来初始化一个 Map 对象。

以下是一些常见的 Map 的使用示例：

// 创建一个空的 Map 对象
const map = new Map();

// 添加键值对
map.set("name", "John");
map.set("age", 30);

// 获取值
console.log(map.get("name")); // 输出：John

// 检查键是否存在
console.log(map.has("age")); // 输出：true

// 获取 Map 中的键的数量
console.log(map.size); // 输出：2

// 删除键值对
map.delete("age");

// 遍历 Map
for (const [key, value] of map) {
  console.log(key, value);
}
// 输出：
// name John

// 清空 Map
map.clear();

遍历对象和数组时的顺序不确定性

// 遍历对象时的顺序不确定性示例
const obj = { c: 1, b: 2, a: 3 };

for (const key in obj) {
  console.log(key);
}
// 输出的顺序可能是 a, b, c 或者 c, b, a 或者 b, a, c

// 遍历数组时的顺序不确定性示例
const arr = [3, 1, 2];

for (const item of arr) {
  console.log(item);
}
// 输出的顺序可能是 3, 1, 2 或者 1, 2, 3 或者 2, 3, 1

// for...in 循环遍历对象时需要过滤继承属性示例
const parent = { a: 1 };
const child = Object.create(parent);
child.b = 2;

for (const key in child) {
  if (child.hasOwnProperty(key)) {
    console.log(key);
  }
}
// 输出：b

特定的顺序遍历

要按照特定的顺序遍历对象或数组，可以使用其他方法来实现。以下是一些示例：

按照属性名的顺序遍历对象：

const obj = { c: 1, b: 2, a: 3 };

// 使用 Object.keys() 方法获取对象的属性名，并按照顺序排序
const sortedKeys = Object.keys(obj).sort();

for (const key of sortedKeys) {
  console.log(key, obj[key]);
}
// 输出：a 3, b 2, c 1

按照元素值的顺序遍历数组：

const arr = [3, 1, 2];

// 使用数组的 sort() 方法对元素进行排序
const sortedArr = arr.sort();

for (const item of sortedArr) {
  console.log(item);
}
// 输出：1, 2, 3

使用其他方法遍历对象或数组时指定顺序：

const obj = { c: 1, b: 2, a: 3 };

// 使用数组存储属性名的顺序，然后按照数组的顺序遍历
const keys = ['c', 'b', 'a'];

for (const key of keys) {
  console.log(key, obj[key]);
}
// 输出：c 1, b 2, a 3

const arr = [3, 1, 2];

// 使用数组存储元素的顺序，然后按照数组的顺序遍历
const order = [1, 2, 0];

for (const index of order) {
  console.log(arr[index]);
}
// 输出：1, 2, 3

/*

遍历数组：

for in 遍历数组是遍历的下标，for of遍历数组是key，

for of不能直接遍历对象，否则会报错，要配合Object.keys() 或 Object.entries()

遍历对象：

for in和for of都可以遍历对象，

打印：遍历的对象[item]：是value

打印：item：遍历的是key

*/

下面是对 for...in、for...of 和 Map 的使用场景、注意事项以及遍历对象和数组的总结：

for...in 循环：

使用场景：遍历对象的可枚举属性（包括继承的属性）。
注意事项：需要使用 hasOwnProperty 方法来过滤掉继承的属性，只保留对象自身的属性。不保证属性的遍历顺序。

for...of 循环：

使用场景：遍历可迭代对象，如数组、字符串、Map、Set 等。
注意事项：只能遍历可迭代对象，不能直接用于普通对象。不保证可迭代对象的遍历顺序。

Map：

使用场景：存储键值对的集合，键和值可以是任意类型的数据，并且保持插入顺序。
注意事项：与普通对象相比，Map 提供了更灵活的键和更直观的遍历方式。Map 的键可以是任意类型，而普通对象的键只能是字符串或 Symbol。Map 的遍历顺序是按照插入顺序进行的。

遍历对象：

使用 for...in 循环遍历对象的可枚举属性。
使用 Object.keys(obj) 获取对象的属性名数组，然后使用 for...of 循环遍历属性名。
使用 Object.entries(obj) 获取对象的属性名和值的数组，然后使用 for...of 循环遍历属性名和值。

遍历数组：

使用 for...of 循环遍历数组的元素。
使用 forEach 方法遍历数组，接受一个回调函数作为参数。
使用 map 方法对数组的每个元素进行处理，并返回一个新的数组。
使用 filter 方法根据指定条件筛选出符合条件的元素，并返回一个新的数组。

请注意，遍历对象和数组时的顺序是不确定的，除非显式指定顺序。此外，在使用 for...in 循环遍历对象时，需要注意过滤继承的属性，以保留对象自身的属性。

完!

A lot can happen between now and never.
把握当下，一切皆有可能。

彩色之外

关注

29
点赞
踩
90

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue v-for详细使用

目录定义vue数据❤vue循环数组❤❤❤❤vue循环对象❤❤❤❤效果❤四种创建对象的方法：❤❤❤两种创建数组的方法：❤❤❤对象的两种取值方式：❤❤❤❤数组扁平化❤❤声明函数的6种方式for in 遍历对象的key 和 value❤❤❤for of 遍历对象的key 和值（value）❤❤❤for in / for of 遍历数组定义vue数据❤ data: { //数组 ...
复制链接

扫一扫