කැදැලි වස්තු, අරා හෝ JSON වෙත ප්‍රවේශ වී ක්‍රියා කරන්නේ කෙසේද?

Question 1

වස්තූන් සහ අරා අඩංගු කූඩු දත්ත ව්‍යුහයක් මා සතුව ඇත. මම තොරතුරු උකහා ගන්නේ කෙසේද, එනම් නිශ්චිත හෝ බහු අගයන් (හෝ යතුරු) වෙත පිවිසෙන්නේ කෙසේද?

උදාහරණයක් වශයෙන්:

var data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

nameදෙවන අයිතමයට ප්‍රවේශ විය හැක්කේ කෙසේද items?

Question 2

මූලික කරුණු

ජාවාස්ක්‍රිප්ට් සතුව ඇත්තේ එක් දත්ත වර්ගයක් පමණි, ඒවාට බහු අගයන් අඩංගු විය හැකිය: වස්තුව . ක Array වස්තුව විශේෂ ආකාරයකි.

(සරල) වස්තූන් සඳහා ස්වරූපයක් ඇත

{key: value, key: value, ...}

අරා වල ස්වරූපය ඇත

[value, value, ...]

අරා සහ වස්තූන් දෙකම key -> valueව්‍යුහයක් නිරාවරණය කරයි . අරාවෙහි යතුරු සංඛ්‍යාත්මක විය යුතු අතර ඕනෑම නූලක් වස්තු වල යතුර ලෙස භාවිතා කළ හැකිය. යතුරු අගය යුගල "ගුණාංග" ලෙසද හැඳින්වේ .

තිත් අංකනය භාවිතයෙන් ගුණාංග වෙත ප්‍රවේශ විය හැකිය

const value = obj.someProperty;

හෝ වරහන අංකනය , දේපල නම වලංගු ජාවාස්ක්‍රිප්ට් හඳුනාගැනීමේ නමක් ^{[පිරිවිතර]} නොවන්නේ නම් , හෝ නම විචල්‍යයක වටිනාකම වේ:

// the space is not a valid character in identifier names
const value = obj["some Property"];

// property name as variable
const name = "some Property";
const value = obj[name];

එම හේතුව නිසා, අරාව මූලද්‍රව්‍ය වෙත ප්‍රවේශ විය හැක්කේ වරහන් අංකනය භාවිතයෙන් පමණි:

const value = arr[5]; // arr.5 would be a syntax error

// property name / index as variable
const x = 5;
const value = arr[x];

ඉන්න ... JSON ගැන කුමක් කිව හැකිද?

JSON යනු XML, YAML, CSV සහ වෙනත් අය මෙන් දත්තවල පෙළ නිරූපණයකි. එවැනි දත්ත සමඟ වැඩ කිරීම සඳහා, එය පළමුව ජාවාස්ක්‍රිප්ට් දත්ත වර්ග, එනම් අරා සහ වස්තු බවට පරිවර්තනය කළ යුතුය (සහ ඒවා සමඟ වැඩ කරන්නේ කෙසේද යන්න දැන් පැහැදිලි කර ඇත). ජාවාස්ක්‍රිප්ට් හි JSON විග්‍රහ කරන්නේ කෙසේද යන ප්‍රශ්නයෙන් JSON විග්‍රහ කරන්නේ කෙසේද? .

වැඩිදුර කියවීමේ තොරතුරු

අරා සහ වස්තූන් වෙත ප්‍රවේශ වන්නේ කෙසේද යන්න මූලික ජාවාස්ක්‍රිප්ට් දැනුම වන අතර එබැවින් එම්ඩීඑන් ජාවාස්ක්‍රිප්ට් මාර්ගෝපදේශය , විශේෂයෙන් කොටස් කියවීම සුදුසුය.

කැදැලි දත්ත ව්‍යුහයන්ට ප්‍රවේශ වීම

කැදැලි දත්ත ව්‍යුහයක් යනු වෙනත් අරා හෝ වස්තූන් වෙත යොමු වන අරාව හෝ වස්තුවකි, එනම් එහි අගයන් අරා හෝ වස්තු වේ. තිත් හෝ වරහන් අංකනය අඛණ්ඩව යෙදීමෙන් එවැනි ව්‍යුහයන්ට ප්‍රවේශ විය හැකිය.

මෙන්න උදාහරණයක්:

const data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

nameදෙවන අයිතමයට ප්‍රවේශ වීමට අපට අවශ්‍ය යැයි උපකල්පනය කරමු .

පියවරෙන් පියවර අපට එය කළ හැකි ආකාරය මෙන්න:

අපට පෙනෙන dataපරිදි වස්තුවක් වන බැවින් අපට එහි ගුණාංගවලට තිත් අංකනය භාවිතයෙන් ප්‍රවේශ විය හැකිය. මෙම itemsපහත සඳහන් පරිදි දේපල ප්රවේශ වේ:

data.items

අගය අරාවකි, එහි දෙවන අංගයට ප්‍රවේශ වීම සඳහා අපට වරහන් අංකනය භාවිතා කළ යුතුය:

data.items[1]

මෙම අගය වස්තුවක් වන අතර nameදේපල වෙත ප්‍රවේශ වීම සඳහා අපි නැවත තිත් අංකනය භාවිතා කරමු . එබැවින් අපට අවසානයේ ලැබෙන්නේ:

const item_name = data.items[1].name;

විකල්පයක් ලෙස, අපට ඕනෑම ගුණාංගයක් සඳහා වරහන් අංකනය භාවිතා කළ හැකිව තිබුණි, විශේෂයෙන් නම් නාමයේ අක්ෂර අඩංගු නම් එය තිත් අංකන භාවිතය සඳහා අවලංගු වනු ඇත:

const item_name = data['items'][1]['name'];

මම දේපලකට ප්‍රවේශ වීමට උත්සාහ කළ නමුත් මට `undefined`ආපසු ලැබෙන්නේ පමණක්ද ?

ඔබ ලබා ගන්නා බොහෝ විට undefined, වස්තුව / අරාවෙහි එම නම සහිත දේපලක් නොමැත.

const foo = {bar: {baz: 42}};
console.log(foo.baz); // undefined

වස්තුව / අරාවෙහි ව්‍යුහය භාවිතා කිරීම console.logහෝ console.dirපරීක්ෂා කිරීම. ඔබ ප්‍රවේශ වීමට උත්සාහ කරන දේපල සැබවින්ම අර්ථ දැක්විය හැක්කේ කැදැලි වස්තුවක් / අරාවක් මත ය.

console.log(foo.bar.baz); // 42

දේපල නම් ගතික නම් සහ මම ඒවා කලින් නොදැන සිටියහොත් කුමක් කළ යුතුද?

දේපල නම් නොදන්නා නම් හෝ අපට අරාවෙහි වස්තුවක / මූලද්‍රව්‍යයන්ගේ සියලුම ගුණාංග වෙත ප්‍රවේශ වීමට අවශ්‍ය නම්, අපට වස්තු සඳහා ^[MDN] ලූපය සහ සියලු ගුණාංග / මූලද්‍රව්‍යයන් නැවත සැකසීමට අරා සඳහා for...in ^[MDN] පුඩුවක් භාවිතා කළ හැකිය .for

වස්තු

සියළුම ගුණාංග ඉක්මවා යෑමට data, අපට වස්තුව මත නැවත නැවත යෙදිය හැකිය :

for (const prop in data) {
    // `prop` contains the name of each property, i.e. `'code'` or `'items'`
    // consequently, `data[prop]` refers to the value of each property, i.e.
    // either `42` or the array
}

වස්තුව පැමිණෙන්නේ කොහෙන්ද (සහ ඔබට කිරීමට අවශ්‍ය දේ) මත පදනම්ව, දේපල සැබවින්ම වස්තුවක දේපලක්ද, නැතහොත් එය උරුම වූ දේපලක්ද යන්න එක් එක් නැවතීමේ දී ඔබට පරීක්ෂා කිරීමට සිදු විය හැකිය. ඔබට මෙය Object#hasOwnProperty ^[MDN] සමඟ කළ හැකිය .

for...inසමඟ විකල්පයක් ලෙස hasOwnProperty, ඔබට දේපල නම් රාශියක් ලබා ගැනීමට Object.keys ^[MDN] භාවිතා කළ හැකිය :

Object.keys(data).forEach(function(prop) {
  // `prop` is the property name
  // `data[prop]` is the property value
});

අරා

data.items අරාවේ සියලුම මූලද්‍රව්‍යයන් නැවත සැකසීමට , අපි forලූපයක් භාවිතා කරමු :

for(let i = 0, l = data.items.length; i < l; i++) {
    // `i` will take on the values `0`, `1`, `2`,..., i.e. in each iteration
    // we can access the next element in the array with `data.items[i]`, example:
    // 
    // var obj = data.items[i];
    // 
    // Since each element is an object (in our example),
    // we can now access the objects properties with `obj.id` and `obj.name`. 
    // We could also use `data.items[i].id`.
}

for...inඅරා හරහා නැවත යෙදීම සඳහා යමෙකුට භාවිතා කළ හැකි නමුත් මෙය වළක්වා ගත යුතු හේතු තිබේ: ජාවාස්ක්‍රිප්ට් හි අරා සමඟ 'සඳහා (ලැයිස්තුවේ ඇති අයිතම අයිතමය)' සඳහා ඇයි? .

ECMAScript 5 හි වැඩි වන බ්‍රව්සර් සහාය සමඟ, අරාව ක්‍රමය forEach ^[MDN] සිත්ගන්නා විකල්පයක් බවට පත්වේ:

data.items.forEach(function(value, index, array) {
    // The callback is executed for each element in the array.
    // `value` is the element itself (equivalent to `array[index]`)
    // `index` will be the index of the element in the array
    // `array` is a reference to the array itself (i.e. `data.items` in this case)
});

ES2015 (ES6) සඳහා සහය දක්වන පරිසරවලදී, ඔබට ^[MDN] පුඩුවක් භාවිතා කළ හැකිය , එය අරා සඳහා පමණක් නොව ඕනෑම නැවත ක්‍රියාත්මක කළ හැකි දේ සඳහාද ක්‍රියා කරයි :for...of

for (const item of data.items) {
   // `item` is the array element, **not** the index
}

එක් එක් පුනරාවර්තනයේ දී, for...ofනැවත නැවත යෙදිය හැකි ඊළඟ අංගය අපට ලබා දෙයි , ප්‍රවේශ වීමට හෝ භාවිතා කිරීමට "දර්ශකයක්" නොමැත.

දත්ත ව්‍යුහයේ “ගැඹුර” මා නොදන්නේ නම් කුමක් කළ යුතුද?

නොදන්නා යතුරු වලට අමතරව, දත්ත ව්‍යුහයේ “ගැඹුර” (එනම් එහි ඇති කැදැලි වස්තූන් කීයක්) ද නොදැන සිටිය හැකිය. ගැඹුරට කැදැලි සහිත දේපල වලට ප්‍රවේශ වන්නේ කෙසේද යන්න සාමාන්‍යයෙන් රඳා පවතින්නේ නිශ්චිත දත්ත ව්‍යුහය මත ය.

නමුත් දත්ත ව්‍යුහයේ පුනරාවර්තන රටා තිබේ නම්, උදා: ද්විමය ගසක් නිරූපණය කිරීම, විසඳුමට සාමාන්‍යයෙන් ඇතුළත් වන්නේ දත්ත ව්‍යුහයේ සෑම මට්ටමකටම පුනරාවර්තන ලෙස ^{[විකිපීඩියා]} ප්‍රවේශ වීමයි.

ද්විමය ගසක පළමු පත්‍ර නෝඩය ලබා ගැනීම සඳහා උදාහරණයක් මෙන්න:

function getLeaf(node) {
    if (node.leftChild) {
        return getLeaf(node.leftChild); // <- recursive call
    }
    else if (node.rightChild) {
        return getLeaf(node.rightChild); // <- recursive call
    }
    else { // node must be a leaf node
        return node;
    }
}

const first_leaf = getLeaf(root);

කේත ස්නිපටය පෙන්වන්න

const root = {
    leftChild: {
        leftChild: {
            leftChild: null,
            rightChild: null,
            data: 42
        },
        rightChild: {
            leftChild: null,
            rightChild: null,
            data: 5
        }
    },
    rightChild: {
        leftChild: {
            leftChild: null,
            rightChild: null,
            data: 6
        },
        rightChild: {
            leftChild: null,
            rightChild: null,
            data: 7
        }
    }
};
function getLeaf(node) {
    if (node.leftChild) {
        return getLeaf(node.leftChild);
    } else if (node.rightChild) {
        return getLeaf(node.rightChild);
    } else { // node must be a leaf node
        return node;
    }
}

console.log(getLeaf(root).data);

කැදැලි වස්තු, අරා හෝ JSON වෙත ප්‍රවේශ වී ක්‍රියා කරන්නේ කෙසේද?

මූලික කරුණු

ඉන්න ... JSON ගැන කුමක් කිව හැකිද?

වැඩිදුර කියවීමේ තොරතුරු

කැදැලි දත්ත ව්‍යුහයන්ට ප්‍රවේශ වීම

මම දේපලකට ප්‍රවේශ වීමට උත්සාහ කළ නමුත් මට undefinedආපසු ලැබෙන්නේ පමණක්ද ?

දේපල නම් ගතික නම් සහ මම ඒවා කලින් නොදැන සිටියහොත් කුමක් කළ යුතුද?

දත්ත ව්‍යුහයේ “ගැඹුර” මා නොදන්නේ නම් කුමක් කළ යුතුද?

උදව්කරුවන්

Object.keys(), Object.values()(ES 2017) සහ Object.entries()(ES 2017)

Object.entries() ලූපයක් සහ විනාශකාරී පැවරුමක් සමඟ

Array.prototype.every() සහ Array.prototype.some()

Array.prototype.find() සහ Array.prototype.filter()

Array.prototype.map()

Array.prototype.reduce()

1. ඔලිවර් ස්ටීල්ගේ කැදැලි වස්තු ප්‍රවේශ රටාව

2. අරා අඩු කිරීම භාවිතා කරමින් කැදැලි වස්තු වෙත ප්‍රවේශ වන්න

අන්ඩර්ස්කෝර් ජේඑස් වේ

විසඳුමක්:

ගතික ප්‍රවේශය

මම දේපලකට ප්‍රවේශ වීමට උත්සාහ කළ නමුත් මට `undefined`ආපසු ලැබෙන්නේ පමණක්ද ?

`Object.keys()`, `Object.values()`(ES 2017) සහ `Object.entries()`(ES 2017)

`Object.entries()` ලූපයක් සහ විනාශකාරී පැවරුමක් සමඟ

`Array.prototype.every()` සහ `Array.prototype.some()`

`Array.prototype.find()` සහ `Array.prototype.filter()`

`Array.prototype.map()`

`Array.prototype.reduce()`