Hướng dẫn deep javascript

Nội dung bài viết

Video học lập trình mỗi ngày

Update object.assign[] khi sử dụng copy object chính là shallow copy.

Object là thứ làm cho JavaScript trở thành một ngôn ngữ lập trình mạnh mẽ. Các đối tượng cho phép bạn nhóm các kiểu dữ liệu khác nhau. Nếu bạn muốn tìm hiểu bất kỳ khung JavaScript mới nào như React, Vue hoặc Angular, bạn phải biết cách sử dụng các đối tượng và các phương thức của nó.

Các phiên bản JavaScript mới mang lại các phương thức mới cho các đối tượng khiến chúng trở nên thú vị hơn. JS hiện tại cung cấp rất nhiều phương thức mới. Và trong bài này mình chỉ tìm hiểu và giới thiệu cho những bạn chưa biết về object.assign[].

object.assign[] là một trong những method hiệu quả với những người code sâu về JS. Cho nên các bạn đang tìm hiểu về JS cũng nên tìm hiểu và áp dụng chúng trong những trường hợp sau...

Đọc thêm: Sự khác biệt giữa shallow copy và deep copying trong javascript khi sử dụng object.assign[]

object.assign[] là một method nhưng [multiple jobs] nó có nhiều nhiệm vụ trong đó bao gồm những nhiệm vụ copy an object, clone từ một object khác, và nối hai hay nhiều object lại với nhau. Giờ ta đi những ví dụ cụ thể hơn nhằm để hiểu rõ hơn

copy the values from another object:

const obj1 = {
name: 'Anony Stick'
}
const obj2 = {
age: 25,
  car: 'Vinfast',
  school: 'VinSchool'  
}
Object.assign[obj1, obj2];
console.log[obj1];
//{name: "Anony Stick", age: 25, car: "Vinfast", school: "VinSchool"}

Clone từ object khác

Tips: Deep copy object array function in javascript 

//Clone an object to a new object
const obj3 = {
age: 25,
  car: 'Vinfast',
  school: 'VinSchool'  
}
const obj4 = Object.assign[{}, obj3];
console.log[obj4];
//{age: 25, car: "Vinfast", school: "VinSchool"}

Dùng để merge duplicate properties trong object

Tips: Javascript object array - when to Use Array and use object in javascript

 //merge duplicate properties with Object.assign[]
const obj5 = {
name: 'Pham Nhat Vuong',
age: 55,
  car: 'Vinfast',
  school: 'VinSchool'  
}
const obj6 = {
name: 'Pham Nhat Phong',
age: 25,
  moto: 'VinBike',
  spot: 'Bong da'  
}
const obj7 = Object.assign[{}, obj5, obj6];
console.log[obj7];
//{name: "Pham Nhat Phong", age: 25, car: "Vinfast", school: "VinSchool", moto: "VinBike", …}

JavaScript Snippet

'use strict';

// Merge an object
let first = {name: 'Tony'};
let last = {lastName: 'Stark'};
let person = Object.assign[first, last];
ChromeSamples.log[person];
// {name: 'Tony', lastName: 'Stark'}
ChromeSamples.log[first];
// first = {name: 'Tony', lastName: 'Stark'} as the target also changed

// Merge multiple sources
let a = Object.assign[{foo: 0}, {bar: 1}, {baz: 2}];
ChromeSamples.log[a];
// {foo: 0, bar: 1, baz: 2}

// Merge and overwrite equal keys
let b = Object.assign[{foo: 0}, {foo: 1}, {foo: 2}];
ChromeSamples.log[b];
// {foo: 2}

// Clone an object
let obj = {person: 'Thor Odinson'};
let clone = Object.assign[{}, obj];
ChromeSamples.log[clone];
// {person: 'Thor Odinson'}

Kết luận

Đọc thêm: Sự khác biệt giữa shallow copy và deep copying trong javascript khi sử dụng object.assign[]

Tôi vừa trình bày các phương thức dựng sẵn mới được giới thiệu bởi JavaScript. Với các tính năng tuyệt vời mới này, chúng ta không sử dụng cú pháp và phương pháp cũ nữa trong mã của mình. Các phương thức mới cho phép bạn viết mã JavaScript thành thạo và hiệu suất cao hơn và giản tiện rất nhiều trong các dự án. 

Nội dung bài viết

Video học lập trình mỗi ngày

Tại thời điểm viết bài, tất cả các trình duyệt đã triển khai API này, Firefox đã chuyển nó sang phiên bản ổn định trong Firefox 94. Ngoài ra, Node 17 và Deno 1.14 đã triển khai API này. Bạn có thể bắt đầu sử dụng chức năng này ngay bây giờ và tôi nghĩ bạn cũng như tôi đều háo hức cho tính năng này.

StructuredClone là một tính năng cho phép những lập trình viên có thể sử dụng để deep-copying. Nhằm thay thế cho các phương pháp cũ như sử dụng object spread operator.

Một cách để tạo một bản shallow-copy trong JavaScript. Sử dụng object spread operator...

const myOriginal = {
  someProp: "with a string value",
  anotherProp: {
    withAnotherProp: 1,
    andAnotherProp: true
  }
};

const myShallowCopy = {...myOriginal};

Ví dụ lấy từ MDN và web.dev.

Việc thêm hoặc thay đổi thuộc tính trực tiếp trên shallow clone sẽ chỉ ảnh hưởng đến bản sao, không ảnh hưởng đến bản gốc:

myShallowCopy.aNewProp = "a new value";
console.log[myOriginal.aNewProp]
// ^ logs `undefined`

Tuy nhiên, việc thêm hoặc thay đổi thuộc tính lồng nhau sâu ảnh hưởng đến cả bản sao và bản gốc:

myShallowCopy.anotherProp.aNewProp = "a new value";
console.log[myOriginal.anotherProp.aNewProp] 
// ^ logs `a new value`

Chính vì vậy chúng ta nên thay đổi bằng cách sử dụng StructuredClone. Cú pháp:

structuredClone[value]
structuredClone[value, { transfer }]

Tốt nhất bạn nên xem video của tôi hướng dẫn trên nodejs để biết cách sử dụng tốt nhất. Phiên bản Nodejs mới nhất bạn không nên bỏ qua tính năng structuredClone Ví dụ :

// Create an object with a value and a circular reference to itself.
const original = { name: "MDN" };
original.itself = original;

// Clone it
const clone = structuredClone[original];

console.assert[clone !== original]; // the objects are not the same [not same identity]
console.assert[clone.name === "MDN"]; // they do have the same values
console.assert[clone.itself === clone]; // and the circular reference is preserved