Hướng dẫn what is rest parameter in javascript with example? - Tham số phần còn lại trong javascript với ví dụ là gì?

Cú pháp tham số REST cho phép một hàm chấp nhận số lượng đối số không xác định như một mảng, cung cấp một cách để biểu diễn các hàm variadic trong JavaScript.rest parameter syntax allows a function to accept an indefinite number of arguments as an array, providing a way to represent variadic functions in JavaScript.

Thử nó

Cú pháp

function f(a, b, ...theArgs) {
  // …
}

Sự mô tả

Tham số cuối cùng của một hàm có thể được đặt trước với

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]
4 (ba ký tự dừng hoàn toàn U+002E), sẽ khiến tất cả các tham số còn lại (do người dùng cung cấp) được đặt trong một mảng JavaScript tiêu chuẩn. Chỉ tham số cuối cùng trong một định nghĩa hàm có thể là một tham số REST.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]

Tham khảo nhanh

Một định nghĩa hàm chỉ có thể có một

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]
4RestParam.

foo(...one, ...wrong, ...wrong)

Tham số REST phải là tham số cuối cùng trong định nghĩa hàm.

foo(...wrong, arg2, arg3)

foo(arg1, arg2, ...correct)

Sự khác biệt giữa các tham số REST và đối tượng đối số

Có ba khác biệt chính giữa các tham số REST và đối tượng

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]
6:

  • Đối tượng
    function myFun(a, b, ...manyMoreArgs) {
      console.log("a", a);
      console.log("b", b);
      console.log("manyMoreArgs", manyMoreArgs);
    }
    
    myFun("one", "two", "three", "four", "five", "six");
    
    // Console Output:
    // a, one
    // b, two
    // manyMoreArgs, ["three", "four", "five", "six"]
    
    6 không phải là một mảng thực, trong khi các tham số REST là các trường hợp
    function myFun(a, b, ...manyMoreArgs) {
      console.log("a", a);
      console.log("b", b);
      console.log("manyMoreArgs", manyMoreArgs);
    }
    
    myFun("one", "two", "three", "four", "five", "six");
    
    // Console Output:
    // a, one
    // b, two
    // manyMoreArgs, ["three", "four", "five", "six"]
    
    8, có nghĩa là các phương thức như
    function myFun(a, b, ...manyMoreArgs) {
      console.log("a", a);
      console.log("b", b);
      console.log("manyMoreArgs", manyMoreArgs);
    }
    
    myFun("one", "two", "three", "four", "five", "six");
    
    // Console Output:
    // a, one
    // b, two
    // manyMoreArgs, ["three", "four", "five", "six"]
    
    9,
    foo(...one, ...wrong, ...wrong)
    
    0,
    foo(...one, ...wrong, ...wrong)
    
    1 hoặc
    foo(...one, ...wrong, ...wrong)
    
    2 có thể được áp dụng trực tiếp trên nó.not a real array, while rest parameters are
    function myFun(a, b, ...manyMoreArgs) {
      console.log("a", a);
      console.log("b", b);
      console.log("manyMoreArgs", manyMoreArgs);
    }
    
    myFun("one", "two", "three", "four", "five", "six");
    
    // Console Output:
    // a, one
    // b, two
    // manyMoreArgs, ["three", "four", "five", "six"]
    
    8 instances, meaning methods like
    function myFun(a, b, ...manyMoreArgs) {
      console.log("a", a);
      console.log("b", b);
      console.log("manyMoreArgs", manyMoreArgs);
    }
    
    myFun("one", "two", "three", "four", "five", "six");
    
    // Console Output:
    // a, one
    // b, two
    // manyMoreArgs, ["three", "four", "five", "six"]
    
    9,
    foo(...one, ...wrong, ...wrong)
    
    0,
    foo(...one, ...wrong, ...wrong)
    
    1 or
    foo(...one, ...wrong, ...wrong)
    
    2 can be applied on it directly.
  • Đối tượng
    function myFun(a, b, ...manyMoreArgs) {
      console.log("a", a);
      console.log("b", b);
      console.log("manyMoreArgs", manyMoreArgs);
    }
    
    myFun("one", "two", "three", "four", "five", "six");
    
    // Console Output:
    // a, one
    // b, two
    // manyMoreArgs, ["three", "four", "five", "six"]
    
    6 có chức năng bổ sung cụ thể cho chính nó (như thuộc tính
    foo(...one, ...wrong, ...wrong)
    
    4).
  • Các gói
    foo(...one, ...wrong, ...wrong)
    
    5 tất cả các tham số bổ sung vào một mảng, do đó nó không chứa bất kỳ đối số được đặt tên nào được xác định trước
    foo(...one, ...wrong, ...wrong)
    
    5. Trong khi đối tượng
    function myFun(a, b, ...manyMoreArgs) {
      console.log("a", a);
      console.log("b", b);
      console.log("manyMoreArgs", manyMoreArgs);
    }
    
    myFun("one", "two", "three", "four", "five", "six");
    
    // Console Output:
    // a, one
    // b, two
    // manyMoreArgs, ["three", "four", "five", "six"]
    
    6 chứa tất cả các tham số-bao gồm các tham số trong mảng
    foo(...one, ...wrong, ...wrong)
    
    5-được gói thành một đối tượng giống như một mảng.before the
    foo(...one, ...wrong, ...wrong)
    
    5. Whereas the
    function myFun(a, b, ...manyMoreArgs) {
      console.log("a", a);
      console.log("b", b);
      console.log("manyMoreArgs", manyMoreArgs);
    }
    
    myFun("one", "two", "three", "four", "five", "six");
    
    // Console Output:
    // a, one
    // b, two
    // manyMoreArgs, ["three", "four", "five", "six"]
    
    6 object contains all of the parameters — including the parameters in the
    foo(...one, ...wrong, ...wrong)
    
    5 array — bundled into one array-like object.

Từ đối số đến một mảng

Các tham số REST đã được giới thiệu để giảm mã nồi hơi thường được sử dụng để chuyển đổi một tập hợp các đối số thành một mảng.

Trước khi các tham số REST,

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]
6 cần được chuyển đổi thành một mảng bình thường trước khi gọi các phương thức mảng trên chúng:

function fn(a, b) {
  const normalArray = Array.prototype.slice.call(arguments);
  // — or —
  const normalArray2 = [].slice.call(arguments);
  // — or —
  const normalArrayFrom = Array.from(arguments);

  const first = normalArray.shift(); // OK, gives the first argument
  const firstBad = arguments.shift(); // ERROR (arguments is not a normal array)
}

Bây giờ, bạn có thể dễ dàng truy cập vào một mảng bình thường bằng tham số REST:

function fn(...args) {
  const normalArray = args;
  const first = normalArray.shift(); // OK, gives the first argument
}

Ví dụ

Sử dụng các tham số REST

Trong ví dụ này, đối số đầu tiên được ánh xạ tới

foo(...wrong, arg2, arg3)
0 và thứ hai đến
foo(...wrong, arg2, arg3)
1, vì vậy các đối số được đặt tên này được sử dụng là bình thường.

Tuy nhiên, đối số thứ ba,

foo(...wrong, arg2, arg3)
2, sẽ là một mảng có chứa thứ ba, thứ tư, thứ năm, thứ sáu, thứ hai, thứ n - như nhiều đối số mà người dùng bao gồm.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// a, "one"
// b, "two"
// manyMoreArgs, ["three", "four", "five", "six"] <-- notice it's an array

Dưới đây, mặc dù chỉ có một giá trị, đối số cuối cùng vẫn được đưa vào một mảng.

// using the same function definition from example above

myFun("one", "two", "three");

// a, "one"
// b, "two"
// manyMoreArgs, ["three"] <-- notice it's an array, even though there's just one value

Dưới đây, đối số thứ ba không được cung cấp, nhưng

foo(...wrong, arg2, arg3)
2 vẫn là một mảng (mặc dù là một cái trống).

// using the same function definition from example above

myFun("one", "two");

// a, "one"
// b, "two"
// manyMoreArgs, [] <-- yip, still an array

Độ dài đối số

foo(...wrong, arg2, arg3)
4 là một mảng, một số phần tử của nó được đưa ra bởi thuộc tính
foo(...wrong, arg2, arg3)
5.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]
0

Sử dụng các tham số REST kết hợp với các tham số thông thường

Trong ví dụ tiếp theo, một tham số REST được sử dụng để thu thập tất cả các tham số sau tham số đầu tiên thành một mảng. Mỗi một trong các giá trị tham số được thu thập vào mảng sau đó được nhân với tham số đầu tiên và mảng được trả về:

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]
1

Các tham số REST là mảng thực; Đối tượng đối số không

Các phương thức

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]
8 có thể được sử dụng trên các tham số REST, nhưng không phải trên đối tượng
function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]
6:

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]
2

Để sử dụng các phương thức

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]
8 trên đối tượng
function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]
6, nó phải được chuyển đổi thành một mảng thực trước.

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]
3

Thông số kỹ thuật

Sự chỉ rõ
Đặc tả ngôn ngữ Ecmascript # Sec-Function-Deellitions
# sec-function-definitions

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Tham số REST trong JavaScript là gì?

Cú pháp tham số REST cho phép một hàm chấp nhận số lượng đối số không xác định như một mảng, cung cấp một cách để biểu diễn các hàm variadic trong JavaScript.allows a function to accept an indefinite number of arguments as an array, providing a way to represent variadic functions in JavaScript.

Cái nào được sử dụng cho các tham số còn lại?

Tham số REST được giới thiệu trong ECMAScript 2015 hoặc ES6, giúp cải thiện khả năng xử lý các tham số. Tham số REST cho phép chúng tôi biểu diễn một số lượng đối số không xác định dưới dạng một mảng. Bằng cách sử dụng tham số REST, một hàm có thể được gọi với bất kỳ số lượng đối số nào.ECMAScript 2015 or ES6, which improves the ability to handle parameters. The rest parameter allows us to represent an indefinite number of arguments as an array. By using the rest parameter, a function can be called with any number of arguments.

Làm thế nào để bạn viết các tham số nghỉ ngơi?

Để khai báo tham số REST, bạn có tiền tố tên tham số với ba dấu chấm và sử dụng loại mảng làm chú thích loại: hàm fn (.....
Một hàm chỉ có một tham số nghỉ ..
Tham số còn lại xuất hiện cuối cùng trong danh sách tham số ..
Loại tham số REST là loại mảng ..

Tham số REST và toán tử lây lan trong JavaScript là gì?

Toán tử REST: Tham số REST là trò chuyện với toán tử lây lan.Trong khi toán tử lây lan mở rộng các yếu tố của một toán tử có thể lặp lại, thì phần tử sẽ nén chúng.Nó thu thập một số yếu tố.Trong các chức năng khi chúng ta yêu cầu vượt qua các đối số nhưng không chắc chúng ta phải vượt qua bao nhiêu, tham số còn lại giúp nó dễ dàng hơn.The rest parameter is converse to the spread operator. while spread operator expands elements of an iterable, rest operator compresses them. It collects several elements. In functions when we require to pass arguments but were not sure how many we have to pass, the rest parameter makes it easier.