在 ECMAScript 2020 中，引入了 Indexed Property Accessors（索引属性访问器）的特性，可以让我们更方便地访问对象中的数组元素或字符串字符。
本文将详细介绍该特性的使用方法，帮助读者更好地理解和运用该特性来优化前端开发。
什么是 Indexed Property Accessors？
Indexed Property Accessors 是 ECMAScript 2020 中新增的特性之一，它是一种用于访问对象属性的语法糖。
在 JavaScript 中，我们通常使用以下方式来访问对象的属性：
-- -------------------- ---- ------- ----- ---- - --------- ----- --- - ----------- ---------------------------------------------------- ------- -------- --------- --------------- -- ---- ------- -------- ---------- ------- -------- --------- ------------- ---- ---------- -------- --- - -------- ----- ----- - ---------- ------------------- ----- ----------- ---- --------------------------- -------- --- - ------ -------- ---- ---- ----- ----- - ------ ----- ----- - -------------- -------------- ------- --------------------- ----- ------ ---------------------------- -------- --- - ------ -------- ---- ---- ----------- - --------- --------------------- ----- ---------- ------- --- ------ -- ------- -------- --------- ------------- -- ------- -------- --------- -------------------------------------------- --- ------ ------------------------------------------------------ ------- -------- --------- ----------- --------------------------------------------<form> <input /> <input /> <button>Submit</button> </form> <script> const form = document.querySelector('#myForm'); form.addEventListener('submit', e => { e.preventDefault(); const data = {}; const inputs = form.querySelectorAll('input'); for (let i = 0; i < inputs.length; i++) { // 通过方括号语法获取输入框的值并存储到数据对象中 data[inputs[i].name] = inputs[i].value; } console.log(data); }); </script>
-- -------------------- ---- ------- --------------------------------------- --- --------- ----- ---------- ---- --- -------------- ---- --------------------------- -- ------- -------- --------- --------------------
const data = { users: [ {id: 1, name: 'Alice'}, {id: 2, name: 'Bob'} ] };
// 获取第一个用户的名称 const name = data.users[0].name;
// 修改第一个用户的名称为 'Carol' data.users[0].name = 'Carol';
-- -------------------- ---- ------- --------------------- ------ -------------------------- --- ----- --------------------------------- ------- -------- --------- ------------------------
const str = 'Hello World';
// 获取第一个字符 const firstChar = str[0];
// 获取倒数第二个字符 const secondLastChar = str[str.length - 2];
// 截取字符串 const subString = str.slice(0, 5);
-- -------------------- ---- -------
---------------------- ----- -------------------- ------- ----------
-- --
------------ ---------- ---- -- ------- -------- --------- -----------------------
------------------------------------
-----
-------- --- - --------
----- ----- - -------
----- --- - ------ -------- ---- ----
----- ----- - ------
----- ----- - -----------
----- --- - ------ -------- ---- ----
----------- - ------
----- ---- - ----------------------------------
------------------------------- - -- -
-------------------
----- ---- - ---
----- ------ - -------------------------------
--- ---- - - -- - - -------------- ---- -
-- -----------------------
-------------------- - ----------------
-
------------------
---
----- ---- - -
------ -
---- -- ----- ---------
---- -- ----- ------
-
--
-- ----------
----- ---- - -------------------
-- ----------- -------
------------------ - --------
----- --- - ------ -------
-- -------
----- --------- - -------
-- ---------
----- -------------- - -------------- - ---
-- -----
----- --------- - ------------ ------
- ------------------------------------------------------------------------------ --------
------------------------------------------------------------------------------------------------------------------------