วิธีการ JavaScript ที่มีประโยชน์ที่สุดที่คุณต้องรู้

ในบทความนี้ เราจะเน้นที่วิธีการ JavaScript ที่สำคัญบางประการ ส่วนต่างๆ จะแยกย่อยตามโมดูล

วิธีการสตริงจาวาสคริปต์

1. อักขระ()

เมื่อเราต้องการเข้าถึงอักขระแต่ละตัวในสตริง

const name = "Thor"
console.log(name.charAt(0))
//T

ในอีกทางหนึ่ง เรายังค้นหาอักขระเฉพาะในสตริงของเราด้วย วิธีนี้เหมือนกับการค้นหาค่าอาร์เรย์

const movie = "Thor"
console.log(movie[0])
//T

2. เชื่อมต่อ()

const fristName = "Jon";
const lastName = "Doe";
console.log(fristName.concat(" ",lastName))

3.รวม()

รวมวิธีการตรวจสอบว่ามีค่าเฉพาะอยู่หรือไม่ และส่งกลับค่าบูลีน

หมายเหตุ:วิธีการรวมจะคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่

const country = "Bangladesh is my Born country"
console.log(country.includes("Bangladesh")) //true
console.log(country.includes("bangladesh")) //false

4. ลงท้ายด้วย()

วิธีการนี้ช่วยในการตรวจสอบว่าประโยคใดที่ใช้ในสตริงย่อยในตำแหน่งสุดท้าย

หมายเหตุ:วิธีการendsWithจะต้องตรงตามตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ด้วย

const dialog = "I will must tech you who am i?"
console.log(dialog.endsWith("i?")) //true
console.log(dialog.endsWith("i")) //false

5.ดัชนีแห่ง()

เมธอด indexOf นี้จะค้นหาค่าที่ระบุ และหากมีค่าอยู่ ให้ส่งคืนดัชนีตำแหน่งของค่า หรือไม่เช่นนั้นก็ส่งคืนค่า -1 หากไม่พบ

const para = 'The quick brown fox';
console.log(para.indexOf('quick')) //4
console.log(para.indexOf('Jump')) //-1

6.lastIndexOf()

LastIndexOf() วิธีการส่งกลับตำแหน่งของการเกิดขึ้นครั้งสุดท้ายของค่าที่ระบุในสตริง

หมายเหตุ:เมธอด LastIndexOf จะต้องคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ด้วย

const list = ["Mango", "Apple", "Mango"];
list.lastIndexOf("Mango"); //2

7.แทนที่()

วิธีการแทนที่จะแทนที่อักขระในสตริงด้วยกลุ่มอักขระอื่น

const grettings = "Welcome to Dhaka";
grettings.replace("Dhaka","Noakkhali")
//"Welcome to Noakkhali"

8.ประกบ()

วิธีการนี้จะส่งกลับสตริงย่อยใหม่ตามดัชนีที่ให้ไว้

const sing = "I am a disco dancer"
console.log(sing.slice(0,5))// I am

9.แยก()

การใช้สตริงย่อยเพื่อแยกสตริงออกเป็นอาร์เรย์ มันจะส่งคืนอาร์เรย์ใหม่

const ask = "How are you?"
const res = ask.split(" ") //["How", "are", "you?"]

10.startsWith()

วิธีการนี้จะส่งกลับค่าบูลีนหากสตริงขึ้นต้นด้วยสตริงย่อย

const myName = "I am Jobayer Hossain"
myName.startsWith("I")//true
myName.startsWith("am")//false

11.ซับสเตร()

วิธีการนี้ยอมรับค่าอินพุตสองค่าเป็นตัวเลข และแยกสตริงที่มีหมายเลขเริ่มต้นเพื่อสิ้นสุดตำแหน่งสตริงเป้าหมายหลายตำแหน่ง

const helloMsg = "Hello How are you?"
const res = helloMsg.substr(1,4) //"ello"

12.toตัวพิมพ์เล็ก()

มันจะแปลงสตริงเป็นตัวพิมพ์เล็ก

const str1 = "Hellow World"
const str1Res = str1.toLowerCase()//"hellow world"

หมายเหตุ: ฟังก์ชัน toLowerCase() ไม่ยอมรับพารามิเตอร์ใดๆ และไม่เปลี่ยนสตริงเดิม

13.toUpperCase()

วิธีการแปลงสตริงให้เป็นตัวอักษรตัวพิมพ์ใหญ่

const str2 = "Hellow World"
const str2Res = str2.toUpperCase() //"HELLOW WORLD"

หมายเหตุ: เมธอด toUpperCase() ไม่ได้แก้ไขสตริงต้นฉบับ

14.ตัดแต่ง()

เมธอด trim()the จะลบช่องว่างทั้งหมดบนสตริงที่ตำแหน่งเริ่มต้นและสิ้นสุด

const str3 = "   Hellow   World! "
const str3Res = str3.trim() //"Hellow   World!"

หมายเหตุ: เมธอด trim() ไม่ได้แก้ไขสตริงเริ่มต้น และไม่ยอมรับพารามิเตอร์ใดๆ

15.trimStart()

วิธีนี้จะลบช่องว่างตั้งแต่เริ่มต้นเท่านั้น

const str4 = "       Hello World!     ";
const str4Res = str4.trimStart() // "Hello World!     "

16.ตัดแต่งEnd()

วิธีนี้จะลบช่องว่างออกจากส่วนท้ายเท่านั้น

const str5 = "    HelloWorld    ";
const str5Res = str5.trimEnd() // "    HelloWorld"

วิธีตัวเลขจาวาสคริปต์

1.isNaN()

เมธอดนี้จะคืนค่าเป็นจริงหากค่าไม่ใช่ตัวเลข

console.log(isNaN(123)) // false
console.log(isNaN(true)) // false
console.log(isNaN(true)) // false
console.log(isNaN("Hello")) // true
console.log(isNaN("2020/4/13")) // true
console.log(isNaN(undefined)) // true
console.log(isNaN(NaN)) // true

2.parseFloat()

ฟังก์ชันแยกวิเคราะห์สตริงและส่งกลับตัวเลขทศนิยม

console.log(parseFloat("40")) //40
console.log(parseFloat(" 50.55  ")) //50.55
console.log(parseFloat("My ID 40")) //NaN

ref:w3โรงเรียน

3.parseInt()

ฟังก์ชันนี้แยกวิเคราะห์สตริงและส่งจำนวนเต็ม

console.log(parseInt("10")) //10
console.log(parseInt("  30.90")) //30
console.log(parseInt("36 10 20")) //36
console.log(parseInt("ID 404")) // NaN

ref:w3schools

วิธีการอาร์เรย์จาวาสคริปต์

1.คอนแคต()

ฟังก์ชั่น concat ใช้ในการรวมสองอาร์เรย์และส่งกลับอาร์เรย์ใหม่

const marvelHeros =  ["Thor","Ant-man"]
const dcHeros = ["WonderWoman","Bat Man"]
const joniArrays = marvelHeros.concat(dcHeros)
//["Thor","Ant-man", "WonderWoman","Bat Man"]

2.ทุก()

วิธีนี้จะทดสอบว่าองค์ประกอบทั้งหมดในอาร์เรย์ผ่านการทดสอบหรือไม่

const agesArray = [32,42,53]
const hasAudlt = agesArray.every(age=> age < 18) //false

3.กรอง()

วิธีการนี้จะสร้างอาร์เรย์ใหม่พร้อมกับองค์ประกอบอาร์เรย์ทั้งหมดที่ผ่านเงื่อนไข

const numberArrays = [5,9,12,22,53]
const filterdLessThen20 = numberArrays.filter(num => num < 20) 
//[5, 9, 12]

4.ค้นหา()

ฟังก์ชันนี้ส่งคืนค่าของอาร์เรย์ที่ผ่านเงื่อนไข

const districts = ["comilla","Noakhalli","Lakshimipur"]
const myDistrict = districts.find((district) => {
     return district == "Lakshimipur"
})
//"Lakshimipur"

5.ค้นหาดัชนี()

วิธีนี้จะส่งคืนดัชนีของรายการแรกที่ผ่านการทดสอบ

const array1 = [5, 12, 8, 230, 44];
const lessThen15 = array1.findIndex(num => num > 15) //3

อ้างอิง: mdn

6.สำหรับแต่ละ()

forEach วิธีการทำงานดูเหมือน for วนซ้ำ มันจะวนซ้ำองค์ประกอบทั้งหมดในอาร์เรย์และส่งกลับองค์ประกอบชิ้นเดียว

const friendsArray = ["Jon", "Doyt", "cherry"];
const friendsName = friendsArray.forEach(name => console.log(name))
// "Jon"
// "Doyt"
// "cherry"

ref:mdn

7.ดัชนีแห่ง()

ฟังก์ชัน indexOf() ยอมรับพารามิเตอร์และดัชนีของรายการหรือ -1 หากไม่มีอยู่

const bestFriends = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(bestFriends.indexOf("bison"))

8.เข้าร่วม()

วิธีการรวมประสานองค์ประกอบอาร์เรย์ทั้งหมดให้เป็นสตริงเดียวด้วยตัวคั่น

const arrays3 = ['Fire', 'Air', 'Water'];
console.log(arrays3.join())
// "Fire,Air,Water"

9.แผนที่()

ฟังก์ชัน map() จะวนซ้ำองค์ประกอบอาร์เรย์ทั้งหมดและส่งกลับอาร์เรย์ใหม่ตามการเปลี่ยนแปลงของแต่ละรายการ

let numsArray = [1, 2, 3, 4];
const singleValue = numsArray.map((num) => num + 1);
console.log(singleValue);
//[ 2, 3, 4, 5 ]

10.lastIndexOf()

เมธอด LastIndexOf() ทำงานเหมือนกับเมธอด indexOf แต่มีความแตกต่างหลักระหว่างแบบฟอร์มการค้นหา indexOfmethod ตั้งแต่ต้นจนจบ และการค้นหาเมธอด lastIndexOf() จากต้นจนจบ

const movies = ["Avangers", "Thor","Ant Man", "Thor"];
console.log(movies.lastIndexOf("Thor"));
//3

11.ป๊อป()

pop() วิธีการลบองค์ประกอบสุดท้ายออกจากอาร์เรย์

const movies = ["Avangers", "Thor", "AntMan", "SpiderMan"];
// ["Avangers", "Thor", "AntMan", "SpiderMan"];
movies.pop();
//[ 'Avangers', 'Thor', 'AntMan' ]

12.กด()

วิธีการพุชจะเพิ่มองค์ประกอบที่ส่วนท้ายของตำแหน่งอาร์เรย์และส่งกลับอาร์เรย์ใหม่

const movies = ["Avengers", "AntMan", "SpiderMan"];
// ["Avengers", "AntMan", "SpiderMan"];
movies.push("Thor");
// ["Avengers", "AntMan", "SpiderMan", "Thor"];

13.ลด()

เมธอดนี้จะทำงานกับทุกองค์ประกอบของอาเรย์โดยมีค่าเป็นค่าเดียว

const number = [1, 2, 3, 4];
const sum = number.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
});
console.log(sum); //10

14.ย้อนกลับ()

วิธีการย้อนกลับจะกลับรายการดัชนีขององค์ประกอบในอาร์เรย์

const number = [1, 2, 3, 4];
const reversed = number.reverse();
console.log(reversed); //[ 4, 3, 2, 1 ]

15.กะ()

วิธีการ shift จะลบองค์ประกอบแรกในอาร์เรย์

const friends = ["Nahid", "Sagor", "Jahid"];
friends.shift();
console.log(friends); //[ 'Sagor', 'Jahid' ]

16.สไลซ์()

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

const candidate = ["Sagor", "Jahid", "JonDoe"];
const selectedCandidate = candidate.slice(0, 2);
console.log(selectedCandidate); //[ 'Sagor', 'Jahid' ]

17.เรียงลำดับ()

sort() วิธีการเรียงลำดับองค์ประกอบในอาร์เรย์ที่มีฐานการสั่งซื้อ แต่เราสามารถส่งฟังก์ชันการโทรกลับเพื่อกำหนดรูปแบบที่เรียงลำดับข้อมูลของเราได้

let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers); //[ 1, 2, 3, 4, 5 ]

ref:mdn

18.ประกบ()

วิธีการประกบกันยอมรับดัชนีพารามิเตอร์อย่างน้อย 2 รายการและจำนวนองค์ประกอบที่ถูกลบออกจากอาร์เรย์ ฟังก์ชันนี้จะกลายพันธุ์อาร์เรย์

const months = ["Jan", "March", "April", "June"];
months.splice(3, 0, "Feb");
console.log(months); //[ 'Jan', 'March', 'April', 'Feb', 'June' ]

19.ยกเลิกการเลื่อน()

วิธีการ unshift จะเพิ่มองค์ประกอบในตำแหน่งเริ่มต้นของอาร์เรย์และส่งกลับความยาวอาร์เรย์ใหม่

let numbers = [2, 3, 4];
numbers.unshift(1);
console.log(numbers); //[ 1, 2, 3, 4 ]

วิธีการวัตถุ JavaScript

1.วัตถุ.มอบหมาย()

สร้างวัตถุใหม่จากหลายวัตถุ

ref:mdn

const person = { name: "Jobayer Hossain", id: 23 };
const address = { city: "Dhaka", age: 35 };
const info = Object.assign(person, address);
console.log(info);
//{ name: 'Jobayer Hossain', id: 23, city: 'Dhaka', age: 35 }

2.วัตถุ.แช่แข็ง()

กระบวนการObject.freezeวิธีหยุดวัตถุทั้งหมดคุณสมบัติทั้งหมด

const person = {
 name: "Jon Doe",
 designation: "Front-End Developer",
 skill: { 
   design: "Photoshop",
   codeing: "Javascript",
  },
};
Object.freeze(person);
person.name = "Jobayer Hossain";
person.skill.design = "Figma";
console.log(person);
//{
  name: 'Jon Doe',
  designation: 'Front-End Developer',
  skill: { design: 'Figma', codeing: 'Javascript' }
}

3.วัตถุคีย์()

Object.keys() ส่งคืนคีย์ทั้งหมดของวัตถุ

const person = {
  name: "Jobayer Hossain",
  age: 21,
  role: "Front-End Developer",
  skill: "HTML CSS JS React",
};
const ObjKeys = Object.keys(person);
console.log(ObjKeys);
//[ 'name', 'age', 'role', 'skill' ]

4.วัตถุค่า()

Object.values() ส่งกลับค่าทั้งหมดของวัตถุ

const person = {
 name: "Jobayer Hossain",
 age: 21,
 role: "Front-End Developer",
 skill: "HTML CSS JS React",
};
const ObjValue = Object.values(person);
console.log(ObjValue);
//['Jobayer Hossain',21,'Front-End Developer','HTML CSS JS React']

จาวาสคริปต์คณิตศาสตร์

1.คณิตศาสตร์.abs()

Math.abs() วิธีการส่งกลับค่าสัมบูรณ์ของตัวเลข

console.log(Math.abs(5 - 2)); //3
console.log(Math.abs(5.9 - 5.1)); //0.8000000000000007

2.คณิตศาสตร์.ซิน()

เมธอดนี้ส่งคืนค่าตัวเลขภายใน -1 และ 1 ซึ่งอธิบายไซน์เป็นเรเดียนref: w3schools

console.log(Math.sin(1)); //0.8414709848078965
console.log(Math.sin(-1)); //-0.8414709848078965
console.log(Math.sin(0)); //0

2.Math.cos()

cos() วิธีการส่งกลับค่าโคไซน์ของตัวเลข

const getRadius = (a, b) => {
return Math.cos(a) * b;
};
console.log(getRadius(1, 10)); //5.403023058681398

3. Math.exp()

exp() วิธีการส่งกลับ e^[number]

ref:mdn

console.log(Math.exp(5)); //148.4131591025766
console.log(Math.exp(6)); //148.4131591025766

4.คณิตศาสตร์ชั้น()

floor() วิธีการปัดเศษตัวเลขลง

console.log(Math.floor(5.0524352345)); //5

5.คณิตศาสตร์.log()

log() วิธีการส่งกลับค่าลอการิทึมทั่วไปของตัวเลข

console.log(Math.log(4)); //1.3862943611198906

6.คณิตศาสตร์.นาที()

Math.min() วิธีการยอมรับค่าเป็นพารามิเตอร์และส่งกลับค่าต่ำสุด

console.log(Math.min(5, 10)); //5
console.log(Math.min(87, 210)); //87

7.คณิตศาสตร์.สูงสุด()

เมธอด Math.max() ยอมรับค่าเป็นพารามิเตอร์และส่งกลับค่าสูงสุด

console.log(Math.max(5, 10)); //10
console.log(Math.max(87, 210)); //210

8.คณิตศาสตร์.สุ่ม()

ตอบสนองต่อตัวเลขสุ่มระหว่าง 0 ถึง 1

console.log(Math.random()); //0.9671211951447136
console.log(Math.random()); //0.8787034350662186
console.log(Math.random()); //0.2373625260886849

9.คณิตศาสตร์รอบ()

วิธีการปัดเศษ () ปัดเศษตัวเลข

console.log(Math.round(2.9)); // 3
console.log(Math.round(2.5)); // 3
console.log(Math.round(2.4)); // 2

10.คณิตศาสตร์.sqrt()

sqrt() วิธีการคืนค่ารากที่สองของตัวเลข:

console.log(Math.sqrt(16)); //4
console.log(Math.sqrt(81)); //9