HomeLập trìnhJavaScript... trong JavaScript...

… trong JavaScript – Toán tử ba dấu chấm trong JS


Toán tử ba dấu chấm trong JavaScript là một trong những cập nhật quan trọng được cung cấp cùng với ES6.

Toán tử này (...) giúp bạn đạt được nhiều thứ mà trước đây cần nhiều dòng mã, cú pháp không quen thuộc, v.v.

Trong bài viết ngắn này, bạn sẽ tìm hiểu ý nghĩa của toán tử ba dấu chấm và tác dụng của nó. Chúng tôi sẽ xem qua một số ví dụ để hiển thị các trường hợp sử dụng có thể có và chúng tôi sẽ xem xét cách bạn đã sử dụng để thực hiện các thao tác này. Bằng cách này, bạn sẽ thấy những gì ba dấu chấm mang lại cho bạn với tư cách là nhà phát triển JavaScript.

Toán tử ba chấm có hai nghĩa khác nhau trong JavaScript. Cú pháp rất giống nhau, nhưng bạn sử dụng từng cú pháp trong các ngữ cảnh khác nhau. Hai cách sử dụng khác nhau này của ... là các toán tử trải rộng và phần còn lại.

Cách sử dụng Toán tử trải rộng trong JavaScript

Trong JavaScript, bạn sử dụng toán tử trải rộng để mở rộng một bộ lặp có thể lặp lại bên trong bộ thu được chỉ định, như tên gọi của nó.

Người nhận này có thể là bất kỳ thứ gì, chẳng hạn như một đối tượng, một mảng, v.v. Và iterable có thể là bất cứ thứ gì chúng ta có thể lặp qua, bao gồm một chuỗi, một mảng, một đối tượng, v.v.

Cú pháp toán tử trải rộng:

const newArray = ['firstItem', ...oldArray];

Bây giờ chúng ta hãy xem xét các trường hợp khác nhau mà chúng ta có thể sử dụng toán tử trải phổ.

Đọc thêm  10 thủ thuật JavaScript mà mọi nhà phát triển web nên biết

Cách sao chép một mảng bằng toán tử trải rộng

Khi chúng ta muốn sao chép các phần tử của một mảng cụ thể sang một mảng mới mà không ảnh hưởng đến mảng ban đầu, chúng ta có thể sử dụng toán tử trải rộng.

Đây là một ví dụ:

let studentNames = ["Daniel", "Jane", "Joe"];

let names = [...studentNames];

console.log(names); // ["Daniel","Jane","Joe"]

Điều này giúp chúng ta tiết kiệm thời gian mà chúng ta sẽ sử dụng để viết một câu lệnh lặp:

let studentNames = ["Daniel", "Jane", "Joe"];

let names = [];

studentNames.map((name) => {
    names.push(name);
});

console.log(names); // ["Daniel","Jane","Joe"]

Cách sao chép một đối tượng bằng toán tử trải rộng

Như chúng ta đã làm với mảng, bạn cũng có thể sử dụng một đối tượng làm bộ nhận cho toán tử trải rộng.

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

let copiedUser = { ...user };
console.log(copiedUser); // { name: "John Doe", age: 10 }

Trong khi một cách cũ để làm điều này sẽ là sử dụng Object.assign() phương pháp theo cách này:

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

let copiedUser = Object.assign({}, user);
console.log(copiedUser); // { name: "John Doe", age: 10 }

Cách nối hoặc hợp nhất các mảng với toán tử trải rộng

Khi chúng ta có hai hoặc nhiều mảng mà chúng ta muốn hợp nhất thành một mảng mới, chúng ta có thể dễ dàng thực hiện điều này với toán tử trải rộng. Nó cho phép chúng ta sao chép các phần tử từ một mảng:

let femaleNames = ["Daniel", "Peter", "Joe"];
let maleNames = ["Sandra", "Lucy", "Jane"];

let allNames = [...femaleNames, ...maleNames];

console.log(allNames); // ["Daniel","Peter","Joe","Sandra","Lucy","Jane"]

Điều quan trọng cần biết là chúng ta có thể sử dụng cùng một cách tiếp cận cho bao nhiêu mảng mà chúng ta có. Chúng ta cũng có thể thêm các phần tử riêng lẻ vào trong mảng:

let femaleNames = ["Daniel", "Peter", "Joe"];
let maleNames = ["Sandra", "Lucy", "Jane"];
let otherNames = ["Bill", "Jill"];

let moreNames = [...otherNames, ...femaleNames, ...maleNames];
let names = [...moreNames, "Ben", "Fred"];

Điều này giúp chúng tôi không phải căng thẳng khi sử dụng một cú pháp phức tạp như concat() phương pháp:

let femaleNames = ["Daniel", "Peter", "Joe"];
let maleNames = ["Sandra", "Lucy", "Jane"];
let otherNames = ["Bill", "Jill"];

let allNames = femaleNames.concat(maleNames);
let moreNames = femaleNames.concat(maleNames, otherNames);

Cách nối hoặc hợp nhất các đối tượng với toán tử trải rộng

Chúng ta cũng có thể nối các đối tượng tương tự như cách chúng ta đã thực hiện mảng với toán tử trải phổ:

let userName = { name: "John Doe" };
let userSex = { sex: "Male" };

let user = { ...userName, ...userSex };

console.log(user); // { name: "John Doe", sex: "Male" }

Ghi chú: Trong trường hợp một khóa có thuộc tính khác, thuộc tính cuối cùng sẽ ghi đè phiên bản đầu tiên:

let userName = { name: "John Doe" };
let userSex = { sex: "Female", name: "Jane Doe" };

let user = { ...userName, ...userSex }; // { name: "Jane Doe", sex: "Female" }

Cách truy xuất các phần tử duy nhất bằng phương thức Set

Một tình huống quan trọng khi bạn sử dụng toán tử trải phổ là khi bạn đang cố truy xuất các phần tử duy nhất từ ​​mảng này sang mảng khác.

Đọc thêm  module.exports – Cách xuất trong Node.js và JavaScript

Ví dụ: giả sử chúng ta có một mảng trái cây trong đó chúng ta đã lặp lại một số loại trái cây và chúng ta muốn kéo những trái cây này vào một mảng mới và tránh lặp lại. Chúng ta có thể sử dụng set() phương thức cùng với toán tử trải rộng để liệt kê chúng trong một mảng mới:

let fruits = ["Mango", "Apple", "Mango", "Banana", "Mango"];

let uniqueFruits = [...new Set(fruits)];
console.log(uniqueFruits); // ["Mango","Apple","Banana"] 

Cách truyền các phần tử mảng trong lời gọi hàm với toán tử trải rộng

Khi bạn có một hàm nhận vào một số và bạn có những số này làm phần tử của một mảng:

let scores = [12, 33, 6]

const addAll = (a, b, c) => {
    console.log(a + b + c);
};

Bạn có thể sử dụng toán tử trải rộng để chuyển các phần tử này vào lời gọi hàm dưới dạng đối số bằng cách sử dụng toán tử trải rộng:

let scores = [12, 33, 6]

const addAll = (a, b, c) => {
    console.log(a + b + c);
};

addAll(...scores); // 51

Một phương pháp cũ để làm điều này sẽ là sử dụng apply() phương pháp:

let scores = [12, 33, 6]

const addAll = (a, b, c) => {
    console.log(a + b + c);
};

addAll.apply(null, scores); // 51

Cách tách chuỗi thành ký tự bằng toán tử trải rộng

Giả sử chúng ta có một chuỗi. Chúng ta có thể sử dụng toán tử trải rộng để chia nó thành các ký tự:

let myString = "freeCodeCamp";

const splitString = [...myString];

console.log(splitString); // ["f","r","e","e","C","o","d","e","C","a","m","p"]

Điều này tương tự như split() phương pháp:

let myString = "freeCodeCamp";

const splitString = myString.split('');

console.log(splitString); // ["f","r","e","e","C","o","d","e","C","a","m","p"]

Cách sử dụng Toán tử còn lại trong JavaScript

Mặt khác, toán tử còn lại cho phép bạn kết hợp bất kỳ số lượng đối số nào vào một mảng và sau đó làm bất cứ điều gì bạn muốn với chúng. Nó sử dụng một mảng để biểu diễn vô số đối số.

Đọc thêm  Cách sử dụng một phần ứng dụng để cải thiện mã JavaScript của bạn

Cú pháp của toán tử còn lại

const func = (first, ...rest) => {};

Một ví dụ hoàn hảo để minh họa điều này là nếu chúng ta có một danh sách các số và chúng ta muốn sử dụng số đầu tiên làm số nhân. Sau đó, chúng tôi muốn đặt giá trị nhân của các số còn lại trong một mảng:

const multiplyArgs = (multiplier, ...otherArgs) => {
    return otherArgs.map((number) => {
    return number * multiplier;
    });
};

let multipiedArray = multiplyArgs(6, 5, 7, 9);

console.log(multipiedArray); // [30,42,54]

Đây là một đại diện tốt của toán tử còn lại và giá trị của nó trông như thế nào:

const multiplyArgs = (multiplier, ...otherArgs) => {
    console.log(multiplier); // 6
    console.log(otherArgs); // [5,7,9]
};

multiplyArgs(6, 5, 7, 9);

Ghi chú: Tham số Rest phải là tham số chính thức cuối cùng.

const multiplyArgs = (multiplier, ...otherArgs, lastNumber) => {
    console.log(lastNumber); // Uncaught SyntaxError: Rest parameter must be last formal parameter
};

multiplyArgs(6, 5, 7, 9);

Sự khác biệt giữa các toán tử trải rộng và phần còn lại trong JavaScript

Tại thời điểm này, bạn có thể bối rối vì cả hai phương pháp đều có vẻ khá giống nhau. Nhưng nhóm JS đã làm rất xuất sắc việc đặt tên, vì nó định nghĩa mỗi cách sử dụng của ... làm.

Chúng tôi sử dụng toán tử trải rộng để trải rộng các giá trị mảng hoặc các lần lặp có thể thành một mảng hoặc đối tượng.

Trong khi chúng ta sử dụng toán tử Rest để tập hợp các phần tử còn lại được truyền vào một hàm dưới dạng một mảng.

const myFunction = (name1, ...rest) => { // used rest operator here
    console.log(name1);
    console.log(rest);
};

let names = ["John", "Jane", "John", "Joe", "Joel"];
myFunction(...names); // used spread operator here

kết thúc

Trong bài viết này, bạn đã tìm hiểu ý nghĩa của toán tử ba chấm trong JavaScript. Bạn cũng đã thấy các trường hợp khác nhau khi bạn có thể sử dụng toán tử ba dấu chấm cùng với hai ý nghĩa/trường hợp sử dụng khác nhau của nó.

Hãy mã hóa vui vẻ!



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status