利用Object.keys遍歷(forEach/map)對象數組，合并

浠ラ箍發布于2019-08-22 16:33 / 1299人閱讀

摘要：中幾種遍歷對象的方法，包括它們在使用場景方面各有不同。注意它同一樣不能保證屬性按對象原來的順序輸出。其返回對象的所有自身屬性的屬性名組成的數組，但不會獲取原型鏈上的屬性。另外可以由或終止。在這些情況下，迭代器關閉。

js中幾種遍歷對象的方法，包括for..of、for..in、Object.keys、Object.getOwnProperty,它們在使用場景方面各有不同。

js對象的屬性中可直接用、可訪問到的屬性分為數據屬性和訪問器屬性。

數據屬性（實際存儲屬性值的屬性）的四大特性：

{    
    value: 屬性值,    
    writable: true/false,  //控制是否可修改    
    enumerable: true/false, //控制是否可被for in遍歷    
    configurable: true/false, //1. 控制是否可刪除 2. 控制是否可修改前兩個特性  3.一旦改為false不可逆                                                       
}

訪問器屬性（不實際存儲數據，專門提供對其它數據/變量的保護）的四大特性：

{
    get:function(){return this.隱藏屬性;},
    set:function(val){
        //如果val符合條件
            this.隱藏屬性=val
        //否則
            報錯
    },
    enumerable, configurable
}

for..in

返回的是所有能夠通過對象訪問的、可枚舉的屬性，既包括存在于實例中的屬性，也包括存在于原型中的實例,不能保證屬性按對象原來的順序輸出。（可枚舉-自身-原型）

var obj = {a:1, b:2, c:3};
    
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}
// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

Object.keys

用于獲取對象自身所有的可枚舉的屬性值，但不包括原型中的屬性，然后返回一個由屬性名組成的數組。注意它同for..in一樣不能保證屬性按對象原來的順序輸出。（可枚舉-自身）

// 數組
var arr = ["a", "b", "c"];
console.log(Object.keys(arr)); // console: ["0", "1", "2"]

// 類數組對象
var obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.keys(obj)); // console: ["0", "1", "2"]

// 類數組對象-隨機下標
var anObj = { 100: "a", 2: "b", 7: "c" };
console.log(Object.keys(anObj)); // console: ["2", "7", "100"]

// 不可枚舉屬性getFoo
var myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  } 
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ["foo"]

Object.getOwnProperty

如果你想獲取一個對象的所有屬性，甚至包括不可枚舉的，則可用該方法。其返回對象的所有自身屬性的屬性名組成的數組，但不會獲取原型鏈上的屬性。（可枚舉&不可枚舉-自身）

//獲取不可枚舉屬性
var my_obj = Object.create({}, {
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});
my_obj.foo = 1;

console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]

下面的例子演示了該方法不會獲取到原型鏈上的屬性：

function ParentClass() {}
ParentClass.prototype.inheritedMethod = function() {};

function ChildClass() {
  this.prop = 5;
  this.method = function() {};
}

ChildClass.prototype = new ParentClass;
ChildClass.prototype.prototypeMethod = function() {};

console.log(
  Object.getOwnPropertyNames(
    new ChildClass()  // ["prop", "method"]
  )
);

for..of

es6新增方法，主要來遍歷可迭代的對象（包括Array, Map, Set, arguments等），它主要用來獲取對象value值，而for..in主要獲取對象key值。
另外：可以由break, continue, throw 或return終止。在這些情況下，迭代器關閉。

let iterable = [10, 20, 30];
for (let value of iterable) {
    value += 1;
    console.log(value);
}
// 11
// 21
// 31

與for..in循環之間的區別：

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); //  0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); //  0, 1, 2, "foo"
  }
}

for (let i of iterable) {
  console.log(i); //  3, 5, 7
}

小結

其實這幾個方法之間的差異主要在屬性是否可可枚舉，是來自原型，還是實例。

開發中的實際應用

需求：將如下兩個從后臺不同端口獲取的json對象數組整合處理成如下注釋部分的json對象

var goodsSpecJSON = [{
                "SpecA": "顏色"
            }, {
                "SpecB": "容量"
            }, {
                "SpecC": "大小"
            }, {
                "SpecD": "尺寸"
            }, {
                "SpecE": "套餐"
            }];
var goodsSpecList = [{
    c_id: 3133,
    costPrice: 0,
    discountPrice: 0,
    earn: 0,
    etime: null,
    flag: 0,
    goodsDetailCount: 199,
    goodsDetailId: "100PgQ2xy08121409mY27",
    goodsDetailInventory: 199,
    goodsDetailOff: 0,
    goodsDetailPic: "/upload/messageImage/1523281057461_Personal.jpg,/upload/messageImage/1523282906972_Personal.jpg,/upload/messageImage/1523283570897_Personal.jpg",
    goodsDetailPrice: 188,
    goodsDetailSpec: "",
    goodsId: "00Y1kR4r1029X822731o0",
    isHost: 0,
    managerEarn: 0,
    postage: 10,
    profit: 0,
    specA: "紅色",
    specB: "32G",
    specC: "小",
    specD: "4.7寸",
    specE: "套餐一",
    unionEarn: 0,
    vipPrice: 0
}, {
    c_id: 3134,
    costPrice: 0,
    discountPrice: 0,
    earn: 0,
    etime: null,
    flag: 0,
    goodsDetailCount: 199,
    goodsDetailId: "100PgQ2xy08121409mY27",
    goodsDetailInventory: 199,
    goodsDetailOff: 0,
    goodsDetailPic: "/upload/messageImage/1523281057461_Personal.jpg,/upload/messageImage/1523282906972_Personal.jpg,/upload/messageImage/1523283570897_Personal.jpg",
    goodsDetailPrice: 188,
    goodsDetailSpec: "",
    goodsId: "00Y1kR4r1029X822731o0",
    isHost: 0,
    managerEarn: 0,
    postage: 10,
    profit: 0,
    specA: "白色",
    specB: "64G",
    specC: "小",
    specD: "5寸",
    specE: "套餐二",
    unionEarn: 0,
    vipPrice: 0
}, {
    c_id: 3135,
    costPrice: 0,
    discountPrice: 0,
    earn: 0,
    etime: null,
    flag: 0,
    goodsDetailCount: 199,
    goodsDetailId: "100PgQ2xy08121409mY27",
    goodsDetailInventory: 199,
    goodsDetailOff: 0,
    goodsDetailPic: "/upload/messageImage/1523281057461_Personal.jpg,/upload/messageImage/1523282906972_Personal.jpg,/upload/messageImage/1523283570897_Personal.jpg",
    goodsDetailPrice: 188,
    goodsDetailSpec: "",
    goodsId: "00Y1kR4r1029X822731o0",
    isHost: 0,
    managerEarn: 0,
    postage: 10,
    profit: 0,
    specA: "黑色",
    specB: "128G",
    specC: "小",
    specD: "4.7寸",
    specE: "套餐一",
    unionEarn: 0,
    vipPrice: 0
}, {
    c_id: 3136,
    costPrice: 0,
    discountPrice: 0,
    earn: 0,
    etime: null,
    flag: 0,
    goodsDetailCount: 199,
    goodsDetailId: "100PgQ2xy08121409mY27",
    goodsDetailInventory: 199,
    goodsDetailOff: 0,
    goodsDetailPic: "/upload/messageImage/1523281057461_Personal.jpg,/upload/messageImage/1523282906972_Personal.jpg,/upload/messageImage/1523283570897_Personal.jpg",
    goodsDetailPrice: 188,
    goodsDetailSpec: "",
    goodsId: "00Y1kR4r1029X822731o0",
    isHost: 0,
    managerEarn: 0,
    postage: 10,
    profit: 0,
    specA: "藍色",
    specB: "64GG",
    specC: "大",
    specD: "4.5寸",
    specE: "套餐二",
    unionEarn: 0,
    vipPrice: 0
}];

// var keys = {
//     "顏色": ["紅色", "白色"],
//     "容量": ["8g", "16g", "32g", "64g"],
//     "尺寸": ["大", "小", "大"],
//     "套餐": ["套餐一", "套餐二", "套餐三"]
// };
// //SKU，Stock Keeping Uint(庫存量單位)    
// var sku_list = [{
//     "attrs": "紅色|16g|big|套餐二",
//     "price": 120
// }, {
//     "attrs": "紅色|8g|big|套餐一",
//     "price": 10
// }, {
//     "attrs": "白色|16g|big|套餐二",
//     "price": 28
// }, {
//     "attrs": "紅色|64g|small|套餐三",
//     "price": 220
// }, {
//     "attrs": "白色|32g|middle|套餐二",
//     "price": 130
// }, {
//     "attrs": "紅色|32g|big|套餐一",
//     "price": 120
// }, ];

實現：主要利用Object.keys方法獲取對象的key,value值，配上forEach循環實現最終想要的結果。

var keys = {};
var sku_list = [];
//原數據轉換小寫
goodsSpecJSON = goodsSpecJSON.map(function (keyo) {
    var key = Object.keys(keyo)[0];
    var newkey = key.substring(0, 1).toLowerCase() + key.substring(1);
    var dic = {};
    dic[newkey] = keyo[key];
    return dic
});
//生成keys
goodsSpecJSON.forEach(function (keyo) {
    var key = Object.keys(keyo)[0]; //["specA"]
    var val = keyo[key]; //顏色
    if (!keys.hasOwnProperty(val)) {
        keys[val] = [];
    }
    var hash = {};
    goodsSpecList.forEach(function (item, i) {
        if (hash[item[key]] === undefined) {
            hash[item[key]] = true;
            keys[val].push(item[key]);
        }
        // if (keys[val].indexOf(item[key]) === -1) {
        //     keys[val].push(item[key]);
        // }
    });
});
console.log(keys)
//生成sku_list
goodsSpecList.forEach(function (item) {
    var dic = {
        attrs: ""
    };
    goodsSpecJSON.forEach(function (keyo, j) {
        var key = Object.keys(keyo)[0];
        dic.attrs += item[key] + (j === goodsSpecJSON.length - 1 ? "" : "|");
        dic.price = item.goodsDetailPrice;
        dic.goodsDetailCount = item.goodsDetailCount;
        dic.goodsDetailId = item.goodsDetailId;
    });
    sku_list.push(dic);
});
console.log(sku_list)

輸出結果：

GPU云服務器云服務器 json對象數組合并合并對象數組合并合并數組

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94452.html

es6 Map和set

摘要：返回一個布爾值，表示該值是否為的成員。清除所有成員，沒有返回值。該數組中的每一項也必須是數組，內部數組的首個項會作為鍵，第二項則為對應值。返回所有成員的遍歷器需要特別注意的是，的遍歷順序就是插入順序。 Js大部分歷史時期都只存在一種集合類型，也就是數組類型。數組在 JS 中的使用正如其他語言的數組一樣，但缺少更多類型的集合導致數組也經常被當作隊列與棧來使用。數組只使用了數值型的索引，而...

superPershing 2019-08-23 10:55 評論0 收藏0
JavaScript中 for、for in、for of、forEach等使用總結

摘要：等內置的方法和屬性都是不可枚舉的北京北京可以遍歷可枚舉但對象，包括不是它本身但存在于原型鏈上的屬性。北京循環可迭代對象循環可迭代對象包括，，，，，類數組的對象比如對象對象以及生成器對象等。在JavaScript中，我們經常需要去循環迭代方法操作數組對象等，常見等循環方法有 for、for in、for of、forEach等。 1.for循環 for循環是最基礎常見的一種循環，圓括號...

hlcc 2019-08-23 13:42 評論0 收藏0
【深度長文】JavaScript數組所有API全解密

摘要：關于我的博客掘金專欄路易斯專欄原文鏈接深度長文數組全解密全文共字，系統講解了數組的各種特性和。構造器構造器用于創建一個新的數組。中聲明的數組，它的構造函數是中的對象。本文首發于CSDN網站，下面的版本又經過進一步的修訂。關于我的博客：louis blog 掘金專欄：路易斯專欄原文鏈接：【深度長文】JavaScript數組全解密全文共13k+字，系統講解了JavaScrip...

Mr_zhang 2019-08-20 16:13 評論0 收藏0
JS中幾種包含for的遍歷方式

摘要：區別遍歷數組常用調用數組的每個元素，并將元素傳遞給回調函數這種循環的問題在于無法中途跳出循環，和命令不能奏效和都返回數組，返回的與原數組長度相同只返回符合條件的結果一個值和返回布爾值遍歷對象所有的可枚舉屬性主要是為了遍歷對象而設計的，不適 forEach,map,filter區別 forEach 遍歷數組常用(調用數組的每個元素，并將元素傳遞給回調函數) let arr = [1,2...

jcc 2019-08-22 18:09 評論0 收藏0
es6 Map和WeakMap

摘要：事實上，不僅僅是數組，任何具有接口且每個成員都是一個雙元素的數組的數據結構都可以當做構造函數的參數。返回所有成員的遍歷器需要特別注意的是，的遍歷順序就是插入順序。轉為轉為，正常情況下，所有鍵名都是字符串。 Map JavaScript 的對象（Object），本質上是鍵值對的集合（Hash 結構），但是傳統上只能用字符串當作鍵。這給它的使用帶來了很大的限制。為了解決這個問題，ES6 提...

sPeng 2019-08-23 10:56 評論0 收藏0