ค้นหาวัตถุโดย id ในอาร์เรย์ของวัตถุ JavaScript


1545

ฉันมีชุด:

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}, etc.]

ฉันไม่สามารถเปลี่ยนโครงสร้างของอาร์เรย์ได้ ฉันถูกส่งผ่าน ID ของ45และฉันต้องการที่จะได้รับ'bar'สำหรับวัตถุนั้นในอาร์เรย์

ฉันจะทำสิ่งนี้ใน JavaScript หรือใช้ jQuery ได้อย่างไร

คำตอบ:


1187

ใช้find()วิธีการ:

myArray.find(x => x.id === '45').foo;

จากMDN :

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


หากคุณต้องการค้นหาดัชนีแทนให้ใช้findIndex():

myArray.findIndex(x => x.id === '45');

จากMDN :

findIndex()วิธีการส่งกลับดัชนีขององค์ประกอบแรกในอาร์เรย์ที่น่าพอใจที่ให้ฟังก์ชั่นการทดสอบ มิฉะนั้นจะถูกส่งกลับ -1


หากคุณต้องการรับอาร์เรย์ขององค์ประกอบที่ตรงกันให้ใช้filter()วิธีการแทน:

myArray.filter(x => x.id === '45');

นี่จะส่งคืนอาร์เรย์ของวัตถุ หากคุณต้องการได้รับfooคุณสมบัติมากมายคุณสามารถทำได้ด้วยmap()วิธีการ:

myArray.filter(x => x.id === '45').map(x => x.foo);

บันทึก Side: วิธีการเช่นfind()หรือfilter()และลูกศรฟังก์ชั่นที่ไม่ได้รับการสนับสนุนจากเบราว์เซอร์รุ่นเก่า (เช่น IE) ดังนั้นถ้าคุณต้องการที่จะสนับสนุนเบราว์เซอร์เหล่านี้คุณควร transpile รหัสของคุณโดยใช้บาเบล (ที่มีpolyfill )


2
สำหรับเงื่อนไขการทดสอบที่หลากหลายดังนั้นจึงเป็นสิ่งที่ต้องการ: myArray.find (x => x.id === '45' && x.color == 'red') foo
Apqu

2
สำหรับฉันคำตอบที่ดีที่สุดจนถึงตอนนี้ ไม่ต้องการ jQuery ไม่ได้สร้างอาร์เรย์ที่คุ้นเคยใหม่
Canta

myArray.find (x => x.id === '45') มันไม่ทำงานบน mac PC
Govinda Rajbhar

@TJCrowder ฉันไม่คิดว่ามันเป็นความคิดที่ดีที่จะคัดลอกโพลีฟิลจาก MDN ลงในรหัสของคุณ คุณควรใช้แพ็กเกจ npm แทน polyfills และบาเบลไม่รวม polyfills สำหรับ ES2015 + คุณสมบัติในBabel-polyfillแพคเกจ
MichałPerłakowski

2
myArray.find (x => x.id === '45') foo; โยนข้อยกเว้นหากไม่มีวัตถุที่มี ID เป็น '45'
Frazer Kirkman

1466

เนื่องจากคุณใช้ jQuery อยู่แล้วคุณสามารถใช้ฟังก์ชันgrepซึ่งมีวัตถุประสงค์เพื่อค้นหาอาร์เรย์:

var result = $.grep(myArray, function(e){ return e.id == id; });

ผลลัพธ์คืออาร์เรย์ที่มีรายการที่พบ หากคุณรู้ว่าวัตถุนั้นอยู่ที่นั่นเสมอและมันเกิดขึ้นเพียงครั้งเดียวคุณสามารถใช้result[0].fooเพื่อรับค่า มิฉะนั้นคุณควรตรวจสอบความยาวของอาร์เรย์ผลลัพธ์ ตัวอย่าง:

if (result.length === 0) {
  // no result found
} else if (result.length === 1) {
  // property found, access the foo property using result[0].foo
} else {
  // multiple items found
}

124
มันปลอดภัยกว่าที่จะใช้===แทน==เพื่อหลีกเลี่ยงปัญหาแปลก ๆ กับ==ผู้ให้บริการของ JavaScript
Vicky Chijwani

11
@VickyChijwani: มีปัญหาใด ๆ เมื่อเปรียบเทียบสตริงกับสตริงหรือไม่
Guffa

38
ดีถ้าคุณอย่างแน่ใจว่าทั้งสองe.idและจะเป็นสตริงฉันคิดว่ามันตกลงที่จะใช้id ==แต่ถ้าคุณไม่แน่ใจว่าคุณอาจประสบปัญหา (ตั้งแต่'' == 0เป็นtrueแต่'' === 0เป็นfalse) ไม่ต้องพูดถึง===ดูเหมือนว่าจะเร็วขึ้น ( stackoverflow.com/questions/359494/… )
Vicky Chijwani

101
โดยทั่วไปฉันมักจะใช้===เพราะมันทำงานตรงเช่น==ในการเขียนโปรแกรมภาษาอื่น ๆ ฉันถือว่า==ไม่มีอยู่ใน JavaScript
Vicky Chijwani

6
@de คำตอบมากมายที่นี่ให้พฤติกรรมที่ตั้งใจเมื่อค้นหาค่าที่ไม่ซ้ำ; คุณสามารถจำพวกเขาได้จากข้อเท็จจริงที่ว่าพวกเขากลับมาหรือหยุดพักจากวงของพวกเขา แต่เนิ่นๆ (หรือสั่งการสร้างระดับล่างเพื่อหยุดการวนซ้ำ) ดูคำตอบของ JaredPar สำหรับตัวอย่างที่เป็นที่ยอมรับและความคิดเห็นของ Aaronius ในคำตอบนั้นเพื่อความเข้าใจที่ลึกซึ้ง โดยทั่วไปผู้คนจะแยกความแตกต่างระหว่างฟังก์ชั่น "ตัวกรอง" และ "ค้นหา" ด้วยวิธีนี้ แต่คำศัพท์จะแตกต่างกันไป แม้ว่าจะมีประสิทธิภาพมากกว่านี้ก็ยังเป็นการค้นหาเชิงเส้นดังนั้นหากคุณต้องการใช้ตารางแฮชดูคำตอบของ Aaron Digulla (ระวังรายละเอียดโดยนัย)
TNE

362

อีกวิธีหนึ่งคือการสร้างวัตถุค้นหา:

var lookup = {};
for (var i = 0, len = array.length; i < len; i++) {
    lookup[array[i].id] = array[i];
}

... now you can use lookup[id]...

สิ่งนี้น่าสนใจเป็นพิเศษหากคุณต้องค้นหาหลายอย่าง

สิ่งนี้ไม่ต้องการหน่วยความจำเพิ่มอีกเนื่องจากจะมีการแชร์ ID และวัตถุ


6
สิ่งที่ฉันกำลังมองหา ตลกวิธีที่ฉันพยายามทำให้มันยุ่งยากโดยพยายามวนซ้ำในแต่ละครั้งลบแต่ละรายการออกจากรายการตามที่ฉันพบเมื่อฉันต้องการเปลี่ยนแปลงข้อมูลที่ได้รับจาก CouchDB และทำให้เป็นรูปแบบที่มีประโยชน์สำหรับฉัน จำเป็น +1 ท่าน!
slickplaid

5
นี่คือสมาร์ท ฉันไม่สามารถจินตนาการได้ว่าคนอื่นจะโน้มน้าวใจได้อย่างไรด้วยการดูอาร์เรย์ทั้งหมดสำหรับการใช้งานแต่ละครั้ง
Aladdin Mhemed

4
ตราบใดที่คุณไม่ต้องพึ่งพาคำสั่งของคุณสมบัติ: stackoverflow.com/questions/4886314/ …
Marle1 1

กำลังใช้ตัวแบ่ง ในลูปตัวเลือกที่ดี / การปรับปรุงถ้าคุณรู้ว่ามีเพียงวัตถุเดียวที่จะหา?
irJvV

7
@irJvV: ไม่มันไม่สมเหตุสมผลเลย รหัสด้านบนมีประโยชน์ถ้าคุณต้องค้นหาหลายอย่าง หากคุณดูเพียงครั้งเดียวการสร้างlookupวัตถุก็เป็นการเสียเวลาเปล่า
Aaron Digulla

174

ECMAScript 2015มีวิธีค้นหา ()ในอาร์เรย์:

var myArray = [
 {id:1, name:"bob"},
 {id:2, name:"dan"},
 {id:3, name:"barb"},
]

// grab the Array item which matchs the id "2"
var item = myArray.find(item => item.id === 2);

// print
console.log(item.name);

มันทำงานโดยไม่มีห้องสมุดภายนอก แต่ถ้าคุณต้องการการสนับสนุนเบราว์เซอร์รุ่นเก่าที่คุณอาจต้องการที่จะรวมpolyfill นี้


1
อาจจะทำให้มันยังดูเหมือนมากทดลองและไม่เบราว์เซอร์หลายสนับสนุนมัน developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
lejonl

2
สิ่งนี้สามารถทำให้ง่ายmyArray.find(d=>d.id===45).foo;ขึ้น
Shaggy

1
@Shaggy myArray.find(({ id }) => id === 45).fooหรือแม้กระทั่ง แต่นี่เป็นคำตอบเก่าที่เขียนก่อนไวยากรณ์ ES2015 ก็ได้รับการสนับสนุนเช่นกันในขณะนี้ คำตอบของ @ Gothdo เป็นคำตอบล่าสุดในเธรด
Rúnar Berg

1
@Shaggy ถ้า. find () ส่งคืนค่าที่ไม่ได้กำหนดดังนั้นการเพิ่มประสิทธิภาพของคุณจะเกิดข้อผิดพลาด ดังนั้นโซลูชันนี้สามารถใช้ได้เฉพาะในกรณีที่รับประกันการแข่งขัน
เฮอร์เบิร์ตปีเตอร์ส

1
@HerbertPeters หากคุณต้องการให้แน่ใจว่าคุณสามารถเสมอ null ตรวจสอบซึ่งจะเป็นเรื่องง่ายกับการผูกมัดตัวเลือกmyArray.find(d => d.id === 45)?.foo :
Rúnar Berg

141

Underscore.jsมีวิธีที่ดีสำหรับสิ่งนั้น:

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'},etc.]
obj = _.find(myArray, function(obj) { return obj.id == '45' })

42
สำหรับบันทึกนั้น Lo-Dash (ซึ่งมักจะมีประสิทธิภาพมากกว่า Underscore) มีวิธีการที่คล้ายกัน เอกสารที่นี่: lodash.com/docs#find
user456584

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

@Foreever จากเอกสารของ _.find: "ฟังก์ชันจะส่งคืนทันทีที่พบองค์ประกอบที่ยอมรับได้และไม่ข้ามรายการทั้งหมด"
GijsjanB

129

ฉันคิดว่าวิธีที่ง่ายที่สุดน่าจะเป็นดังต่อไปนี้ แต่มันจะไม่ทำงานบน Internet Explorer 8 (หรือก่อนหน้า):

var result = myArray.filter(function(v) {
    return v.id === '45'; // Filter out the appropriate one
})[0].foo; // Get result and access the foo property

ฉันอยากรู้อยากเห็นมีประโยชน์การแสดงที่นี่เมื่อเทียบกับปกติforหรือไม่?
Igor Zinov'yev

@Igor Zinov'yev: ใช่แน่นอนมีผลกระทบต่อประสิทธิภาพการทำงานกับเครื่องมืออาร์เรย์ ES5 เหล่านั้น มีการดำเนินการฟังก์ชันแยกต่างหากสำหรับแต่ละองค์ประกอบดังนั้นจึงไม่เร็วเมื่อเทียบกับการforวนซ้ำโดยตรง
pimvdb

ดังนั้นคุณจะบอกว่ามันจะช้าลง? นอกจากนี้มันจะสแกนอาร์เรย์ทั้งหมดเสมอเท่าที่ฉันเห็นในขณะที่forลูปจะสิ้นสุดในนัดแรก
Igor Zinov'yev

หากคุณต้องการการสนับสนุนสำหรับ IE8 เพียงแค่ปล่อยสิ่งนี้ใน: stackoverflow.com/questions/7153470/…
Adam Grant

รหัสนี้จะโยนข้อผิดพลาดหากไม่มีองค์ประกอบด้วยid
Stan

71

ลองทำสิ่งต่อไปนี้

function findById(source, id) {
  for (var i = 0; i < source.length; i++) {
    if (source[i].id === id) {
      return source[i];
    }
  }
  throw "Couldn't find object with id: " + id;
}

17
นี่ไม่คุ้มค่ากับคำตอบของตัวเอง แต่ในเบราว์เซอร์ที่ทันสมัยโซลูชันนี้สามารถเขียนเป็น: jsfiddle.net/rwaldron/j3vST
Rick

12
หากคุณต้องการประสิทธิภาพโปรดทราบว่าตัวอย่างนี้น่าจะเร็วกว่าการใช้ตัวกรอง () (ดูตัวอย่างของ Rick) เนื่องจากสิ่งนี้จะส่งคืนเมื่อพบรายการแรกที่ตรงกันในขณะที่ตัวกรอง () ทำงานต่อไปเรื่อย ๆ การจับคู่. อันนี้ไม่มีค่าใช้จ่ายในการสร้างอาร์เรย์เพิ่มเติมหรือเรียกฟังก์ชันสำหรับแต่ละรายการ
Aaronius

3
@Rick สิ่งที่น่าสนใจที่สุดเกี่ยวกับคำตอบนั้นเห็นได้ชัดว่าคุณสามารถเพิ่มคอนโซล firebug ไปยังหน้าต่างแสดงผลใน jsFiddle นี่ดีกว่าการบันทึกและบอกให้คนอื่นเปิดคอนโซลเพื่อดูผลลัพธ์ ! น่ากลัว
KyleMit

1
เนื่องจากไม่มีใครพูดถึงมันฉันต้องการเพิ่มว่า AngularJS ยังมีวิธีการกรอง
Eno



31

รุ่นทั่วไปและยืดหยุ่นมากขึ้นของฟังก์ชัน findById ด้านบน:

// array = [{key:value},{key:value}]
function objectFindByKey(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return array[i];
        }
    }
    return null;
}

var array = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];
var result_obj = objectFindByKey(array, 'id', '45');

15

คุณสามารถรับสิ่งนี้ได้อย่างง่ายดายโดยใช้ฟังก์ชั่นแผนที่ () :

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];

var found = $.map(myArray, function(val) {
    return val.id == 45 ? val.foo : null;
});

//found[0] == "bar";

ตัวอย่างการทำงาน: http://jsfiddle.net/hunter/Pxaua/


1
ฉันลืมเกี่ยวกับความจริงที่ว่า jQuery mapลบnullองค์ประกอบโดยอัตโนมัติ มันฟังดูเข้าใจผิดสำหรับฉันและแนวคิดทั่วไปmapเนื่องจากผลลัพธ์ไม่ได้มีความยาวเท่ากันของคอลเลกชันดั้งเดิม
MaxArt

14

คุณสามารถใช้ตัวกรอง

  function getById(id, myArray) {
    return myArray.filter(function(obj) {
      if(obj.id == id) {
        return obj 
      }
    })[0]
  }

get_my_obj = getById(73, myArray);

1
@TobiasBeuving - ผู้ใช้ Array.find () เป็น JS ธรรมดาและควรหยุดในการค้นหาครั้งแรกดังนั้นจะมีประสิทธิภาพมากขึ้น
Adrian Lynch

12

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

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

var items = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];

var lookup = items.reduce((o,i)=>o[i.id]=o,{});

จากนั้นคุณสามารถไปที่ไอเท็มในเวลาที่กำหนดเช่นนี้:

var bar = o[id];

คุณอาจพิจารณาใช้แผนที่แทนการค้นหาวัตถุ: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map


11

ใช้ภาษาพื้นเมือง Array.reduce

var array = [ {'id':'73' ,'foo':'bar'} , {'id':'45' ,'foo':'bar'} , ];
var id = 73;
var found = array.reduce(function(a, b){
    return (a.id==id && a) || (b.id == id && b)
});

ส่งคืนองค์ประกอบวัตถุหากพบมิฉะนั้น false


เพียงแค่ทราบ Array.reduce ไม่รองรับใน IE8 และใต้
Burn_E99

7

หากคุณทำเช่นนี้หลายครั้งคุณอาจตั้งค่าแผนที่ (ES6):

const map = new Map( myArray.map(el => [el.id, el]) );

จากนั้นคุณสามารถทำได้:

map.get(27).foo

6

นี่คือวิธีที่ฉันจะใช้ JavaScript อย่างบริสุทธิ์ใจในวิธีที่น้อยที่สุดที่ฉันสามารถนึกได้ว่าทำงานใน ECMAScript 3 หรือใหม่กว่า มันจะกลับมาทันทีที่พบการแข่งขัน

var getKeyValueById = function(array, key, id) {
    var testArray = array.slice(), test;
    while(test = testArray.pop()) {
        if (test.id === id) {
            return test[key];
        }
    }
    // return undefined if no matching id is found in array
    return;
}

var myArray = [{'id':'73', 'foo':'bar'}, {'id':'45', 'foo':'bar'}]
var result = getKeyValueById(myArray, 'foo', '45');

// result is 'bar', obtained from object with id of '45'

5

ทั่วไปมากขึ้นและสั้น

function findFromArray(array,key,value) {
        return array.filter(function (element) {
            return element[key] == value;
        }).shift();
}

ในกรณีของคุณเช่น var element = findFromArray(myArray,'id',45)ที่จะให้องค์ประกอบทั้งหมด


4

คุณสามารถลองใช้ Sugarjs ได้จากhttp://sugarjs.com/ http://sugarjs.com/

มันมีวิธีการที่แสนหวานในอาเร.findย์ ดังนั้นคุณสามารถหาองค์ประกอบดังนี้:

array.find( {id: 75} );

คุณอาจส่งผ่านวัตถุที่มีคุณสมบัติเพิ่มเติมไปยังวัตถุเพื่อเพิ่ม "where-clause" อื่น

โปรดทราบว่า Sugarjs ขยายวัตถุพื้นเมืองและบางคนพิจารณาความชั่วร้ายนี้ ...


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

ความคิดเห็นนี้เกือบ 2 ปีและวันนี้ฉันอยากจะใช้ lodash ต่อไป อย่างไรก็ตามหากคุณต้องการคุณสามารถอ่านเกี่ยวกับหัวข้อนี้ได้ที่เว็บไซต์ Sugarjs พวกเขายืนหยัดในความคิดเห็นของคุณได้ดี: sugarjs.com/native
deepflame

1
ผู้ใช้ทำการขอ javascript หรือ jquery solution เป็นพิเศษโดยเฉพาะ
Tobias Beuving

4

การสร้างคำตอบที่ยอมรับได้:

jQuery:

var foo = $.grep(myArray, function(e){ return e.id === foo_id})
myArray.pop(foo)

หรือ CoffeeScript:

foo = $.grep myArray, (e) -> e.id == foo_id
myArray.pop foo

4

เมื่อเร็ว ๆ นี้ฉันต้องเผชิญกับสิ่งเดียวกันกับที่ฉันต้องการค้นหาสตริงจากอาร์เรย์ขนาดใหญ่

หลังจากค้นหาฉันพบว่ามันจะง่ายต่อการจัดการด้วยรหัสง่าย ๆ :

รหัส:

var items = mydata.filter(function(item){
    return item.word.toLowerCase().startsWith( 'gk );
})

ดูhttps://jsfiddle.net/maheshwaghmare/cfx3p40v/4/

ค้นหาจากสตริง 20k


3

วนซ้ำรายการใด ๆ ในอาร์เรย์ สำหรับทุกรายการที่คุณเยี่ยมชมให้ตรวจสอบ ID ของรายการนั้น หากเป็นการแข่งขันให้ส่งคืน

ถ้าคุณแค่ต้องการ codez teh:

function getId(array, id) {
    for (var i = 0, len = array.length; i < len; i++) {
        if (array[i].id === id) {
            return array[i];
        }
    }
    return null; // Nothing found
}

และสิ่งเดียวกันโดยใช้วิธีการของ ECMAScript 5:

function getId(array, id) {
    var obj = array.filter(function (val) {
        return val.id === id;
    });

    // Filter returns an array, and we just want the matching item.
    return obj[0];
}

3

ตราบใดที่เบราว์เซอร์รองรับECMA-262 , 5th edition (ธันวาคม 2009) สิ่งนี้ควรใช้งานได้เกือบหนึ่งซับ:

var bFound = myArray.some(function (obj) {
    return obj.id === 45;
});

2
เกือบจะ bFoundเป็นเพียงบูลีนที่trueiff องค์ประกอบตรงตามเงื่อนไขที่จำเป็น
MaxArt

3

คุณสามารถทำได้แม้ใน JavaScript ที่บริสุทธิ์โดยใช้ฟังก์ชั่น "filter" ในตัวสำหรับอาร์เรย์:

Array.prototype.filterObjects = function(key, value) {
    return this.filter(function(x) { return x[key] === value; })
}

ดังนั้นตอนนี้เพียงแค่ผ่าน "id" แทนที่keyและ "45" แทนvalueและคุณจะได้รับวัตถุเต็มรูปแบบที่ตรงกับรหัส 45 ดังนั้นจะเป็น

myArr.filterObjects("id", "45");

16
อย่าดัดแปลงวัตถุที่คุณไม่ได้เป็นเจ้าของ
MichałPerłakowski

3

ใช้Array.prototype.filter()ฟังก์ชั่น

การสาธิต : https://jsfiddle.net/sumitridhal/r0cz0w5o/4/

JSON

var jsonObj =[
 {
  "name": "Me",
  "info": {
   "age": "15",
   "favColor": "Green",
   "pets": true
  }
 },
 {
  "name": "Alex",
  "info": {
   "age": "16",
   "favColor": "orange",
   "pets": false
  }
 },
{
  "name": "Kyle",
  "info": {
   "age": "15",
   "favColor": "Blue",
   "pets": false
  }
 }
];

กรอง

var getPerson = function(name){
    return jsonObj.filter(function(obj) {
      return obj.name === name;
    });
}

ฉันจะค้นหาภายในวัตถุที่ซ้อนกันได้อย่างไร Like Pets = false ควรส่งคืนสองวัตถุ
Valay

ใช้.filterวิธีการในobj.infoในวงซ้อน var getPerson = function(name){ return jsonObj.filter(function(obj) { return obj.info.filter(function(info) { return pets === false; }); }); }
สุมิตร Ridhal

คุณสามารถใช้สไตล์ es6 ได้เช่นกัน ... const filterData = jsonObj.filter (obj => obj.name === 'Alex')
DagicCross

3

เราสามารถใช้วิธีการ Jquery $.each()/$.grep()

var data= [];
$.each(array,function(i){if(n !== 5 && i > 4){data.push(item)}}

หรือ

var data = $.grep(array, function( n, i ) {
  return ( n !== 5 && i > 4 );
});

ใช้ไวยากรณ์ ES6:

Array.find, Array.filter, Array.forEach, Array.map

หรือใช้ Lodash https://lodash.com/docs/4.17.10#filter , ขีดล่างhttps://underscorejs.org/#filter


2

ฉันชอบคำตอบของ Aaron Digulla จริง ๆ แต่จำเป็นต้องเก็บวัตถุไว้มากมายเพื่อที่ฉันจะได้ทำซ้ำในภายหลัง ดังนั้นฉันจึงปรับเปลี่ยนเป็น

	var indexer = {};
	for (var i = 0; i < array.length; i++) {
	    indexer[array[i].id] = parseInt(i);
	}
	
	//Then you can access object properties in your array using 
	array[indexer[id]].property


ใช้โซลูชันเดียวกับที่เร็วที่สุดสำหรับการค้นหารายการในอาร์เรย์ แต่การแยกวิเคราะห์ซ้ำซ้อนที่นี่
aleha

1

ใช้:

var retObj ={};
$.each(ArrayOfObjects, function (index, obj) {

        if (obj.id === '5') { // id.toString() if it is int

            retObj = obj;
            return false;
        }
    });
return retObj;

มันควรกลับวัตถุโดย id


คุณสามารถย่อรหัสของคุณโดยใช้ return obj.id === 5 ได้ไหม obj: เท็จ ฉันใช้ $. แต่ละอันเพื่อทำซ้ำอาร์เรย์
marcel

@marcel: นั่นไม่ได้ผล เนื่องจากการคืนค่าเท็จจะสิ้นสุดการวนซ้ำมันจะค้นหาวัตถุเฉพาะถ้ามันเป็นรายการแรกในอาร์เรย์
Guffa

1

วิธีนี้อาจมีประโยชน์เช่นกัน:

Array.prototype.grep = function (key, value) {
    var that = this, ret = [];
    this.forEach(function (elem, index) {
        if (elem[key] === value) {
            ret.push(that[index]);
        }
    });
    return ret.length < 2 ? ret[0] : ret;
};
var bar = myArray.grep("id","45");

ฉันสร้างมันขึ้นมาเหมือนกัน$.grepและถ้าพบวัตถุหนึ่งฟังก์ชันจะคืนค่าวัตถุแทนที่จะเป็นอาร์เรย์


2
อย่าดัดแปลงวัตถุที่คุณไม่ได้เป็นเจ้าของ
MichałPerłakowski

@Gothdo ฉันเห็นด้วย หากมีคนไม่ทราบว่าfunction will return the object, rather than an arrayอาจได้รับข้อผิดพลาด แต่ฉันคิดว่ามันขึ้นอยู่กับผู้ใช้
ถั่วเหลือง

0

เริ่มต้นจากคำตอบของ aggatonนี่คือฟังก์ชั่นที่คืนค่าองค์ประกอบที่ต้องการ (หรือnullหากไม่พบ) โดยกำหนดarrayและcallbackฟังก์ชันที่ส่งคืนค่าความจริงสำหรับองค์ประกอบ "ถูกต้อง":

function findElement(array, callback) {
    var elem;
    return array.some(function(e) {
        if (callback(e)) {
            elem = e;
            return true;
        }
    }) ? elem : null;
});

เพียงจำไว้ว่านี้ไม่ได้ทำงาน natively บน IE8- someขณะที่มันไม่ได้รับการสนับสนุน สามารถจัดหาโพลีฟิลหรือมีforห่วงคลาสสิกเสมอ:

function findElement(array, callback) {
    for (var i = 0; i < array.length; i++)
        if (callback(array[i])) return array[i];
    return null;
});

จริงๆแล้วมันเร็วขึ้นและกะทัดรัดขึ้น แต่ถ้าคุณไม่ต้องการสร้างวงล้อใหม่ฉันแนะนำให้ใช้ไลบรารี่แบบยูทิลิตี้เช่นขีดล่างหรือ Lodash


0

สั้นที่สุด

var theAnswerObj = _.findWhere(array, {id : 42});

1
สิ่งนี้ต้องใช้ไลบรารีขีดล่าง, OP ขอ javascript ธรรมดาหรือโซลูชัน jQuery
Tobias Beuving

2
เมื่อคุณใส่เครื่องหมายขีดล่างนี่ไม่ใช่คำตอบสั้น ๆ !
ทิมโอกิลวี่

-1

พิจารณา "axesOptions" เป็นอาร์เรย์ของวัตถุที่มีรูปแบบวัตถุเป็น {: field_type => 2,: field => [1,3,4]}

function getFieldOptions(axesOptions,choice){
  var fields=[]
  axesOptions.each(function(item){
    if(item.field_type == choice)
        fields= hashToArray(item.fields)
  });
  return fields;
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.