javascript - Spread Syntax with Map and Filter - Stack Overflow

admin管理员组

文章数量:1389972

I found this interesting problem and wanted to share with you guys. The question is :

[...[0,1,...[-1,0,1].map((x)=> x+1)].filter((x)=>x)),7]

I easily solved the first section upto the filter as [0,1,(-1+1),(0+1),(1+1)] = [0,1,0,1,2].

I was surprised to find the 7 hanging at the end. I thought it was some typo but copying the problem into the console gave me [1,1,2,7]. I couldn't quite understand 2 things.

• why were the 0's left out of filter
• what's the 7 doing there

I found this interesting problem and wanted to share with you guys. The question is :

[...[0,1,...[-1,0,1].map((x)=> x+1)].filter((x)=>x)),7]

I easily solved the first section upto the filter as [0,1,(-1+1),(0+1),(1+1)] = [0,1,0,1,2].

I was surprised to find the 7 hanging at the end. I thought it was some typo but copying the problem into the console gave me [1,1,2,7]. I couldn't quite understand 2 things.

• why were the 0's left out of filter
• what's the 7 doing there

• javascript
• arrays
• ecmascript-6
• functional-programming
• spread-syntax

Share Improve this question Follow edited Sep 7, 2018 at 1:51 Patrick Roberts 52.1k1010 gold badges117117 silver badges163163 bronze badges asked Mar 29, 2017 at 18:46 Bijay TimilsinaBijay Timilsina 75722 gold badges1111 silver badges2525 bronze badges 7

• 1 0 is Javascript falsy, so the filter (x)=>x will remove it – mikeapr4 Commented Mar 29, 2017 at 18:48
• 2 What is the question? I don't see how code could be a question... – trincot Commented Mar 29, 2017 at 18:48
• You seem to be asking "Why does 7 return 7?" If this is not the question you mean to ask, perhaps you could rephrase it... – lonesomeday Commented Mar 29, 2017 at 18:49
• 1 This is the weirdest question I've seen in a while – Omri Luzon Commented Mar 29, 2017 at 18:52
• 1 ... is not an operator! – Felix Kling Commented Mar 29, 2017 at 19:10

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 3

• The first operation here is Array#map [-1, 0, 1].map(x => x + 1) which basically adds 1 to each element, returning [0, 1, 2] array.

• Next one is Array#filter operation, [0, 1, ...[0, 1, 2]].filter(x => x) which actually returns a new array, without every falsy value (false, 0, undefined, null, "") out of the array.

• The last operation looks like [...[1, 1, 2], 7] and gets rid of the nested array with the spread operator returning [1, 1, 2, 7].

[...[0,1,...[-1,0,1].map((x)=> x+1)].filter((x)=>x),7] broken down:

[-1,0,1].map((x)=> x+1) // [0,1,2]

[0,1,...[-1,0,1].map((x)=> x+1)] // [0,1,0,1,2]

[0,1,...[-1,0,1].map((x)=> x+1)].filter((x)=>x) // [1,1,2]

[...[0,1,...[-1,0,1].map((x)=> x+1)].filter((x)=>x),7] // [1,1,2,7]

this part [-1,0,1].map((x)=> x+1) results in this list [0,1,2] then this part [0,1,...[-1,0,1].map((x)=> x+1)] results in [0,1,1,2] which after the filter part drops the 0 so it results into [1,1,2], finally the last element of the list is 7. So, altogether the result is [1,1,2,7]

The code evaluates in the following steps:

[...[0, 1, ...[-1, 0, 1].map((x)=>x+1)].filter((x)=>x)), 7] // map
[...[0, 1, ...[(x=>x+1)(-1), (x=>x+1)(0), (x=>x+1)(1)]].filter((x)=>x)), 7] // function application
[...[0, 1, ...[0, 1, 2]].filter((x)=>x)), 7] // spread
[...[0, 1, 0, 1, 2].filter((x)=>x)), 7] // filter
[...[...(x=>x)(0)?[0]:[], ...(x=>x)(1)?[1]:[], ...(x=>x)(0)?[0]:[], ...(x=>x)(1)?[1]:[], ...(x=>x)(2)?[2]:[]], 7] // function application
[...[...0?[0]:[], ...1?[1]:[], ...0?[0]:[], ...1?[1]:[], ...2?[2]:[]], 7] // conditional
[...[...[], ...[1], ...[], ...[1], ...[2]], 7] // spread (from filter)
[...[1, 1, 2], 7] // spread
[1, 1, 2, 7]

本文标签： javascriptSpread Syntax with Map and FilterStack Overflow