, October 26, 2021

0 kết quả được tìm thấy

Number, string, array và object trong JavaScript


  •   17 min reads
Number, string, array và object trong JavaScript

Chúng ta đã cùng nhau tìm hiểu các kiểu dữ liệu có trong JavaScript ở bài trước, tuy nhiên chúng ta vẫn chưa biết cách thao tác với chúng như thế nào trong JavaScript, nó có hổ trợ các phương thức nào hay không? Vấn đề đó, chúng ta sẽ cùng nhau tìm hiểu trong bài này nhé 😉.

I. Number.

JavaScript không giống như nhiều ngôn ngữ lập trình khác, nó không có kiểu dữ liệu dành cho số như: integer, short, long, float, double, ... mà nó chỉ có mỗi kiểu number.

Đối với số nguyên trong JavaScript nó có độ chính xác đến 15 con số, cụ thể như sau:

let a = 999999999999999; // Giá trị của a lúc này là à 999999999999999
let b = 9999999999999999;
// Đối với giá trị vượt quá 15 số thì b lúc này là 10000000000000000

Ngoài ra, số thập phân cũng có giới hạn của nó là 17 số. Tuy nhiên việc tính toán với số thập phân trong JavaScript không phải lúc nào cũng chính xác, cụ thể như sau:

let a = 0.1 + 0.2;
//--> Bạn nghĩ rằng a = 0.3
//--> Output: a = 0.30000000000000004

Để biết nguyên nhân tại sao bạn tìm hiểu khái niệm floating-point nhé 😉.

Để khắc phục vấn đề này ta có thể nhân số thập phân với số nguyên rồi mới thực hiện phép tính, cụ thể như sau:

let total = (0.1 * 10 + 0.2 * 10)/10
//-->Output: total = 0.3

Lưu ý: Trong JavaScript, việc cộng 2 số với nhau tất nhiên sẽ cho kết quả là số, tuy nhiên cộng số với chuỗi thì JavaScript sẽ tự động convert số thành chuỗi và cộng 2 chuỗi với nhau, kết quả cuối cùng sẽ là một chuỗi đó nhé 🤭. Do đó trước khi tính toán, chúng ta cần convert hết qua thành số rồi làm gì thì làm nhé 😁.

1. Convert number to string.

Nếu muốn chuyển đổi từ kiểu number sang string, ta có thể sử dụng phương thức toString(), cụ thể như sau:

let num = 2021;
num.toString();
//-->Output: "2021"

Ngoài ra ta còn có thể convert từ number sang string ở dạng nhị phân, bát phân, thập phânthập lục phân đó 😉

let num = 240;

//Nhị phân
num.toString(2); //-->Output: "11110000"

//Bát phân
num.toString(8); //-->Output: "360"

//Thập phân
num.toString(10); //-->Output: "240"

//Thập lục phân
num.toString(16); //-->Output: "f0"

2. Infinity - Dương vô cực.

Infinity hay dương vô cực cũng thuộc kiểu dữ liệu number. Khi một biến chứa giá trị mà vượt mức lưu trữ cho phép thì biến đó có giá trị là Infinity. Nó cũng là một giá trị nên ta có đem đi so sánh được.

typeof Infinity; //--> Output: "number"

let a = 5/ 0;
//--> Output a = Infinity

let num = 5;
while(num != Infinity) {
	num = num * num;
    console.log(num);
}
//--> Output:
/*
25
625
390625
152587890625
2.3283064365386964e+22
5.421010862427523e+44
2.9387358770557196e+89
8.636168555094449e+178
Infinity
*/

Vậy âm vô cực thì sao??? Thì là -Infinity đó 😁

let num = 4 / 0;
//--> Output: -Infinity

3. NaN - Not a Number.

NaN là một giá trị có trong JavaScript, nó dùng để xác định một số không phải là số hợp lệ. Nếu bạn thực hiện các phép tính với number mà bằng cách nào đó nó vi phạm quy tắc tính toán của JavaScript thì nó sẽ trả về kết quả là NaN.

Ví dụ ta chia một số cho một chuỗi chẳng hạn 🤭.

let total = 200 / "Hai trăm";
//-->Output: NaN

typeof NaN; //--> Output: "number"

Để kiểm tra một biến có phải là NaN hay không ta sử dụng phương thức isNaN(), nếu đúng thì return true ngược lại return false.

let x = 199 / "Not a number";

isNaN(x); //--> Output: true

4. Ép kiểu sang number.

Khi làm việc với JavaScript chắc chắn sẽ có lúc có data bạn cần phải convert từ kiểu string sang kiểu number, lúc này ta có 3 cách để ép kiểu:

  • Number(): Chuyển đổi giá trị về kiểu number.
  • parseInt(): Chuyển đổi giá trị sang số nguyên.
  • parseFloat(): Chuyển đổi giá trị sang số thập phân.
Number("200"); //--> 200
Number(2.2);   //--> 2.2
Number(2,2);   //--> NaN
Number(2 2);   //--> NaN
Number("Alice"); //--> NaN
Number(true);  //--> 1
Number(false); //--> 0
parseInt("123");        //--> 123
parseInt("9.33");      	//--> 9
parseInt("10 20 30");   //--> 10
parseInt("100 years");  //--> 100
parseInt("years 10");   //--> NaN
parseFloat("10");        //--> 10
parseFloat("10.33");     //--> 10.33
parseFloat("10 20 30");  //--> 10
parseFloat("10 years");  //--> 10
parseFloat("years 10");  //--> NaN

5. Làm tròn số.

Đôi khi những tính toán cho kết quả không mong muốn như cho ra kết quả dạng tập phân và bạn muốn làm tròn con số đó lên, trong JavaScript bạn có thể sử dụng phương thức toFixed() để làm tròn các con số đó.

let x = 9.6;
x.toFixed(0); //--> 10
x.toFixed(2); //--> 9.60
x.toFixed(4); //--> 9.6000
x.toFixed(6); //--> 9.600000

II. String.

String là một loại dữ liệu khá phổ biến trong JavaScript, một biến chứa các giá trị là các ký tự và được đặt trong dấu nhấy đơn '' hay dấu nháy kép "".

let mess = 'Welcome to 200Lab';
let say = "Hello!";

Một lưu ý cho các bạn, khi trong chuỗi bắt buộc có dấu nhấy đơn hoặc nhấy kép thì bạn phải thêm ký tự \ ở trước dấu nhấy đó,  như ví dụ bên dưới.

let txt = "\"200Lab Education\" Học viện đào tạo kỹ sư phần mềm chuyên sâu qua dự án thực tế";

Ngoài ra trong chuỗi còn có các dấu, support cho các vấn đề khác mà bạn có thể quan tâm như:

Code Kết quả
' single quote - Dấu nhấy đơn
\" double quote - Dấu nhấy kép
\\ backslash - Dấu chéo ngược
\n new line - Xuống dòng mới
\r carriage return
\t tab
\b backspace - Tạo khoảng trống
\f form feed

1.  Lấy độ dài của chuỗi.

Ta có thể lấy độ dài của một chuỗi bằng phương thức length.

let text = "200Lab";
console.log(text.length); //--> 6

2. Tìm kiếm chuỗi con trong một chuỗi.

Ta có thể sử dụng hàm indexOf() để tìm một chuỗi con trong một chuỗi lớn.

  • Nếu tìm thấy, nó sẽ trả về vị trí đầu tiên của ký tự có trong chuỗi con.
  • Nếu không tìm thấy, nó sẽ trả về -1
let mess = "JS is a programming language";

console.log(mess.indexOf("pro")); //--> 8
console.log(mess.indexOf("200")); //--> -1

Ngoài ra, nếu bạn muốn tìm vị trí cuối cùng của chuỗi con thì bạ có thể sử dụng lastIndexOf()

let mess = "JS is a programming language pro";

console.log(mess.lastIndexOf("pro")); //--> 29

À vị trí bắt đầu trong chuỗi là 0 nha 😁.

3. Tách chuỗi.

Làm việc với chuỗi thì chắc chắn bạn sẽ phải không ít thì nhiều lần phải tách một chuỗi thành nhiều chuỗi theo mục đích của mình. Trong JavaScript, nó có 3 cách để tách chuỗi.

  • Sử dụng hàm slice(start, end), nó sẽ tách chuỗi từ vị trí start đến end-1
let mess = "JS is a programming language pro";

console.log(mess.slice(8, 19)); //--> "programming"

// Nếu tham số là số âm thì nó sẽ đếm từ phía cuối chuỗi đến đầu chuỗi
console.log(mess.slice(-25, -13)); //--> "programming"

// Nếu không có tham số end thì nó sẽ tính từ start đến hết chuỗi
console.log(mess.slice(8)); //--> "programming language pro"
console.log(mess.slice(-25)); //--> "programming language pro"
  • Sử dụng subString(), nó giống với slice(), tuy nhiên lại không chơi với giá trị âm.
let mess = "JS is a programming language pro";

console.log(mess.substring(8, 19)); //--> "programming"
  • substr() cũng tương tự như slice() nhưng không có tham số end, tham số thứ hai là độ dài của chuỗi bạn muốn cắt. Nó cũng nhận tham số bắt đầu là số âm, nếu không xác định độ dài chuỗi muốn cắt thì nó sẽ tính từ vị trí bắt đầu ta truyền vào cho đến hết chuỗi.
let mess = "JS is a programming language pro";

console.log(mess.substr(8, 11)); //--> "programming"
console.log(mess.substr(8)); //--> "programming language pro"
console.log(mess.substr(-3)); //--> "pro"

4. Thay thế chuỗi.

Trong quá trình taho tác với chuỗi, nếu muốn thay thế một đoạn chuỗi nhỏ nào đó trong một chuỗi lớn thì ta có thể dùng hàm replace().

var str = 'Please visit Microsoft and Microsoft!';

var n1 = str.replace('Microsoft', 'W3Schools');
var n2 = str.replace(/Microsoft/g, "W3Schools");

console.log(n1); //--> "Please visit W3Schools and Microsoft!"
console.log(n2); //--> "Please visit W3Schools and W3Schools!"

5. Chuyển sang chuỗi hoa hoặc chuỗi thường.

Để chuyển đoạn chuỗi sang chuỗi in hoa ta sử dụng phương thức toUpperCase(), in thường dùng toLowerCase().

var text = 'Hello World!';

var textUp = text1.toUpperCase(); //--> "HELLO WORLD!"
var textLow = text1.toLowerCase(); //--> "hello world!"

6. Nối chuỗi.

Để nối chuỗi ta sử dụng hàm concat():

let text1 = 'Hello'
let text2 = 'World'

let merText = text1.concat(' ', text2) //--> "Hello World"

Ngoài ra còn một cách đơn giản là ta sử dụng dấu + 😁.

let text1 = 'Hello'
let text2 = 'World'

let merText = text1 + ' ' + text2; //--> "Hello World"

7. Xóa khoảng trắng hai bên chuỗi.

Để xóa khoảng trắng hai bên chuỗi ta dùng hàm trim(). Thường ta có thể dùng phương thức để xóa các khoảng trống mà người dùng nhập thừa đấy 😉.

let str = '         200Lab       ';

let newStr = str.trim(); //--> "200Lab"

8. Cách lấy từng giá trị trong chuỗi.

Một chuỗi thì chung quy lại nó cũng chỉ là một mảng chứa các ký tự, do đó để lấy các giá trị trong chuỗi ta dùng [] hoặc hàm charAt().

let str = "200Lab";

str.charAt(0); //--> "2"
str[3]; //--> "L"

9. Lấy UTF-16 code tại vị trí bất kì trong chuỗi.

Để lấy bất kỳ các code UTF-16 tại các vị trí bất kỳ trong chuỗi ta dùng hàm charCodeAt().

let str = "JS basic!";

str.charCodeAt(0); //--> 74

10. Chuyển chuỗi sang mảng.

Để chuyển một chuỗi sang dạng mảng ta sử dụng hàm split(), tham số đầu vào của hàm là một chuỗi để ngăn cách.

let str = "200lab Education", str1 = "a,b,c,d,e,f,g,h";

let arrStr1 = str1.split(',');
//--> ["a", "b", "c", "d", "e", "f", "g", "h"]

// Nếu tham số là rỗng thì sẽ return về mảng từng ký tự
let arrStr = str.split('');
//--> ["2", "0", "0", "l", "a", "b", " ", "E", "d", "u", "c", "a", "t", "i", "o", "n"]

III. Array.

Array hay mảng là một tập hợp các phần tử, mỗi phần tử sẽ được đánh dấu thứ tự bằng chỉ mục hay index và index bắt đầu từ 0.

1. Lấy độ dài của mảng.

Tương tự chuỗi, để lấy độ dài của mảng ta dùng phương thức length.

let arr = [1, 2, 3, 4, 5];

arr.length; //--> 5

2. Kiểm tra biến có chứa dữ liệu dạng mảng hay không.

Để check xem một biến có chứa data dạng mảng hay không, ta dùng hàm isArray() hoặc instanceof.

const fruits = ['Banana', 'Orange', 'Apple', 'Mango']

Array.isArray(fruits) //--> true
fruits instanceof Array //--> true

3. Chuyển mảng sang chuỗi.

Để chuyển một mảng sang một chuỗi ta dùng hàm toString() hoặc join()

const cars = ['Honda', 'Hyundai', 'Ford', 'Toyota'];

const str1 = cars.toString(); //--> "Honda,Hyundai,Ford,Toyota"
const str2 = cars.join('-'); //--> "Honda-Hyundai-Ford-Toyota"

4. Thêm phần tử vào cuối mảng.

Add một phần tử mới vào mảng ta sử dụng hàm push(), ngoài add thêm phần tử vào mảng nó còn return lại độ dài của mảng mới.

const cars = ['Honda', 'Hyundai', 'Ford', 'Toyota'];

const x = cars.push('Suzuki'); //--> 5
console.log(cars); //--> ["Honda", "Hyundai", "Ford", "Toyota", "Suzuki"]

5. Xóa phần tử ở cuối mảng.

Để xóa một phần tử ở cuối mảng, ta dùng hàm pop() và nó return lại giá trị mà nó vừa xóa.

const cars = ['Honda', 'Hyundai', 'Ford', 'Toyota'];

const x = cars.pop(); //--> "Toyota"
console.log(cars); //--> ["Honda", "Hyundai", "Ford"]

6. Thêm phần tử vào đầu mảng.

unshift() cho phép ta thêm 1 phần tử mới vào đầu mảng và return lại chiều dài mảng mới.

const cars = ['Honda', 'Hyundai', 'Ford', 'Toyota'];

const x = cars.unshift('Suzuki'); //--> 5
console.log(cars); //--> ["Suzuki", "Honda", "Hyundai", "Ford", "Toyota"]

7. Xóa phần tử ở đầu mảng.

Với hàm shift() ta có thể xóa phần tử đầu tiên của mảng và đồng thời return lại phần tử vừa xóa.

const cars = ['Honda', 'Hyundai', 'Ford', 'Toyota'];

const x = cars.shift(); //--> "Honda"
console.log(cars); //--> ["Hyundai", "Ford", "Toyota"]

Lưu ý: ta cũng có thể dùng delete operator để xóa bất kỳ phần tử nào có trong mảng. Tuy nhiên chỉ giá trị của phần tử được xóa nên lại để lại một khoảng trống trong mảng. Khi ta truy xuất đến khoảng trống này, ta nhận được giá trị của nó là undefined.

const cars = ['Honda', 'Hyundai', 'Ford', 'Toyota'];

delete cars[0];
console.log(cars); //--> [empty, "Hyundai", "Ford", "Toyota"]
console.log(cars[0]); //--> undefined

8. Thêm hoặc xóa nhiều phần tử trong 1 mảng.

Với hàm splice(), ta có thể thêm hoặc xóa nhiều phần tử trong mảng và return lại mảng với các phần tử mà ta đã xóa.

cú pháp của nó như sau: splice(vị trí thêm, số lượng cần xóa, … phần tử thêm)

const cars = ['Honda', 'Hyundai', 'Ford', 'Toyota'];

//Thêm vào vị trí thứ 2
const x = cars.splice(2, 0, 'Suzuki', 'Isuzu');
console.log(x); //--> []: Vì ta không xóa nên mảng sẽ là rỗng
console.log(cars); 
//--> ["Honda", "Hyundai", "Suzuki", "Isuzu", "Ford", "Toyota"]
const cars = ['Honda', 'Hyundai', 'Ford', 'Toyota'];

// Xóa 1 phần tử tại vị trí số 0
const x = cars.splice(0, 1)
console.log(x) //--> [ "Honda" ]
console.log(cars) //--> ["Hyundai", "Ford", "Toyota"]

9. Ghép mảng.

Hàm concat() cũng có thể ghép 2 mảng lại với nhau.

const myGirls = ['Alice Rondo', 'Luminous Valentine'];
const myBoys = ['Diablo', 'Guy Crimson', 'Leon Cromwell'];
const myChildren = myGirls.concat(myBoys);
//--> ["Alice Rondo", "Luminous Valentine", "Diablo", "Guy Crimson", "Leon Cromwell"]

10. Tách mảng

Muốn tách mảng thì ta sử dụng hàm slice(), với cú pháp:

slice(vị trí bắt đầu, vị trí kết thúc)

const cars = ['Honda', 'Hyundai', 'Ford', 'Toyota'];

//Tách từ vị trí đầu đến hết mảng.
const x = cars.slice(1)
console.log(x); //--> ["Hyundai", "Ford", "Toyota"]

//tách ra 1 mảng mới bắt đầu tại vị trí 1 đến 2 (3-1)
const y = cars.slice(1, 3);
console.log(y); //--> ["Hyundai", "Ford"]

11. Spread operator.

Đây là một khái niệm mới đây, được ra mắt từ ES6 (ES2015), nó phân rã mảng (object) thành từng phần tử nhỏ ( ví dụ: [1,2,3] => 1,2,3).

const nums_1 = [1, 2, 3];
const nums_2 = [3, 4, 5];

// Nối mảng
const newNums = [...nums_1, ...nums_2]; //--< [ 1, 2, 3, 3, 4, 5 ]

// Tạo thành 1 mảng mới
const num_3 = [...nums_2]; // [3, 4, 5]
console.log(cars1 !== cars3); //--> true

Hiện nay Spread operator được sử dụng thương xuyên trong lập trình và thao tác với mảng đấy 😉.

12. Lặp mảng.

Lặp mảng hay duyệt mảng thì đây là cách thức ta thường phải sử dụng để thao tác với mảng, ngoài for thông thường, ta còn có forEach(), map(), filter(), find(), findIndex(), every(), some(). Cùng nhau tìm hiểu từng loại một nhé 😁.

forEach(): Lặp qua từng phần tử có trong mảng. Tham số truyền vào forEach là một callback function với 3 đối số gồm:

  • Giá trị phần tử.
  • Index của phần tử.
  • Mảng đang thực hiện.
let numbers = [1, 2, 3, 4, 5];
let newNumbers = [];

numbers.forEach((value, index, array) => {
    newNumbers.push(value)
});
console.log(newNumbers); //--> [1, 2, 3, 4, 5]

map(): cho phép tạo một mảng mới bằng cách thực hiện tính toán trên mỗi phần tử, map() không làm thay đổi mảng cũ.

let numbers = [1, 2, 3, 4, 5];

let newNumbers = numbers.map((value, index, array) => {
  return value * 2;
});
console.log(newNumbers); //--> [2, 4, 6, 8, 10]

filter(): cho phép tạo một mảng mới với những phần tử nào thỏa điều kiện ta đặt ra. Hàm này thường được dùng để tìm kiếm phần tử trong mảng.

let numbers = [1, 2, 3, 4, 5];

let newNumbers = numbers.filter((value, index, array) => {
  return value >=3;
});
console.log(newNumbers); //--> [3, 4, 5]

find(): Hàm này trả về phần tử thỏa điều kiện đầu tiên, nếu không có sẽ return undefined. Thường dùng hàm này để tìm kiếm phần tử trong mảng.

let numbers = [1, 2, 3, 4, 5];

let result = numbers.find((value, index, array) => {
  return value > 1;
});
console.log(result); //--> 2

let resultUn = numbers.find((value, index, array) => {
  return value > 5;
});
console.log(resultUn); //--> undefined

findIndex(): Hàm này trả về index của phần tử thỏa điều kiện đầu tiên, nếu không có sẽ return -1.

const cars = ['Suzuki', 'Toyota', 'Hyundai'];

const result = cars.findIndex((value, index, array) => {
  return value === 'Toyota';
});
console.log(result); //--> 1

const resultUn = cars.findIndex((value, index, array) => {
  return value === 'Yamaha';
});
console.log(resultUn); //--> -1

every(): Nếu mọi phần tử thỏa điều kiện sẽ return true, còn không sẽ return false, đơn giản vậy thôi 😁.

const numbers = [1, 2, 3, 4, 5];

const checkF = numbers.every((value, index, array) => {
  return value > 2;
});
console.log(checkF); //--> false

const checkT = numbers.every((value, index, array) => {
  return value >= 1;
});
console.log(checkT); //--> true

some(): Nếu có một phần tử bất kỳ nào thỏa điều kiện thì sẽ return true, còn không thì sẽ return false.

const numbers = [1, 2, 3, 4, 5];

const check = numbers.some((value, index, array) => {
  return value > 2;
});
console.log(check); //--> true

13. Lấy index của phần tử mảng.

Để lấy giá trị index của phần tử có trong mảng ta dùng hàm indexOf() và truyền vào giá trị mà bạn muốn lấy index.

const cars = ['Honda', 'Hyundai', 'Ford', 'Toyota'];

let index = cars.indexOf('Ford');
console.log(index); //--> 2

14. Kiểm tra phần tử có trong mảng hay không.

Để check xem phần tử nào đó có trong mảng hay không ta dùng hàm includes() và truyền vào giá trị bạn muốn tìm. Nếu có nó sẽ return true không thì return false

const numbers = [1, 2, 3, 4, 5];
const check = numbers.includes(5); //--> true

IV. Object.

Entry của object là cặp key, value tương ứng, entry còn được coi như là property (thuộc tính) của object.

Key của object luôn là string hoặc number.

Value của object thì có thể thuộc bất cứ kiểu dữ liệu nào kể cả là function.

Method hay phương thức là những thuộc tính mà value của nó là function

1. prototype object

Prototype là một cơ chế của JavaScript, giúp object thừa kế các tính năng của object khác.

Ngoài các kiểu dữ liệu trong JavaScript mà ta đã biết thì nó cũng như bao ngôn ngữ lập trình khá còn có các object kiểu dữ liệu như Number, String, Boolean. Mảng là một object dạng Array còn function là một object Function.

Để dễ hiểu hơn, chúng ta cùng xem ví dụ và giải thích nhé 😉.

let str = 'String'; // str là string, cha nó là String.prototype

// nhân đôi chuỗi đưa vào
String.prototype.duplicate = function() { return this + this; };

console.log(str.duplicate()); // Tìm thấy hàm duplicate trong prototype
// object thông thường
const person = {
  firstName: 'Alice',
  lastName: 'Rondo',
  showName: function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
};
//--> object person có prototype là Object.prototype
// Constructor Function
function Person(firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
  this.showName = function() {
    console.log(this.firstName + ' ' + this.lastName);
  }
}

let Person_1 = new Person('Alice', 'Rondo');
/* 
	- object này có prototype là Person.prototype
	- Prototype mới: Person.prototype được tạo ra
	- Person.prototype kế thừa Object.prototype
*/

Thử thêm một phương thức vào object được tạo từ một constructor function

// STEP 0: tạo ra 1 hàm và khởi tạo một object s1 bằng toán tử new
function Student(name, age) {
  this.name = name
  this.age = age
}

const s1 = new Student('Alice Rondo', 9)

// STEP 1: thêm một hàm saySomeThing() cho Student như sau:
Student.saySomeThing = function() {
  console.log('Hello')
}

// STEP 2: thêm 1 hàm showName() cho prototype của Student như sau:
Student.prototype.showName = function() {
  console.log('My name is: ', this.name)
}

// STEP 3: Gọi lần lượt hai hàm trên từ object s1:
s1.sayHello() //--> Lỗi, vì s1 không có hàm saySomeThing, hàm này chỉ thuộc Student thôi.

s1.showName() //--> 'My name is: Alice Rondo'

Student.sayHello() //-->'Hello'

Ta có thể edit prototype của một function thông qua object được tạo từ function đó bằng __proto__ như sau:

s1.__proto__.study = function() {
  console.log(`Tôi là ${this.name}, tôi đang học.`)
}

const s2 = new Student('Milim Nava', 20)
s2.study() //--> "Tôi là Milim Nava, tôi đang học."

2. Truy xuất, thêm, xóa, sửa thuộc tính của object.

const person = {
  name: 'Alice Rondo',
};

// Lấy giá trị của thuộc tính name
person.name;

// Thêm thuộc tính vào person
person.age = 12;

// Sửa thuộc tính name
person.name = 'Rimuru Tempest';

// Xóa thuộc tính name
delete person.name;

3. Merge object.

Để merge 2 object lại với nhau ta dùng phương thức Object.assign().

const person = {
  name: 'Rimuru Tempest',
  position: ['King of Jura Tempest Federation'],
};
const person2 = Object.assign(person, { position: ['King of Monsters'] });
console.log(person2);
/*
    {
        name: 'Rimuru Tempest',
        positon: ['King of Monsters']
    }
*/

Spread operator cũng có thể dùng để  shallow copy hoặc merge object lại nhé 😁

const person = {
  name: 'Rimuru Tempest',
  position: ['King of Jura Tempest Federation'],
}
const person2 = { ...person, position: ['King of Monsters'] }
console.log(person2);
/*
    {
        name: 'Rimuru Tempest',
        positon: ['King of Monsters']
    }
*/

4. Lấy các key của object.

Để lấy tất cả các key của một object ta dùng phương thức Object.keys(), nó sẽ return một mảng chứa tất cả các key của object đó.

const person = {
  name: "Remuru Tempest",
  age: 24
};
console.log(Object.keys(person));
//--> [ "name", 'age" ]

5. Lấy các value của object.

Để lấy tất cả các value của một object ta dùng phương thức Object.values(), nó sẽ return một mảng chứa tất cả các value của object đó.

const person = {
  name: "Remuru Tempest",
  age: 24
};
console.log(Object.keys(person));
//--> ["Remuru Tempest", 24]

V. Tổng kết.

Bài viết tuy hơi dài, nhưng mình đã cố gắng giới thiệu cho các bạn những phương thức thừng hay sử dụng để thao tác với các data là number,`string, array hay object trong khi học hay làm việc với ngôn ngữ JavaScript, ngoài ra còn nhiều phương thức khác nữa đó nha, bấy nhiêu đó chưa có hết đâu 😁. Tuy vậy, mình hy vọng bài viết này sẽ có ích cho các bạn, cảm ơn các bạn đã đọc 🤗.

Bài viết cùng seri

Bài viết liên quan

Hướng dẫn clone instagram với React JS và Firebase phần 2.

Trong phần 1 của series này, chúng ta tiến hành setup một project ReactJS bằng câu lệnh create-react-app,đăng ký và tạo app trên firebase để có thể sử dụng và lưu trữ data. Trong phần 2 này, chúng ta sẽ tạo header cho nó và tạo component post để hiển thị bài đăng nhé 😉. Nào bắt đầu thôi 😁!...

Hướng dẫn clone instagram với React JS và Firebase phần 2.
Hướng dẫn clone instagram với React JS và Firebase phần 1.

Trong bài viết này, chúng ta sẽ cùng nhau clone một trang mạng xã hội nỗi tiếng, là nơi chia sẽ hình ảnh và video của hàng trăm triệu người trên toàn thế giới, đó chính là Instagram. Chúng ta bắt đầu thôi 😁!...

Hướng dẫn clone instagram với React JS và Firebase phần 1.
Tìm hiểu thêm về Window Object trong Javascript

Nếu các bạn đã xem các bài trước thuộc series JavasScript cơ bản của mình hoặc đã xem các tài liệu khác thì chắc hẵn đã từng thấy trong bài viết có đề cập đến ông thần window object rồi nhỉ 😉. Vậy trong bài này, chúng ta sẽ cùng nhau tìm hiểu về nó để xem window object là loại object như thế nào nhé...

Tìm hiểu thêm về Window Object trong Javascript
Tìm hiểu về "this" trong JavaScript.

Chắc hẵn bạn đã từng nhìn thấy từ this trong một ngôn ngữ lập trình nào trước đó hoặc là trong một vài đoạn code nào đó của JavaScript. Bạn thắc mắc nó có tác dụng gì hoặc là bạn đang mơ hồ về this trong JavaScript. Yên tâm, trong bài này chúng ta sẽ cùng nhau tìm hiểu this có ý nghĩa gì nhé....

Tìm hiểu về "this" trong JavaScript.
Có gì mới ở ES2022?

ES2021/ES12 mới vừa ra mắt hồi giữa năm còn nóng hổi thì giờ đây ES2022/ES13 đã được ra mắt, thật quá nhanh quá nguy hiểm đi mà 😆. Công nghệ cập nhật và thay đổi không ngừng với tốc độ thật đáng kinh ngạc. Không chần chừ thêm nữa ta cùng nhau tìm hiểu xem ở ES2022 có gì đặc sắc nào 😋...

Có gì mới ở ES2022?
You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.