Asked Nov 26th, 2021 2:26 p.m. 87 0 1
  • 87 0 1
0

destructuring làm tham số

Share
  • 87 0 1

Mọi người cho mình hỏi truyền Item có thêm ngoặc nhọn để làm gì ạ? bỏ đi thì sẽ ntn ạ?

image.png

1 ANSWERS


Answered Nov 26th, 2021 3:21 p.m.
Accepted
+2

Mình thấy bạn đặt câu hỏi là destructuring tức là đã biết tới cả tên syntax này rồi mà lại chưa hiểu về nó quả thật phải bái phục, bái phục. Mấy bạn dev có khi viết code theo syntax này suốt mà còn không nhớ nổi tên gọi là gì luôn =))

Syntax này hơi khó giải thích, bạn đọc thử document này nhé, nó có ví dụ cụ thể và mình thấy khá dễ hiểu. Mình cũng đính kèm một bài viết bằng Tiếng Việt trên Viblo, bạn tham khảo nha. Nếu đọc doc xong mà vẫn chưa hiểu thì mình sẽ giải đáp thêm cho bạn.

Share
Avatar Dương Trần Ánh @vibloanhduong
Nov 27th, 2021 1:17 p.m.

vì mình xem youtube ngta cứ nói thêm destructuring vào chỗ này mà ngta dạy cơ bản ngta nói thêm nhưng ko giải thích j nên mình ko hỉu lắm

0
| Reply
Share
Avatar Dương Trần Ánh @vibloanhduong
Nov 27th, 2021 1:24 p.m.

cái trang tham khảo của mozilla hình như ko có ví dụ về destructuring truyền vào hàm

0
| Reply
Share
Avatar Dương Trần Ánh @vibloanhduong
Nov 27th, 2021 1:24 p.m.

bạn giải thích thêm cho mình đi

0
| Reply
Share
Nov 29th, 2021 8:04 a.m.

@vibloanhduong Destructing là syntax ngắn gọn dùng khi bạn muốn tách một/nhiều phần tử trong mảng hoặc một/nhiều property trong object ra thành một biến mới.

Với Array

const response = [1, 2, 3, 4, 5]

// EX1:
const [firstItem, secondItem, ...other] = response
console.log(firstItem) // 1
console.log(secondItem) // 2
console.log(other) // [3, 4, 5]

// EX2:
const [...other, lastItem] = response
console.log(lastItem) // 5
console.log(other) // [1, 2, 3, 4]

Với Object

const response = {
  statusCode: 200,
  data: [1, 2, 3, 4, 5],
  metaData: {
    page: 1,
  }
}

// EX1:
const { statusCode, data, ...other } = response

console.log(statusCode) // 200
console.log(data) // [1, 2, 3, 4, 5]
console.log(other) // { metaData: { page: 1 } }

Trong đoạn code bạn gửi thì đang dùng cặp dấu '{}' nên nó là syntax destructuring với object. Cụ thể:

  • Khái báo prop renderItem - cái này đang truyền vào một function. Tạm gọi là function renderItem cho dễ trình bày.
  • Function renderItem nhận argument đầu tiên là một object, trong object đó có một property là item. // Chỗ này chính là áp dụng destructuring để tách property item trong argument đầu tiên của function renderItem ra thành biến cùng tên item. Nó chính là rút gọn cho :
renderItem={(props) => {
  const item = props.item
  return this.renderItem(item)
}}
0
| Reply
Share
Avatar Dương Trần Ánh @vibloanhduong
Nov 29th, 2021 9:28 a.m.

@huukimit cảm ơn bạn nhiều😍

+1
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.