Please enable JavaScript.
Coggle requires JavaScript to display documents.
REVISION FRONT-END, CSS, HTML, ES6, JS (Variables, numbers and operators,…
-
CSS
-
-
Common Components 2: tabs, navbar, modal, dropdown, list group, avatar
-
-
-
-
-
-
-
-
Common Components 1: tooltips, buttons, forms, table
-
-
-
-
-
-
-
-
Grid System, Responsive Design and Mobile First Design
-
-
-
-
-
-
-
-
-
HTML
-
-
-
HTML Table
-
-
Colspan, rowspan, colgroup
-
-
-
-
ES6
-
Rest/spread
rest
-
Array Destructuring
let [first, ...rest] = [1, 2, 3, 4];
Object Destructuring
let { a, b, ...restProps } = { a: 1, b: 2, c: 3, d: 4 };
spread
Function Arguments
let numbers = [1, 2, 3];
console.log(sum(...numbers));
Array Literals
let arr2 = [...arr1, 4, 5, 6];
Object Literals
let obj2 = { ...obj1, c: 3, d: 4 };
Array Copying
let copyArray = [...originalArray];
let combinedArray = [...array1, ...array2];
Object Copying
let copyObject = { ...originalObject };
let combinedObject = { ...object1, ...object2 };
Map/set collection
Map
Stores key-value pairs, maintaining insertion order.
Set
Stores unique values, ensuring each value occurs only once.
ES history, different
ES6 stands for ECMAScript 6,2015
Arrow function
A shorter syntax and automatic binding of the this value from the surrounding context help avoid common errors when working with this in JavaScript.
-
iterator/generator
function* generatorFunction() {
yield 1;
yield 2;
yield 3;
}
const iterator = generatorFunction();
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
JS
Variables, numbers and operators
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Phân biệt let, const, var
-
-
-
-
-
-
Lexical scope
Phạm vi từ ngoài vào trong: Các phạm vi bên trong luôn có quyền truy cập vào các biến của phạm vi bao ngoài nó.
Được xác định trong quá trình viết mã: Phạm vi của các biến được xác định bởi cấu trúc mã, không phụ thuộc vào vị trí thực thi.
Closure: Lexical scope là cơ sở cho khái niệm closure trong JavaScript, nơi một hàm bên trong có thể "nhớ" và giữ lại trạng thái của các biến từ phạm vi bao quanh ngay cả sau khi hàm bao quanh đã kết thúc.
-
-
Scope
Hoisting
-
-
functions
Declaration
fully hoisted, including both the function name and its body
-
-
Closure
for creating functions with persistent private data or for implementing callback functions in asynchronous operations
allow functions to remember and access their lexical scope even when they're executed outside of that scope
-
-
-
Promises
Overview of Promises
-
State: pending (Init), fulfilled (resolve - success), rejected(failed)
-
Promise API
6 promise API
Promise.all
-
-
If any of the promises is rejected, the promise returned by Promise.all
Promise.allSettled
-
The resulting array
{status:"fulfilled", value:result} for successful responses.
{status:"rejected", reason:error} for errors.
-
-
-
-
Apply/Call/Bind
Similarity
Call, Apply, and Bind are methods that are used to manipulate the value of 'this' in JavaScript.
-
Difference
Call/Apply
Call and Apply are similar in that they both allow you to call a function with a specific 'this' value.
-
-
Bind
Bind, on the other hand, creates a new function that will have 'this' set to the first parameter passed to Bind.
-
Note:Compare All
Note:
- Tất cả functions chạy song song, ai được khai báo trước sẽ chạy trước
Promise vs Callback
- Xài .then để biến đối tượng bthuongwf thành đối tượng Promise
- Callback: xử lý lỗi phải tự tạo ra một lỗi.
- Promise: có một cái catch, có lỗi là nó tự log ra cái lỗi đó luôn
-Chaining: callback => callback hell, promise: trực quan hơn.
- Promise có kết hợp được với async/await
Asynce/await
- Ngắn gọn, code có trình tự
- Có xử lý lỗi
- Xử lý theo điều kiện dễ dàng
- Dễ debug hơn
- Có cộng đồng
-
-
- Closure
- Types and Coercion
- Scope
- Higher Order Function
- OOP vs Prototypes
- ES6
- Callbacks
- Promises
- Async/Await
-
- Kỹ thuật cascading?
- Giải thích về cơ chế "containment" trong CSS và thuộc tính liên quan như contain không?
- Giải thích về tính năng và cơ chế của grid và so sánh với flexbox?
=> Grid: hai chiều (hàng, cột) => flexible hơn => Bố cục phức tạp hơn
- Đặt tên class theo BEM: block - element - modifier
block__element--modifier
- CSS transition, CSS animation?
- Phân biệt em và rem? Khi nào dùng?