ES6 फैट एरो को .filter () ऑब्जेक्ट्स की एक सरणी का उपयोग कैसे करें


139

मैं .filterवयस्कों (जैक और जिल) को वापस करने के लिए ES6 तीर फ़ंक्शन का उपयोग करने की कोशिश कर रहा हूं । ऐसा प्रतीत होता है कि मैं एक बयान का उपयोग नहीं कर सकता।

ईएस 6 में ऐसा करने के लिए मुझे क्या जानना होगा?

var family = [{"name":"Jack",  "age": 26},
              {"name":"Jill",  "age": 22},
              {"name":"James", "age": 5 },
              {"name":"Jenny", "age": 2 }];

let adults = family.filter(person => if (person.age > 18) person); // throws error

(8:37) SyntaxError: unknown: Unexpected token (8:37)
|let adults = family.filter(person => if (person.age > 18) person);

मेरा काम कर रहे ES5 उदाहरण:

let adults2 = family.filter(function (person) {
  if (person.age > 18) { return person; }
});

((:३ () वाक्य रचना: अज्ञात: अनपेक्षित टोकन (|:३t) | वयस्क होने दें = परिवार।फिल्टर (व्यक्ति => अगर (व्यक्ति. १ 18) लोग);
हेनरी झू

जवाबों:


236

ऐसा प्रतीत होता है कि मैं एक बयान का उपयोग नहीं कर सकता।

एरो फ़ंक्शंस या तो उनके शरीर के रूप में एक अभिव्यक्ति या एक ब्लॉक का उपयोग करने की अनुमति देते हैं । एक अभिव्यक्ति पासिंग

foo => bar

निम्नलिखित ब्लॉक के बराबर है

foo => { return bar; }

तथापि,

if (person.age > 18) person

एक अभिव्यक्ति नहीं है, ifएक कथन है। इसलिए आपको एक ब्लॉक ifफ़ंक्शन का उपयोग करना होगा, यदि आप एक तीर फ़ंक्शन में उपयोग करना चाहते हैं :

foo => {  if (person.age > 18) return person; }

जबकि यह तकनीकी रूप से समस्या को हल करता है, यह एक भ्रामक उपयोग है .filter, क्योंकि यह बताता है कि आपको उस मूल्य को वापस करना होगा जो आउटपुट सरणी में समाहित होना चाहिए। हालाँकि, कॉलबैक को बूलियन.filter को वापस करना चाहिए , या , यह दर्शाता है कि तत्व को नए सरणी में शामिल किया जाना चाहिए या नहीं।truefalse

तो आप सभी की जरूरत है

family.filter(person => person.age > 18);

ES5 में:

family.filter(function (person) {
  return person.age > 18;
});

आह, क्या शानदार व्याख्या है। .Filter () में यदि किसी वस्तु के लिए कुछ भी नहीं लौटाया जाता है, तो उसे गलत माना जाता है? उदाहरण के लिए, आपके ईएस 5 उदाहरण में, केवल सच्चे तत्व वापस किए जाते हैं।
हेनरी झू

2
@ हेंरीझु: हाँ। लेकिन मेरा उदाहरण हमेशा falseया तो लौटता है true, या person.age > 18तो हमेशा या तो होता है । falsetrue
फेलिक्स क्लिंग

"संयुक्त राष्ट्र अवरुद्ध" के साथ संस्करण अगर लौटने वाला था person(निश्चित रूप से यह ऐसा नहीं करता है जैसा आपने बताया ...)। यदि आपका पहला सुधार वास्तव में किया गया था ( foo => { if (person.age > 18) return person }), तो आपको ES5 कोड में ओपी का उपयोग करने वाले सटीक समकक्ष मिलेगा। जबकि यह एक भ्रामक कोड है, यह काम करता है, और समस्या को हल करेगा। return personके साथ ज़बरदस्ती की जाएगी true, और कोई वापसी "वापसी" नहीं होगी undefined, जिसे करने के लिए मजबूर किया जाएगा false
अमित

1
@Amit: ज़रूर। मुझे लगा कि क्योंकि दूसरे जवाब ने यह सुझाव दिया है, मुझे नहीं करना पड़ेगा। हालाँकि, यह भ्रामक हो सकता है, इसलिए मैंने इसे अपडेट किया।
फेलिक्स क्लिंग

2
@ जस्ट-बोरिस: यकीन नहीं होता कि यहां क्या हासिल होगा .filter। क्या आप सामान्य रूप से तीर के कार्यों का मतलब है?
फेलिक्स क्लिंग

46

आप संक्षेप में एक के साथ वापस नहीं आ सकते if, आपको ब्रेस की आवश्यकता होगी:

let adults = family.filter(person => { if (person.age > 18) return person} );

इसे हालांकि सरल बनाया जा सकता है:

let adults = family.filter(person => person.age > 18);

बहुत बढ़िया, दूसरा काम करता है। पहले वाला खाली सरणी देता है। कोई विचार?
हेनरी झू

1
@ हेनरीजु: यह ठीक काम करता है (शायद आपके कोड या ट्रांसपिलर के साथ कुछ और गलत है)। लेकिन वैसे भी यह सही तरीका नहीं है।
फेलिक्स क्लिंग

1
इस मामले में यह कैसे किया जाएगा कि आपके पास एक और बयान है? मैं इसे एक टर्नरी के साथ देखने की कोशिश कर रहा हूं, लेकिन सही वाक्यविन्यास की पहचान करने के लिए प्रतीत नहीं हो सकता है
विन्नमुक्का

@stevek बिल्कुल उसी तरह जैसे आप पहले उदाहरण में एक सामान्य फ़ंक्शन के साथ करेंगे।
किट सुंडे

0

जितना सरल आप उपयोग कर सकते हैं const adults = family.filter(({ age }) => age > 18 );

const family =[{"name":"Jack",  "age": 26},
              {"name":"Jill",  "age": 22},
              {"name":"James", "age": 5 },
              {"name":"Jenny", "age": 2 }];

const adults = family.filter(({ age }) => age > 18 );

console.log(adults)


0

यहाँ उन लोगों के लिए मेरा समाधान है जो उपयोग करते हैं hook; यदि आप अपने ग्रिड में आइटम सूचीबद्ध कर रहे हैं और चयनित आइटम को निकालना चाहते हैं, तो आप इस समाधान का उपयोग कर सकते हैं।

var list = data.filter(form => form.id !== selectedRowDataId);
setData(list);
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.