Hướng dẫn what is key and value in javascript? - khóa và giá trị trong javascript là gì?

Như chúng ta biết từ các loại dữ liệu chương, có tám loại dữ liệu trong JavaScript. Bảy trong số chúng được gọi là nguyên thủy, vì các 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ứ điều 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 của các 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 ở 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 hình

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

9 với danh sách các thuộc tính tùy chọn. Một thuộc tính là một khóa: cặp giá trị, trong đó

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

0 là một chuỗi (còn được gọi là tên thuộc tính của Google) và

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

1 có thể là bất cứ điều gì.

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

Một đối tượng trống (tủ trống rỗ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, dấu ngoặc

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

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

Văn học và tài sản

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

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

2 dưới dạng khóa: Giá trị cặp đôi:

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

Một tài sản có một khóa (còn được gọi là tên nhận dạng tên hay tên nhận dạng của người Hồi giáo) trước khi đại tràng

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

4 và giá trị ở bên phải của nó.

Trong đối tượng

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

5, có hai thuộc tính:

1. Thuộc tính đầu tiên có tên

   let user = {
     name: "John",
     age: 30,
     "likes birds": true  // multiword property name must be quoted
   };

   6 và giá trị

   let user = {
     name: "John",
     age: 30,
     "likes birds": true  // multiword property name must be quoted
   };

   7.
2. Cái thứ hai có tên

   let user = {
     name: "John",
     age: 30,
     "likes birds": true  // multiword property name must be quoted
   };

   8 và giá trị

   let user = {
     name: "John",
     age: 30,
     "likes birds": true  // multiword property name must be quoted
   };

   9.

Đối tượng kết quả

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

5 có thể được tưởng tượng như một tủ với hai tệp đã ký có nhãn tên tên và tên tuổi 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 bằng cách sử dụng ký hiệu dấu chấm:

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

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

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

let user = {
  name: "John",
  age: 30,
}

1:

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

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

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 user = {
  name: "John",
  age: 30,
}

Đó được gọi là một dấu vết dấu vết của người Viking hoặc người khác. Làm cho nó dễ dàng hơn để thêm/xóa/di chuyển xung quanh các thuộc tính, bởi vì tất cả các dòng trở nên giống nhau.

Dấu ngoặc vuông

Đối với các thuộc tính đa từ, truy cập chấm không hoạt động:

// this would give a syntax error
user.likes birds = true

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

let user = {
  name: "John",
  age: 30,
}

2, và sau đó gây ra lỗi cú pháp khi gặp

let user = {
  name: "John",
  age: 30,
}

3 bất ngờ.

Dấu chấm yêu cầu khóa là một đị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 (

let user = {
  name: "John",
  age: 30,
}

4 và

let user = {
  name: "John",
  age: 30,
}

5 được cho phép).

Có một ký hiệu khung hình vuông thay thế khác, hoạt động với bất kỳ chuỗi nào:

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

Bây giờ mọi thứ đều ổn. Xin lưu ý rằng chuỗi bên trong giá đỡ được trích dẫn đúng (bất kỳ loại trích dẫn nào cũng sẽ làm).

Dấu ngoặc vuông cũng cung cấp một cách để có được 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 theo nghĩa đen - như từ một biến như sau:

let key = "likes birds";

// same as user["likes birds"] = true;
user[key] = true;

Ở đây, biến

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

0 có thể được tính toán tại 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 vào tài sản. Điều đó cho chúng ta rất nhiều sự linh hoạt.

Ví dụ:

let user = {
  name: "John",
  age: 30
};

let key = prompt("What do you want to know about the user?", "name");

// access by variable
alert( user[key] ); // John (if enter "name")

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

let user = {
  name: "John",
  age: 30
};

let key = "name";
alert( user.key ) // undefined

Tính chất được tính toán

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

Ví dụ:

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

0

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

Tính chất được tính toán

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

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

1

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

let user = {
  name: "John",
  age: 30,
}

7 có nghĩa là tên thuộc tính nên được lấy từ

let user = {
  name: "John",
  age: 30,
}

8.

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

let user = {
  name: "John",
  age: 30,
}

9,

// this would give a syntax error
user.likes birds = true

0 sẽ trở thành

// this would give a syntax error
user.likes birds = true

1.

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

2

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

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:

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

Ví dụ:

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

3

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

Tính chất được tính toán

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

4

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

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

5

Ý nghĩa của một thuộc tính được tính toán rất đơn giản: let user = { name: "John", age: 30, }7 có nghĩa là tên thuộc tính nên được lấy từ let user = { name: "John", age: 30, }8.

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

let user = {
  name: "John",
  age: 30,
}

9,

// this would give a syntax error
user.likes birds = true

0 sẽ trở thành

// this would give a syntax error
user.likes birds = true

1.

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

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

6

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 các định danh, 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, số

// this would give a syntax error
user.likes birds = true

4 trở thành chuỗi

// this would give a syntax error
user.likes birds = true

5 khi được sử dụng làm khóa thuộc tính:

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

7

Có một gotcha nhỏ với một tài sản đặc biệt có tên

// this would give a syntax error
user.likes birds = true

6. Chúng tôi có thể đặt nó thành một giá trị không đối tượng:

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

8

Như chúng ta thấy từ mã, nhiệm vụ cho một

// this would give a syntax error
user.likes birds = true

7 nguyên thủy bị bỏ qua.

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

// this would give a syntax error
user.likes birds = true

6 trong các chương tiếp theo và đề xuất các cách để khắc phục hành vi đó.

Thử nghiệm tồn tại tài sản, Nhà điều hành trong trong

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à nó có thể truy cập bất kỳ thuộc tính nào. Sẽ không có lỗi nếu tài sản không tồn tại!

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

// this would give a syntax error
user.likes birds = true

9. Vì vậy, chúng tôi có thể dễ dàng kiểm tra xem tài sản có tồn tại hay không:

let user = {     // an object
  name: "John",  // by key "name" store value "John"
  age: 30        // by key "age" store value 30
};

9

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

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

0 cho điều đó.

Cú pháp là:

Ví dụ:

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

0

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

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

1 phải có tên thuộc tính. Đó thường là một chuỗi được trích dẫn.

Nếu chúng ta bỏ qua các trích dẫn, điều đó có nghĩa là một biến nên chứa tên thực tế sẽ được kiểm tra. Ví dụ:

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

1

Tại sao toán tử

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

1 tồn tại? Có phải nó đủ để so sánh với

// this would give a syntax error
user.likes birds = true

9?

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

// this would give a syntax error
user.likes birds = true

9 hoạt động tốt. Nhưng có một trường hợp đặc biệt khi nó thất bại, nhưng

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

0 hoạt động chính xác.

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

// this would give a syntax error
user.likes birds = true

9:

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

2

Trong mã trên, tài sản

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

7 về mặt kỹ thuật. Vì vậy, toán tử

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

1 hoạt động đúng.

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

// this would give a syntax error
user.likes birds = true

9 không nên được chỉ định rõ ràng. Chúng tôi chủ yếu sử dụng

let key = "likes birds";

// same as user["likes birds"] = true;
user[key] = true;

0 cho các giá trị không xác định của người Hồi giáo hoặc các giá trị trống rỗng. Vì vậy, toán tử

let user = {};

// set
user["likes birds"] = true;

// get
alert(user["likes birds"]); // true

// delete
delete user["likes birds"];

1 là một khách mời kỳ lạ trong mã.

Vòng lặp "for..in"

Để đi trên tất cả các phím của một vật thể, tồn tại một dạng đặc biệt của vòng lặp:

let key = "likes birds";

// same as user["likes birds"] = true;
user[key] = true;

2. Đây là một điều hoàn toàn khác với cấu trúc

let key = "likes birds";

// same as user["likes birds"] = true;
user[key] = true;

3 mà chúng tôi đã nghiên cứu trước đây.

Cú pháp:

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

3

Chẳng hạn, hãy để đầu ra tất cả các thuộc tính của

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

5:

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

4

Lưu ý rằng tất cả các cấu trúc cho các cấu trúc cho phép chúng tôi khai báo biến vòng lặp bên trong vòng lặp, như

let key = "likes birds";

// same as user["likes birds"] = true;
user[key] = true;

5 tại đây.

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

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // multiword property name must be quoted
};

0. Ví dụ,

let key = "likes birds";

// same as user["likes birds"] = true;
user[key] = true;

7 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 đặt hàng không? Nói cách khác, nếu chúng ta lặp qua một đối tượng, chúng ta có nhận được tất cả các thuộc tính theo cùng một thứ tự chúng được thêm vào không? Chúng ta có thể dựa vào điều này không?

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

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

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

5

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

let key = "likes birds";

// same as user["likes birds"] = true;
user[key] = true;

8 là người đầu tiên.

Nhưng nếu chúng ta chạy mã, chúng ta sẽ thấy một hình ảnh hoàn toàn khác:

• Hoa Kỳ (1) đi trước
• sau đó Thụy Sĩ (41) và như vậy.

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

let key = "likes birds";

// same as user["likes birds"] = true;
user[key] = true;

9.

Thuộc tính số nguyên? Cái gì mà đó?

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

Vì vậy,

let user = {
  name: "John",
  age: 30
};

let key = prompt("What do you want to know about the user?", "name");

// access by variable
alert( user[key] ); // John (if enter "name")

0 là một tên thuộc tính số nguyên, bởi vì khi nó chuyển đổi thành một số nguyên và trở lại, nó vẫn giống nhau. Nhưng

let user = {
  name: "John",
  age: 30
};

let key = prompt("What do you want to know about the user?", "name");

// access by variable
alert( user[key] ); // John (if enter "name")

1 và

let user = {
  name: "John",
  age: 30
};

let key = prompt("What do you want to know about the user?", "name");

// access by variable
alert( user[key] ); // John (if enter "name")

2 không phải là:

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

6

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

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

7

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

let user = {
  name: "John",
  age: 30
};

let key = prompt("What do you want to know about the user?", "name");

// access by variable
alert( user[key] ); // John (if enter "name")

3 trước mỗi mã là đủ.

Như thế này:

// get property values of the object:
alert( user.name ); // John
alert( user.age ); // 30

8

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

Bản tóm tắt

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

Họ lưu trữ thuộc tính (cặp giá trị khóa), trong đó:

• Khóa tài sản phải là chuỗi hoặc ký hiệu (thường là chuỗi).
• Giá trị có thể thuộc bất kỳ loại.

Để truy cập một tài sản, chúng ta có thể sử dụng:

• Ký hiệu chấm:

  let user = {
    name: "John",
    age: 30
  };
  
  let key = prompt("What do you want to know about the user?", "name");
  
  // access by variable
  alert( user[key] ); // John (if enter "name")

  4.
• Ký hiệu ngoặc vuông

  let user = {
    name: "John",
    age: 30
  };
  
  let key = prompt("What do you want to know about the user?", "name");
  
  // access by variable
  alert( user[key] ); // John (if enter "name")

  5. Dấu ngoặc vuông cho phép lấy chìa khóa từ một biến, như

  let user = {
    name: "John",
    age: 30
  };
  
  let key = prompt("What do you want to know about the user?", "name");
  
  // access by variable
  alert( user[key] ); // John (if enter "name")

  6.

Các nhà khai thác bổ sung:

• Để xóa một tài sản:

  let user = {
    name: "John",
    age: 30
  };
  
  let key = prompt("What do you want to know about the user?", "name");
  
  // access by variable
  alert( user[key] ); // John (if enter "name")

  7.
• Để kiểm tra xem một thuộc tính có khóa đã cho có tồn tại không:

  let user = {
    name: "John",
    age: 30
  };
  
  let key = prompt("What do you want to know about the user?", "name");
  
  // access by variable
  alert( user[key] ); // John (if enter "name")

  8.
• Để lặp lại trên một đối tượng:

  let user = {
    name: "John",
    age: 30
  };
  
  let key = prompt("What do you want to know about the user?", "name");
  
  // access by variable
  alert( user[key] ); // John (if enter "name")

  9 vòng lặp.

Những gì chúng tôi đã nghiên cứu trong chương này được gọi là một đối tượng đồng bằng của người Hồi giáo, hoặc chỉ

let user = {
  name: "John",
  age: 30
};

let key = "name";
alert( user.key ) // undefined

0.

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

• let user = {
    name: "John",
    age: 30
  };
  
  let key = "name";
  alert( user.key ) // undefined

  1 để lưu trữ các bộ sưu tập dữ liệu đã đặt hàng,

• let user = {
    name: "John",
    age: 30
  };
  
  let key = "name";
  alert( user.key ) // undefined

  2 để lưu trữ thông tin về ngày và giờ,

• let user = {
    name: "John",
    age: 30
  };
  
  let key = "name";
  alert( user.key ) // undefined

  3 để lưu trữ thông tin về một lỗi.
• …Và như thế.

Họ có các tính năng đặc biệt của họ mà chúng tôi sẽ học sau. Đôi khi, mọi người nói một cái gì đó như loại mảng khác, hoặc loại ngày, nhưng chính thức chúng không phải là loại của riêng họ, mà thuộc về một loại dữ liệu đối tượng duy nhất của một người khác. 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 mẽ. Ở đây, chúng tôi đã gãi bề mặt của một chủ đề thực sự rất lớn. Chúng tôi 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.

Khóa là gì và giá trị là gì?

Khóa và giá trị trong mảng là gì?

Việc sử dụng khóa trong JavaScript là gì?

Khóa trong một đối tượng JavaScript là gì?