Video học lập trình mỗi ngày

Bạn có viết có nhiều tính năng để làm việc với Arrays và Objects kể từ khi ES6 ra đời. Có thể kể đến một vài tính năng như Destructuring, Rest Parameters, và Spread Syntax. Những tính năng này giúp bạn làm việc với các cấu trúc dữ liệu nhanh và gọn hơn. Bạn có viết rằng có nhiều ngôn ngữ lập trình khác vẫn chưa có những tính năng Destructuring, Rest Parameters, và Spread Syntax. 

Chính vì vậy những tính năng này là một lợi thế cho những bạn nào đang theo lập trình javascript đấy. Và trong bài viết này chúng tôi sẽ giới thiệu cho các bạn những tính năng này là gì? Và khi nào sử dụng chúng? Đầu tiên chúng tôi muốn bạn tìm hiểu kỹ về những method của Arrays  và medthod của Objects. Ở đó có những method nào, và đã đầy đủ hay chưa. Từ đó bạn mới có thể hiểu được bản chất của những tính năng vừa thiệu dưới đây.

Destructuring javascript là gì?

Destructuring javascript là gì? Câu hỏi này đã được chúng tôi nói rất rất kỹ trong bài viết trước đây "Destructuring là gì? Vì sao phải dùng đến nó" . Bài viết đó nhận được lượt like lớn nhất từ 3 tháng trở lại. Điều đó chứng tỏ rằng Destructuring rất hữu dụng trong lập trình. Nhưng chúng ta cũng nói qua đây để các bạn nắm một chút. 

Destructuring là một cú pháp cho phép bạn gán các thuộc tính của một Object hoặc một Array. Điều này có thể làm giảm đáng kể các dòng mã cần thiết để thao tác dữ liệu trong các cấu trúc này. Có hai loại Destructuring: Destructuring Objects và Destructuring Arrays 

# Destructuring Objects 

Destructuring Objects cho phép bạn tạo ra một hay nhiều  new variables  sử dụng những property của một Objects. Xem ví dụ dưới đây:

const note = {
  	id: 1,
  	website: 'anonystick.com',
  	date: '17/07/2014',
}

Theo cách truyền thống thì chúng ta sẽ lấy ra những giá trị như cú pháp sau:

const id = note.id
const website = note.website
const date = note.date

console.log(id)
console.log(website)
console.log(date)

Nhưng với việc sử dụng object destructuring chỉ với một dòng code ( Thủ thuật viết một dòng code ), chúng ta có thể get được những giá trị ấy miễn là trùng tên của thuộc tính trong object là được:

// Destructure properties into variables
const { id, website, date } = note

console.log(id)
console.log(website)
console.log(date)

# Destructuring Arrays 

Array destructuring cho phép bạn tạo ra một new variables bằng cách sử dụng giá trị mỗi index của Array. Xem ví dụ dưới đây cho nó dễ hiểu, chứ nói vậy chả hiểu đâu. Ta có một Array là thông tin về trang "blog javascript" được tạo ngày

const date = ['2014', '17', '07']

Như ở Object thì ta lần lượt lấy giá trị của mỗi item theo index

// Create variables from the Array items
const year = date[0]
const month = date[1]
const day = date[2]

Nhưng giờ đây với việc sử dụng Array Destructuring thì công việc sẽ trở nên dế dàng hơn nhiều

// Destructure Array values into variables
const [year, month, day] = date

console.log(year) // 2014
console.log(month) // 17
console.log(day) // 07

Còn nhiều thủ thuật khác hay hơn nữa nên bạn hay dành thời gian tầm một phút bạn sẽ có được tất cả sự hiểu biết về tính năng destructuring "Destructuring là gì? Vì sao phải dùng đến nó" 

Spread operator là gì?

Spread operator là ba dấu chấm ( ...), có thể chuyển đổi một mảng thành một chuỗi các tham số được phân tách bằng dấu phẩy. Nói cho dễ hiểu, nó giống như một cái xương và một cái xương sườn vậy, chia nhỏ một phần tử lớn thành những phần tử nhỏ riêng lẻ.

Nói về Spread tips javascript cũng đã có rất nhiều bài viết liên quan đến tính năng này. Spread syntax hay còn gọi là three dot (...) là một bổ sung hữu ích khác cho JavaScript để làm việc với các Arrays, Objects và các function calls. 

Hơn nữa Spread có thể tao ra một cấu trúc dữ liệu shallow copy để tăng tính thao tác dữ liệu. Cũng giống như destructuring thì Spread cũng làm việc nhiều với Arrays và Objects. 

# Spread with Arrays 

Ví dụ trường hợp thức tế thì ta có thể merge array sử dụng concat.

// Create an Array
const tools = ['hammer', 'screwdriver']
const otherTools = ['wrench', 'saw']

// Concatenate tools and otherTools together
const allTools = tools.concat(otherTools)

console.log(allTools);

//(4) [
"hammer",
"screwdriver",
"wrench",
"saw"
]

Nhưng giờ đây đã khác xưa rất nhiều rồi, hãy xem đây khi sử dụng Spread systax.

// Unpack the tools Array into the allTools Array
const allTools = [...tools, ...otherTools]

console.log(allTools)

Còn rất nhiều thứ rất hay đang chờ đón bạn, chút nữa sẽ cung cấp đanh cho những ai đủ kiên nhẫn đọc hết bài viết này. 

const ocean = ['🐙', '🦀'];

const aquarium = [...ocean, '🐡']; // Add a single value
const sushi = [...ocean, '🐡', '🍚']; // Add multiple values

aquarium; // ['🐙', '🦀', '🐡']
sushi; // ['🐙', '🦀', '🐡', '🍚']

// Original Array Not Affected
ocean; // ['🐙', '🦀']

# Spread with Objects 

Khi sử dụng Spread thì chúng ta có thể copy và update một object như những gì mà Object.assign() đã làm

// Create an Object and a copied Object with Object.assign()
const originalObject = { enabled: true, darkMode: false }
const secondObject = Object.assign({}, originalObject)

console.log(secondObject);//{enabled: true, darkMode: false}

Sử dụng Spread syntax thì sao? ez game.

// Create an object and a copied object with spread
const originalObject = { enabled: true, darkMode: false }
const secondObject = { ...originalObject }

console.log(secondObject);//{enabled: true, darkMode: false}

# Spread with Function Calls 

Giả sử chúng ta có một function như thế này

// Create a function to multiply three items
function multiply(a, b, c) {
  return a * b * c
}

Nếu bình thường thì sao, thì add từng paramsx zô chứ sao:

multiply(1, 2, 3) ;// 6

Nhưng khi sử dụng Spread trong function calls thì rất đơn giản

const numbers = [1, 2, 3]

multiply(...numbers);//6

Rest Parameters là gì?

Tính năng cuối cùng bạn sẽ tìm hiểu trong bài viết này đó là Rest Parameters. Cú pháp này giống như Spread Syntax (...) nhưng có tác dụng ngược lại. Ví dụ Ví dụ, trong hàm restTest, nếu chúng ta muốn args là một mảng bao gồm một số lượng đối số không xác định, chúng ta có thể có:

function restTest(...args) {
  console.log(args)
}

restTest(1, 2, 3, 4, 5, 6);// [1, 2, 3, 4, 5, 6]

Và đây là một bài viết về Rest Parameters và Spread Syntax dành cho những bạn kiên nhẫn đọc tới đây. Ở bài viết này thì mọi điều sẽ được sáng tỏ, bạn sẽ phân biệt được giữa Rest Parameters và Spread Syntax. Và khi nào sử dụng chúng.  Thực hành về Rest Parameters và Spread Syntax 

Tóm tắt

Trên đây là những kiến thức giúp bạn hiểu về những tính năng hỗ trợ thêm cho Arrays và Objecs như Destructure, Spread systax, Rest Parameters. Tóm lại :

• Destructure sử dụng để tạo ra một new variables từ array items, hoặc object properties
• Spread syntax sử dụng để unpack terables của một arrays, objects, và function calls
• Rest parameter là một cú pháp tạo ra một array từ một số lượng giá trị không xác định

Lời khuyên - Chúng tôi đã có những gọi ý trong bài viết dưới dạng link. Bạn hãy để ý, đó là những gì chúng tôi có thể giúp bạn. 

Ref: taniarascia