Khi đọc code frontend không hiểu phải làm sao? nếu bạn đang có câu hỏi này thì hãy tìm hiểu ngay javascript ES6
Javascritp ES6
Javascritp ES6 cập nhật nhiều tính năng thú vị cho jasvascript, các frontend framework nào cũng sử dụng ES6.
1. ES6 Variables
Từ version ES6 trở đi, khai báo biến có thể bắt đầu bằng: var, let và const
Nếu bạn sử dụng var ngoài function nó là global scope, sử dụng trong 1 block code nó vẫn sử dụng được ngoài block code, var là function scope(biến có phạm vi sử dụng trong hàm). Vì vậy es6 thêm 1 cách khai báo biến mới là let. let để khai báo 1 biến, scope của let trong block code, không cho phép khai báo 2 lần(khai báo chồng nhau), biến có thể gán lại giá trị. Các code nằm trong cặp ngoặc nhọn {} gọi là 1 block. let, cost chỉ có phạm vi sử dụng trong cặp ngoặc nhọn vì là block scope
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
const khai báo biến không đổi, không cho phép khai báo 2 lần, không cho phép gán lại 2 lần.
const PI = 3.141592653589793;
PI = 3.14; // This will give an error
2. Class
Class chỉ dùng được từ version es6 trở đi, Tên của class phải viết hoa chữ cái đầu
class Car {
constructor(name) {
this.brand = name;
}
present() {
return 'I have a ' + this.brand;
}
}
class Model extends Car {
constructor(name, mod) {
super(name);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model
}
}
const mycar = new Model("Ford", "Mustang");
mycar.show(); // I have a Ford, it is a Mustang
Các thuộc tính được khởi tạo trong hàm constructor, có thể extends các class. Sử dụng hàm super() trong contructor, để có thể sử dụng constructor, properties, function của class cha.
Lưu và lấy dữ liệu trong object.
// Object variable
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// Có 2 cách lấy dữ liệu
person.firstName; // John
person['firstName'];
3. Arow function
Sử dụng arrow function giúp khai báo function gắn gọn nhất, arrow function không có con trỏ this, con trỏ this trong hàm là con đối tượng khai báo function.
// Cách khai báo function cũ
// function declaration
function hello() {
return "Hello World!";
}
// function expression
const hello = function() {
return "Hello World!";
}
// Khai báo theo arrow function
// arrow function đầy đủ
hello = () => {
return "Hello World!";
}
// Arrow function rút gọn
hello = () => "Hello World!";
// Arrow function with parameters
hello = (val, val2) => "Hello " + val + val2;
// Arrow function with one param
hello = val => "Hello " + val;
// Old function
function hello (val) {
return "Hello " + val;
}
Tìm hiểu sự khác nhau giữa this trong arrow function và regular function
- Arrow function không có binding this, chỉ function thường mới binding được
- This trong arrow function đại diện cho obj định nghĩa arrow function, this trong regular function đại diện cho obj call function(như window, document, button...)
4. Array Methods
2 hàm xử lý dữ liệu kiểu mảng hay dùng là map() và filter()
// hàm map() sẽ tạo ra 1 mảng mới, gọi function được truyền vào với các phần tử trong mảng, // nếu mảng rỗng sẽ không thực thi, và không làm thay đổi mảng cũ
const numbers = [2, 4, 6, 8];
const newArr = numbers.map(item => item * 2); // [4, 6, 8, 16];
// Hàm filter() lọc data của mảng
// Tạo ra mảng mới, chỉ lấy data phù hợp với function truyền vào
// Không làm thay đổi mảng cũ
const numbers = [2, 4, 6, 8];
const newArr = numbers.filter(item => item > 4); // [6, 8];
5. Template Literals
Cho phép viết biến cùng với string, string hiển thị trên nhiều dòng...
// Nối chuỗi Welcome John Doe
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
// Expression in string
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
// Mutiline string
let text =
`The quick
brown fox
jumps over
the lazy dog`;
6. Spread Operator
Toán tử mở rộng cho phép copy tất cả hoặc một phần của array, obj sang array, objec khác
// Copy 2 mảng vào 1 mảng mới
const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
// [1, 2, 3, 4, 5, 5]
const numbersCombined = [...numbersOne, ...numbersTwo];
// Thêm 1 giá trị vào đầu mảng
const numbersOne = [1, 2, 3];
// [0, 1, 2, 3]
const newArr = [0, ...numbersOne];
// Thêm 1 giá trị vào cuối mảng
const numbersOne = [1, 2, 3];
// [1, 2, 3, 4]
const newArr = [...numbersOne, 4];
// Combine 2 obj
const myVehicle = {
brand: 'Ford',
color: 'red'
}
const updateMyVehicle = {
year: 2021,
color: 'yellow'
}
// {brand: 'Ford', year: 2021, color: 'yellow'}
const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}
7. Destructuring
Chỉ lấy những dữ liệu cần lấy
const vehicles = ['mustang', 'f-150', 'expedition'];
// Lấy giá trị trong mảng theo cách cũ
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];
// Lấy giá trị trong mảng theo destructuring
const [car, truck, suv] = vehicles;
const [car,, suv] = vehicles;
// Lấy giá trị của obj
const person = { name: 'John', age: 26, eyeColor: 'black', like: 'girl' };
const { age, name } = person;
console.log(name); //John
console.log(age); //26
// Lấy giá trị của obj theo destructuring
const vehicleOne = {
brand: 'Ford',
model: 'Mustang',
type: 'car',
year: 2021,
color: 'red',
registration: {
city: 'Houston',
state: 'Texas',
country: 'USA'
}
}
// My Mustang is registered in Texas.
myVehicle(vehicleOne)
function myVehicle({ model, registration: { state } }) {
return 'My ' + model + ' is registered in ' + state + '.';
}
8. Rest parameters
Cho phép function lấy động các đối số của mình vào 1 mảng. Một function chỉ có thể định nghĩa 1 rest params và rest params phải là tham số cuối cùng của function.
function sum(...theArgs) {
let total = 0;
for (const arg of theArgs) {
total += arg;
}
return total;
}
// theArgs là mảng các đối số của function
console.log(sum(1, 2, 3)); // 6
// Hàm tính
function multiply(multiplier, ...theArgs) {
return theArgs.map((element) => multiplier * element);
}
const arr = multiply(2, 15, 25, 42);
console.log(arr); // [30, 50, 84]
9. Import, Export
Import giúp dùng lại các biến, function từ file or module bên ngoài. Export giúp sử dụng lại biến or function trong 1 file khác khi import.
// Import
// import từ file export default không cần phải đặt biến trong ngoặc nhọn
// vì nó chỉ import, export 1 giá trị.
import defaultExport from "module-name";
import * as name from "module-name";
// Sử dụng lại export1 từ file file module-name
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
// Export biến name1, name2 để có thể dùng ở file khác
export let name1, name2/*, … */; // also var
export const name1 = 1, name2 = 2/*, … */; // also var, let
export function functionName() { /* … */ }
export class ClassName { /* … */ }
// Export 1 hàm tính toán trong file "my-module.js"
export default function cube(x) {
return x * x * x;
}
// import hàm tính toán từ file my-module.js và dùng lại function cube()
import cube from './my-module.js';
console.log(cube(3)); // 27
10. Conditional (ternary) operator
Toán tử điều kiện, short hard
condition ? exprIfTrue : exprIfFalse
const age = 26;
const beverage = age >= 21 ? "Beer" : "Juice";
console.log(beverage); // "Beer"
11. Optional chaining (?.)
Dùng để access vào thuộc tính của 1 đối tượng hoặc gọi hàm. Nếu obj là null hoặc undefine thì trả và undefine thay vì throw ra error.
const adventurer = {
name: 'Alice',
cat: {
name: 'Dinah'
}
};
// Nếu đối tượng adventurer có thuộc tính dog thì lấy name của dog, không có trả về undefine
const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined
// Set giá trị default
const dogName = adventurer.dog?.name ?? "dog";
// expected output: dog
// Nếu đối tượng adventurer có hàm someNonExistentMethod thì gọi hàm
console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined
Tổng kết
Như vậy là chúng ta đã tìm hiểu xong một số khái niệm hay dùng với ES6, những khái niệm cơ bản nhưng cực kì mạnh mẽ trong javascritp. Thanks for reading.
Author
