Iteration Methods ใน JavaScript Array

Iteration methods หรือ Built-in JavaScript Array Iteration methods คือ method ที่ manipulate สมาชิก (element) ทุกตัวใน array และคืนค่าที่ได้

*syntax นี้เขียนตามที่ใช้เองแบบจำง่าย อาจไม่ถูกตามหลักการเขียน syntax แบบสากลสักเท่าไหร่

Array.concat()

return เป็น array ใหม่ ที่ได้มาจากการรวมกันของ array อื่นๆ

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

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]

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"