වස්තු සමූහයකින්, දේපලක අගය අරාව ලෙස උපුටා ගන්න

මට පහත ව්‍යුහය සමඟ ජාවාස්ක්‍රිප්ට් වස්තු අරාව ඇත:

objArray = [ { foo: 1, bar: 2}, { foo: 3, bar: 4}, { foo: 5, bar: 6} ];

සෑම වස්තුවකින්ම ක්ෂේත්‍රයක් උකහා ගැනීමට මට අවශ්‍යය, සහ අගයන් අඩංගු අරාවක් ලබා ගන්න, උදාහරණයක් ලෙස ක්ෂේත්‍රය fooඅරාව ලබා දෙයි [ 1, 3, 5 ].

මෙම සුළු කාරණයෙන් මට මෙය කළ හැකිය:

function getFields(input, field) {
    var output = [];
    for (var i=0; i < input.length ; ++i)
        output.push(input[i][field]);
    return output;
}

var result = getFields(objArray, "foo"); // returns [ 1, 3, 5 ]

අභිරුචි උපයෝගිතා ශ්‍රිතයක් අනවශ්‍ය වන පරිදි මෙය කිරීමට වඩාත් අලංකාර හෝ මුග්ධ ක්‍රමයක් තිබේද?

යෝජිත අනුපිටපත් පිළිබඳ සටහන , එය තනි වස්තුවක් අරාවකට පරිවර්තනය කරන්නේ කෙසේද යන්න ආවරණය කරයි .

එය සාක්ෂාත් කර ගැනීම සඳහා කෙටි ක්‍රමයක් මෙන්න:

let result = objArray.map(a => a.foo);

හෝ

let result = objArray.map(({ foo }) => foo)

ඔබට ද පරීක්ෂා කළ හැකිය Array.prototype.map().

ඔව්, නමුත් එය ජාවාස්ක්‍රිප්ට් හි ES5 අංගයක් මත රඳා පවතී. මෙයින් අදහස් කරන්නේ එය IE8 හෝ ඊට වඩා පැරණි දිනවල ක්‍රියා නොකරන බවයි.

var result = objArray.map(function(a) {return a.foo;});

ES6 අනුකූල JS පරිවර්තකයන් මත ඔබට සංක්ෂිප්තතාව සඳහා ඊතල ශ්‍රිතයක් භාවිතා කළ හැකිය :

var result = objArray.map(a => a.foo);

Array.prototype.map ප්‍රලේඛනය

පරීක්ෂා කරන්න Lodash ගේ_.pluck() කාර්යය සඳහා ෙහෝ Underscore ගේ_.pluck() කාර්යය. දෙදෙනාම තනි ශ්‍රිත ඇමතුමකින් ඔබට අවශ්‍ය දේ හරියටම කරති!

var result = _.pluck(objArray, 'foo');

යාවත්කාලීන කිරීම: _.pluck()Lodash v4.0.0 ලෙස ඉවත් කර ඇත පක්ෂව, _.map()සමාන දෙයක් සංයෝජනය Niet පිළිතුර . _.pluck()තවමත් අන්ඩර්ස්කෝර් හි ඇත ඇත.

යාවත්කාලීන 2: අදහස් දැක්වීමේදී මාර්ක් පෙන්වා දෙන පරිදි , ලොඩාෂ් v4 සහ 4.3 අතර කොතැනක හෝ, මෙම ශ්‍රිතය නැවත සපයන නව ශ්‍රිතයක් එක් කර ඇත. _.property()යනු වස්තුවක දේපලක වටිනාකම ලබා ගැනීම සඳහා ශ්‍රිතයක් ලබා දෙන කෙටිමං ශ්‍රිතයකි.

මීට අමතරව, _.map()දැන් දෙවන පරාමිතිය ලෙස නූලක් ඇතුල් කිරීමට ඉඩ දෙයි _.property(). මෙහි ප්‍රති As ලයක් ලෙස පහත දැක්වෙන පේළි දෙක පූර්ව ලෝඩාෂ් 4 සිට ඉහත කේත සාම්පලයට සමාන වේ.

var result = _.map(objArray, 'foo');
var result = _.map(objArray, _.property('foo'));

_.property(), සහ එම නිසා _.map(), උප ගුණාංග වෙත ප්‍රවේශ වීම සඳහා තිත් වෙන් කළ නූලක් හෝ අරාවක් සැපයීමට ද ඔබට ඉඩ දෙයි:

var objArray = [
    {
        someProperty: { aNumber: 5 }
    },
    {
        someProperty: { aNumber: 2 }
    },
    {
        someProperty: { aNumber: 9 }
    }
];
var result = _.map(objArray, _.property('someProperty.aNumber'));
var result = _.map(objArray, _.property(['someProperty', 'aNumber']));

_.map()ඉහත උදාහරණයේ ඇති ඇමතුම් දෙකම නැවත පැමිණේ [5, 2, 9].

ඔබ ක්‍රියාකාරී වැඩසටහන්කරණයට තව ටිකක් වැඩි නම්, රාම්ඩාගේ R.pluck() ක්‍රියාකාරිත්වය දෙස බලන්න, එය මේ වගේ දෙයක් වනු ඇත:

var result = R.pluck('foo')(objArray);  // or just R.pluck('foo', objArray)

JS පමණක් විසඳුම් සඳහා කථා කරන විට, සරල සුචිගත කළ forපුඩුවක් එහි විකල්පයන්ට වඩා ක්‍රියාකාරී බව මම සොයාගෙන ඇත .

100000 මූලද්‍රව්‍ය අරාවකින් (jsPerf හරහා) තනි දේපල උපුටා ගැනීම.

ලූප් 368 ඕප්ස් / තත්පර සඳහා සාම්ප්‍රදායික

var vals=[];
for(var i=0;i<testArray.length;i++){
   vals.push(testArray[i].val);
}

ES6 for..of loop 303 Ops / sec

var vals=[];
for(var item of testArray){
   vals.push(item.val); 
}

Array.prototype.map 19 Ops / sec

var vals = testArray.map(function(a) {return a.val;});

TL; DR - .map () මන්දගාමී ය, නමුත් කියවීමට ඇති හැකියාව කාර්ය සාධනයට වඩා වටිනවා යැයි ඔබට හැඟේ නම් එය භාවිතා කිරීමට නිදහස් වන්න.

# 2: 6/2019 සංස්කරණය කරන්න - jsPerf සබැඳිය කැඩී ඇත, ඉවත් කරන ලදි.

හරස් බ්‍රව්සර් සහතික කිරීම සඳහා ලෝඩාෂ් හෝ යටි ඉරි වැනි පුස්තකාල භාවිතා කිරීම වඩා හොඳය.

ලොඩාෂ් හි ඔබට පහත දැක්වෙන ක්‍රමවේදය මඟින් අරාවෙහි ඇති දේපලක අගයන් ලබා ගත හැකිය

_.map(objArray,"foo")

සහ අන්ඩර්ස්කෝර් හි

_.pluck(objArray,"foo")

දෙදෙනාම නැවත පැමිණේ

[1, 2, 3]

භාවිතා කිරීම Array.prototype.map:

function getFields(input, field) {
    return input.map(function(o) {
        return o[field];
    });
}

පෙර-ඊඑස් 5 බ්‍රව්සර් සඳහා ෂිම් සඳහා ඉහත සබැඳිය බලන්න.

ES6 හි, ඔබට මෙය කළ හැකිය:

const objArray = [{foo: 1, bar: 2}, {foo: 3, bar: 4}, {foo: 5, bar: 6}]
objArray.map(({ foo }) => foo)

පොදුවේ ගත් කල, ඔබට අරාව තුළ ඇති වස්තු අගයන් නිස්සාරණය කිරීමට අවශ්‍ය නම් (ප්‍රශ්නයේ විස්තර කර ඇති පරිදි) එවිට ඔබට අඩු කිරීම, සිතියම සහ අරාව විනාශ කිරීම භාවිතා කළ හැකිය.

ES6

let a = [{ z: 'word', c: 'again', d: 'some' }, { u: '1', r: '2', i: '3' }];
let b = a.reduce((acc, obj) => [...acc, Object.values(obj).map(y => y)], []);

console.log(b)

In loop සඳහා සමාන සමාන වන්නේ:

for (let i in a) {
  let temp = [];
  for (let j in a[i]) {
    temp.push(a[i][j]);
  }
  array.push(temp);
}

නිෂ්පාදිත ප්‍රතිදානය: ["වචනය", "නැවත", "සමහරක්", "1", "2", "3"]

අතර mapවස්තු ලැයිස්තුවෙන් 'තීරු' තෝරා ගැනීමට නිසි පිළිතුරක් වන අතර, එය අවාසිය ඇත. තීරු තිබේද නැද්ද යන්න පැහැදිලිව පරික්ෂා නොකළහොත්, එය දෝෂයක් විසි කරන අතර (උපරිමයෙන්) ඔබට ලබා දෙනු ඇත undefined. මම reduceවිසඳුමක් තෝරා ගනිමි , එමඟින් දේපල නොසලකා හැරිය හැකි අතර පෙරනිමි අගයකින් ඔබව සැකසිය හැකිය.

function getFields(list, field) {
    //  reduce the provided list to an array only containing the requested field
    return list.reduce(function(carry, item) {
        //  check if the item is actually an object and does contain the field
        if (typeof item === 'object' && field in item) {
            carry.push(item[field]);
        }

        //  return the 'carry' (which is the list of matched field values)
        return carry;
    }, []);
}

jsbin උදාහරණය

සපයා ඇති ලැයිස්තුවේ ඇති එක් අයිතමයක් වස්තුවක් හෝ ක්ෂේත්‍රයක් නොමැති වුවද මෙය ක්‍රියාත්මක වේ.

කිසියම් භාණ්ඩයක් වස්තුවක් නොවිය යුතු නම් හෝ ක්ෂේත්‍රය අඩංගු නොවිය යුතු නම් පෙරනිමි අගයක් සාකච්ඡා කිරීමෙන් එය වඩාත් නම්‍යශීලී කළ හැකිය.

function getFields(list, field, otherwise) {
    //  reduce the provided list to an array containing either the requested field or the alternative value
    return list.reduce(function(carry, item) {
        //  If item is an object and contains the field, add its value and the value of otherwise if not
        carry.push(typeof item === 'object' && field in item ? item[field] : otherwise);

        //  return the 'carry' (which is the list of matched field values)
        return carry;
    }, []);
}

jsbin උදාහරණය

මෙය සිතියම සමඟ සමාන වේ, ආපසු ලබා දුන් අරාවෙහි දිග සපයා ඇති අරාවට සමාන වේ. (ඒ අවස්ථාවේ දී a ට mapවඩා තරමක් ලාභදායී වේ reduce):

function getFields(list, field, otherwise) {
    //  map the provided list to an array containing either the requested field or the alternative value
    return list.map(function(item) {
        //  If item is an object and contains the field, add its value and the value of otherwise if not
        return typeof item === 'object' && field in item ? item[field] : otherwise;
    }, []);
}

jsbin උදාහරණය

එවිට වඩාත් නම්‍යශීලී විසඳුමක් ඇත, එය විකල්ප අගයක් ලබා දීමෙන් හැසිරීම් දෙකම අතර මාරු වීමට ඉඩ සලසයි.

function getFields(list, field, otherwise) {
    //  determine once whether or not to use the 'otherwise'
    var alt = typeof otherwise !== 'undefined';

    //  reduce the provided list to an array only containing the requested field
    return list.reduce(function(carry, item) {
        //  If item is an object and contains the field, add its value and the value of 'otherwise' if it was provided
        if (typeof item === 'object' && field in item) {
            carry.push(item[field]);
        }
        else if (alt) {
            carry.push(otherwise);
        }

        //  return the 'carry' (which is the list of matched field values)
        return carry;
    }, []);
}

jsbin උදාහරණය

ඉහත උදාහරණ (බලාපොරොත්තු සහගතව) මෙය ක්‍රියා කරන ආකාරය පිළිබඳ යම් ආලෝකයක් හෙළි කරන බැවින්, ශ්‍රිතය භාවිතා කිරීමෙන් Array.concatශ්‍රිතය ටිකක් කෙටි කිරීමට ඉඩ ලබා දේ .

function getFields(list, field, otherwise) {
    var alt = typeof otherwise !== 'undefined';

    return list.reduce(function(carry, item) {
        return carry.concat(typeof item === 'object' && field in item ? item[field] : (alt ? otherwise : []));
    }, []);
}

jsbin උදාහරණය

ඔබට අරාව වැනි වස්තූන් සඳහා සහය දැක්වීමට අවශ්‍ය නම්, Array.from (ES2015) භාවිතා කරන්න :

Array.from(arrayLike, x => x.foo);

Array.prototype.map () ක්‍රමයට වඩා එහි ඇති වාසිය නම් ආදානය ද කට්ටලයක් විය හැකිය :

let arrayLike = new Set([{foo: 1}, {foo: 2}, {foo: 3}]);

එය "වඩා හොඳ" යන්න පිළිබඳ ඔබේ අර්ථ දැක්වීම මත රඳා පවතී.

අනෙක් පිළිතුරු මගින් සිතියම භාවිතා කිරීම ස්වාභාවික (විශේෂයෙන් ක්‍රියාකාරී ශෛලියට පුරුදු වූ පිරිමි ළමයින් සඳහා) සහ සංක්ෂිප්තව පෙන්වා දෙයි. එය භාවිතා කිරීමට මම තරයේ නිර්දේශ කරමි (ඔබ IE8- IT පුද්ගලයින් කිහිප දෙනා සමඟ කරදර නොවන්නේ නම්). එබැවින් "වඩා හොඳ" යන්නෙහි අර්ථය "වඩා සංක්ෂිප්ත", "නඩත්තු කළ හැකි", "තේරුම්ගත හැකි" නම් ඔව්, එය වඩා හොඳ ක්‍රමයකි.

අනෙක් අතට, මෙම අලංකාරය අමතර පිරිවැයකින් තොරව පැමිණෙන්නේ නැත. මම මයික්‍රොබෙන්ච්හි විශාල රසිකයෙක් නොවේ, නමුත් මම මෙහි කුඩා පරීක්ෂණයක් කර ඇත්තෙමි . ප්‍රති result ලය පුරෝකථනය කළ හැකි ය, පැරණි කැත ක්‍රමය සිතියම් ක්‍රියාකාරිත්වයට වඩා වේගවත් බව පෙනේ. එබැවින් "වඩා හොඳ" යන්නෙහි අර්ථය "වේගවත්" නම්, නැත, පැරණි පාසල් විලාසිතාව සමඟ රැඳී සිටින්න.

නැවතත් මෙය මයික්‍රොබෙන්ච් එකක් පමණක් වන අතර කිසිදු ආකාරයකින් භාවිතයට එරෙහිව පෙනී නොසිටීම map, එය මගේ ශත දෙක පමණි :).

ඔබට ES6 + හි බහු අගයන් අවශ්‍ය නම් පහත සඳහන් දෑ ක්‍රියාත්මක වේ

objArray = [ { foo: 1, bar: 2, baz: 9}, { foo: 3, bar: 4, baz: 10}, { foo: 5, bar: 6, baz: 20} ];

let result = objArray.map(({ foo, baz }) => ({ foo, baz }))

මෙම ක්රියා {foo, baz}වමේ භාවිතා වස්තුව destructoring හා ඊතල දකුණු පැත්තේ සමාන වේ මත {foo: foo, baz: baz}නිසා ES6 ගේ වැඩි දියුණු වස්තුව literals .

ඔබට කැදැලි අරා තිබේ නම් ඔබට එය මේ ආකාරයට ක්‍රියා කළ හැකිය:

const objArray = [ 
     { id: 1, items: { foo:4, bar: 2}},
     { id: 2, items: { foo:3, bar: 2}},
     { id: 3, items: { foo:1, bar: 2}} 
    ];

    let result = objArray.map(({id, items: {foo}}) => ({id, foo}))
    
    console.log(result)

වස්තු අරා සමඟ කටයුතු කිරීමේදී ක්‍රියාකාරී සිතියම හොඳ තේරීමකි. දැනටමත් හොඳ පිළිතුරු ගණනාවක් පළ කර ඇතත්, පෙරණය සමඟ සංයෝජනයෙන් සිතියම භාවිතා කිරීමේ උදාහරණය ප්‍රයෝජනවත් විය හැකිය.

සාරධර්ම නිර්වචනය කර නොමැති දේපල බැහැර කිරීමට හෝ නිශ්චිත දේපලක් බැහැර කිරීමට ඔබට අවශ්‍ය නම්, ඔබට පහත සඳහන් දෑ කළ හැකිය:

    var obj = {value1: "val1", value2: "val2", Ndb_No: "testing", myVal: undefined};
    var keysFiltered = Object.keys(obj).filter(function(item){return !(item == "Ndb_No" || obj[item] == undefined)});
    var valuesFiltered = keysFiltered.map(function(item) {return obj[item]});

https://jsfiddle.net/ohea7mgk/

ඉහත දක්වා ඇති පිළිතුර තනි දේපල උපුටා ගැනීම සඳහා හොඳයි, ඔබට වස්තු සමූහයකින් දේපල එකකට වඩා ලබා ගැනීමට අවශ්‍ය නම් කුමක් කළ යුතුද? මෙන්න විසඳුම !! එසේ නම් අපට සරලවම _.pick (වස්තුව, [මාර්ග]) භාවිතා කළ හැකිය.

_.pick(object, [paths])

පහත දැක්වෙන ගුණාංග තුනක් සහිත වස්තු ඇති බව උපකල්පනය කරමු

objArray = [ { foo: 1, bar: 2, car:10}, { foo: 3, bar: 4, car:10}, { foo: 5, bar: 6, car:10} ];

දැන් අපට අවශ්‍ය වන්නේ සෑම වස්තුවකින්ම foo සහ bar දේපල උපුටා ගෙන ඒවා වෙනම පෙළක ගබඩා කිරීමයි. පළමුවෙන්ම අපි සිතියම භාවිතයෙන් අරාව මූලද්‍රව්‍යයන් නැවත කියමු, ඉන්පසු අපි ඒ මත ලොඩාෂ් පුස්තකාල සම්මත _.pick () ක්‍රමය යොදන්නෙමු.

දැන් අපට 'foo' සහ 'bar' දේපල උපුටා ගැනීමට හැකි වී තිබේ.

var newArray = objArray.map((element)=>{ return _.pick(element, ['foo','bar'])}) console.log(newArray);

ප්‍රති result ලය වනුයේ [oo foo: 1, bar: 2}, {foo: 3, bar: 4}, {foo: 5, bar: 6}]

විනෝද වන්න !!!

වස්තු සමූහයෙන් බහු ගුණාංග පහසුවෙන් උපුටා ගැනීම:

let arrayOfObjects = [
  {id:1, name:'one', desc:'something'},
  {id:2, name:'two', desc:'something else'}
];

//below will extract just the id and name
let result = arrayOfObjects.map(({id, name}) => ({id, name}));

result වනු ඇත [{id:1, name:'one'},{id:2, name:'two'}]

සිතියම් ශ්‍රිතයට අවශ්‍ය ගුණාංග එකතු කිරීම හෝ ඉවත් කිරීම