เข้าถึงคุณสมบัติวัตถุแบบไดนามิกโดยใช้ตัวแปร

ฉันกำลังพยายามเข้าถึงคุณสมบัติของวัตถุโดยใช้ชื่อแบบไดนามิก เป็นไปได้ไหม

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

มีสองวิธีในการเข้าถึงคุณสมบัติของวัตถุ:

• เครื่องหมายจุด: something.bar
• เครื่องหมายวงเล็บ: something['bar']

ค่าระหว่างวงเล็บสามารถเป็นนิพจน์ใด ๆ ก็ได้ ดังนั้นหากชื่อคุณสมบัติถูกเก็บไว้ในตัวแปรคุณต้องใช้เครื่องหมายวงเล็บ:

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

นี่คือทางออกของฉัน:

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

ตัวอย่างการใช้งาน:

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'})

ในจาวาสคริปต์เราสามารถเข้าถึงด้วย:

• เครื่องหมายจุด - foo.bar
• วงเล็บเหลี่ยม - foo[someVar]หรือfoo["string"]

แต่เฉพาะกรณีที่สองเท่านั้นที่อนุญาตให้เข้าถึงคุณสมบัติแบบไดนามิก:

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

ต่อไปนี้เป็นตัวอย่าง ES6 ของวิธีที่คุณสามารถเข้าถึงคุณสมบัติของวัตถุโดยใช้ชื่อคุณสมบัติที่สร้างขึ้นแบบไดนามิกโดยเชื่อมสองสายเข้าด้วยกัน

var suffix = " name";

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

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

สิ่งนี้เรียกว่าชื่อคุณสมบัติที่คำนวณได้

คุณสามารถทำสิ่งนี้ได้หลายวิธี

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

foo.bar;
foo['bar'];

เครื่องหมายวงเล็บมีประสิทธิภาพเป็นพิเศษเพราะช่วยให้คุณเข้าถึงคุณสมบัติตามตัวแปร:

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

let prop = 'bar';

foo[prop];

สิ่งนี้สามารถขยายเพื่อวนลูปมากกว่าทุกคุณสมบัติของวัตถุ สิ่งนี้อาจดูเหมือนซ้ำซ้อนเนื่องจากโครงสร้าง JavaScript ที่ใหม่กว่าเช่น ... ของ ... แต่ช่วยอธิบายกรณีการใช้งาน:

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

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

ทั้งจุดและเครื่องหมายวงเล็บยังทำงานตามที่คาดไว้สำหรับวัตถุที่ซ้อนกัน:

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

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

การทำลายวัตถุ

นอกจากนี้เรายังสามารถพิจารณาการทำลายวัตถุเป็นวิธีการเข้าถึงคุณสมบัติในวัตถุ แต่เป็นดังนี้:

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'

คุณสามารถทำได้เช่นนี้โดยใช้ Lodash

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

ปรับปรุง

ฉันได้นำความคิดเห็นด้านล่างมาพิจารณาและตกลงกัน หลีกเลี่ยงการใช้ Eval

การเข้าถึงคุณสมบัติรูทในวัตถุสามารถทำได้อย่างง่ายดายobj[variable]แต่การซ้อนสิ่งที่ซับซ้อน lodash.getไม่ต้องเขียนโค้ดเขียนแล้วฉันขอแนะนำให้ใช้

ตัวอย่าง

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

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

สามารถใช้งาน Lodash ได้หลายวิธีต่อไปนี้คือลิงก์ไปยังเอกสารคู่มือ lodash.get

เมื่อใดก็ตามที่คุณต้องการเข้าถึงคุณสมบัติแบบไดนามิกคุณจะต้องใช้ตัวยึดสี่เหลี่ยมเพื่อเข้าถึงคุณสมบัติที่ไม่ใช่ "" ไวยากรณ์ของโอเปอเรเตอร์
: object [propery}

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])

ฉันเจอกรณีที่ฉันคิดฉันต้องการส่ง "ที่อยู่" ของคุณสมบัติวัตถุเป็นข้อมูลไปยังฟังก์ชันอื่นและเติมวัตถุ (ด้วย AJAX) ทำการค้นหาจากอาร์เรย์ที่อยู่และแสดงในฟังก์ชันอื่นนั้น ฉันไม่สามารถใช้เครื่องหมายจุดได้โดยไม่ต้องใช้สายกายกรรมดังนั้นฉันจึงคิดว่าอาร์เรย์น่าจะผ่านได้ดี ฉันลงเอยด้วยการทำสิ่งที่แตกต่างกันอยู่ดี

นี่คือตัวอย่างของวัตถุไฟล์ภาษาเช่นเดียวกับที่ฉันต้องการข้อมูลจาก:

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

ฉันต้องการผ่านอาร์เรย์เช่น: ["audioPlayer", "controls", "stop"] เพื่อเข้าถึงข้อความภาษา "หยุด" ในกรณีนี้

ฉันสร้างฟังก์ชั่นเล็ก ๆ นี้ที่ค้นหาพารามิเตอร์ที่อยู่ "น้อยที่สุด" (ครั้งแรก) และมอบหมายวัตถุที่ส่งคืนให้กับตัวเองอีกครั้ง จากนั้นพร้อมที่จะค้นหาพารามิเตอร์ที่อยู่เฉพาะถัดไปหากมีอยู่

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

การใช้งาน:

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

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

มันน่าสนใจเมื่อคุณต้องส่งพารามิเตอร์ไปยังฟังก์ชั่นนี้เช่นกัน

รหัส 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 // ตรวจสอบตัวแปรที่ซ้อนกันอย่างลึกซึ้ง

โค้ดง่าย ๆ นี้สามารถตรวจสอบการมีอยู่ของตัวแปร / ค่าที่ซ้อนกันได้โดยไม่ต้องตรวจสอบแต่ละตัวแปรตลอดทาง ...

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

อดีต - อาร์เรย์ของวัตถุที่ซ้อนกันอย่างล้ำลึก:

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

แทน :

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

ตอนนี้เราสามารถ:

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

ไชโย!

ฉันถามคำถามที่ทำซ้ำในหัวข้อนี้ในขณะที่กลับมาและหลังจากการวิจัยมากเกินไปและเห็นข้อมูลที่ขาดหายไปมากมายที่ควรจะอยู่ที่นี่ฉันรู้สึกว่าฉันมีสิ่งที่มีค่าในการเพิ่มในโพสต์เก่านี้

• ประการแรกฉันต้องการที่อยู่ว่ามีหลายวิธีในการรับค่าของคุณสมบัติและเก็บไว้ในตัวแปรแบบไดนามิก วิธีแรกที่ได้รับความนิยมและง่ายที่สุด IMHO คือ:

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

แต่ฉันไม่ค่อยไปเส้นทางนี้เพราะมันใช้ไม่ได้กับค่าคุณสมบัติที่กำหนดผ่านสไตล์ชีท เพื่อให้ตัวอย่างแก่คุณฉันจะสาธิตด้วยโค้ดหลอก

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

ใช้ตัวอย่างรหัสด้านบน หากคุณสมบัติความกว้างขององค์ประกอบ div ที่เก็บไว้ในตัวแปร 'elem' ถูกจัดรูปแบบในสไตล์ชีต CSS และไม่ได้เรียกใช้ภายในแท็ก HTML คุณไม่ต้องสงสัยเลยว่าจะได้รับค่าตอบแทนที่เก็บไว้ภายใน ของตัวแปร cssProp ค่าที่ไม่ได้กำหนดเกิดขึ้นเนื่องจากในการสั่งซื้อเพื่อรับค่าที่ถูกต้องรหัสที่เขียนภายใน CSS Style-Sheet จะต้องมีการคำนวณตามลำดับเพื่อให้ได้ค่าดังนั้น; คุณต้องใช้วิธีการที่จะคำนวณมูลค่าของทรัพย์สินที่มีค่าอยู่ในสไตล์ชีท

• ต่อจากนี้ไปวิธี getComputedStyle ()!

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

W3Schools getComputedValue Docนี่เป็นตัวอย่างที่ดีและให้คุณเล่นกับมันได้อย่างไรก็ตามลิงก์นี้Mozilla CSS getComputedValue docพูดถึงรายละเอียดเกี่ยวกับฟังก์ชั่น getComputedValue และควรอ่านโดยนักพัฒนาที่ต้องการไม่ชัดเจนในเรื่องนี้

• ในฐานะที่เป็นบันทึกย่อด้านวิธี getComputedValue ได้รับเท่านั้นมันไม่ได้ตั้ง เห็นได้ชัดว่านี่เป็นข้อเสียที่สำคัญ แต่มีวิธีการที่ได้รับจาก CSS สไตล์ชีทเช่นเดียวกับการตั้งค่าแม้ว่ามันจะไม่ใช่จาวาสคริปต์มาตรฐาน วิธีการ JQuery ...

$(selector).css(property,value)

... ได้รับและตั้งค่า มันเป็นสิ่งที่ฉันใช้ข้อเสียเพียงอย่างเดียวคือคุณต้องรู้จัก JQuery แต่นี่เป็นหนึ่งในเหตุผลที่ดีมากที่นักพัฒนา Javascript ทุกคนควรเรียนรู้ JQuery มันทำให้ชีวิตง่ายขึ้นและมีวิธีการเช่นนี้ ไม่สามารถใช้ได้กับ Javascript มาตรฐาน หวังว่านี่จะช่วยให้ใครบางคน !!!

สำหรับทุกคนที่ต้องการกำหนดค่าของตัวแปรที่ซ้อนกันนี่คือวิธีการ:

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

เอกสารประกอบ: https://lodash.com/docs/4.17.15#set

นอกจากนี้ยังมีเอกสารประกอบหากคุณต้องการรับค่า: https://lodash.com/docs/4.17.15#get

คุณควรใช้JSON.parseลองดูที่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}\`];