Iteration methods หรือ Built-in JavaScript Array Iteration methods คือ method ที่ manipulate สมาชิก (element) ทุกตัวใน array และคืนค่าที่ได้
*syntax นี้เขียนตามที่ใช้เองแบบจำง่าย อาจไม่ถูกตามหลักการเขียน syntax แบบสากลสักเท่าไหร่
Array.concat()
return เป็น array ใหม่ ที่ได้มาจากการรวมกันของ array อื่นๆ
method นี้ support ทุกบราวเซอร์
Syntax
const new_arr = old_arr.concat(arr_1[, arr_2[,...[,arr_3]]])
Example
const arr_1 = [1,2,3];
const arr_2 = [4,5,6];
const arr_3 = [7,8,9];
const arr_4 = arr_1.concat(arr_2, arr_3);
console.log(arr_4);
//output: [1,2,3,4,5,6,7,8,9]
Array.copyWithin()
เป็นการ modify array เดิม โดย array ที่ได้จากการ modify จะมีความยาวของ array หรือจำนวนสมาชิกเท่าเดิม method นี้จะคัดลอก element ใน array ไปใส่ในตำแหน่ง (index) อื่นที่อยู่ใน array นั้น
method นี้ support ทุกบราวเซอร์ยกเว้น Internet Explorer
Syntax
arr.copyWithin(target_index[,index_start[,index_end]]);
- target_index = ตำแหน่ง index ที่จะคัดลอก element มาใส่ หากค่านี้ติดลบ จะนับตำแหน่งจากหลังไปหน้า หาก target_index มีค่ามากกว่าความยาวของ array จะไม่คัดลอก
- index_start = index ของ element ตัวแรกที่จะคัดลอก ถ้าค่านี้ติดลบ จะนับ index จากหลังไปหน้า หากค่านี้ว่าง จะเริ่มคัดลอกตั้งแต่ index ที่ 0
- index_end = index ของ element ตัวถัดจากตัวสุดท้ายที่ต้องการคัดลอก เช่น หากตั้ง index_end ที่ 9 จะคัดลอกถึงตัวที่ 8 แต่ไม่คัดลอกตัวที่ 9 หาก index_end มีค่าติดลบ จะเริ่มนับจากหลังไปหน้า
- ถ้าค่าในตำแหน่ง index_end อยู่หน้าค่าในตำแหน่ง index_start จะไม่คัดลอก
Example
const arr = [1,2,3,4,'a','b','c','d'];
console.log(arr.copyWithin(0,4,5));
//output: ['a',2,3,4,'a','b','c','d']
console.log(arr.copyWithin(2,5);
//output: ['a',2,'b','c','d','b','c','d']
console.log(arr.copyWithin(0,6,5);
//output: ['a',2,'b','c','d','b','c','d']
Array.entries()
method นี้จะคืนค่า (return) เป็น array iterator object (วัตถุที่วนซ้ำใน array) ที่มีชุด key/value สำหรับ index แต่ละตำแหน่งใน array
สำหรับสมาชิกแต่ละตัวใน array เดิม วัตถุ iterator ที่ได้ใหม่จะเป็น array ที่ประกอบไปด้วย key และ value โดย key เป็น index ของสมาชิก ในขณะที่ value คือ ค่าของสมาชิกตัวนั้นนั่นเอง
method นี้ support ทุกบราวเซอร์ยกเว้น Internet Explorer
Syntax
arr.entries();
Example
const flowers = ['rose', 'jasmine', 'lotus'];
const iterator = flowers.entries();
for (let i of iterator) {
console.log(i);
}
//output: [0, "rose"]
//output: [1, "jasmine"]
//output: [2, "lotus"]
console.log(flowers);
//output: ["rose", "jasmine", "lotus"]
Array.every()
เช็คว่าสมาชิกทั้งหมดใน array ผ่านฟังก์ชั่นทดสอบที่เขียนไว้หรือไม่ method นี้จะคืนค่าเป็น Boolean value
หากสมาชิกทั้งหมดผ่านการทดสอบตามฟังก์ชั่น จะคืนค่าเป็น true ถ้าไม่ผ่านจะคืนค่าเป็น false
syntax เขียนได้ 2 แบบ จะเขียน function สำหรับทดสอบไว้ด้านนอกก่อนเรียกใช้ method จากนั้นเรียกใช้ method ด้วย callback function
หรือเขียนแบบ inline ตอนเรียกใช้ method ไปเลย
method นี้ support ทุกบราวเซอร์
Syntax
arr.every(function)
Example 1
const lessThanForty = (i) => i < 40;
const arr = [4, 10, 5, 11, 12, 39];
console.log(arr.every(lessThanForty));
//output: true
Example 2
const arr = [4, 10, 5, 11, 12, 39];
console.log(arr.every((i) => i < 40));
//output: true
Array.fill()
ใช้ค่า static แทนสมาชิกใน array สามารถกำหนดได้ว่าจะให้ใส่แทนสมาชิกทุกตัวหรือบางตัว
method นี้ support ทุกบราวเซอร์ยกเว้น Internet Explorer
Syntax
arr.fill(value, start, end)
Example
const snacks = ['chips', 'fries', 'salami', 'cheese'];
console.log(snacks.fill('cookies',1,2));
//output: ['chips', 'cookies', 'salami', 'cheese']
console.log(snacks.fill('apple',2));
//output: ['chips', 'cookies', 'apple', 'apple']
console.log(snacks.fill('pizza'));
//output: ['pizza', 'pizza', 'pizza'. 'pizza']
- value คือค่าที่จะนำมาใส่แทนสมาชิก
- start คือตำแหน่ง index ที่จะใส่ค่านั้น
- end คือตำแหน่ง index การสิ้นสุดการใส่ค่า
- หากค่า start หรือ end ติดลบ จะนับจากหลังไปหน้า
- ถ้าไม่ใส่ค่า end ค่า value จะถูกใส่ตั้งแต่ค่า start ไปจนถึงสมาชิกตัวสุดท้าย
- ถ้าไม่ใส่ค่า start และ end ค่า value จะถูกแทนที่ทุกสมาชิกใน array
Array.filter()
สร้าง array ใหม่ที่ประกอบไปด้วยสมาชิกจาก array เดิมที่ผ่านการทดสอบจากฟังก์ชั่นที่กำหนด
method นี้ support ทุกบราวเซอร์
Syntax
arr.filter(function)
Example 1
const animals = ['cat', 'dog', 'elephant', 'horse', 'sheep'];
const getAnimal = animal => animal.length > 5;
const newList = animals.filter(getAnimal):
console.log(newList);
//output: ['elephant']
Example 2
const animals = ['cat', 'dog', 'elephant', 'horse', 'sheep'];
const newList = animals.filter(animal => animal.length > 5);
console.log(newList);
//output: ['elephant']
Array.find()
ใช้หาค่าแรกที่พบใน array ที่ผ่านการทดสอบจากฟังก์ชั่นที่กำหนด
method นี้ support ทุกบราวเซอร์ยกเว้น Internet Explorer
Syntax
arr.find(function)
Example 1
const numbers = [10,28,32,44,89];
const findNum = numbers.find(num => num > 30);
console.log(findNum);
//output: 32
Array.findIndex()
return ตำแหน่ง index ของสมาชิกตัวแรกใน array ที่ผ่านเงื่อนไขการทดสอบในฟังก์ชั่น หากไม่มีสมาชิกตัวใดที่ผ่านเงื่อนไขของฟังก์ชั่นทดสอบ จะ return -1
method นี้ support ทุกบราวเซอร์ยกเว้น Internet Explorer
Syntax
arr.findIndex(function)
Example
const numbers = [99, 82, 5, 6, 40];
const lessThanTen = (num) => num < 10;
console.log(numbers.findIndex(lessThanTen));
//output: 2
Array.forEach()
จะส่งผ่านสมาชิกใน array ทีละตัวไปใน callback ฟังก์ชั่นเพื่อ manipulate ทีละตัว
method นี้ support ทุกบราวเซอร์
Syntax
arr.forEach(function)
Example
const numbers = [2,3,4,5];
var result;
const myFunction = (value, index, array) => {
result = value * 10;
console.log(result);
};
numbers.forEach(myFunction);
//output: 20
//output: 30
//output: 40
//output: 50
Array.includes()
เช็คว่ามีสมาชิกใน array ตัวใดมีค่าที่ต้องการหาหรือไม่ method นี้จะคืนค่าเป็น boolean value เท่านั้น (ค่า true หรือ false)
method นี้ support ทุกบราวเซอร์ยกเว้น Internet Explorer
Syntax
arr.includes(value,fromIndex)
- value คือ ค่าที่ต้องการหา
- fromIndex คือ ตำแหน่งที่ต้องการหา
- หากไม่ใส่ fromIndex โดยใช้ arr.includes(value) จะทำให้ method หาค่าที่ต้องการหาโดยไม่จำกัดตำแหน่ง จะ return ค่า true หากมีค่าที่ต้องหาใน array นั้นไม่ว่าจำตำแหน่งใดก็ตาม
- หากใส่ค่า fromIndex จะทำให้ method นี้ return ค่า true เมื่อพบค่าที่ต้องการหาในตำแหน่งที่กำหนดเท่านั้น
Example
let numbers = [1,2,4,5];
console.log(numbers.includes(3));
//output: false
console.log(numbers.includes(2));
//output: true
console.log(numbers.includes(2,3));
//output: false
Array.indexOf()
return ค่า index ของสมาชิกที่ต้องการหา โดยจะแสดงตำแหน่งแรกที่พบเมื่อนับจากตำแหน่ง index ที่มีค่าน้อยที่สุด หากหาไม่พบ จะ return -1
สามารถกำหนดตำแหน่งเริ่มต้นที่ต้องการหาใน array ได้โดยการระบุตำแหน่งควบคู่ไปกับค่าสมาชิกที่ต้องการหา
method นี้ support ทุกบราวเซอร์
Syntax
arr.indexOf(value,startIndex)
Example
let students = ['Emma', 'James', 'Kim', 'Ronald', 'Emma'];
console.log(students.indexOf('Emma'));
//output: 0
console.log(students.indexOf('Emma',1));
//output: 4
Array.join()
method join() จะสร้าง String ที่ได้มาจากการนำสมาชิกใน array มาต่อกัน โดย default หากไม่ใส่ separator ใดๆใน () String จะต่อกันโดยมี comma คั่น
method นี้ support ทุกบราวเซอร์
Syntax
arr.join(separator)
Example
let words = ['hello','pretty','girl'];
let sentence = words.join();
console.log(sentence);
//output: "hello,pretty,girl"
sentence = words.join('-');
console.log(sentence);
//output: "hello-pretty-girl"
sentence = words.join(' ');
console.log(sentence);
//output: "hello pretty girl"
Array.keys()
สร้าง object แบบ array iterator ที่ประกอบไปด้วย key ของ index ของสมาชิกใน array
method นี้ support ทุกบราวเซอร์ยกเว้น Internet Explorer
Syntax
arr.keys()
Example
แสดง output เป็น key ที่อยู่ใน object ทีละตัวด้วย for…of loop
var pets = ['dog', 'cat', 'hamster', 'fish'];
var iterator = pets.keys();
for (const key of iterator) {
console.log(key);
}
//output: 0
//output: 1
//output: 2
//output: 3
console.log(iterator);
//output: Object { }
แสดง output ด้วย array ของ key แบบแยกทีละตัว
var pets = ['dog', 'cat', 'hamster', 'fish'];
var iterator = Object.keys(pets);
console.log(iterator);
//output: ["0", "1", "2", "3"]
แสดง output เป็น array ของ key
var pets = ['dog', 'cat', 'hamster', 'fish'];
var iterator = [...pets.keys()];
console.log(iterator);
//output: [0, 1, 2, 3]
NOTE
key iterator จะนับตำแหน่ง index ช่องว่างของสมาชิกใน array ด้วย
Example
var letters = ['a','b', ,'d'];
var sparseKeys = Object.keys(letters);
var denseKeys = [...letters.keys()];
console.log(sparseKeys);
//output: ["0", "1", "3"]
console.log(denseKeys);
//output: [0, 1, 2, 3]
Array.lastIndexOf()
หาตำแหน่ง index ของสมาชิกใน array ที่ต้องการ โดยหาจากลำดับสุดท้ายไปลำดับแรก หากหาไม่พบ จะ return -1
สามารถกำหนดตำแหน่งเริ่มต้นที่ต้องการหาใน array ได้โดยการระบุตำแหน่งควบคู่ไปกับค่าสมาชิกที่ต้องการหา
method นี้ support ทุกบราวเซอร์
Syntax
arr.lastIndexOf(element, startIndex)
Example
const food = ['pizza', 'spagetti', 'pizza', 'soup',];
console.log(food.lastIndexOf('pizza'));
//output: 2
console.log(food.lastIndexOf('spagetti'));
//output: 1
console.log(food.lastIndexOf('pizza',1));
//output: 0
Array.map()
สร้าง array ใหม่ที่มาจากการเรียกใช้ฟังก์ชั่นบนสมาชิกบน array เดิมทีละตัว
method นี้ support ทุกบราวเซอร์
Syntax
arr.map(function)
Example
var numbers = [1, 4, 9, 16, 25];
var roots = numbers.map(x => Math.sqrt(x));
console.log(roots);
//output: [1, 2, 3, 4, 5]
Array.pop()
ดึงสมาชิกตัวสุดท้ายออกจาก array
method นี้ support ทุกบราวเซอร์
Syntax
arr.pop()
Example
var drinks = ['milk', 'juice', 'water', 'milkshake'];
var lastElement = drinks.pop();
console.log(lastElement);
//output: "milkshake"
console.log(drinks);
//output: ["milk", "juice", "water"]
Array.push()
เพิ่มสมาชิกต่อท้าย array ตั้งแต่ 1 สมาชิกขึ้นไป
method นี้ support ทุกบราวเซอร์
Syntax
arr.push(element1, element2,..., elementN)
Example
var numbers = [45,67,34,22,66];
var addNum = numbers.push(98,23);
console.log(addNum);
//output: 7
console.log(numbers);
//output: [45, 67, 34, 22, 66, 98, 23]
Array.reduce()
return ค่าหนึ่งค่าหลังจาก iterate บนสมาชิกทุกตัวใน array แล้ว method นี้จะเรียกใช้ callback ฟังก์ชั่นเพื่อ operate บนสมาชิกทีละตัวจากซ้ายไปขวา
method นี้ support ทุกบราวเซอร์
Syntax
arr.reduce(function(accumulator, currentValue), initialValue)
หากไม่ใส่ initialValue จะเริ่ม iterate จากสมาชิกตัวแรกใน array
Example
const numbers = [2,3,4,6,7];
const subtractNum = numbers.reduce((accumulator, currentValue) => {return accumulator - currentValue}, 30);
console.log(subtractNum);
//output: 8
const sumNum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sumNum);
//output: 22
Array.reduceRight()
เหมือนกับ method array.reduce() แต่จะ operate จากขวาไปซ้าย
method นี้ support ทุกบราวเซอร์
Syntax
arr.reduceRight(function(accumulator, currentValue),initialValue)
Example
const num1 = [[1, 2], [3, 4], [5, 6]].reduceRight(
(accumulator, currentValue) => accumulator.concat(currentValue)
);
console.log(num1);
//output: [5, 6, 3, 4, 1, 2]
const calNum = [1,2,3,4,5].reduceRight((accumulator, currentValue) => {
console.log('The value of accumulator: ' + accumulator);
console.log('The value of currentValue: ' + currentValue);
return (accumulator + currentValue) * 2 ;
});
console.log(calNum);
//output: "The value of accumulator: 5"
//output: "The value of currentValue: 4"
//output: "The value of accumulator: 18"
//output: "The value of currentValue: 3"
//output: "The value of accumulator: 42"
//output: "The value of currentValue: 2"
//output: "The value of accumulator: 88"
//output: "The value of currentValue: 1"
//output: 178
Array.reverse()
method นี้จะสลับตำแหน่งทั้ง array แบบ in place สมาชิกในตำแหน่งแรกจะสลับไปอยู่ตำแหน่งสุดท้าย และสมาชิกในตำแหน่งสุดท้ายจะไปอยู่ในตำแหน่งแรกตามลำดับ
method นี้ support ทุกบราวเซอร์
Syntax
arr.reverse()
Example
const lst = ['one', 'two', 'three',4,5];
console.log(lst);
//output: ["one", "two", "three", 4, 5]
const reversed = lst.reverse();
console.log(reversed);
//output: [5, 4, "three", "two", "one"]
Array.shift()
method จะลบสมาชิกตัวแรกออกจาก array
method นี้ support ทุกบราวเซอร์
Syntax
arr.shift()
Example
const array = ['spoon', 'fork', 'dish', 'plate'];
const firstElement = array.shift();
console.log(array);
//output: ["fork", "dish", "plate"]
console.log(firstElement);
//output: "spoon"
Array.slice()
เลือกแสดงสมาชิกใน array โดยกำหนดตำแหน่งแรกที่แสดงถึงตำแหน่งสุดท้าย method นี้ไม่ modify array เดิม
method นี้ support ทุกบราวเซอร์
Syntax
arr.slice(begin, end)
- หากไม่ระบุตำแหน่ง begin จะกำหนดค่า index ของ begin เป็น 0
- หากไม่ระบุตำแหน่ง end จะกำหนดค่า index ของ end เป็นค่า index ของสมาชิกตัวสุดท้ายใน array
Example
var foods = ['pasta', 'burger', 'soup', 'salad'];
var todayChoice = foods.slice(1,3);
console.log(todayChoice);
//output: ["burger", "soup"]
console.log(foods);
//output: ["pasta", "burger", "soup", "salad"]
Array.some()
เช็คว่ามีสมาชิกใน array ที่ผ่านฟังก์ชั่นทดสอบหรือไม่ method นี้จะคืนค่าเป็น Boolean value
method นี้ support ทุกบราวเซอร์
Syntax
arr.some(function)
Example
const numbers = [1, 2, 3, 4, 5];
const oddNum = (num) => num % 2 !== 0;
console.log(numbers.some(oddNum));
//output: true
Array.sort()
เป็นการจัดลำดับตำแหน่งสมาชิกใน array เรียงตามลำดับพยัญชนะในภาษาอังกฤษ A-Z ทำให้ method นี้ให้ข้อมูลที่ผิดพลาดเมื่อนำมาใช้กับการจัดลำดับตัวเลข เนื่องจาก method นี้จะเรียงลำดับตัวเลขโดยใช้ค่าของตัวเลขตัวแรกที่อยู่ในจำนวนนั้นมาเรียงจากน้อยไปมาก ไม่ใช่ค่าของจำนวน
เราสามารถแก้ปัญหานี้ได้โดยการใส่ฟังก์ชั่นเปรียบเทียบเมื่อเรียกใช้ method
method นี้ support ทุกบราวเซอร์ยกเว้น Internet Explorer
Syntax
arr.sort(compareFunction)
Example จัดเรียง string
var animals = ['dog','cat','ant','zebra','whale'];
animals.sort();
console.log(animals);
//output: ["ant", "cat", "dog", "whale", "zebra"]
Example จัดเรียงจำนวนโดยใช้ฟังก์ชั่นเปรียบเทียบ
var scores = [3,10,9,12,45];
scores.sort((a,b) => {return a-b});
console.log(scores);
//output: [3, 9, 10, 12, 45]
compareFunction
เมื่อ sort() เปรียบเทียบค่าเพื่อจัดลำดับ มันจะเรียกฟังก์ชั่นเปรียบเทียบ (aka compare function) มาใช้กับค่าที่กำลังเปรียบเทียบ เช่น เมื่อ sort() เปรียบเทียบระหว่างค่า 3 และ 10 หากไม่มี compare function มันจะจัดลำดับให้ 3 มีค่ามากกว่า 10 เพราะตัวเลขแรก 3 มีค่ามากกว่า 1 ใส่ compare function เราจะได้ค่า 3 – 10 เท่ากับ -7 หมายความว่า 3 มีค่าน้อยกว่า 10 ดังนั้น 3 จะมีค่าน้อยกว่า 10 และจะถูกจัดให้อยู่ลำดับก่อนหน้า 10
จัดลำดับจำนวนมากไปน้อย
สามารถทำได้โดยเขียน compare function
arr.sort((a, b) => {return b-a}) หรือ
arr.sort(function(a, b) {return b-a})
Array.splice()
method นี้จะ modify array โดยการเพิ่มและ/หรือลบสมาชิกใน array
method นี้ support ทุกบราวเซอร์
บน Internet Explorer 5.5 – 8 หากไม่ใส่ deleteCount สมาชิกใน array จะไม่ถูกลบออก
ในบราวเซอร์อื่น หากไม่ใส่ deleteCount สมาชิกใน array หลังจาก index จะถูกลบออก
Syntax
arr.splice(index[,deleteCount[,item1[, item2[,...[,itemN]]]]])
- index คือ ค่า index ของสมาชิกที่ต้องการปรับปรุง (เพิ่มและ/หรือลบ)
- deleteCount คือ จำนวนสมาชิกที่ต้องการลบ
- itemN คือ สมาชิกใหม่ที่ต้องการเพิ่มใน array
Example
var students = ['James', 'Joe', 'Linda', 'Percy','Thomas','Lily'];
var removeStudents = students.splice(0,1,'Edmund');
console.log(removeStudents);
//output: ["James"]
console.log(students);
//output: ["Edmund", "Joe", "Linda", "Percy", "Thomas", "Lily"]
students.splice(3);
console.log(students);
//output: ["Edmund", "Joe", "Linda"]
Array.toString()
method นี้จะ return เป็น string ที่ประกอบด้วยสมาชิกทั้งหมดของ array ซึ่งคั่นด้วย comma “,”
method นี้ support ทุกบราวเซอร์
Syntax
arr.toString()
Example
var words = ['Hi','Nice','to','meet','you'];
var sentence = words.toString();
console.log(words);
//output: ["Hi", "Nice", "to", "meet", "you"]
console.log(sentence);
//output: "Hi,Nice,to,meet,you"
Array.unshift()
เพิ่มสมาชิกใหม่ที่ตำแหน่งแรกใน array จากนั้น return ด้วย array ที่มีสมาชิกใหม่
method นี้ support ทุกบราวเซอร์
Syntax
arr.unshift(item1[,item2[,...[,itemN]]])
Example
var numbers = [1,2,3,4,];
numbers.unshift(5,6,7);
console.log(numbers);
//output: [5, 6, 7, 1, 2, 3, 4]
Array.values()
return เป็น Array Iterator object ที่ประกอบไปด้วยค่าของสมาชิกแต่ละตัวใน array นั้น
method นี้ support ทุกบราวเซอร์ยกเว้น Internet Explorer
Syntax
arr.values()
Example
const animals = ['bird', 'tiger', 'lion'];
const iterator = animals.values();
console.log(iterator);
//output: Object { }
for (const value of iterator) {
console.log(value);
}
//output: "bird"
//output: "tiger"
//output: "lion"