    __          _ ____        _          ____  __      _           __ 
   / /_  __  __(_) / /_      (_)___     / __ \/ /_    (_)__  _____/ /_
  / __ \/ / / / / / __/_____/ / __ \   / / / / __ \  / / _ \/ ___/ __/
 / /_/ / /_/ / / / /_/_____/ / / / /  / /_/ / /_/ / / /  __/ /__/ /_  
/_.___/\__,_/_/_/\__/     /_/_/ /_/   \____/_.___/_/ /\___/\___/\__/  
                                                /___/
                                                       __    ___   ___    __    _    
                                                      / /\  | |_) | |_)  / /\  \ \_/ 
                                                     /_/--\ |_| \ |_| \ /_/--\  |_|

Object

Boolean

Check is Object

obj.constructor === Object // true

function isObject(value) {
  return Object.prototype.toString.call(value) === "[object Object]";
}

Other

assign

const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };

const newTarget = Object.assign(target, source); // { a: 1, b: 3, c: 4 }

target === newTarget // true

fromEntries

const entries =[
  ['foo', 'bar'], // [key, value]
  ['baz', 42]
];

Object.fromEntries(entries); // { foo: "bar", baz: 42 }

getOwnPropertyNames

const object1 = {
  a: 1,
  b: 2,
  c: 3
};

Object.getOwnPropertyNames(object1) // ["a", "b", "c"]

hasOwn

const object1 = {
  prop: 'exists'
};

Object.hasOwn(object1, 'prop') // true

hasOwnProperty

const object1 = {
  prop: 'exists'
};

object1.hasOwnProperty('prop') // true

// Ngoài ra còn có in để kiểm tra sự tồn tại property
const object1 = {
  prop: 'exists'
};

"prop" in object1 // true

is - compare object

const obj = {a: 1};

Object.is(obj, obj); // true

freeze - Đóng băng

const obj = { prop: 42, child: { id: 1 } };

Object.freeze(obj);

// Parent
// No: Create, Update, Delete
obj.prop = 33;
obj.prop2 = 33;
delete obj.prop;

// Child
// Yes: Create, Update, Delete
obj.child.id = 2;
obj.child.id1 = 2;
obj.child.id2 = 2;
delete obj.child.id2;

console.log(Object.isFrozen(obj)) // true
console.log(obj) // { prop: 42, child: { id: 2, id1: 2 } }

seal - Niêm phong

const obj = { prop: 42, child: { id: 1 } };

Object.seal(obj);

// Parent
// Yes: Update
obj.prop = 33;
// No: Create, delete
obj.prop1 = 33;
delete obj.prop

// Child
// Yes: Create, Update, Delete 
obj.child.id = 2;
obj.child.id1 = 2;
obj.child.id2 = 2;
delete obj.child.id2;

console.log(Object.isSealed(obj)) // true
console.log(obj) // { prop: 33, child: { id: 2, id1: 2 } }

isExtensible - preventExtensions - Mở rộng

const obj = { prop: 42, child: { id: 1 } };

console.log(Object.isExtensible(obj)); // true

console.log(Object.preventExtensions(obj)); // { prop: 42, child: { id: 1 } }

console.log(Object.isExtensible(obj));  // false


// Parent
// Yes: Delete
delete obj.prop;
// No: Create, Update
obj.prop = 2
obj.prop2 = 2

// Child
// Yes: Create, Update, Delete 
obj.child.id = 2;
obj.child.id1 = 2;
obj.child.id2 = 2;
delete obj.child.id2;

console.log(obj) // { child: { id: 2, id1: 2 } }

keys

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1)); // ["a", "b", "c"]

values

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1)); // ["somestring", 42, false]

Remove property

const { name, ...rest } = { name: 'Foo', age: 20 };

console.log(name); // 'Foo'
console.log(rest); // { age: '20' }

Unpack property object

const person = {
    name: 'John Doe',
};

const { name } = person; // name = 'John Doe'

// Or unpack with other name
const { name: fullName } = person; // fullName: 'John Doe'

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

Array

New Array

new array by number

[...Array(10).keys()]
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Array.from(Array(10).keys())
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Array.from({length: 10}, (_, i) => i + 1)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

clone an array

const originalArray = [1, 2, 3];

originalArray.slice() or originalArray.slice(0)

[...originalArray]

Array.from(originalArray)

[].concat(originalArray);

originalArray.map(x => x);

Array.from(originalArray, x => x);

Array.of(...originalArray);

JSON.parse(JSON.stringify(originalArray));

Object.assign([], originalArray);

from

Array.from('123'); // ['1', '2', '3']

Array.from([1, 2, 3], x => x + x); // [2, 4, 6]
  
Array.from({length: 10}, (_, i) => i + 1); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.of(1,2,3,true); // [1, 2, 3, true]

Array.of(); // []

Boolean

Check is Array

Array.isArray([1, 2, 3]);  // true

'length' in arr // true

arr.constructor === Array // true

function isArray(arr){
  return Object.prototype.toString.call(arr) === '[object Array]'
}

instanceof

arr instanceof Array // object

some - every

// some: Một trong số đúng điều kiện thì trả về true
// every: Tất cả phải đúng với điều kiện thì trả về true

console.log([true, false].some(x => x)) // true
console.log([true, false].every(x => x)) // false

includes

console.log([1,2].includes(1)); // true
console.log("demo abc".includes('abc')); // true

Find

find - filter

[1,2,3].find(x => x === 2) // 2

[1,2,3].filter(x => x < 2) // [1]

indexOf - lastIndexOf

[1,2,3].indexOf(2) // 1

[1,2,3].lastIndexOf(1) // 0

Modified - return new array

concat

[1, 2, 3].concat([4]) // [1, 2, 3, 4]
    
Array.prototype.concat([1, 2, 3], [4]); // [1, 2, 3, 4]

// Gợi ý thêm string cũng có thể concat
"text1".concat(" ", "text2"); // "text1 text2"

join

[1, 2, 3].join('-') // '1-2-3'

slice

[1, 2, 3].slice(1) // [2, 3]
  
[1, 2, 3].slice(-1) // [3]
  
[1, 2, 3].slice(0,2) // [1, 2]

map

[1,2,3].map(x => x * 2) // [2, 4, 6]

reduce

let index = 0; // Chỉ số 
[1,2,3].reduce((accumulator,current) => accumulator * current, index) // 6

https://gist.github.com/id1945/c5a89e5b87f26b1e0237d39df55bd44c

fill

[1,2,3].fill(0, 2, 4) // [1, 2, 0]

[1,2,3].fill(5, 1)  // [1, 5, 5]

[1,2,3].fill(6) // [6, 6, 6]

flat - flatMap

[0, 1, 2, [3, 4]].flat() // [0, 1, 2, 3, 4]

[0, 1, 2, [[[3, 4]]]].flat(2)  // [0, 1, 2, [3, 4]]

[1, 2, [3], [4, 5], 6, []].flatMap(num => num) // [1, 2, 3, 4, 5, 6]

toSorted

const arr = [
  { name: 'D2', position: 1, iteration: 0 },
  { name: 'D1', position: 0, iteration: 0 },
  { name: 'D3', position: 0, iteration: 1 },
  { name: 'D4', position: 1, iteration: 1 },
];

// Trả về một mảng mới với các phần tử được sắp xếp
const newArr = arr.toSorted((a, b) => {
  if (a.iteration > b.iteration) {
    return 1;
  } else if (a.iteration < b.iteration) {
    return -1;
  } else {
    // a.iteration === b.iteration
    // có thể kiểm tra theo điều kiện thứ 2
    // ví dụ: if(a.title > b.title) ...
    return a.position > b.position ? 1 : -1;
  }
});

newArr.forEach((v) => console.log(v))
  
// { name: "D1", position: 0, iteration: 0 }
// { name: "D2", position: 1, iteration: 0 }
// { name: "D3", position: 0, iteration: 1 }
// { name: "D4", position: 1, iteration: 1 }

toReversed

[1,2,3].toReversed() // [3, 2, 1]

toSpliced

let arr = [1,2,3]

// Add
arr.toSpliced(1, 0, 'two') // [1, "two", 2, 3]

// Update
arr.toSpliced(1, 1, 'Update') // [1, "Update", 3]

// Delete
arr.toSpliced(1, 1) // [1, 3]

with

[1,2,3].with(2, 6) // [1, 2, 6]

Modified - return reference array

sort

const arr = [
  { name: 'D2', position: 1, iteration: 0 },
  { name: 'D1', position: 0, iteration: 0 },
  { name: 'D3', position: 0, iteration: 1 },
  { name: 'D4', position: 1, iteration: 1 },
];

// Trả về tham chiếu đến cùng một mảng
arr.sort((a, b) => {
  if (a.iteration > b.iteration) {
    return 1;
  } else if (a.iteration < b.iteration) {
    return -1;
  } else {
    // a.position === b.position
    // có thể kiểm tra theo điều kiện thứ 2
    // ví dụ: if(a.title > b.title) ...
    return a.position > b.position ? 1 : -1;
  }
});

arr.forEach((v) => console.log(v))

// { name: "D1", position: 0, iteration: 0 }
// { name: "D2", position: 1, iteration: 0 }
// { name: "D3", position: 0, iteration: 1 }
// { name: "D4", position: 1, iteration: 1 }

reverse

const arr = [1,2,3]
arr.reverse()
// arr: [3, 2, 1]

Add & Delete - return reference array

unshift - shift

let arr = [1,2,3]

// Add
const a = arr.unshift(5)
// arr: [5,1,2,3]
// a: 4 (length)

// Delete
const a = arr.shift()  
// arr: [2,3], 
// a: 1 (value)

push - pop

let arr = [1,2,3]

// Add
const a = arr.push('test')
// arr: [1, 2, 3, 'test'] 
// a: 4 (length)


// Delete
const a = arr.pop(1)
// arr: [1, 2] 
// a: 3 (value)

splice

// splice(start, deleteCount, item1, item2, itemN)

let arr = [1,2,3]

// Add
const a = arr.splice(1, 0, 'two')
// arr: [1, 'two', 2, 3]
// a: []


// Update
const a = arr.splice(1, 1, 'Update')
// arr: [1, 'Update', 3]
// a: [2] (value)


// Delete
const a = arr.splice(1, 1)
// arr: [1, 3]
// a: [2] (value)

Advance

group by - fromEntries

const items = [
  {
    type: 'fruit',
    value: '🍎',
  },
  {
    type: 'fruit',
    value: '🍇',
  },
  {
    type: 'fruit',
    value: '🍊',
  },
  {
    type: 'vegetable',
    value: '🥦',
  },
  {
    type: 'vegetable',
    value: '🥕',
  },
  {
    type: 'vegetable',
    value: '🌶️',
  },
];

const uniq = new Set(items.map(({ type }) => type));
const data = Array.from(uniq).map((type) => [type, items.filter((item) => item.type === type)]);
const output = Object.fromEntries(data);

// uniq: Set(2) {'fruit', 'vegetable'}
// data: [['fruit', Array(3)], ['vegetable', Array(3)]]
// output: {fruit: Array(3), vegetable: Array(3)}

group by - reduce

const output = items.reduce(
  (acc, item) => ({
    ...acc,
    [item.type]: [...(acc[item.type] ?? []), item],
  }),
  {},
);

// output: {fruit: Array(3), vegetable: Array(3)}

const output = items.reduce((acc, item) => {
  if (acc[item.type]) {
    acc[item.type].push(item);
  } else {
    acc[item.type] = [item];
  }

  return acc;
}, {});

// output: {fruit: Array(3), vegetable: Array(3)}

Function

Call

Call mục đích thay object mới cho this hiện tại của function

function Product(name, price) {
  this.name = name;
  this.price = price;
}

// CALL
function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

const food = new Food('cheese', 5);
console.log(food.name); // "cheese"
console.log(food.price); // 5
console.log(food.category); // "food"

const obj = {
  prod1: 'prod1',
  prod2: 'prod2',
  display: function (param1, param2) {
    console.log(this.prod1, this.prod2, param1, param2);
  },
};

const objNew = {
  prod1: 'prod1_new',
  prod2: 'prod2_new',
};

// CALL
obj.display.call(objNew, 'param1', 'param2'); // "prod1_new" "prod2_new" "param1" "param2"

Bind

Bind mục đích thay object mới cho this hiện tại của function
Phải gán cho biến mới và gọi biến đó để chạy

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// Expected output: undefined

const boundGetX = module.getX.bind(module);
console.log(boundGetX());
// Expected output: 42

const obj = {
  prod1: 'prod1',
  prod2: 'prod2',
  display: function (param1, param2) {
    console.log(this.prod1, this.prod2, param1, param2);
  },
};

const objNew = {
  prod1: 'prod1_new',
  prod2: 'prod2_new',
};

// BIND
const func = obj.display.bind(objNew, 'param1', 'param2');
func(); // => "prod1_new" "prod2_new" "param1" "param2"

Apply

Apply mục đích thay object mới cho this hiện tại của function
Param truyền phải là mảng

const obj = {
  prod1: 'prod1',
  prod2: 'prod2',
  display: function (param1, param2) {
    console.log(this.prod1, this.prod2, param1, param2);
  },
};

const objNew = {
  prod1: 'prod1_new',
  prod2: 'prod2_new',
};

// APPLY
obj.display.apply(objNew, ['param1', 'param2']); // "prod1_new" "prod2_new" "param1" "param2"

Global functions

eval

console.log(eval('2 + 2')); // 4

isFinite

console.log(isFinite(1000), isFinite(10/0)); // true, false

isNaN

console.log(isNaN('100QQ'), isNaN('1E+10')); // true, false

decodeURI

console.log(encodeURI('?search=putin&age=70&wife=Lyudmila Aleksandrovna Ocheretnaya')); // ?search=putin&age=70&wife=Lyudmila%20Aleksandrovna%20Ocheretnaya

console.log(decodeURI('?search=putin&age=70&wife=Lyudmila%20Aleksandrovna%20Ocheretnaya')); // ?search=putin&age=70&wife=Lyudmila Aleksandrovna Ocheretnaya
    
console.log(encodeURIComponent('?search=putin&age=70')); // "%3Fsearch%3Dputin%26age%3D70"

console.log(decodeURIComponent('"%3Fsearch%3Dputin%26age%3D70"')); // ?search=putin&age=70

Collections

Map

Map cấu trúc dạng key - value
Key trong map là unique
Key là string, number

const map1 = new Map();

map1.set('a', 1);
map1.set('b', 2);
map1.set('c', 3);

// CRUD

// Create
console.log(map1.set('d', 97).get('d')); // 97

// Read
console.log(map1.get('a')); // 1

// Update
console.log(map1.set('a', 100).get('a')); // 100

// Delete
console.log(map1.delete('b')); // true

// Size
console.log(map1.size); // 3

// Has
console.log(map1.has("a")); // true

// clear
// map1.clear(); 

// Loop
map1.forEach((value, key) => console.log(`${key} = ${value}`)); 
// "a = 100"
// "c = 3"
// "d = 97"

for (const [key, value] of map1) {
  console.log(`${key} = ${value}`);
}
// "a = 100"
// "c = 3"
// "d = 97"

for (const key of map1.keys()) {
  console.log(key);
}
// "a"
// "c"
// "d"

for (const value of map1.values()) {
  console.log(value);
}
// 100
// 2
// 97

for (const [key, value] of map1.entries()) {
  console.log(`${key} = ${value}`);
}
// "a = 100"
// "c = 3"
// "d = 97"

Set

Set cấu trúc dạng value
Value trong set là unique
Value là number, string, Object

const set1 = new Set();

// CD

// Create
set1.add('Demo1');
set1.add('Demo2');
set1.add({ a: 1, a: 1, b: 2 }); // Phần tử trong set là unique { a: 1, b: 2 }

// Delete
console.log(set1.delete('Demo1')); // true

// Has
console.log(set1.has('Demo2')); // true

// Size
console.log(set1.size); // 2

// clear
// set1.clear();

// Loop
for (const item of set1) {
  console.log(item);
}
// "Demo2"
// { a: 1, b: 2 }


for (const item of set1.keys()) {
  console.log(item);
}
// "Demo2"
// { a: 1, b: 2 }

for (const item of set1.values()) {
  console.log(item);
}
// "Demo2"
// { a: 1, b: 2 }

for (const [key, value] of set1.entries()) {
  console.log(key);
}
// "Demo2"
// { a: 1, b: 2 }

console.log(Array.from(set1));
// ["Demo2", { a: 1, b: 2 }]

// Convert to array
let char = new Set(['a', 'b', 'c']);
console.log([...char]) // ['a', 'b', 'c']

WeakMap

WeakMap chỉ có thể chứa key dạng object.
WeakMaps cũng có các method giống như Map là get(), set(), delete() và has()
WeakMaps không thể lặp các phần tử

const weakMap = new WeakMap();

WeakSets

WeakSet chỉ có thể chứa các đối tượng
WeakSets có phương pháp add(), delete()và has()
WeakSets không thể lặp

const weakSets = new WeakSets();

view raw built-in-objects.md hosted with ❤ by GitHub

    $$$$$$$$\  $$$$$$\   $$$$$$\        
$$  _____|$$  __$$\ $$  __$$\       
$$ |      $$ /  \__|$$ /  \__|      
$$$$$\    \$$$$$$\  $$$$$$$\        
$$  __|    \____$$\ $$  __$$\       
$$ |      $$\   $$ |$$ /  $$ |      
$$$$$$$$\ \$$$$$$  | $$$$$$  |      
\________| \______/  \______/

Destructuring (Hủy diệt)  let [...rest] = [10, 20, 30, 40, 50]; // rest = [10, 20, 30, 40, 50]

  let [a, b] = [10, 20]; // a = 10, b =  20

Computed (Tính toán)  const param = "size";
  const config = {
    [param]: 12
  };
  // config: {size: 12}

Shorthand (Tốc ký)  var keyName = 12;

  //PRE ES6
  var obj = {
    keyName: keyName
  };

  //ES6 Object property shorthand
  var obj = {
    keyName
  };

  // obj: {keyName: 12}

Spread  (Lây lan)  const numbers = [1, 2, 3];
  
  function sum(x, y, z) {
    return x + y + z;
  }

  sum(...numbers) // 6


  

view raw es6.md hosted with ❤ by GitHub

______           _                       
|  ___|         | |                      
| |_ ___  _ __  | |     ___   ___  _ __  
|  _/ _ \| '__| | |    / _ \ / _ \| '_ \ 
| || (_) | |    | |___| (_) | (_) | |_) |
\_| \___/|_|    \_____/\___/ \___/| .__/ 
                                  | |    
                                  |_|
    ____             _     
   / __ )____ ______(_)____
  / __  / __ `/ ___/ / ___/
 / /_/ / /_/ (__  ) / /__  
/_____/\__,_/____/_/\___/

The for loop:

for (let index=0; index < someArray.length; index++) {
  const elem = someArray[index];
  // ···
}

More

- ES1
- Work with async/await
- Work with `continue`
- Work with `break`

The for-in loop:

for (const key in someArray) {
  console.log(key);
}

More

- ES1
- Work with async/await
- Work with `continue`
- Work with `break`
- Work with Array, Object

The Array method .forEach():

someArray.forEach((elem, index) => {
  console.log(elem, index);
});

More

- ES5
- Not support async/await
- Not work with `continue` 
  - `Error: Illegal continue statement: no surrounding iteration statement`
- Not work with `break`
  - `Error: Illegal break statement`

The for-of loop:

for (const elem of someArray) {
  console.log(elem);
}

More

- ES6
- Work with async/await (Nên sử dụng)
- Work with `continue`
- Work with `break`

### value

for (let value of data) {}

### index

for (let [index, value] of data.entries()) {}

for (let index of arr.keys()) {}

### key value

const myMap = new Map().set(false, 'no').set(true, 'yes');
for (const [key, value] of myMap) {}

______           _                   
|  ___|         | |                  
| |_ ___  _ __  | | ___   ___  _ __  
|  _/ _ \| '__| | |/ _ \ / _ \| '_ \ 
| || (_) | |    | | (_) | (_) | |_) |
\_| \___/|_|    |_|\___/ \___/| .__/ 
                              | |    
                              |_|
                                                                                
   ___                       _____              _ __ 
  / _ | ___ __ _____  ____ _/_/ _ |_    _____ _(_) /_
 / __ |(_-</ // / _ \/ __//_// __ | |/|/ / _ `/ / __/
/_/ |_/___/\_, /_//_/\__/_/ /_/ |_|__,__/\_,_/_/\__/ 
          /___/

Data

const promiseFn = (n = 1) => new Promise((res, rej) =>  setTimeout(() => res(n), 1000 * n));

const array = [{
  id: 1,
  name: 'Nikolai'
},{
  id: 5,
  name: 'Wiliam'
}];

const object = {
  id: 5,
  name: 'Wiliam'
};

For basic - async/await

const run = async (data) => {
    for (let i = 0; i < data.length; ++i) {
        await promiseFn();
        console.log(data[i]);
    }
    console.log('this will print last');
}
  
run(array);

> { id: 1, name: "Nikolai" }
> { id: 5, name: "Wiliam" }
> "this will print last"

For of - async/await

const run = async (data) => {
  for (let item of data) {
    await promiseFn();
    console.log(item);
  }
  console.log('this will print last');
}
  
run(array);

> { id: 1, name: "Nikolai" }
> { id: 5, name: "Wiliam" }
> "this will print last"

For in - async/await

const run = async (data) => {
  for (let key in data) {
    await promiseFn();
    console.log(key, data[key]);
  }
  console.log('this will print last');
}

Array

run(array);

> "0" { id: 1, name: "Nikolai" }
> "1" { id: 5, name: "Wiliam" }
> "this will print last"

Object

run(object);

> "id" 5
> "name" "Wiliam"
> "this will print last"

for await (variable of iterable) - async/await

const promiseArr = [1,2,3,4].map(m => promiseFn(m));

const run = async () => {
    for await (let item of promiseArr) {
        console.log(item);
    }
    console.log('this will print last');
}
  
run();
  
// 1
// 2
// 3
// 4
// "this will print last"

Tốc độ của các vòng lặp

const arr = new Array(100).fill(Math.random());

// 01 - nhanh nhất
let dw = 0;
console.time('Do while');
do { dw++; } while(dw < arr.length)
console.timeEnd('Do while');

// 02
console.time('For');
for(let i = 0; i < arr.length; i++) { }
console.timeEnd('For');

// 03
let w = 0
console.time('While');
while(w < arr.length) { w ++ }
console.timeEnd('While');

// 04
console.time('ForEach');
arr.forEach(() => {})
console.timeEnd('ForEach');

// 05
console.time('For Of');
for(let item of arr) { }
console.timeEnd('For Of');

// 06 - chậm nhất
console.time('For In');
for(let item in arr) { }
console.timeEnd('For In');

view raw for-loop.md hosted with ❤ by GitHub

 _____                             _                 
|  ___|                           (_)                
| |____  ___ __  _ __ ___  ___ ___ _  ___  _ __  ___ 
|  __\ \/ / '_ \| '__/ _ \/ __/ __| |/ _ \| '_ \/ __|
| |___>  <| |_) | | |  __/\__ \__ \ | (_) | | | \__ \
\____/_/\_\ .__/|_|  \___||___/___/_|\___/|_| |_|___/
          | |                                        
          |_|
                                             ___   ___   ____  ___    __   _____  ___   ___   __  
                                            / / \ | |_) | |_  | |_)  / /\   | |  / / \ | |_) ( (` 
                                            \_\_/ |_|   |_|__ |_| \ /_/--\  |_|  \_\_/ |_| \ _)_)

Comma operator (,)

// Luôn lấy giá trị sau cùng
let x = 1;

(x++, x) // 2

(2, 3) // 3

const object1 = {
  prop: 'exists'
};

"prop" in object1 // true

Unary plus (+)

// string to number
+'1' // 1

Non-null assertion operator !.

// Toán tử xác nhận không null
<div *ngIf="hero">
  The hero's name is {{hero!.name}}
</div>

Do not use ~~ to truncate numbers to integers

// Do not use ~~x to truncate numbers to integers
~~2.6 // 2
// use Math.trunc() instead
Math.trunc(2.6) // 2

Addition assignment += Toán tử gán phép cộng

// x = x + 2; 
// x += 2
1 += 2 // 3;
1 += true // 2;
1 += false // 1;
1 += 'food' // '1food'

// BigInt + BigInt 
1n += 2n // 3n;

Subtraction assignment -= Toán tử gán phép trừ

let a = 3;
a = a - 2; // 1
a -= 2 // 1

Remainder assignment %= Toán tử gán phần dư

let a = 3;
a %= 2; // 1
a %= 3 // 0

Nullish coalescing operator ?? Toán tử kết hợp nullish

// Same
console.log(null ?? 'default string');
console.log(undefined ?? 'default string');
console.log(null || 'default string');
console.log(undefined || 'default string');

// "default string"
// "default string"
// "default string"
// "default string"


// Different
console.log(0 ?? 'default string');
console.log(false ?? 'default string');
console.log(0 || 'default string');
console.log(false || 'default string');

// 0
// false
// "default string"
// "default string"

Nullish coalescing assignment ??= Toán tử gán nullish kết hợp

   - Được sử dụng để gán giá trị cho biến nếu biến đó là null. 
   - Nếu biến không phải là null, giá trị của biến sẽ không bị thay đổi. 
const a = { duration: 50 };
a.speed ??= 25; // a.speed = 25
a.duration ??= 10 // a.duration = 50

Logical OR assignment ||= Toán tử gán logic OR chỉ gán nếu x là falsy

const a = { duration: 50, title: '' };
a.duration ||= 10; // 50
a.title ||= 'title is empty.'; // "title is empty."

Logical AND assignment (&&=) Toán tử gán AND chỉ gán nếu xlà true

   - Được sử dụng để kiểm tra một điều kiện và gán giá trị cho biến dựa trên kết quả của điều kiện đó. 
   - Nếu điều kiện là true, giá trị gán sẽ được thực hiện. 
   - Nếu điều kiện là false, giá trị gán sẽ không được thực hiện. 
let a = 1;
let b = 0;
a &&= 2; // 2
b &&= 2; // 0

Destructuring assignment

let a, b, rest;

[a, b, ...rest] = [10, 20, 30, 40, 50];

// rest: [30, 40, 50]

yield

function* foo(index) {
  yield index;
  yield index+1;
  yield index+2;
  // while (index < 4) {
  //   yield index;
  //   index++;
  // }
}

const iterator = foo(1); // Gọi vào hàm foo một lần duy nhất

console.log(iterator.next().value); // Output: 1 chạy yield 1
console.log(iterator.next().value); // Output: 2 chạy yield 2
console.log(iterator.next().value); // Output: 3 chạy yield 3

yield*

function* func1() {
  yield 42;
  yield 43;
}

function* func2() {
  yield* func1(); // yield* handle lại yield
}

const iterator = func2();

console.log(iterator.next().value); // 42
console.log(iterator.next().value); // 43

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators

view raw expressions-operators.md hosted with ❤ by GitHub

     _____                                    __  _____                       _   
(  _  )                                  /  )(  _  )                   _ ( )_ 
| (_) |  ___  _   _   ___     ___      /' /' | (_) | _   _   _    _ _ (_)| ,_)
|  _  |/',__)( ) ( )/' _ `\ /'___)   /' /'   |  _  |( ) ( ) ( ) /'_` )| || |  
| | | |\__, \| (_) || ( ) |( (___  /' /'     | | | || \_/ \_/ |( (_| || || |_ 
(_) (_)(____/`\__, |(_) (_)`\____)(_/'       (_) (_)`\___x___/'`\__,_)(_)`\__)
             ( )_| |                                                          
             `\___/'                                                          

Asyncasync function f() {
  return 1; 
}

f().then(alert); // 1 

Awaitasync function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });
  let result = await promise; // wait until the promise resolve
  alert(result); // done!
}
f();


  

view raw async-await.md hosted with ❤ by GitHub

______                    _          
| ___ \                  (_)         
| |_/ / __ ___  _ __ ___  _ ___  ___ 
|  __/ '__/ _ \| '_ ` _ \| / __|/ _ \
| |  | | | (_) | | | | | | \__ \  __/
\_|  |_|  \___/|_| |_| |_|_|___/\___|

Promise.all

// 1 in 3 promise reject return catch
Promise.all([promise1, promise2, promise3])

Promise.race

// Lấy promise resolve đầu tiên
// Không làm việc với reject
const promise1 = new Promise((resolve) => setTimeout(resolve, 200, 'slow'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'quick'));

Promise.race([promise1, promise2]).then((value) => console.log(value));

// ouput: "quick"

Promise.allSettled

// Return all resolve + reject 
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));

Promise.allSettled([promise1, promise2]).then((res) => {
  res.forEach((f) => console.log(f))
});

// { status: "fulfilled", value: 3 }
// { status: "rejected", reason: "foo" }

Promise.any

// Lấy promise resolve đầu tiên
// Vẫn trả kết quả khi reject
const promise1 = Promise.reject(0);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'quick'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 500, 'slow'));

Promise.any([promise1, promise2, promise3]).then((value) => console.log(value));

// ouput: "quick"

Chaining: then - catch - finally

function checkMail() {
  return new Promise((resolve, reject) => {
    return Math.random() > 0.5 ? resolve('Mail has arrived') : reject(new Error('Failed to arrive'))
  });
}

checkMail()
  .then((mail) => {
    console.log(mail);
  })
  .catch((err) => {
    console.error(err);
  })
  .finally(() => {
    console.log('Experiment completed');
  });
  
// Error: Failed to arrive
// "Experiment completed"

State

Pending (Đang chờ xử lý) - process is not complete (Quá trình chưa hoàn tất)
Fulfilled (Hoàn thành) - operation is successful (Thao tác thành công)
Rejected (Bị từ chối) - an error occurs (Xảy ra lỗi)

view raw promise.md hosted with ❤ by GitHub

     _____                           
/  __ \                          
| /  \/ __ _ _ ____   ____ _ ___ 
| |    / _` | '_ \ \ / / _` / __|
| \__/\ (_| | | | \ V / (_| \__ \
 \____/\__,_|_| |_|\_/ \__,_|___/

Detailslet canvas = document.createElement('canvas') as HTMLCanvasElement;

canvas.width = 1280;
canvas.height = 720;

// Get a 2D drawing context for the canvas.
const ctx = canvas.getContext('2d', { willReadFrequently: true }) as CanvasRenderingContext2D;

// Draw image from (video, canvas, image element origin)
ctx.drawImage(videoEl, 0, 0, canvas.width, canvas.height);

// Canvas to base64
canvas.toDataURL()
// or
canvas.toDataURL(type, quality);
// or
canvas.toDataURL(`image/${fileName?.split('.')?.slice(-1)?.toString()}`);

// Canvas to URL blob
canvas.toBlob((blob: any) => {
  const url = URL.createObjectURL(blob)
});

// Clean and reset canvas
const context = dom.canvas.getContext('2d', { willReadFrequently: true }) as CanvasRenderingContext2D;
context.clearRect(0, 0, dom.canvas.width, dom.canvas.height);

Draw image into canvas 
 /**
 * DRAW_IMAGE
 * @param canvas 
 * @param image 
 */
export const DRAW_IMAGE = (canvas: HTMLCanvasElement, image: ImageBitmap | any) => {
  canvas.width = image.width;
  canvas.height = image.height;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
}


  

view raw canvas.md hosted with ❤ by GitHub

Quảng Cáo Đầu Bài

Translate

Menu List

Total Pageviews

08 April 2023

Javascript Basic

Object

Array

Function

Global functions

Collections

Array

Object

0 nhận xét:

Post a Comment

Meditation Music , Relaxing Music

Bài đăng nổi bật

Túy Hoa Âm & Nhất Tiễn Mai

Top site

Best Friend

Quảng Cáo Đầu Bài

Translate

Menu List

Total Pageviews

08 April 2023

Javascript Basic

Object

Array

Function

Global functions

Collections

Array

Object

Related Posts:

0 nhận xét:

Post a Comment

Meditation Music , Relaxing Music

Bài đăng nổi bật

Túy Hoa Âm & Nhất Tiễn Mai

Top site

Best Friend