programming javascript

JavaScript lấy tên thuộc tính dưới dạng chuỗi

Tên thuộc tính có thể là tên thuộc tính hoặc tên quan hệ. Đối với tên thuộc tính, kết quả trả về là 

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
01; . Nếu một thuộc tính và một mối quan hệ có cùng tên, thì thuộc tính được trả về. Ví dụ: một thực thể Tài khoản có cả thuộc tính chủ sở hữu và mối quan hệ chủ sở hữu

Ví dụ: khi thao tác trên một tài khoản, thuộc tính ID người dùng có thể trả về một Chuỗi, trong đó thuộc tính chủ sở hữu có thể trả về một thực thể khác [
let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
03]. Thực thể chủ sở hữu sau đó có thể được vận hành với thành viên 
let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
04 để lấy thông tin về nó. 
userids = directoryObject.getProperty["eruid"];
if [userids.length > 0]
    userid = userids[0];
owner = directoryObject.getProperty["owner"];
if [owner.length > 0]
    ownerName = owner.getProperty["name"][0];

Ghi chú. Các câu lệnh này giả sử có ít nhất một giá trị được trả về. Nếu không có giá trị nào được trả về, sẽ xảy ra vi phạm lập chỉ mục mảng.

Phương thức 

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
05 trả về một mảng đối tượng Java™ được lưu trữ trong đối tượng JavaScript 
let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
06. Không giống như một mảng JavaScript tiêu chuẩn, các đối tượng 
let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
06 được sử dụng để truy cập các thành viên của một mảng Java. Vì các mảng Java không thể thay đổi kích thước nên không thể thay đổi kích thước của đối tượng 
let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
06. Ngoài ra, các đối tượng 
let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
06 được nhập. Đặt sai loại phần tử 
let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
06 sẽ gây ra lỗi JavaScript

Trước đây, chúng ta phải thực hiện 2 bước - tạo đối tượng theo nghĩa đen và sau đó sử dụng ký hiệu ngoặc. Với ES6, giờ đây bạn có thể trực tiếp sử dụng một biến làm khóa thuộc tính trong đối tượng của mình. CÓ. 👏

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};

  • 3 cách để truy cập giá trị đối tượng
  • Cách truy cập giá trị đối tượng bằng các phím biểu tượng cảm xúc
  • Tài nguyên

# 3 cách để truy cập giá trị đối tượng

Chúng ta có thể xuất giá trị đối tượng bằng cách chuyển vào khóa thích hợp. Vì tôi đã sử dụng biểu tượng cảm xúc làm chìa khóa trong ví dụ của mình nên hơi phức tạp một chút. Vì vậy, hãy xem một ví dụ dễ dàng hơn

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha

# Cách truy cập giá trị đối tượng bằng các phím biểu tượng cảm xúc

Được rồi quay lại ví dụ biểu tượng cảm xúc của chúng tôi. Chúng ta hãy nhìn vào đầu ra

let cake = '🍰';

let pan = {
  [cake]: '🥞',
};

// Output -> { '🍰': '🥞' }

Rất tiếc, khi bạn đang sử dụng Biểu tượng cảm xúc làm phím, bạn sẽ không thể sử dụng ký hiệu dấu chấm. Bạn bị giới hạn trong Ký hiệu khung

Bằng cách này, chúng ta có thể thông báo cho TypeScript rằng biến 

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
11 sẽ chỉ lưu trữ một chuỗi bằng với một trong các khóa trong đối tượng

Bây giờ chúng ta có thể truy cập thuộc tính đối tượng một cách linh hoạt

Điều này là cần thiết vì TypeScript không phải lúc nào cũng có thể xác định loại chuỗi càng hẹp càng tốt

Loại 

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
11 là một chuỗi và không phải tất cả các chuỗi đều là thuộc tính của đối tượng, vì vậy TypeScript thông báo cho chúng tôi rằng chúng tôi không thể truy cập động thuộc tính một cách an toàn

Nếu bạn cố đặt loại 

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
11 thành tổ hợp các khóa của đối tượng, bạn vẫn sẽ gặp lỗi

Cách dễ nhất để giải quyết vấn đề này là sử dụng xác nhận kiểu

Bạn cũng có thể sử dụng xác nhận loại trực tiếp trong dấu ngoặc vuông

Tuy nhiên, với phương pháp này, bạn phải sử dụng xác nhận kiểu mỗi khi bạn cố gắng truy cập động vào thuộc tính trên đối tượng

Như chúng ta đã biết từ chương Kiểu dữ liệu, có tám kiểu dữ liệu trong JavaScript. Bảy trong số chúng được gọi là "nguyên thủy", bởi vì giá trị của chúng chỉ chứa một thứ duy nhất [có thể là một chuỗi hoặc một số hoặc bất cứ thứ gì]

Ngược lại, các đối tượng được sử dụng để lưu trữ các bộ sưu tập có khóa gồm nhiều dữ liệu khác nhau và các thực thể phức tạp hơn. Trong JavaScript, các đối tượng thâm nhập vào hầu hết mọi khía cạnh của ngôn ngữ. Vì vậy, chúng ta phải hiểu chúng trước khi đi sâu vào bất cứ nơi nào khác

Một đối tượng có thể được tạo bằng dấu ngoặc nhọn 

user.isAdmin = true;
2 với danh sách thuộc tính tùy chọn. Thuộc tính là “chìa khóa. value”, trong đó 
user.isAdmin = true;
3 là một chuỗi [còn được gọi là “tên thuộc tính”] và 
user.isAdmin = true;
4 có thể là bất kỳ thứ gì

Chúng ta có thể tưởng tượng một đối tượng như một chiếc tủ chứa các tệp đã ký. Mỗi phần dữ liệu được lưu trữ trong tệp của nó bằng khóa. Thật dễ dàng để tìm một tệp theo tên của nó hoặc thêm/xóa tệp

Một đối tượng trống [“tủ trống”] có thể được tạo bằng một trong hai cú pháp

let user = new Object[]; // "object constructor" syntax
let user = {};  // "object literal" syntax

Thông thường, các dấu ngoặc đơn 

user.isAdmin = true;
5 được sử dụng. Tuyên bố đó được gọi là một đối tượng theo nghĩa đen

Nghĩa đen và tính chất

Chúng ta có thể ngay lập tức đặt một số thuộc tính vào 

user.isAdmin = true;
5 dưới dạng “khóa. cặp giá trị

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
0

Một thuộc tính có một khóa [còn được gọi là “tên” hoặc “mã định danh”] trước dấu hai chấm 

user.isAdmin = true;
7 và một giá trị ở bên phải của nó

Trong đối tượng 

user.isAdmin = true;
8, có hai thuộc tính

  1. Thuộc tính đầu tiên có tên 
    user.isAdmin = true;
    9 và giá trị 
    let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
    40
  2. Cái thứ hai có tên 
    let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
    41 và giá trị 
    let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
    42

Đối tượng 

user.isAdmin = true;
8 kết quả có thể được tưởng tượng như một chiếc tủ có hai tệp được ký có nhãn “tên” và “tuổi”

Chúng tôi có thể thêm, xóa và đọc các tệp từ nó bất cứ lúc nào

Giá trị thuộc tính có thể truy cập được bằng cách sử dụng ký hiệu dấu chấm

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
8

Giá trị có thể thuộc bất kỳ loại nào. Hãy thêm một boolean

user.isAdmin = true;

Để xóa một thuộc tính, chúng ta có thể sử dụng toán tử 

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
44

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
4

Chúng tôi cũng có thể sử dụng tên thuộc tính nhiều từ, nhưng sau đó chúng phải được trích dẫn

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
2

Thuộc tính cuối cùng trong danh sách có thể kết thúc bằng dấu phẩy

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
3

Đó được gọi là dấu phẩy “dấu” hoặc “treo”. Làm cho việc thêm/xóa/di chuyển xung quanh các thuộc tính trở nên dễ dàng hơn vì tất cả các dòng đều giống nhau

Dấu ngoặc vuông

Đối với thuộc tính nhiều từ, quyền truy cập dấu chấm không hoạt động

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
4

JavaScript không hiểu điều đó. Nó nghĩ rằng chúng tôi giải quyết 

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
45 và sau đó đưa ra lỗi cú pháp khi gặp phải 
let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
46 không mong muốn

Dấu chấm yêu cầu khóa phải là mã định danh biến hợp lệ. Điều đó ngụ ý. không chứa khoảng trắng, không bắt đầu bằng một chữ số và không bao gồm các ký tự đặc biệt [cho phép ____147 và ____148]

Có một "ký hiệu dấu ngoặc vuông" thay thế hoạt động với bất kỳ chuỗi nào

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
9

Bây giờ mọi thứ đều ổn. Xin lưu ý rằng chuỗi bên trong dấu ngoặc được trích dẫn chính xác [bất kỳ loại trích dẫn nào cũng được]

Dấu ngoặc vuông cũng cung cấp một cách để lấy tên thuộc tính là kết quả của bất kỳ biểu thức nào – trái ngược với một chuỗi ký tự – như từ một biến như sau

let cake = '🍰';

let pan = {
  [cake]: '🥞',
};

// Output -> { '🍰': '🥞' }
0

Ở đây, biến 

user.isAdmin = true;
3 có thể được tính trong thời gian chạy hoặc phụ thuộc vào đầu vào của người dùng. Và sau đó chúng tôi sử dụng nó để truy cập tài sản. Điều đó mang lại cho chúng tôi rất nhiều sự linh hoạt

Ví dụ

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
00

Ký hiệu dấu chấm không thể được sử dụng theo cách tương tự

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
01

Thuộc tính tính toán

Chúng ta có thể sử dụng dấu ngoặc vuông trong một đối tượng bằng chữ, khi tạo một đối tượng. Đó được gọi là thuộc tính được tính toán

Ví dụ

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
02

Ý nghĩa của một thuộc tính được tính toán rất đơn giản. 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
20 có nghĩa là tên tài sản nên được lấy từ 
let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
21

Vì vậy, nếu một khách truy cập vào 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
22, thì 
let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
23 sẽ trở thành 
let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
24

Về cơ bản, nó hoạt động giống như

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
03

…Nhưng trông đẹp hơn

Chúng ta có thể sử dụng các biểu thức phức tạp hơn bên trong dấu ngoặc vuông

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
04

Dấu ngoặc vuông mạnh hơn nhiều so với ký hiệu dấu chấm. Họ cho phép mọi tên thuộc tính và biến. Nhưng chúng cũng rườm rà hơn để viết

Vì vậy, hầu hết thời gian, khi tên thuộc tính được biết và đơn giản, dấu chấm được sử dụng. Và nếu chúng ta cần một cái gì đó phức tạp hơn, thì chúng ta chuyển sang dấu ngoặc vuông

giá trị tài sản viết tắt

Trong mã thực, chúng tôi thường sử dụng các biến hiện có làm giá trị cho tên thuộc tính

Ví dụ

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
05

Trong ví dụ trên, các thuộc tính có cùng tên với các biến. Trường hợp sử dụng để tạo một thuộc tính từ một biến phổ biến đến mức có một cách viết tắt giá trị thuộc tính đặc biệt để làm cho nó ngắn hơn

Thay vì 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
25, chúng ta chỉ có thể viết 
let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
26, như thế này

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
06

Chúng ta có thể sử dụng cả thuộc tính thông thường và tốc ký trong cùng một đối tượng

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
07

Giới hạn tên thuộc tính

Như chúng ta đã biết, một biến không thể có tên bằng một trong các từ dành riêng cho ngôn ngữ như “for”, “let”, “return” v.v.

Nhưng đối với một thuộc tính đối tượng, không có giới hạn nào như vậy

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
08

Nói tóm lại, không có giới hạn về tên tài sản. Chúng có thể là bất kỳ chuỗi hoặc ký hiệu nào [một loại đặc biệt cho số nhận dạng, sẽ được đề cập sau]

Các loại khác được tự động chuyển đổi thành chuỗi

Chẳng hạn, một số 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
27 trở thành một chuỗi 
let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
28 khi được sử dụng làm khóa thuộc tính

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
09

Có một vấn đề nhỏ với thuộc tính đặc biệt tên là 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
29. Chúng tôi không thể đặt nó thành một giá trị phi đối tượng

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
80

Như chúng ta thấy từ mã, việc gán cho một 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
30 nguyên thủy bị bỏ qua

Chúng tôi sẽ đề cập đến bản chất đặc biệt của 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
29 trong các chương tiếp theo và đề xuất các cách khắc phục hành vi đó

Kiểm tra sự tồn tại của thuộc tính, toán tử “in”

Một tính năng đáng chú ý của các đối tượng trong JavaScript, so với nhiều ngôn ngữ khác, là có thể truy cập bất kỳ thuộc tính nào. Sẽ không có lỗi nếu thuộc tính không tồn tại

Đọc thuộc tính không tồn tại chỉ trả về 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
32. Vì vậy, chúng tôi có thể dễ dàng kiểm tra xem thuộc tính có tồn tại hay không

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
81

Ngoài ra còn có một nhà điều hành đặc biệt 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
33 cho điều đó

Cú pháp là

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
82

Ví dụ

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
83

Xin lưu ý rằng ở phía bên trái của 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
34 phải có tên tài sản. Đó thường là một chuỗi trích dẫn

Nếu chúng ta bỏ qua dấu ngoặc kép, điều đó có nghĩa là một biến phải chứa tên thật cần kiểm tra. Ví dụ

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
84

Tại sao toán tử 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
34 tồn tại?

Chà, hầu hết thời gian so sánh với 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
32 hoạt động tốt. Nhưng có một trường hợp đặc biệt khi nó bị lỗi, nhưng 
let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
33 vẫn hoạt động bình thường

Đó là khi một thuộc tính đối tượng tồn tại, nhưng lưu trữ 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
32

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
85

Trong đoạn mã trên, thuộc tính 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
40 tồn tại về mặt kỹ thuật. Vì vậy, toán tử 
let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
34 hoạt động đúng

Những tình huống như thế này rất hiếm khi xảy ra, bởi vì 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
32 không nên được chỉ định một cách rõ ràng. Chúng tôi chủ yếu sử dụng 
let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
43 cho các giá trị "không xác định" hoặc "trống". Vì vậy, toán tử 
let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
34 là một vị khách kỳ lạ trong mã

Cái "cho. trong vòng lặp

Để duyệt qua tất cả các phím của một đối tượng, tồn tại một dạng vòng lặp đặc biệt. 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
45. Đây là một điều hoàn toàn khác với cấu trúc 
let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
46 mà chúng ta đã nghiên cứu trước đây

cú pháp

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
86

Chẳng hạn, hãy xuất tất cả các thuộc tính của 

user.isAdmin = true;
8

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
87

Lưu ý rằng tất cả các cấu trúc “for” đều cho phép chúng ta khai báo biến vòng lặp bên trong vòng lặp, chẳng hạn như 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
48 ở đây

Ngoài ra, chúng ta có thể sử dụng một tên biến khác ở đây thay vì 

user.isAdmin = true;
3. Chẳng hạn, 
let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
90 cũng được sử dụng rộng rãi

Đặt hàng như một đối tượng

Các đối tượng có được sắp xếp không?

Câu trả lời ngắn gọn là. “đặt hàng theo cách đặc biệt”. các thuộc tính số nguyên được sắp xếp, các thuộc tính khác xuất hiện theo thứ tự tạo. các chi tiết sau

Ví dụ: hãy xem xét một đối tượng có mã điện thoại

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
88

Đối tượng có thể được sử dụng để đề xuất danh sách các tùy chọn cho người dùng. Nếu chúng tôi đang tạo một trang web chủ yếu dành cho khán giả Đức thì có lẽ chúng tôi muốn 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
91 là trang đầu tiên

Nhưng nếu chúng tôi chạy mã, chúng tôi sẽ thấy một bức tranh hoàn toàn khác

  • Hoa Kỳ [1] đi trước
  • sau đó là Thụy Sĩ [41], v.v.

Mã điện thoại được sắp xếp theo thứ tự tăng dần vì chúng là số nguyên. Vì vậy, chúng tôi thấy 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
92

Tính chất số nguyên?

Thuật ngữ “thuộc tính số nguyên” ở đây có nghĩa là một chuỗi có thể được chuyển đổi sang và từ một số nguyên mà không cần thay đổi

Vì vậy, 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
93 là một tên thuộc tính số nguyên, bởi vì khi nó được chuyển đổi thành một số nguyên và ngược lại, nó vẫn như vậy. Nhưng 
let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
94 và 
let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
95 thì không

let cake = '🍰';

// ❌ Old way requires 2 steps
let pan = {
  id: 1,
};
pan[cake] = '🥞';

// ✅ YAY, much easier with ES6
let pan = {
  id: 1,
  [cake]: '🥞',
};
89

…Mặt khác, nếu các khóa không phải là số nguyên, thì chúng được liệt kê theo thứ tự tạo chẳng hạn

user.isAdmin = true;
0

Vì vậy, để khắc phục sự cố với mã điện thoại, chúng ta có thể “ăn gian” bằng cách làm cho mã không nguyên. Thêm dấu cộng 

let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
96 trước mỗi mã là đủ

Như thế này

user.isAdmin = true;
1

Bây giờ nó hoạt động như dự định

Tóm lược

Các đối tượng là các mảng kết hợp với một số tính năng đặc biệt

Chúng lưu trữ các thuộc tính [cặp khóa-giá trị], trong đó

  • Khóa thuộc tính phải là chuỗi hoặc ký hiệu [thường là chuỗi]
  • Các giá trị có thể thuộc bất kỳ loại nào

Để truy cập một thuộc tính, chúng ta có thể sử dụng

  • Ký hiệu dấu chấm. 
    let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
    97
  • Ký hiệu ngoặc vuông 
    let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
    98. Dấu ngoặc vuông cho phép lấy khóa từ một biến, như 
    let me = {
  name: 'samantha',
};

// 1. Dot notation
me.name; // samantha

// 2. Bracket notation [string key]
me['name']; // samantha

// 3. Bracket notation [variable key]
let key = 'name';
me[key]; // samantha
    99

Toán tử bổ sung

  • Để xóa một thuộc tính. 
    let cake = '🍰';

let pan = {
  [cake]: '🥞',
};

// Output -> { '🍰': '🥞' }
    00
  • Để kiểm tra xem một thuộc tính với khóa đã cho có tồn tại không. 
    let cake = '🍰';

let pan = {
  [cake]: '🥞',
};

// Output -> { '🍰': '🥞' }
    01
  • Để lặp lại một đối tượng. vòng lặp 
    let cake = '🍰';

let pan = {
  [cake]: '🥞',
};

// Output -> { '🍰': '🥞' }
    02

Những gì chúng ta đã nghiên cứu trong chương này được gọi là “đối tượng đơn giản”, hoặc chỉ 

let cake = '🍰';

let pan = {
  [cake]: '🥞',
};

// Output -> { '🍰': '🥞' }
03

Có nhiều loại đối tượng khác trong JavaScript

  • let cake = '🍰';

let pan = {
  [cake]: '🥞',
};

// Output -> { '🍰': '🥞' }
    04 để lưu trữ các bộ sưu tập dữ liệu đã đặt hàng,
  • let cake = '🍰';

let pan = {
  [cake]: '🥞',
};

// Output -> { '🍰': '🥞' }
    05 để lưu trữ thông tin về ngày giờ,
  • let cake = '🍰';

let pan = {
  [cake]: '🥞',
};

// Output -> { '🍰': '🥞' }
    06 để lưu trữ thông tin về lỗi
  • …Và như thế

Chúng có những tính năng đặc biệt nào mà chúng ta sẽ nghiên cứu sau. Đôi khi mọi người nói điều gì đó như "Kiểu mảng" hoặc "Kiểu ngày", nhưng về mặt hình thức, chúng không phải là kiểu của riêng chúng mà thuộc về một kiểu dữ liệu "đối tượng" duy nhất. Và họ mở rộng nó theo nhiều cách khác nhau

Các đối tượng trong JavaScript rất mạnh. Ở đây chúng ta vừa vạch ra bề nổi của một chủ đề thực sự lớn. Chúng ta sẽ làm việc chặt chẽ với các đối tượng và tìm hiểu thêm về chúng trong các phần tiếp theo của hướng dẫn

Làm cách nào để lấy tên thuộc tính trong JavaScript?

Bạn có thể truy cập các thuộc tính của một đối tượng trong JavaScript theo 3 cách. .
Trình truy cập thuộc tính dấu chấm. vật. tài sản
Truy cập thuộc tính dấu ngoặc vuông. đối tượng ['thuộc tính']
phá hủy đối tượng. const {thuộc tính} = đối tượng

Thuộc tính đối tượng JavaScript có thể là chuỗi không?

Tên thuộc tính đối tượng JavaScript có thể là bất kỳ chuỗi nào, bao gồm cả việc có khoảng trắng trong tên . Tuy nhiên, tên thuộc tính đối tượng không phải là mã định danh JavaScript hợp lệ, chỉ có thể là. Được chỉ định bằng cách sử dụng dấu ngoặc kép, và; .

Làm cách nào để lấy tên thuộc tính từ mảng trong JavaScript?

Đối tượng . phương thức getOwnPropertyNames[] trả về một mảng gồm tất cả các thuộc tính [bao gồm các thuộc tính không thể đếm được ngoại trừ những thuộc tính sử dụng Biểu tượng] được tìm thấy trực tiếp trong một đối tượng nhất định.

Làm cách nào để lấy chuỗi khóa đối tượng trong JavaScript?

Có thể đạt được các khóa Đối tượng bằng cách sử dụng Đối tượng. phương thức key[] . Trong JavaScript, đối tượng. keys[] trả về một mảng chứa tất cả các tên thuộc tính có thể đếm được của đối tượng.

Bài Viết Liên Quan

0 có đánh giá đúng trong Python không?
Linear-gradient trong css đẹp
Có chức năng hoán đổi trong python không?
PHP ẩn tên trang trong thanh địa chỉ
Xe máy chạy quá tốc độ bị phạt bao nhiêu?
Mảng javascript fizzbuzz
Ví dụ strftime và strptime Python
Tích hợp Loại S 2023
When does the new 2023 Sportage come out?
Cài python không cần quyền admin linux
Nhận giá trị trong chuỗi Python
Hướng dẫn quản lý vps linux plesk
Testng Cheat Sheet PDF
Đếm khác biệt trong python
Làm thế nào để bạn viết một tên cột trong csv trong python?
Khi nào ứng dụng UNIVEN đóng cửa vào năm 2023
Eid al-Fitr 2023 falls on the date
Cách ẩn một cột trong Excel
Làm thế nào để có được năm tới trong php?
COUNTIF sao chép Google Trang tính

Toplist mới

#1
Top 9 tập bản đồ lớp 8 bài 31 2023
7 tháng trước
#2
Top 6 kết quả thi hsg đà nẵng 2022 2023
7 tháng trước
#3
Top 9 tủ nhựa đài loan 4 cánh 3d 2023
7 tháng trước
#4
Top 9 chất khí có thể làm mất màu dung dịch nước brom là: a. so2. b. co2. c. o2. d. hcl. 2023
7 tháng trước
#5
Top 8 tìm việc làm tiện, phay bảo q7 2023
7 tháng trước
#6
Top 3 tôi xuyên thành tiểu kiều the của lão đại phản 2 2023
7 tháng trước
#7
Top 9 đổi mới phong cách, thái độ phục vụ của cán bộ y tế hướng tới sự hài lòng của người bệnh 2023
7 tháng trước
#8
Top 2 bài the dục phát triển chung lớp 6 2022 2023
7 tháng trước
#9
Top 3 bài giảng vũ điệu sắc màu (lớp 4) 2023
7 tháng trước

Bài mới nhất

Quyết định 416 qđ-qld 42 thuốc bhxh ngưng thanh toán năm 2024
Giải bài tập hóa lớp 10 nâng cao bài 46 năm 2024
Chương trình khung sơ cấp nghề tin học văn phòng năm 2024
Biểu hiện nào không thuộc về quan hệ hỗ trợ năm 2024
Bài tập toán 11 hình học chương 2 năm 2024
Hóa đơn chi phí của van chuyen da phuong thuc năm 2024
Xông vùng kín sau sinh như thế nào năm 2024
Cách khắc phục lỗi không cho save trong word năm 2024
Top phong mạch uy tin tại hcm alobacsi năm 2024
Sửa lỗi tự tắt htkk 4.1.6 năm 2024

Chủ Đề

programming Hỏi Đáp Toplist Là gì Mẹo Hay Địa Điểm Hay Học Tốt mẹo hay Công Nghệ Nghĩa của từ Bao nhiêu Khỏe Đẹp đánh giá Top List bao nhieu bao nhiêu hướng dẫn Xây Đựng Bài tập So Sánh Tiếng anh So sánh Sản phẩm tốt Ngôn ngữ Bài Tập javascript Thế nào Ở đâu Hướng dẫn Dịch Máy tính Tại sao Đại học Món Ngon Khoa Học