Mengakses properti objek secara dinamis menggunakan variabel

Saya mencoba mengakses properti objek menggunakan nama dinamis. Apakah ini mungkin?

const something = { bar: "Foobar!" };
const foo = 'bar';
something.foo; // The idea is to access something.bar, getting "Foobar!"

Ada dua cara untuk mengakses properti dari suatu objek:

• Notasi dot: something.bar
• Notasi braket: something['bar']

Nilai antara tanda kurung dapat berupa ekspresi apa pun. Oleh karena itu, jika nama properti disimpan dalam variabel, Anda harus menggunakan notasi braket:

var foo = 'bar';
something[foo];
// both x = something[foo] and something[foo] = x work as expected

Ini solusi saya:

function resolve(path, obj) {
    return path.split('.').reduce(function(prev, curr) {
        return prev ? prev[curr] : null
    }, obj || self)
}

Contoh penggunaan:

resolve("document.body.style.width")
// or
resolve("style.width", document.body)
// or even use array indexes
// (someObject has been defined in the question)
resolve("part.0.size", someObject) 
// returns null when intermediate properties are not defined:
resolve('properties.that.do.not.exist', {hello:'world'})

Dalam javascript kita dapat mengakses dengan:

• notasi titik - foo.bar
• kurung kotak - foo[someVar]ataufoo["string"]

Tetapi hanya case kedua yang memungkinkan untuk mengakses properti secara dinamis:

var foo = { pName1 : 1, pName2 : [1, {foo : bar }, 3] , ...}

var name = "pName"
var num  = 1;

foo[name + num]; // 1

// -- 

var a = 2;
var b = 1;
var c = "foo";

foo[name + a][b][c]; // bar

Berikut ini adalah contoh ES6 tentang bagaimana Anda dapat mengakses properti suatu objek menggunakan nama properti yang telah dihasilkan secara dinamis dengan menggabungkan dua string.

var suffix = " name";

var person = {
    ["first" + suffix]: "Nicholas",
    ["last" + suffix]: "Zakas"
};

console.log(person["first name"]);      // "Nicholas"
console.log(person["last name"]);       // "Zakas"

Ini disebut nama properti yang dihitung

Anda dapat mencapai ini dalam beberapa cara yang berbeda.

let foo = {
    bar: 'Hello World'
};

foo.bar;
foo['bar'];

Notasi braket sangat kuat karena memungkinkan Anda mengakses properti berdasarkan variabel:

let foo = {
    bar: 'Hello World'
};

let prop = 'bar';

foo[prop];

Ini dapat diperluas untuk mengulang setiap properti dari suatu objek. Ini bisa tampak berlebihan karena konstruksi JavaScript yang lebih baru seperti untuk ... dari ..., tetapi membantu mengilustrasikan kasus penggunaan:

let foo = {
    bar: 'Hello World',
    baz: 'How are you doing?',
    last: 'Quite alright'
};

for (let prop in foo.getOwnPropertyNames()) {
    console.log(foo[prop]);
}

Notasi titik dan braket juga berfungsi seperti yang diharapkan untuk objek bersarang:

let foo = {
    bar: {
        baz: 'Hello World'
    }
};

foo.bar.baz;
foo['bar']['baz'];
foo.bar['baz'];
foo['bar'].baz;

Destrukturisasi objek

Kita juga dapat mempertimbangkan perusakan objek sebagai sarana untuk mengakses properti di suatu objek, tetapi sebagai berikut:

let foo = {
    bar: 'Hello World',
    baz: 'How are you doing?',
    last: 'Quite alright'
};

let prop = 'last';
let { bar, baz, [prop]: customName } = foo;

// bar = 'Hello World'
// baz = 'How are you doing?'
// customName = 'Quite alright'

Anda bisa melakukannya seperti ini menggunakan Lodash get

_.get(object, 'a[0].b.c');

DIPERBARUI

Saya telah mempertimbangkan komentar di bawah ini dan menyetujui. Eval harus dihindari.

Mengakses properti root pada objek mudah dicapai obj[variable], tetapi bersarang menjadi hal yang rumit. Jangan menulis kode yang sudah ditulis saya sarankan untuk digunakan lodash.get.

Contoh

// Accessing root property
var rootProp = 'rootPropert';
_.get(object, rootProp, defaultValue);

// Accessing nested property
var listOfNestedProperties = [var1, var2];
_.get(object, listOfNestedProperties);

Lodash get dapat digunakan dengan berbagai cara, berikut ini tautan ke dokumentasi lodash.get

Kapan pun Anda perlu mengakses properti secara dinamis, Anda harus menggunakan braket persegi untuk mengakses properti bukan "." Sintaks operator
: objek [layak}

const something = { bar: "Foobar!" };
const foo = 'bar';
// something.foo; -- not correct way at it is expecting foo as proprty in  something={ foo: "value"};
// correct way is  something[foo]
alert( something[foo])

Saya menemukan sebuah kasus di mana saya pikir saya ingin meneruskan "alamat" properti objek sebagai data ke fungsi lain dan mengisi objek (dengan AJAX), melakukan pencarian dari array alamat, dan menampilkan dalam fungsi lainnya. Saya tidak bisa menggunakan notasi titik tanpa melakukan string akrobat, jadi saya pikir array mungkin lebih baik untuk dilewatkan. Saya akhirnya melakukan sesuatu yang berbeda, tetapi sepertinya terkait dengan posting ini.

Berikut ini contoh objek file bahasa seperti yang saya inginkan dari data:

const locs = {
  "audioPlayer": {
    "controls": {
      "start": "start",
      "stop": "stop"
    },
    "heading": "Use controls to start and stop audio."
  }
}

Saya ingin dapat melewatkan array seperti: ["audioPlayer", "kontrol", "stop"] untuk mengakses teks bahasa, "stop" dalam kasus ini.

Saya membuat fungsi kecil ini yang mencari parameter alamat "paling tidak spesifik" (pertama), dan menugaskan kembali objek yang dikembalikan ke dirinya sendiri. Kemudian siap untuk mencari parameter alamat berikutnya yang paling spesifik jika ada.

function getText(selectionArray, obj) {
  selectionArray.forEach(key => {
    obj = obj[key];
  });
  return obj;
}

pemakaian:

/* returns 'stop' */
console.log(getText(["audioPlayer", "controls", "stop"], locs)); 

/* returns 'use controls to start and stop audio.' */
console.log(getText(["audioPlayer", "heading"], locs)); 

Menjadi menarik ketika Anda harus memberikan parameter ke fungsi ini juga.

Kode jsfiddle

var obj = {method:function(p1,p2,p3){console.log("method:",arguments)}}

var str = "method('p1', 'p2', 'p3');"

var match = str.match(/^\s*(\S+)\((.*)\);\s*$/);

var func = match[1]
var parameters = match[2].split(',');
for(var i = 0; i < parameters.length; ++i) {
  // clean up param begninning
    parameters[i] = parameters[i].replace(/^\s*['"]?/,'');
  // clean up param end
  parameters[i] = parameters[i].replace(/['"]?\s*$/,'');
}

obj[func](parameters); // sends parameters as array
obj[func].apply(this, parameters); // sends parameters as individual values

ES5 // Periksa Variabel yang Sangat Bersarang

Sepotong kode sederhana ini dapat memeriksa keberadaan variabel / nilai yang sangat bersarang tanpa harus memeriksa setiap variabel di sepanjang jalan ...

var getValue = function( s, context ){
    return Function.call( context || null, 'return ' + s )();
}

Ex. - berbagai objek yang bersarang:

a = [ 
    {
      b : [
          {
             a : 1,
             b : [
                 {
                    c : 1,
                    d : 2   // we want to check for this
                 }
             ]
           }
      ]
    } 
]

Dari pada :

if(a && a[0] && a[0].b && a[0].b[0] && a[0].b[0].b && a[0].b[0].b[0] && a[0].b[0].b[0].d && a[0].b[0].b[0].d == 2 )  // true

Kita sekarang bisa:

if( getValue('a[0].b[0].b[0].d') == 2 ) // true

Bersulang!

Saya mengajukan pertanyaan yang agak digandakan pada topik ini beberapa waktu lalu, dan setelah penelitian yang berlebihan, dan melihat banyak informasi yang hilang yang seharusnya ada di sini, saya merasa ada sesuatu yang berharga untuk ditambahkan ke pos lama ini.

• Pertama saya ingin membahas bahwa ada beberapa cara untuk mendapatkan nilai properti dan menyimpannya dalam Variabel dinamis. Cara IMHO paling populer pertama dan termudah adalah:

let properyValue = element.style['enter-a-property'];

namun saya jarang menggunakan rute ini karena tidak bekerja pada nilai properti yang ditetapkan melalui style-sheet. Untuk memberi Anda contoh, saya akan menunjukkan dengan sedikit kode semu.

 let elem = document.getElementById('someDiv');
 let cssProp = elem.style['width'];

Menggunakan contoh kode di atas; jika properti lebar elemen div yang disimpan dalam variabel 'elem' ditata dalam lembar gaya CSS, dan tidak ditata di dalam tag HTML-nya, Anda tanpa ragu akan mendapatkan nilai pengembalian dari undefined yang disimpan di dalam dari variabel cssProp. Nilai yang tidak ditentukan terjadi karena untuk mendapatkan nilai yang benar, kode yang ditulis dalam CSS Style-Sheet perlu dihitung untuk mendapatkan nilai, oleh karena itu; Anda harus menggunakan metode yang akan menghitung nilai properti yang nilainya terletak di dalam style-sheet.

• Selanjutnya metode getComputedStyle ()!

function getCssProp(){
  let ele = document.getElementById("test");
  let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}

W3Schools getComputedValue Doc Ini memberikan contoh yang baik, dan memungkinkan Anda bermain dengannya, namun, tautan ini Mozilla CSS getComputedValue doc berbicara tentang fungsi getComputedValue secara terperinci, dan harus dibaca oleh setiap calon pengembang yang tidak sepenuhnya mengerti tentang subjek ini.

• Sebagai catatan, metode getComputedValue hanya didapat, tidak disetel. Ini, jelas merupakan kelemahan utama, namun ada metode yang didapat dari style sheet CSS, serta nilai set, meskipun itu bukan Javascript standar. Metode JQuery ...

$(selector).css(property,value)

... Apakah mendapatkan, dan tidak diatur. Ini yang saya gunakan, satu-satunya downside adalah Anda harus tahu JQuery, tapi ini jujur ​​salah satu dari banyak alasan bagus bahwa setiap Pengembang Javascript harus belajar JQuery, itu hanya membuat hidup lebih mudah, dan menawarkan metode, seperti ini, yang tidak tersedia dengan Javascript standar. Semoga ini bisa membantu seseorang !!!

Bagi siapa pun yang ingin mengatur nilai variabel bersarang, berikut adalah cara melakukannya:

const _ = require('lodash'); //import lodash module

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.set(object, 'a[0].b.c', 4);
console.log(object.a[0].b.c);
// => 4

Dokumentasi: https://lodash.com/docs/4.17.15#set

Juga, dokumentasi jika Anda ingin mendapatkan nilai: https://lodash.com/docs/4.17.15# get

Anda harus menggunakan JSON.parse, lihat di https://www.w3schools.com/js/js_json_parse.asp

const obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}')
console.log(obj.name)
console.log(obj.age)

const something = { bar: "Foobar!" };
const foo = 'bar';

something[\`${foo}\`];