- vừa được xem lúc

Một số phương thức với object trong Javascript

0 0 136

Người đăng: Bùi Hiếu

Theo Viblo Asia

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

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

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 499

- vừa được xem lúc

Cài đặt WSL / WSL2 trên Windows 10 để code như trên Ubuntu

Sau vài ba năm mình chuyển qua code trên Ubuntu thì thật không thể phủ nhận rằng mình đã yêu em nó. Cá nhân mình sử dụng Ubuntu để code web thì thật là tuyệt vời.

0 0 374

- vừa được xem lúc

Đặt tên commit message sao cho "tình nghĩa anh em chắc chắn bền lâu"????

. Lời mở đầu. .

1 1 701

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 335

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 420

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 414