Object.values()對象遍歷

Object.keys()  對象的遍歷

 返回給定對象所有可枚舉屬性的數組；是屬性名組成的數組

let obj = { a: 1, b: 2, c: 3 };
    Object.keys(obj).map((key) => {
      console.log(key, obj[key]);
    });

 

Object.values()  對象的遍歷

返回一個給定對象自身的所有屬性值的數組； 是屬性值組成的數組

    let obj22 = {
      xe: { name: "小紅", age: "19", height: "166" },
      xe2: { name: "小張", age: "20", height: "176" },
      xe3: { name: "小洋", age: "21", height: "168" },
    };
    const list0 = Object.values(obj22);  
    // console.log('d', list0)

    // [ {name: '小紅', age: '19', height: '166'},
    //   {name: '小張', age: '20', height: '176'},
    //   {name: '小洋', age: '21', height: '168'}]

 

Object.entries()  對象的遍歷

Object.entries() 可以把一個對象的鍵值以數組的形式遍歷出來，結果和 for...in 一致，但不會遍歷原型屬性

const obj = { foo: 'bar', baz: 'abc' }; 
console.log(Object.entries(obj));  // [['foo', 'bar'], ['baz', 'abc']]

let obj3 = { foot:'111', heder:'222' }
    const list33 = Object.entries(obj3);
    for (let [k, v] of Object.entries(obj3)) {
        console.log('值', k +':'+ v)
    }

 

對象的遍歷: for in

let obj2 = { name: "xiaohong", id: "001", age: 19 };
    for (const key in obj2) {
      if (Object.hasOwnProperty.call(obj2, key)) {
        console.log(key, obj2);
        const element = obj2[key];
      }
    }

some()

根據傳入的條件有一個符合條件，some ()返回 true。如果沒有，它將返回false

const stock = {
  meat: 5,
  fruit: 10,
  cheese: 6,
}
const enoughStock = Object.values(stock).some(el => el >= 6)
console.log(enoughStock) // true

every()

Every ()根據條件返回 true 或 false，如果每一項都符合條件

const nightclub = {
  dave: 26,
  sally: 23,
  lucy: 17,
}
const isOldEnough = Object.values(nightclub).every(el => el >= 18)
// false

if (!isOldEnough) {
  console.log("Check every ID")
}

檢測數組中的每一項是否符合要求

const comp = [
    {name:"Apple",ram:8},
    {name:"IBM",ram:4},
    {name:"Acer",ram:32},
];
 var result= comp.every(function(computer){
   return computer.ram > 16
})
console.log(result)//false;

 

map,  filter,  some,  forEach, for in,  for of, 用法

1, forEach

對數組中的每一個元素進行遍歷，沒有返回值，無法使用break，return等終止循環

let list4 = [1, 2, 3, 4, 5];
    let other4 = [];
    list4.forEach((item, i) => {
      other4.push(item * 2);
    });

 

2, map

有返回值，返回一個新的數組

let list1 = [1, 2, 3, 4, 5];
    let other1 = list1.map((item, i) => {
      return item * 2;
    });

 

3, filter

有返回值，返回一個符合條件的元素 組成的數組

let list2 = [1, 2, 3, 4, 5];
    let other2 = list2.filter((item, i) => {
      return item % 2;
    });

 

4, some

遍歷數組中的每一個元素

 返回一個boolean，判斷是否有元素符合條件，如果有一個符合條件，則循環會終止。

let list3 = [1, 2, 3, 4, 5];
    list3.some((d, i) => {
      //   console.log('some遍歷數組',d, i);
      return d > 3;
    });

 

5，reduce()  返回一個值

prev 表示上一次調用返回的結果值，或初始值init

 cur 表示當前的數組元素

 init 表示初始值

// 求和
    let arr = [3,9,6,2,9]
    let sum = arr.reduce((prev, cur) => {
      return prev + cur;
    }, 0)
    // init 初始值爲0， 所以開始時prev的值爲0

    // 數組去重
    let newArr = arr.reduce((prev, cur) => {
      prev.indexOf(cur) == -1 && prev.push(cur)
      return prev;
    }, [])

 

6, for of

可遍歷數組，獲取的是value值；可以代替for循環，用下標索引來獲取value值

for of爲ES6提供，遍歷範圍包括數組、Set和Map結構，dom樹，arguments對象，以及字符串

   // 遍歷數組
    let list5 = [1, 2, 3, 4, 5];
    for (let item of list5) {
      //   console.log('for of',item);
    }

    let arr3 = [
      { key: "01", value: "西施" },
      { key: "02", value: "王昭君" },
      { key: "03", value: "楊玉環" },
      { key: "02", value: "王昭君" },
    ];
    function newObj(arr) {
      let newarr = [];
      for (let i = 0; i < arr.length; i++) {
        let isBol = newarr.some((item) => item.key == arr[i].key);
        // 如果找到沒有就添加到新數組
        if (!isBol) {
          newarr.push(arr[i]);
        }
      }
      return newarr;
    }
    console.log("對象", newObj(arr3));

https://blog.csdn.net/sunyctf/article/details/134491546

 

 

 

https://juejin.cn/post/7340554546255003663

https://juejin.cn/post/6967293500572303367?searchId=20240511165914D6D9BC19E90112C71A3A

https://juejin.cn/post/7017968328694038536

https://juejin.cn/post/6844903796062191624?searchId=20240511174205C6448560088235C02833