var empty = []
var emojis = [
"🍺",
"🍻",
"🍶",
"🍵",
"☕️",
"🍼",
"💻",
"👙",
"🐶",
"🎮",
"💪"
]
var users = [
{
"id": 1000,
"name": "Corey Griffith",
"username": "coGriffith",
"gender": "male",
"age": 13
},
{
"id": 1001,
"name": "Marion McDaniel",
"username": "mMcDaniel",
"gender": "female",
"age": 15
},
{
"id": 1002,
"name": "Tom Robbins",
"username": "tRobbins",
"gender": "male",
"age": 15
},
{
"id": 1003,
"name": "Ruth Harvey",
"username": "rHarvey",
"gender": "female",
"age": 14
},
{
"id": 1004,
"name": "Terry Willis",
"username": "tWillis",
"gender": "male",
"age": 13
}
]
var products = [
{
"id": "001",
"name": "iPad Pro",
"price": 30900,
"storage": 32,
"type": "iPad",
"size": "12.9"
},
{
"id": "002",
"name": "iPad Pro",
"price": 34900,
"storage": 128,
"type": "iPad",
"size": "12.9"
},
{
"id": "003",
"name": "iPad Pro",
"price": 38900,
"storage": 256,
"type": "iPad",
"size": "12.9"
},
{
"id": "004",
"name": "iPad Pro",
"price": 22900,
"storage": 32,
"type": "iPad",
"size": "9.7"
},
{
"id": "005",
"name": "iPad Pro",
"price": 26900,
"storage": 128,
"type": "iPad",
"size": "9.7"
},
{
"id": "006",
"name": "iPad Pro",
"price": 30900,
"storage": 256,
"type": "iPad",
"size": "9.7"
},
{
"id": "007",
"name": "iPad Air 2",
"price": 14400,
"storage": 32,
"type": "iPad",
"size": "9.7"
},
{
"id": "008",
"name": "iPad Air 2",
"price": 18400,
"storage": 128,
"type": "iPad",
"size": "9.7"
},
{
"id": "009",
"name": "iPad mini 4",
"price": 14400,
"storage": 32,
"type": "iPad",
"size": "7.9"
},
{
"id": "010",
"name": "iPad mini 4",
"price": 18400,
"storage": 128,
"type": "iPad",
"size": "7.9"
},
{
"id": "011",
"name": "iphone7",
"price": 26000,
"storage": 32,
"type": "iPhone",
"size": "4.7"
},
{
"id": "012",
"name": "iphone7",
"price": 55000,
"storage": 128,
"type": "iPhone",
"size": "4.7"
},
{
"id": "013",
"name": "iphone7Plus",
"price": 49000,
"storage": 32,
"type": "iPhone",
"size": "5.5"
},
{
"id": "014",
"name": "iphone7Plus",
"price": 59000,
"storage": 128,
"type": "iPhone",
"size": "5.5"
}
]
เป็นการกรองข้อมูลใน array ด้วยเงื่อนไขที่กำหนด
/* ลองแก้ code ดูได้เลย */
emojis.filter(
emoji => emoji === "🐶")
/* แล้วก็กดปุ่ม ▶ Run ด้านล่างนี้ */
emojis.filter(
emoji => emoji >= "🐶")
users.filter(
user => user.age > 13)
users.filter(
user => user.gender === "female")
products.filter(
product => product.price < 20000)
products.filter(
product => product.price > 20000
&& product.price < 30000)
การทำงานจะคล้ายกับ filter แต่จะเป็นการหาข้อมูลใน array ด้วยเงื่อนไขที่กำหนด และจะ return ผลลัพท์ตัวแรกที่หาเจอออกมาเท่านั้น
emojis.find(
emoji => emoji === "🐶")
users.find(
user => user.age > 13)
products.find(
product => product.price < 20000)
เป็นการหาหมายเลขIndexใน array ด้วยเงื่อนไขที่กำหนด และจะ return หมายเลขIndexตัวแรกที่หาเจอออกมาเท่านั้น
emojis.findIndex(
emoji => emoji === "🐶")
users.findIndex(
user => user.age > 13)
products.findIndex(
product => product.price < 20000)
เป็นการสร้าง array ขึ้นมาใหม่จาก array เดิมโดย array ใหม่นั้นจะมีค่าจากการ return ค่าของ function ที่เราส่งเข้าไป
emojis.map(
emoji =>
'Char code of ' + emoji + ' is ' + emoji.codePointAt(0))
users.map(
user => user)
users.map(
user => user.gender)
users.map(
user =>
user.name + ' age ' + user.age)
users.map(
user => user.gender).length
ในแต่ละรอบของการทำงาน ค่าที่ถูก return จาก callback จะถูกสะสมไปเรื่อยๆ และ return ค่าสุดท้ายออกมา
users.reduce(
(previousValue, currentValue) =>
previousValue + currentValue.age, 0)
users.reduce(
/* ลองเปลี่ยนชื่อ params */
(sumAge, user) =>
sumAge + user.age, 0)
emojis.reduce(
(result, emoji) =>
result + '💥' + emoji, "")
products.reduce(
(sumPrice, product) =>
sumPrice + product.price, 0)
เราสามารถเอามันมาต่อกันได้ด้วย
users.filter(
user =>
user.gender === 'female')
.map(user => user.username)
เป็นการเรียงลำดับค่าของ Array สามารถกำหนดเงื่อนไขการเรียงลำดับได้
emojis.sort()
users.sort()
products.sort()
/*เรียงตาม name*/
users.sort((a, b) => (a.name - b.name))
/*เรียงตาม price*/
products.sort((a, b) => (a.price - b.price))
เป็นการกลับการเรียงลำดับของ Array ค่าภายใน Array ยังอยู่เหมือนเดิม แค่กลับการเรียงลำดับเท่านั้น
emojis.reverse()
users.reverse()
products.reverse()
เป็นการ Insert ค่าที่ส่งไปใน Params เข้าไปต่อท้าย Array โดยจะ return ค่าออกมาเป็นขนาดของ Array หลังจากทำงานเสร็จแล้ว
emojis.push('💥')
emojis.push('⚽', '🏀')
/* สังเกต Code นี้ดีๆ */
emojis.push(['🔫', '💣', '🔪'])
เป็นการลบค่าลำดับเเรกของ Array ต้นฉบับออก และ Return ค่านั้นออกมา
emojis.shift()
users.shift()
products.shift()
เป็นการลบค่าลำดับสุดท้ายของ Array ต้นฉบับออก และ Return ค่านั้นออกมา
emojis.pop()
users.pop()
products.pop()
เป็นการเปลี่ยนค่าของ Array โดยการลบหรือแทรกค่าใหม่ลงไปยังตำแหน่งที่ต้องการ
/*แทรกค่าลงไปยังตำแหน่งที่ 2*/
emojis.splice(2, 0,
"👍", "👊", "✊", "✌️", "👌", "✋")
/*วางค่าลงไปแทนตำแหน่งที่ 2 - 4*/
emojis.splice(2, 3,
"👍", "👊", "✊")
/*ลบค่าตำแหน่งที่ 2 - 3*/
users.splice(2, 2)
เป็นการรวมค่าภายใน Array แล้วคืนกลับมาเป็นข้อความ
emojis.join()
emojis.join("|")
เป็นการนำ Array 2 ชุด หรือมากกว่านั้น รวมเป็น Array ชุดเดียว
//นำตัวแปรที่เป็น Array อยู่แล้วมาต่อกับ ตัวแปรที่เป็น Array อีกชุด
emojis.concat(users)
//มากกว่า 2 ชุดก็ได้
empty.concat(users, emojis)
//ราม Array 3 ชุด เป็น Array ชุดเดียว
//โดยไม่ต้องมีตัวแปรก็ได้
[].concat(["🇹🇭", "🇰🇷", "🇯🇵"], emojis, ["🇹🇭", "🇰🇷", "🇯🇵"])
รีเทิร์นค่าตามตำแหน่งที่เลือกใน array มาในรูปของ array ชุดใหม่ โดยไม่กระทบกับตัวแปรตั้งต้น
// คืนค่าทั้งหมดใน emojis
emojis.slice()
// คืนค่าตั้งแต่ตำแหน่งที่ 3 ถึงตำแหน่งสุดท้ายใน emojis
emojis.slice(3)
// คืนค่าตั้งแต่ตำแหน่งที่ 3 ถึงตำแหน่งที่ 4 ใน emojis
emojis.slice(3, 4)
"output"