JavaScript - ES5: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn đang học lập trình JavaScript! Tôi rất vui mừng được làm hướng dẫn viên của các bạn trong hành trình thú vị vào thế giới của JavaScript ES5. Với tư cách là giáo viên khoa học máy tính có nhiều năm kinh nghiệm, tôi đã chứng kiến hàng trăm học sinh chuyển từ người mới bắt đầu thành những lập trình viên tự tin. Vậy nên, đừng lo lắng nếu bạn đang bắt đầu từ con số không - chúng ta sẽ cùng nhau học từng bước, và trước khi bạn nhận ra, bạn sẽ viết JavaScript như một chuyên gia!

Các tính năng mới được thêm vào trong JavaScript ES5

JavaScript ES5, ra mắt vào năm 2009, đã mang lại một loạt các tính năng mới tuyệt vời cho ngôn ngữ. Đó giống như khi trò chơi video yêu thích của bạn nhận được bản cập nhật tuyệt vời - đột nhiên, bạn có những công cụ và khả năng mới làm cho mọi thứ thú vị và hiệu quả hơn! Hãy cùng lặn sâu vào các tính năng này và xem chúng có thể làm cho cuộc sống lập trình của chúng ta dễ dàng hơn như thế nào.

Các phương thức của JavaScript Array

Mảng trong JavaScript giống như dao đa năng của Thụy Sĩ - chúng rất linh hoạt và có thể xử lý nhiều loại dữ liệu khác nhau. ES5 đã giới thiệu một số phương thức mới giúp làm việc với mảng dễ dàng hơn. Hãy cùng xem xét chúng một lần một:

JavaScript Array every()

Phương thức every() giống như một giáo viên严格的, kiểm tra xem tất cả học sinh trong lớp đều đã làm bài tập về nhà hay chưa. Nó kiểm tra xem tất cả các phần tử trong mảng có thỏa mãn một điều kiện nào đó hay không.

let numbers = [2, 4, 6, 8, 10];
let allEven = numbers.every(function(num) {
return num % 2 === 0;
});
console.log(allEven); // Output: true

Trong ví dụ này, every() kiểm tra xem tất cả các số trong mảng có phải là số chẵn hay không. Vì chúng đều là số chẵn, nó trả về true.

JavaScript Array filter()

filter() giống như một bảo vệ trong câu lạc bộ, chỉ cho phép các phần tử thỏa mãn một số tiêu chí nhất định vào. Nó tạo ra một mảng mới chứa tất cả các phần tử thỏa mãn bài kiểm tra do hàm cung cấp.

let fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
let longFruits = fruits.filter(function(fruit) {
return fruit.length > 5;
});
console.log(longFruits); // Output: ['banana', 'cherry', 'elderberry']

Ở đây, filter() tạo ra một mảng mới chứa chỉ các quả có tên dài hơn 5 ký tự.

JavaScript Array forEach()

forEach() giống như một hướng dẫn viên, dẫn bạn qua từng phần tử của mảng một cách chi tiết. Nó thực thi một hàm được cung cấp cho từng phần tử của mảng.

let colors = ['red', 'green', 'blue'];
colors.forEach(function(color, index) {
console.log(`Color at position ${index} is ${color}`);
});
// Output:
// Color at position 0 is red
// Color at position 1 is green
// Color at position 2 is blue

Phương thức này rất hữu ích cho việc thực hiện một hành động trên từng phần tử của mảng mà không cần tạo ra một mảng mới.

JavaScript Array isArray()

isArray() giống như một thám tử, xác định xem đối tượng có phải là mảng hay không. Nó trả về true nếu đối tượng là mảng, và false nếu không phải.

console.log(Array.isArray([1, 2, 3])); // Output: true
console.log(Array.isArray('Hello')); // Output: false

Phương thức này đặc biệt hữu ích khi bạn cần kiểm tra xem một biến có phải là mảng hay không trước khi thực hiện các thao tác cụ thể trên mảng.

JavaScript Array indexOf()

indexOf() giống như một đội tìm kiếm, tìm kiếm một phần tử cụ thể trong mảng và告诉 bạn nó ở đâu. Nó trả về chỉ số đầu tiên tại οποίο một phần tử có thể được tìm thấy trong mảng, hoặc -1 nếu nó không có mặt.

let fruits = ['apple', 'banana', 'cherry', 'date'];
console.log(fruits.indexOf('cherry')); // Output: 2
console.log(fruits.indexOf('grape')); // Output: -1

Phương thức này rất hữu ích khi bạn cần tìm vị trí của một phần tử trong mảng.

JavaScript Array lastIndexOf()

lastIndexOf() tương tự như indexOf(), nhưng nó bắt đầu tìm kiếm từ cuối mảng. Nó trả về chỉ số cuối cùng tại οποίο một phần tử có thể được tìm thấy trong mảng, hoặc -1 nếu nó không có mặt.

let numbers = [1, 2, 3, 2, 1];
console.log(numbers.lastIndexOf(2)); // Output: 3
console.log(numbers.lastIndexOf(4)); // Output: -1

Phương thức này rất hữu ích khi bạn muốn tìm最后一次 xuất hiện của một phần tử trong mảng.

JavaScript Array map()

map() giống như một cây đũa thần có thể chuyển đổi từng phần tử của mảng. Nó tạo ra một mảng mới với kết quả của việc gọi một hàm được cung cấp trên mỗi phần tử trong mảng.

let numbers = [1, 2, 3, 4, 5];
let squared = numbers.map(function(num) {
return num * num;
});
console.log(squared); // Output: [1, 4, 9, 16, 25]

Trong ví dụ này, map() tạo ra một mảng mới nơi mỗi số được bình phương.

JavaScript Array reduce()

reduce() giống như một cục tuyết lăn xuống đồi, tích lũy các giá trị khi nó di chuyển. Nó thực thi một hàm giảm trên từng phần tử của mảng, dẫn đến một giá trị duy nhất.

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 15

Ở đây, reduce() được sử dụng để tính tổng tất cả các số trong mảng.

JavaScript Array reduceRight()

reduceRight() tương tự như reduce(), nhưng nó xử lý mảng từ phải sang trái.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.reduceRight(function(accumulator, currentValue) {
return accumulator - currentValue;
});
console.log(result); // Output: -5 (5 - 4 - 3 - 2 - 1)

Phương thức này rất hữu ích khi thứ tự xử lý quan trọng và bạn muốn bắt đầu từ cuối mảng.

JavaScript Array some()

some() giống như một giáo viên khoan dung, vui vẻ nếu ít nhất một học sinh đã làm bài tập về nhà. Nó kiểm tra xem ít nhất một phần tử trong mảng có thỏa mãn bài kiểm tra do hàm cung cấp hay không.

let numbers = [1, 3, 5, 7, 8, 9];
let hasEven = numbers.some(function(num) {
return num % 2 === 0;
});
console.log(hasEven); // Output: true

Trong ví dụ này, some() kiểm tra xem có ít nhất một số chẵn trong mảng hay không.

Các phương thức của JavaScript Date

ES5 cũng đã giới thiệu một số phương thức hữu ích cho việc làm việc với ngày tháng:

JavaScript Date now()

Date.now() trả về số millisecond đã trôi qua kể từ ngày 1 tháng 1 năm 1970 00:00:00 UTC.

console.log(Date.now()); // Output: timestamp hiện tại trong millisecond

Phương thức này rất hữu ích cho việc đo lường khoảng thời gian hoặc tạo ra các идентификатор duy nhất.

JavaScript Date toJSON()

toJSON() trả về một chuỗi đại diện cho đối tượng Date trong định dạng JSON.

let date = new Date();
console.log(date.toJSON()); // Output: "2023-06-08T12:34:56.789Z"

Phương thức này rất hữu ích khi bạn cần 序列 hóa các đối tượng Date thành JSON.

JavaScript Date toISOString()

toISOString() chuyển đổi một đối tượng Date thành một chuỗi, sử dụng định dạng ISO 8601.

let date = new Date();
console.log(date.toISOString()); // Output: "2023-06-08T12:34:56.789Z"

Phương thức này rất hữu ích cho việc định dạng ngày tháng một cách chuẩn hóa, đặc biệt trong các ngữ cảnh quốc tế.

JavaScript Function bind()

bind() tạo ra một hàm mới mà khi được gọi, có this từ khóa được đặt thành giá trị được cung cấp. Đó giống như cấp cho một hàm một ngữ cảnh cụ thể để làm việc trong.

let person = {
name: 'John',
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};

let greetFunction = person.greet.bind(person);
greetFunction(); // Output: "Hello, my name is John"

Phương thức này đặc biệt hữu ích trong xử lý sự kiện và khi làm việc với lập trình hướng đối tượng trong JavaScript.

Các phương thức của JavaScript JSON

ES5 đã giới thiệu hỗ trợ nội tại cho JSON:

JavaScript JSON parse()

JSON.parse() phân tích một chuỗi JSON, tạo ra giá trị JavaScript hoặc đối tượng được mô tả bởi chuỗi.

let jsonString = '{"name":"John", "age":30, "city":"New York"}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // Output: "John"

Phương thức này rất quan trọng khi làm việc với dữ liệu từ các API hoặc lưu trữ các cấu trúc dữ liệu phức tạp dưới dạng chuỗi.

JavaScript JSON stringify()

JSON.stringify() chuyển đổi một đối tượng JavaScript hoặc giá trị thành một chuỗi JSON.

let obj = {name: "John", age: 30, city: "New York"};
let jsonString = JSON.stringify(obj);
console.log(jsonString); // Output: '{"name":"John","age":30,"city":"New York"}'

Phương thức này rất hữu ích khi bạn cần gửi dữ liệu đến máy chủ hoặc lưu trữ các đối tượng phức tạp dưới dạng chuỗi.

JavaScript Multiline Strings

ES5 đã giới thiệu một cách để tạo ra các chuỗi đa dòng sử dụng ký tự gạch ngang:

let multiline = "This is a \
multiline string \
in JavaScript.";
console.log(multiline);
// Output:
// This is a multiline string in JavaScript.

Tính năng này làm cho việc viết các chuỗi văn bản dài trong mã của bạn dễ dàng hơn.

Các phương thức của JavaScript Object

ES5 đã giới thiệu một số phương thức mới cho việc làm việc với các đối tượng:

JavaScript Object defineProperty()

Object.defineProperty() cho phép bạn định nghĩa hoặc sửa đổi các thuộc tính trực tiếp trên một đối tượng, với kiểm soát chi tiết về các thuộc tính đó.

let obj = {};
Object.defineProperty(obj, 'name', {
value: 'John',
writable: false,
enumerable: true,
configurable: true
});
console.log(obj.name); // Output: "John"
obj.name = 'Jane'; // Điều này sẽ không thay đổi giá trị vì writable là false
console.log(obj.name); // Output: "John"

Phương thức này mạnh mẽ cho việc tạo ra các đối tượng với hành vi và đặc điểm cụ thể.

JavaScript Property getters and setters

ES5 đã giới thiệu các phương thức getter và setter, cho phép bạn định nghĩa cách một thuộc tính được truy cập hoặc thay đổi:

let person = {
firstName: 'John',
lastName: 'Doe',
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(name) {
let parts = name.split(' ');
this.firstName = parts[0];
this.lastName = parts[1];
}
};

console.log(person.fullName); // Output: "John Doe"
person.fullName = 'Jane Smith';
console.log(person.firstName); // Output: "Jane"
console.log(person.lastName); // Output: "Smith"

Getters và setters cho phép bạn định nghĩa các thuộc tính tính toán và thêm logic khi lấy hoặc đặt giá trị.

JavaScript Reserved words as property names

ES5 cho phép sử dụng các từ保留 trong các tên thuộc tính trong các literial đối tượng:

let obj = {
class: 'JavaScript',
for: 'beginners',
if: true
};
console.log(obj.class); // Output: "JavaScript"

Tính năng này cung cấp sự linh hoạt hơn khi đặt tên cho các thuộc tính đối tượng.

JavaScript "use strict"

ES5 giới thiệu hướng dẫn "use strict", giúp启用严格模式 trong JavaScript. Chế độ严格 bắt đầu các lỗi phổ biến, ném ra các ngoại lệ và ngăn chặn hoặc ném ra lỗi khi các hành động "không an toàn" được thực hiện.

"use strict";
x = 3.14; // Điều này sẽ gây ra lỗi vì x không được声明

Sử dụng chế độ严格 giúp bắt lỗi sớm và khuyến khích các thực hành lập trình tốt hơn.

JavaScript String[number] access

ES5 cho phép truy cập các ký tự单独 trong một chuỗi sử dụng ký tự ngoặc vuông:

let str = "Hello";
console.log(str[0]); // Output: "H"
console.log(str[1]); // Output: "e"

Tính năng này làm cho việc làm việc với các ký tự đơn trong chuỗi dễ dàng hơn.

JavaScript String trim()

Phương thức trim() loại bỏ các khoảng trắng từ cả hai đầu của một chuỗi:

let str = "   Hello, World!   ";
console.log(str.trim()); // Output: "Hello, World!"

Phương thức này rất hữu ích cho việc làm sạch đầu vào người dùng hoặc định dạng chuỗi.

JavaScript Trailing commas

ES5 cho phép sử dụng các dấu phẩy ở cuối trong các literial đối tượng và mảng:

let obj = {
name: "John",
age: 30,
}; // Không có lỗi

let arr = [1, 2, 3,]; // Không có lỗi

Tính năng này làm cho việc thêm hoặc loại bỏ các mục từ các đối tượng và mảng dễ dàng hơn mà không cần lo lắng về việc đặt phẩy.

Kết luận

Uff! Chúng ta đã bao quát rất nhiều nội dung trong hướng dẫn này. ES5 mang lại nhiều tính năng mạnh mẽ cho JavaScript mà vẫn được sử dụng rộng rãi ngày nay. Hãy nhớ rằng, việc học lập trình giống như học một ngôn ngữ mới - nó đòi hỏi sự thực hành và kiên nhẫn. Đừng để bản thân bị吓到 nếu bạn không hiểu mọi thứ ngay lập tức. Hãy tiếp tục viết mã, tiếp tục thử nghiệm và quan trọng nhất, hãy vui vẻ!

Dưới đây là bảng tóm tắt tất cả các phương thức chúng ta đã thảo luận:

Phương thức	Mô tả
Array.every()	Kiểm tra xem tất cả các phần tử trong mảng có thỏa mãn điều kiện hay không
Array.filter()	Tạo ra một mảng mới với tất cả các phần tử thỏa mãn điều kiện
Array.forEach()	Thực thi một hàm trên từng phần tử của mảng
Array.isArray()	Xác định xem một đối tượng có phải là mảng hay không
Array.indexOf()	Trả về chỉ số đầu tiên của một phần tử trong mảng
Array.lastIndexOf()	Trả về chỉ số cuối cùng của một phần tử trong mảng
Array.map()	Tạo ra một mảng mới với kết quả của việc gọi hàm trên mỗi phần tử
Array.reduce()	Thực thi một hàm giảm trên từng phần tử của mảng, dẫn đến một giá trị duy nhất
Array.reduceRight()	Thực thi một hàm giảm trên từng phần tử của mảng từ phải sang trái
Array.some()	Kiểm tra xem ít nhất một phần tử trong mảng thỏa mãn điều kiện hay không
Date.now()	Trả về số millisecond đã trôi qua kể từ ngày 1 tháng 1 năm 1970
Date.toJSON()	Trả về chuỗi đại diện cho đối tượng Date trong định dạng JSON
Date.toISOString()	Chuyển đổi một đối tượng Date thành chuỗi, sử dụng định dạng ISO 8601
Function.bind()	Tạo ra một hàm mới với this từ khóa được đặt thành giá trị được cung cấp
JSON.parse()	Phân tích một chuỗi JSON, tạo ra giá trị JavaScript hoặc đối tượng được mô tả
JSON.stringify()	Chuyển đổi một đối tượng JavaScript hoặc giá trị thành chuỗi JSON
Object.defineProperty()	Định nghĩa hoặc sửa đổi một thuộc tính trực tiếp trên một đối tượng
String.trim()	Loại bỏ các khoảng trắng từ cả hai đầu của một chuỗi

Giữ bảng này handy như một tham khảo nhanh khi bạn đang lập trình. Chúc bạn lập trình vui vẻ!

Credits: Image by storyset