数组循环及对象循环找key或value

小半 • 2023年1月18日下午6:12 • 前端开发 • 阅读 118

for, forEach, for-in, for-of（es6）

let arr = [1,2,3,4,5];
arr.b = '100'; // 自定义私有属性

// for循环 速度最快
for (let i = 0; len = arr.length, i < len; i++) { // 编程式
console.log("for循环"+arr[i]);
}

// forEach 不支持return和break，无论如何都会遍历完，
arr.forEach(function(item){
console.log("forEach循环"+item);
});

Vue 循环map对象拿到key值和value值

适用场景：

vue中定义的map对象 map : { name : 'xxx' }

接口回显map格式的数据 data :{ key : value}

都可以通过以下方式拿到key和value的值

// for-in 遍历的是 key 值，且 key 会变成字符串类型，包括数组的私有属性也会打印输出
for(let key in arr){
console.log("for in循环"+key);
console.log(typeof key);
}

for(const key in map){
console.log("key名称是："+key+",key的值是："+map[key])
}

// for-of 遍历的是值 val，只能遍历数组 （不能遍历对象）
for(let val of arr){
console.log("for of循环"+val);
}

// Object.keys 将对象的 key 作为新的数组，这样 for-of 循环的就是原数组的 key 值
let obj = {school:'haida',age:20};
// 变成 ['school','age']
for(let val of Object.keys(obj)){
console.log(obj[val]);
}

eg：(使用for-in ) 组装下拉框需要的数据格式

接口返回的格式

    // 获取产线列表
    getLine() {
      linePullDown().then((res) => {
        for (let key in res.data) {
          this.lineOptions.push({
            name: key,
            id: key,
          });
        }
      });
    },