​x
168
 
1
var empty = []
2
​
3
var emojis = [
4
  "🍺",
5
  "🍻",
6
  "🍶",
7
  "🍵",
8
  "☕️",
9
  "🍼",
10
  "💻",
11
  "👙",
12
  "🐶",
13
  "🎮",
14
  "💪"
15
]
16
​
17
var users = [
18
  {
19
    "id": 1000,
20
    "name": "Corey Griffith",
21
    "username": "coGriffith",
22
    "gender": "male",
23
    "age": 13
24
  },
25
  {
26
    "id": 1001,
27
    "name": "Marion McDaniel",
28
    "username": "mMcDaniel",
29
    "gender": "female",
30
    "age": 15
31
  },
32
  {
33
    "id": 1002,
34
    "name": "Tom Robbins",
35
    "username": "tRobbins",
36
    "gender": "male",
37
    "age": 15
38
  },
39
  {
40
    "id": 1003,
41
    "name": "Ruth Harvey",
42
    "username": "rHarvey",
43
    "gender": "female",
44
    "age": 14
45
  },
46
  {
47
    "id": 1004,
48
    "name": "Terry Willis",
49
    "username": "tWillis",
50
    "gender": "male",
51
    "age": 13
52
  }
53
]
54
​
55
var products = [
56
  {
57
    "id": "001",
58
    "name": "iPad Pro",
59
    "price": 30900,
60
    "storage": 32,
61
    "type": "iPad",
62
    "size": "12.9"
63
  },
64
  {
65
    "id": "002",
66
    "name": "iPad Pro",
67
    "price": 34900,
68
    "storage": 128,
69
    "type": "iPad",
70
    "size": "12.9"
71
  },
72
  {
73
    "id": "003",
74
    "name": "iPad Pro",
75
    "price": 38900,
76
    "storage": 256,
77
    "type": "iPad",
78
    "size": "12.9"
79
  },
80
  {
81
    "id": "004",
82
    "name": "iPad Pro",
83
    "price": 22900,
84
    "storage": 32,
85
    "type": "iPad",
86
    "size": "9.7"
87
  },
88
  {
89
    "id": "005",
90
    "name": "iPad Pro",
91
    "price": 26900,
92
    "storage": 128,
93
    "type": "iPad",
94
    "size": "9.7"
95
  },
96
  {
97
    "id": "006",
98
    "name": "iPad Pro",
99
    "price": 30900,
100
    "storage": 256,
101
    "type": "iPad",
102
    "size": "9.7"
103
  },
104
  {
105
    "id": "007",
106
    "name": "iPad Air 2",
107
    "price": 14400,
108
    "storage": 32,
109
    "type": "iPad",
110
    "size": "9.7"
111
  },
112
  {
113
    "id": "008",
114
    "name": "iPad Air 2",
115
    "price": 18400,
116
    "storage": 128,
117
    "type": "iPad",
118
    "size": "9.7"
119
  },
120
  {
121
    "id": "009",
122
    "name": "iPad mini 4",
123
    "price": 14400,
124
    "storage": 32,
125
    "type": "iPad",
126
    "size": "7.9"
127
  },
128
  {
129
    "id": "010",
130
    "name": "iPad mini 4",
131
    "price": 18400,
132
    "storage": 128,
133
    "type": "iPad",
134
    "size": "7.9"
135
  },
136
  {
137
    "id": "011",
138
    "name": "iphone7",
139
    "price": 26000,
140
    "storage": 32,
141
    "type": "iPhone",
142
    "size": "4.7"
143
  },
144
  {
145
    "id": "012",
146
    "name": "iphone7",
147
    "price": 55000,
148
    "storage": 128,
149
    "type": "iPhone",
150
    "size": "4.7"
151
  },
152
  {
153
    "id": "013",
154
    "name": "iphone7Plus",
155
    "price": 49000,
156
    "storage": 32,
157
    "type": "iPhone",
158
    "size": "5.5"
159
  },
160
  {
161
    "id": "014",
162
    "name": "iphone7Plus",
163
    "price": 59000,
164
    "storage": 128,
165
    "type": "iPhone",
166
    "size": "5.5"
167
  }
168
]

JavaScript Array Playground

Array.filter() Pure

เป็นการกรองข้อมูลใน array ด้วยเงื่อนไขที่กำหนด

1
 
1
/* ลองแก้ code ดูได้เลย */
2
emojis.filter(
3
  emoji => emoji === "🐶")
4
/* แล้วก็กดปุ่ม ▶ Run ด้านล่างนี้ */
Run

1
 
1
emojis.filter(
2
  emoji => emoji >= "🐶")
Run

1
 
1
users.filter(
2
  user => user.age > 13)
Run

1
 
1
users.filter(
2
  user => user.gender === "female")
Run

1
 
1
products.filter(
2
  product => product.price < 20000)
Run

1
 
1
products.filter(
2
  product => product.price > 20000
3
  && product.price < 30000)
Run

Array.find() Pure

การทำงานจะคล้ายกับ filter แต่จะเป็นการหาข้อมูลใน array ด้วยเงื่อนไขที่กำหนด และจะ return ผลลัพท์ตัวแรกที่หาเจอออกมาเท่านั้น

1
 
1
emojis.find(
2
  emoji => emoji === "🐶")
Run

1
 
1
users.find(
2
  user => user.age > 13)
Run

1
 
1
products.find(
2
  product => product.price < 20000)
Run

Array.findIndex() Pure

เป็นการหาหมายเลขIndexใน array ด้วยเงื่อนไขที่กำหนด และจะ return หมายเลขIndexตัวแรกที่หาเจอออกมาเท่านั้น

1
 
1
emojis.findIndex(
2
  emoji => emoji === "🐶")
Run

1
 
1
users.findIndex(
2
  user => user.age > 13)
Run

1
 
1
products.findIndex(
2
  product => product.price < 20000)
Run

Array.map() Pure

เป็นการสร้าง array ขึ้นมาใหม่จาก array เดิมโดย array ใหม่นั้นจะมีค่าจากการ return ค่าของ function ที่เราส่งเข้าไป

1
 
1
emojis.map(
2
  emoji =>
3
    'Char code of ' + emoji + ' is ' + emoji.codePointAt(0))
Run

1
 
1
users.map(
2
  user => user)
Run

1
 
1
users.map(
2
  user => user.gender)
Run

1
 
1
users.map(
2
  user =>
3
    user.name + ' age ' + user.age)
Run

1
 
1
users.map(
2
  user => user.gender).length
Run

Array.reduce() Pure

ในแต่ละรอบของการทำงาน ค่าที่ถูก return จาก callback จะถูกสะสมไปเรื่อยๆ และ return ค่าสุดท้ายออกมา

1
 
1
users.reduce(
2
  (previousValue, currentValue) =>
3
    previousValue + currentValue.age, 0)
Run

1
 
1
users.reduce(
2
  /* ลองเปลี่ยนชื่อ params */
3
  (sumAge, user) =>
4
    sumAge + user.age, 0)
Run

1
 
1
emojis.reduce(
2
  (result, emoji) =>
3
    result + '💥' + emoji, "")
Run

1
 
1
products.reduce(
2
  (sumPrice, product) =>
3
    sumPrice + product.price, 0)
Run

Array.filter().map()

เราสามารถเอามันมาต่อกันได้ด้วย

1
 
1
users.filter(
2
  user =>
3
    user.gender === 'female')
4
      .map(user => user.username)
Run

Array.sort() Impure

เป็นการเรียงลำดับค่าของ Array สามารถกำหนดเงื่อนไขการเรียงลำดับได้

1
 
1
emojis.sort()
Run

1
 
1
users.sort()
Run

1
 
1
products.sort()
Run

1
 
1
/*เรียงตาม name*/
2
users.sort((a, b) => (a.name - b.name))
Run

1
 
1
/*เรียงตาม price*/
2
products.sort((a, b) => (a.price - b.price))
Run

Array.reverse() Impure

เป็นการกลับการเรียงลำดับของ Array ค่าภายใน Array ยังอยู่เหมือนเดิม แค่กลับการเรียงลำดับเท่านั้น

1
 
1
emojis.reverse()
Run

1
 
1
users.reverse()
Run

1
 
1
products.reverse()
Run

Array.push() Impure

เป็นการ Insert ค่าที่ส่งไปใน Params เข้าไปต่อท้าย Array โดยจะ return ค่าออกมาเป็นขนาดของ Array หลังจากทำงานเสร็จแล้ว

1
 
1
emojis.push('💥')
Run

1
 
1
emojis.push('⚽', '🏀')
Run

1
 
1
/* สังเกต Code นี้ดีๆ */
2
emojis.push(['🔫', '💣', '🔪'])
Run

Array.shift() Impure

เป็นการลบค่าลำดับเเรกของ Array ต้นฉบับออก และ Return ค่านั้นออกมา

1
 
1
emojis.shift()
Run

1
 
1
users.shift()
Run

1
 
1
products.shift()
Run

Array.pop() Impure

เป็นการลบค่าลำดับสุดท้ายของ Array ต้นฉบับออก และ Return ค่านั้นออกมา

1
 
1
emojis.pop()
Run

1
 
1
users.pop()
Run

1
 
1
products.pop()
Run

Array.splice() Impure

เป็นการเปลี่ยนค่าของ Array โดยการลบหรือแทรกค่าใหม่ลงไปยังตำแหน่งที่ต้องการ

1
 
1
/*แทรกค่าลงไปยังตำแหน่งที่ 2*/
2
 emojis.splice(2, 0,
3
   "👍", "👊", "✊", "✌️", "👌", "✋")
Run

1
 
1
/*วางค่าลงไปแทนตำแหน่งที่ 2 - 4*/
2
 emojis.splice(2, 3,
3
   "👍", "👊", "✊")
Run

1
 
1
/*ลบค่าตำแหน่งที่ 2 - 3*/
2
 users.splice(2, 2)
Run

Array.join() Pure

เป็นการรวมค่าภายใน Array แล้วคืนกลับมาเป็นข้อความ

1
 
1
emojis.join()
Run

1
 
1
emojis.join("|")
Run

Array.concat() Pure

เป็นการนำ Array 2 ชุด หรือมากกว่านั้น รวมเป็น Array ชุดเดียว

1
 
1
//นำตัวแปรที่เป็น Array อยู่แล้วมาต่อกับ ตัวแปรที่เป็น Array อีกชุด
2
emojis.concat(users)
Run

1
 
1
//มากกว่า 2 ชุดก็ได้
2
empty.concat(users, emojis)
Run

1
 
1
//ราม Array 3 ชุด เป็น Array ชุดเดียว
2
//โดยไม่ต้องมีตัวแปรก็ได้
3
[].concat(["🇹🇭", "🇰🇷", "🇯🇵"], emojis, ["🇹🇭", "🇰🇷", "🇯🇵"])
Run

Array.slice() Pure

รีเทิร์นค่าตามตำแหน่งที่เลือกใน array มาในรูปของ array ชุดใหม่ โดยไม่กระทบกับตัวแปรตั้งต้น

1
 
1
// คืนค่าทั้งหมดใน emojis
2
emojis.slice()
Run

1
 
1
// คืนค่าตั้งแต่ตำแหน่งที่ 3 ถึงตำแหน่งสุดท้ายใน emojis
2
emojis.slice(3)
Run

1
 
1
// คืนค่าตั้งแต่ตำแหน่งที่ 3 ถึงตำแหน่งที่ 4 ใน emojis
2
emojis.slice(3, 4)
Run

Star Fork

Made with 🍺 and vue.js.

1
 
1
"output"