Hướng dẫn index trong javascript - index in javascript

Array là một cấu trúc dữ liệu được sử dụng rộng rãi trong rất nhiều ngôn ngữ trong đó có Javascript. Chưa hết, việc sử dụng những method của Array cũng giúp cho các lập trình viên js tiếp cận dến kết qủa cuối cùng nhanh nhất có thể.

Và chúng ta sẽ tiếp cận thêm một method mới đó là array.at(index). Trước khi tìm hiểu về array.at(index) thì chúng ta xem thực tế vì sao lại có đề xuất này. Lợi ích chính của phương pháp mới là truy cập các phần tử từ cuối mảng bằng cách sử dụng chỉ mục âm, không thể sử dụng cú pháp dấu ngoặc vuông thông thường array[index]. Ngoài ra thì các bạn nên tìm hiểu những method trong Array JavaScript cần biết mà bài trước đã nói.

Tìm phần tử cuối cùng của array

Cách thông thường để truy cập một phần tử mảng theo chỉ mục là sử dụng dấu ngoặc vuông array[index].

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits[1];
item; // => 'apple'

Biểu thức array[index] đánh giá mục mảng nằm tại index và được đặt tên là trình truy cập thuộc tính . Như bạn có thể đã biết, việc lập chỉ mục các mảng trong JavaScript bắt đầu từ 0. Nó có một cú pháp đơn giản và dễ đọc. Nhưng đôi khi bạn muốn truy cập các phần tử từ cuối, thay vì từ đầu.

Ví dụ: hãy truy cập phần tử cuối cùng của mảng thì bình thường chúng ta sẽ sủ dụng cú pháp sau:

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

Nhưng đôi khi có nhiều người sử dụng code này không đúng vì nó sinh ra âm thì làm thế nào. May mắn thay, một đề xuất mới (ở giai đoạn 3 kể từ tháng 1 năm 2021) đưa phương thức Array.at() để giải quyết nhiều hạn chế của trình truy cập dấu ngoặc vuông này.

array.at()

Nói cách đơn giản, array.at(index) truy cập phần tử tại đối số index. Nếu index là số nguyên dương >= 0, phương thức trả về mục tại chỉ mục đó:

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(1);
item; // => 'apple'

Nếu index lớn hơn hoặc bằng độ dài mảng, thì giống như trình truy cập thông thường, phương thức trả về undefined:

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(999);
item; // => undefined

Điều kỳ diệu thực sự xảy ra khi bạn sử dụng một chỉ mục âm với phương thức array.at(). Như sau: Ví dụ: hãy sử dụng chỉ mục -1 để truy cập phần tử cuối cùng của mảng:

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits.at(-1);
lastItem; // => 'grape'

Dưới đây là một ví dụ chi tiết hơn về cách phương thức array.at() truy cập các phần tử:

const vegetables = ['potatoe', 'tomatoe', 'onion'];

vegetables.at(0); // => 'potatoe'
vegetables.at(1); // => 'tomatoe'
vegetables.at(2); // => 'onion'
vegetables.at(3); // => undefined

vegetables.at(-1); // => 'onion'
vegetables.at(-2); // => 'tomatoe'
vegetables.at(-3); // => 'potatoe'
vegetables.at(-4); // => undefined

Tóm tắt

Cú pháp dấu ngoặc vuông trong JavaScript là cách thông thường và tốt để truy cập các mục theo chỉ mục. Chỉ cần đặt biểu thức chỉ mục trong dấu ngoặc vuông array[index] và nhận mục mảng tại chỉ mục đó.

Tuy nhiên, việc truy cập các mục từ cuối bằng trình truy cập thông thường không thuận tiện vì nó không chấp nhận các chỉ mục âm. Vì vậy, ví dụ, để truy cập phần tử cuối cùng của mảng, bạn phải sử dụng biểu thức giải pháp thay thế:

const lastItem = array[array.length - 1];

May mắn thay, phương thức mảng mới array.at(index) cho phép bạn truy cập các phần tử của mảng bằng chỉ mục như một trình truy cập thông thường. Hơn nữa, array.at(index) chấp nhận các chỉ mục âm, trong trường hợp đó phương thức lấy các phần tử từ cuối:

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

5

Chỉ cần sử dụng polyfill array.prototype.at vào ứng dụng của bạn và bắt đầu sử dụng array.at() ngay hôm nay!

Trong Javascript có nhiều cách để tìm kiếm phần tử trong Array. Cách đơn giản nhất là dùng vòng lặp. Nhưng với ES6+ có nhiều methods để lặp trong Arrray và tìm kiếm trong các phần từ dễ dàng hơn.

Dưới đây sẽ là những methods Array có thể sử dụng:

• Array.includes
• Array.find
• Array.indexOf
• Array.filter

includes

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];

alligator.includes("thick scales"); // returns true

Method

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

6 trả về giá trị

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

7 là cách hoàn hảo dùng để kiểm tra phần tử có tồn tại trong array hay không, gía trị trả về của hàm này sẽ là

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

8 hoặc

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

9. Cú pháp đơn giản như sau

arr.includes(valueToFind, [fromIndex]);

Bây giờ như bạn thấy trong ví dụ trên, ta chỉ có một tham số - valueToFind ở dạng

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(1);
item; // => 'apple'

0. Tùy chọn từ

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(1);
item; // => 'apple'

1 là một số, cho biết chỉ số nào bạn muốn bắt đầu tìm kiếm (mặc định là 0, nên sẽ tìm kiếm toàn bộ phần tử trong mảng). Vì vậy, trong ví dụ trên,item

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(1);
item; // => 'apple'

2 có chỉ số 0, nên sau đây sẽ là

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

9:

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(1);
item; // => 'apple'

4 kể từ khi nó bắt đầu tìm kiếm từ chỉ số 1 trở đi.

Có một vài điều quan trọng cần chú ý. Methdod

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

6 này sử dụng so sánh rất nghiêm ngặt. Điều đó có nghĩa là, từ ví dụ trên, sau đây sẽ trả về

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

9:

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(1);
item; // => 'apple'

7 Điều đó bởi vì mặc dù 80 == '80' là

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

8, 80 === '80' là

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

9

find

Method .find () khác với .include () như thế nào? Nếu trong ví dụ trên, ta chỉ thay đổi văn bản, trong đó có văn bản, trong đó có thể tìm thấy lỗi, ta sẽ gặp lỗi này:

Uncaught TypeError: thick scales is not a function

Bởi vì phương thức

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(999);
item; // => undefined

0 yêu cầu một

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(999);
item; // => undefined

1 được truyền vào. Vì phương thức

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(999);
item; // => undefined

0 không phải là sử dụng toán tử so sánh đơn giản như

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(999);
item; // => undefined

3. Thay vào đó, nó sẽ chuyển từng phần tử vào hàm của bạn và kiểm tra rồi trả về giá trị

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

8 hay

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(999);
item; // => undefined

5. Vì vậy, mặc dù điều này hoạt động:

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(999);
item; // => undefined

6, bạn có thể muốn đưa toán tử so sánh của riêng mình vào hàm để nó trả về bất cứ điều gì có liên quan.

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];

alligator.find(el => el.length < 12); // returns '4 foot tail'

Hàm đơn giản này trong method

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(999);
item; // => undefined

0 chúng ta xem xét từng phần tử của mảng, với

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(999);
item; // => undefined

8 của

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(999);
item; // => undefined

9, ta đã gán nó và dừng lại khi nó tìm thấy phần tử đầu tiên là đúng. Trong trường hợp

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

8 có thuộc tính độ dài nhỏ hơn 12 (

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits.at(-1);
lastItem; // => 'grape'

1 không có thuộc tính độ dài). Tất nhiên bạn có thể làm cho chức năng này phức tạp khi cần thiết, làm cho điều kiện thực sự của bạn đáp ứng nhu cầu của bạn.

Trong ví dụ trên, ta chỉ sử dụng cuộc gọi lại với một tham số. Bạn cũng có thể thêm các tham số để tham chiếu

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits.at(-1);
lastItem; // => 'grape'

2 phần tử hiện tại. Một tham số khác có thể là

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits.at(-1);
lastItem; // => 'grape'

3, nhưng tôi thấy điều này hiếm khi được sử dụng. Dưới đây là một ví dụ sử dụng

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits.at(-1);
lastItem; // => 'grape'

2:

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

0

Có 3

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits.at(-1);
lastItem; // => 'grape'

5 khác nhau đáp ứng điều kiện đầu tiên

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits.at(-1);
lastItem; // => 'grape'

6. Nếu đây là điều kiện duy nhất, nó sẽ trả lại cái đầu tiên

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits.at(-1);
lastItem; // => 'grape'

7. Nhưng sự khác biệt là, chỉ có một người có chỉ số là 2 và đó là

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits.at(-1);
lastItem; // => 'grape'

8

Nói về

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits.at(-1);
lastItem; // => 'grape'

9, một phương thức mảng tương tự là .findIndex (). Phương thức này cũng nhận được một hàm, nhưng như bạn có thể đoán được, nó trả về chỉ số phần tử phù hợp thay vì chính phần tử đó.

indexOf

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

1

Giống như phương thức

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

6,

const vegetables = ['potatoe', 'tomatoe', 'onion'];

vegetables.at(0); // => 'potatoe'
vegetables.at(1); // => 'tomatoe'
vegetables.at(2); // => 'onion'
vegetables.at(3); // => undefined

vegetables.at(-1); // => 'onion'
vegetables.at(-2); // => 'tomatoe'
vegetables.at(-3); // => 'potatoe'
vegetables.at(-4); // => undefined

1 sử dụng so sánh nghiêm ngặt, không phải là hàm như chúng ta đã thấy với phương thức

const vegetables = ['potatoe', 'tomatoe', 'onion'];

vegetables.at(0); // => 'potatoe'
vegetables.at(1); // => 'tomatoe'
vegetables.at(2); // => 'onion'
vegetables.at(3); // => undefined

vegetables.at(-1); // => 'onion'
vegetables.at(-2); // => 'tomatoe'
vegetables.at(-3); // => 'potatoe'
vegetables.at(-4); // => undefined

2. Nhưng không giống với

const vegetables = ['potatoe', 'tomatoe', 'onion'];

vegetables.at(0); // => 'potatoe'
vegetables.at(1); // => 'tomatoe'
vegetables.at(2); // => 'onion'
vegetables.at(3); // => undefined

vegetables.at(-1); // => 'onion'
vegetables.at(-2); // => 'tomatoe'
vegetables.at(-3); // => 'potatoe'
vegetables.at(-4); // => undefined

3, nó trả về

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits.at(-1);
lastItem; // => 'grape'

2 của phần tử, thay vì

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

7. Bạn cũng có thể chỉ ra

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits.at(-1);
lastItem; // => 'grape'

2 nào trong mảng để bắt đầu tìm kiếm.

Mình thấy

const vegetables = ['potatoe', 'tomatoe', 'onion'];

vegetables.at(0); // => 'potatoe'
vegetables.at(1); // => 'tomatoe'
vegetables.at(2); // => 'onion'
vegetables.at(3); // => undefined

vegetables.at(-1); // => 'onion'
vegetables.at(-2); // => 'tomatoe'
vegetables.at(-3); // => 'potatoe'
vegetables.at(-4); // => undefined

7 rất hữu ích. Nó nhanh chóng và dễ dàng, có thể cho bạn biết phần tử nằm trong mảng và có thể cho bạn biết phần tử có tồn tại hay không. Làm thế nào để nó cho bạn biết nếu các yếu tố tồn tại? Về cơ bản, chúng ta có thể biết phần tử tồn tại nếu nó trả về một số dương và nếu nó trả về

const vegetables = ['potatoe', 'tomatoe', 'onion'];

vegetables.at(0); // => 'potatoe'
vegetables.at(1); // => 'tomatoe'
vegetables.at(2); // => 'onion'
vegetables.at(3); // => undefined

vegetables.at(-1); // => 'onion'
vegetables.at(-2); // => 'tomatoe'
vegetables.at(-3); // => 'potatoe'
vegetables.at(-4); // => undefined

8thì chúng ta biết phần tử đó không tồn tại.

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

2

Và như bạn có thể thấy, mặc dù chúng ta có thể lấy các phương thức

const vegetables = ['potatoe', 'tomatoe', 'onion'];

vegetables.at(0); // => 'potatoe'
vegetables.at(1); // => 'tomatoe'
vegetables.at(2); // => 'onion'
vegetables.at(3); // => undefined

vegetables.at(-1); // => 'onion'
vegetables.at(-2); // => 'tomatoe'
vegetables.at(-3); // => 'potatoe'
vegetables.at(-4); // => undefined

9 hoặc

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];

alligator.includes("thick scales"); // returns true

0 để cung cấp cho chúng ta cùng một thông tin, nhưng điều này ít hơn rất nhiều để viết. Chúng tôi không phải viết ra một hàm để so sánh, vì nó đã nằm trong phương thức

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];

alligator.includes("thick scales"); // returns true

1.

Bây giờ, giống như những cái khác,

const vegetables = ['potatoe', 'tomatoe', 'onion'];

vegetables.at(0); // => 'potatoe'
vegetables.at(1); // => 'tomatoe'
vegetables.at(2); // => 'onion'
vegetables.at(3); // => undefined

vegetables.at(-1); // => 'onion'
vegetables.at(-2); // => 'tomatoe'
vegetables.at(-3); // => 'potatoe'
vegetables.at(-4); // => undefined

1 cũng trả về

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits.at(-1);
lastItem; // => 'grape'

2 của phần tử khớp đầu tiên mà nó tìm thấy.

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];

alligator.includes("thick scales"); // returns true

4 cung cấp cho chúng ta một phương thức thay thế

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];

alligator.includes("thick scales"); // returns true

5. Như bạn có thể đoán được là điều này thực hiện tương tự như

const vegetables = ['potatoe', 'tomatoe', 'onion'];

vegetables.at(0); // => 'potatoe'
vegetables.at(1); // => 'tomatoe'
vegetables.at(2); // => 'onion'
vegetables.at(3); // => undefined

vegetables.at(-1); // => 'onion'
vegetables.at(-2); // => 'tomatoe'
vegetables.at(-3); // => 'potatoe'
vegetables.at(-4); // => undefined

7 nhưng bắt đầu từ

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits.at(-1);
lastItem; // => 'grape'

2 cuối cùng của mảng và hoạt động ngược. Bạn cũng có thể chỉ định một tham số thứ hai, nhưng hãy nhớ các chỉ số không thay đổi, chỉ vì bạn đang sử dụng một phương thức khác.

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

3

Bonus: filter

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

4

Phương thức

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];

alligator.includes("thick scales"); // returns true

8 giống như phương thức

const vegetables = ['potatoe', 'tomatoe', 'onion'];

vegetables.at(0); // => 'potatoe'
vegetables.at(1); // => 'tomatoe'
vegetables.at(2); // => 'onion'
vegetables.at(3); // => undefined

vegetables.at(-1); // => 'onion'
vegetables.at(-2); // => 'tomatoe'
vegetables.at(-3); // => 'potatoe'
vegetables.at(-4); // => undefined

9, trong đó nó yêu cầu một

const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(999);
item; // => undefined

1 được truyền và một điều kiện cho những gì sẽ được trả về. Sự khác biệt chính là

const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"];

alligator.includes("thick scales"); // returns true

8 luôn trả về một

const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits.at(-1);
lastItem; // => 'grape'

3, ngay cả khi chỉ có một phần tử phù hợp. Nhưng nó sẽ trả về tất cả các phần tử khớp, trong khi

const vegetables = ['potatoe', 'tomatoe', 'onion'];

vegetables.at(0); // => 'potatoe'
vegetables.at(1); // => 'tomatoe'
vegetables.at(2); // => 'onion'
vegetables.at(3); // => undefined

vegetables.at(-1); // => 'onion'
vegetables.at(-2); // => 'tomatoe'
vegetables.at(-3); // => 'potatoe'
vegetables.at(-4); // => undefined

9 chỉ trả về kết quả đầu tiên.