Hướng dẫn dùng object.assign syntax trong PHP

Đã đăng vào thg 4 21, 2019 4:57 CH 2 phút đọc

Khi chúng ta làm việc với Js, cụ thể ơn là ReactJs, hẳn chúng ta đã nghe tới tính bất biến của dữ liệu [immutability]. Hiểu một cách nôm na đó là khả năng giá trị của dữ liệu không bị thay đổi sau khi đã được khai báo. Tính bất biết còn làm tăng hiệu suất của ứng dụng, khả năng kiểm soát và debugg một cách nhanh chóng hơn.

Để hiểu rõ hơn chúng ta sẽ cùng nhau tìm hiểu về cú pháp và thông qua các ví dụ để có thể nắm rõ được ưu điểm này của nó và cách sử dụng.

Khái niệm

Object.assign[] được sử dụng để sao chép các giá trị của tất cả thuộc tính có thể liệt kê từ một hoặc nhiều đối tượng nguồn đến một đối tượng đích. Nó sẽ trả về đối tượng đích đó.

Cú pháp

Object.assign[target, ...sources]

Các tham số:

  • targer: Đối tượng đích
  • sources: Các đối tượng nguồn

Giá trị trả về: Các đối tượng đích

Các thuộc tính trong đối tượng đích sẽ bị ghi lại bởi các thuộc tính trong đối tượng nguồn nếu chúng có cùng key. Tương tự, các thuộc tính nguồn sau sẽ ghi đè lên những thuộc tính nguồn trước.

Ví dụ:

var obj = { a: 1 };
var copy = Object.assign[{}, obj];
console.log[copy]; // { a: 1 }

Cần lưu ý để đảm bảo tính bất biến thì tham số target nên luôn là {}, vì khi đó các giá trị của sources sẽ được sao chép vào đối tượng mới. Một cách dùng sai là:

const a = { name: 'foo' }
const b = Object.assign[a, { name: 'bar', age: 1 }, { id: 9 }]
console.log[b] // { name: 'bar', age: 1, id: 9 }
console.log[a] // Giá trị của a cũng bị thay đổi thành { name: 'bar', age: 1, id: 9 }
console.log[a === b] // true

Khi làm việc với nhiều object:

let o1 = { a: 21 };
let o2 = { b: 22 };
let o3 = { c: 24 };

const obj = Object.assign[{},o1, o2, o3];
console.log[obj]; //{a: 21, b: 22, c: 24}

Gộp các object với cùng properties:

let o1 = { a: 21, b: 22, c: 24 };
let o2 = { b: 25, c: 26 };
let o3 = { c: 27 };

let finalObj = Object.assign[{}, o1, o2, o3];
console.log[finalObj];//{a: 21, b: 25, c: 27}

Để ý ví dụ trên, các thuộc tính được lặp lại bên trong các đối tượng nguồn thì trong đối tượng mới, các thuộc tính đó sẽ bị bỏ qua và chúng chỉ nhận được các thuộc tính duy nhất trên đối tượng đích. Và giá trị của chúng sẽ được cập nhật giá trị mới từ trái sang phải.

Trên đây là bài tìm hiểu của mình về Object.assign[] trong JS. Hi vọng bài viết sẽ giúp bạn có một cái nhìn và cách sử dụng rõ hơn về một phương thức thường xuyên được sử dụng dạo gần đây, đặc biệt là trong ReactJs.

Tham khảo

//appdividend.com/2018/12/27/javascript-object-assign-example-object-assign-tutorial/ //developer.mozilla.org/vi/docs/Web/JavaScript/Reference/Global_Objects/Object/assign //appdividend.com/2018/12/27/javascript-object-assign-example-object-assign-tutorial/

All rights reserved

Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó. Nội dung có gì thiếu sót mong bạn đọc bỏ qua và góp ý.

Giới thiệu

Cú pháp

// Khởi tạo
{ [ nameValuePair1[, nameValuePair2[, ...nameValuePairN] ] ] }
// Gọi
new Object[[value]]
  • nameValuePair1, nameValuePair2, ... nameValuePairN: Các cặp tên và giá trị được phân cách với nhau bằng dấu hai chấm.
  • value: Gía trị truyền vào.

Object constructor tạo ra object wrapper với các giá trị đã cho. Nó trả về object rỗng nêu giá trị truyền vào là dạng null hoặc undifined. Còn với các giá trị khác truyền vào thì sẽ được một object với kiểu tương ứng truyền vào.

Một số phương thức

Object.assign[]

Sao chép các gía trị của tất cả các thuộc tính riêng từ một hoặc nhiều object vào một object khác.

const sourceObject = {
    firstName: 'Hieu',
    lastName: 'Bui'
};
const targetObject = Object.assign[{}, sourceObject];

console.log[targetObject]; // { firstName: 'Hieu', lastName: 'Bui' }

Các thuộc tính của đối tượng đích sẽ được viết đè với các thuộc tính của đối tượng đích nếu chúng có key giống nhau.

const sourceObject = {
    firstName: 'Hieu',
    lastName: 'Bui'
};
const targetObject = Object.assign[{ lastName: 'Tran' }, sourceObject];

console.log[targetObject]; // { firstName: 'Hieu', lastName: 'Tran' }

Sao chép nhiều object vào một object:

const obj1 = {
    firstName: 'Hieu',
    lastName: 'Bui'
};
const obj2 = { age: 23 };
const obj3 = { school: 'HUST' };

const obj = Object.assign[{}, obj1, obj2, obj3];

console.log[obj]; // { firstName: 'Hieu', lastName: 'Bui', age: 23, school: 'HUST' }

Object.create[]

Tạo object mới sử dụng một object hiện có để cung cấp __proto__ của object mới được tạo ra.

Cú pháp

Object.create[prototypeObject, propertiesObject]

  • prototypeObject: Object prototype mới được tạo. Nó có thể là object hoặc null.
  • propertiesObject: Các thuộc tính của object mới [tùy chọn].

Không có prototype

var person = Object.create[null];

typeof[person] // Object
console.log[person] // {}

// Set property to person object
person.name = 'Bui Hieu';

console.log[person] // { name: 'Bui Hieu' }

Có prototype

prototypeObject = {
	fullName: function[]{
		return this.firstName + ' ' + this.lastName		
	}
};
var person = Object.create[prototypeObject];

console.log[person]; // {}

// Adding properties to the person object
person.firstName = 'Hieu';
person.lastName = 'Bui';

person.fullName[];

console.log[person.fullName[]]; // Hieu Bui

Để thấy rõ hơn prototype được định nghĩa thì hãy mở đoạn code trên trình duyệt.

Object.entries[]

Trả về mảng thuộc tính đếm được của các cặp [key, value] với object đã cho, tương tự như dùng vặp lặp for...in.

Cú pháp

Object.entries[obj]

const obj = {
    firstName: 'Hieu',
    lastName: 'Bui'
};
console.log[Object.entries[obj]]; // [ [ 'firstName', 'Hieu' ], [ 'lastName', 'Bui' ] ]

Object.keys[]

Trả về một mảng các tên thuộc tính đếm được của một object đã cho.

Cú pháp

Object.keys[obj]

var arr = ['a', 'b', 'c'];
console.log[Object.keys[arr]]; // ['0', '1', '2']

var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log[Object.keys[obj]]; // ['0', '1', '2']

Object.values[]

Trả về một mảng các giá trị của những thuộc tính đếm được trong object đã cho.

Cú pháp

Object.values[obj]

const obj = {
    firstName: 'Hieu',
    lastName: 'Bui'
};
console.log[Object.values[obj]]; // [ 'Hieu', 'Bui' ]

Object.prototype

Khi một hàm được tạo trong Javascript thì nó sẽ thêm thuộc tính prototype vào hàm đó. Thuộc tính prototype là một object với mặc định có constructor.

Tất cả các object trong Javascript kế thừa các thuộc tính và phương thức từ prototype.

Xem ví dụ sau về protype object:

function Human[firstName, lastName] {
	this.firstName = firstName,
	this.lastName = lastName
};

Human.prototype.showFullName = function[] {
    console.log[this.firstName + ' ' + this.lastName];
}

const human1 = new Human['Hieu', 'Bui'];
human1.showFullName[];

Object.prototype.constructor

Trả về tham chiếu hàm constructor tạo nên object. Tất cả các object đều có thuộc tính constructor.

function Person[name] {
    this.name = name;
  }
  
  var person = new Person['Hieu Bui'];
  console.log['person.constructor is ' + person.constructor];

=> Kết quả:

person.constructor is function Person[name] {
   this.name = name;
}

Object.prototype.hasOwnProperty[]

Trả về giá trị true/false cho biết object có thuộc tính được đưa ra không.

Cú pháp

obj.hasOwnProperty[prop]

obj = new Object[];
obj.prop = 'exists';
console.log[obj.hasOwnProperty['prop']]; // true
console.log[obj.hasOwnProperty['toString']]; // false
console.log[obj.hasOwnProperty['hasOwnProperty']]; // false

Object.prototype.toString[]

Trả về chuỗi đại diện cho object.

Cú pháp

obj.toString[]

obj = new Object[];
console.log[obj.toString[]]; // [object Object]

Bạn có thể sử dụng prototype để ghi đè phương thức toString[].

function Person[firstName, lastName] {
    this.firstName = firstName;
    this.lastName = lastName;
};

person = new Person[];

Person.prototype.toString = function objToString[] {
    return 'This is overriding string';
}
console.log[person.toString[]]; // This is overriding string

Object.prototype.valueOf[]

Trả về giá trị nguyên thủy của một object xác định.

Cú pháp

object.valueOf[]

function MyAge[age] {
    this.age = age;
};

MyAge.prototype.valueOf  = function [] {
    return this.age;
};

const myAge = new MyAge[23];
console.log['My age is', myAge - 1]; // My age is 22

Kết luận

Trên đây là một số phương thức với object trong Javascript. Còn tương đối nhiều những phương thức khác nữa nhưng mình chỉ liệt kê một số thứ bản thân hay dùng hoặc có khả năng dùng. Cảm ơn bạn đã theo dõi bài viết.

Tham khảo

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

Chủ Đề