Javascript vượt qua mảng dưới dạng nhiều đối số

Trong chương này chúng ta sẽ học cách làm tương tự. Ngoài ra, cách truyền mảng cho các hàm như tham số

Một hàm có thể được gọi với bất kỳ số lượng đối số nào, bất kể nó được định nghĩa như thế nào

thích ở đây

function sum(a, b) {
  return a + b;
}

alert( sum(1, 2, 3, 4, 5) );

Sẽ không có lỗi vì đối số “thừa thãi”. Nhưng tất nhiên trong kết quả chỉ có hai cái đầu tiên được tính, vì vậy kết quả trong đoạn mã trên là

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // the rest go into titles array
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");
1

Phần còn lại của các tham số có thể được đưa vào định nghĩa hàm bằng cách sử dụng ba dấu chấm

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // the rest go into titles array
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");
0 theo sau là tên của mảng sẽ chứa chúng. Các dấu chấm có nghĩa đen là “tập hợp các tham số còn lại thành một mảng”

Chẳng hạn, để tập hợp tất cả các đối số vào mảng

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // the rest go into titles array
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");
3

function sumAll(...args) { // args is the name for the array
  let sum = 0;

  for (let arg of args) sum += arg;

  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6

Chúng ta có thể chọn lấy các tham số đầu tiên làm biến và chỉ thu thập phần còn lại

Ở đây, hai đối số đầu tiên đi vào các biến và phần còn lại đi vào mảng

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // the rest go into titles array
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");
4

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // the rest go into titles array
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");

Các tham số còn lại phải ở cuối

Các tham số còn lại tập hợp tất cả các đối số còn lại, vì vậy những điều sau đây không có ý nghĩa và gây ra lỗi

function f(arg1, ...rest, arg2) { // arg2 after ...rest ?!
  // error
}

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // the rest go into titles array
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");
5 phải luôn ở vị trí cuối cùng

Ngoài ra còn có một đối tượng giống như mảng đặc biệt có tên là

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // the rest go into titles array
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");
6 chứa tất cả các đối số theo chỉ mục của chúng

Ví dụ

function showName() {
  alert( arguments.length );
  alert( arguments[0] );
  alert( arguments[1] );

  // it's iterable
  // for(let arg of arguments) alert(arg);
}

// shows: 2, Julius, Caesar
showName("Julius", "Caesar");

// shows: 1, Ilya, undefined (no second argument)
showName("Ilya");

Trước đây, các tham số còn lại không tồn tại trong ngôn ngữ và sử dụng

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // the rest go into titles array
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");
6 là cách duy nhất để lấy tất cả các đối số của hàm. Và nó vẫn hoạt động, chúng ta có thể tìm thấy nó trong mã cũ

Nhưng nhược điểm là mặc dù

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // the rest go into titles array
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");
6 vừa giống mảng vừa có thể lặp, nhưng nó không phải là mảng. Nó không hỗ trợ các phương thức mảng, vì vậy chúng ta không thể gọi
function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // the rest go into titles array
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");
9 chẳng hạn

Ngoài ra, nó luôn chứa tất cả các đối số. Chúng tôi không thể chụp chúng một phần, giống như chúng tôi đã làm với các tham số còn lại

Vì vậy, khi chúng tôi cần các tính năng này, thì các tham số còn lại được ưu tiên

Hàm mũi tên không có

function f(arg1, ...rest, arg2) { // arg2 after ...rest ?!
  // error
}
0

Nếu chúng ta truy cập đối tượng

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // the rest go into titles array
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");
6 từ một hàm mũi tên, nó sẽ lấy chúng từ hàm “bình thường” bên ngoài

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

function f() {
  let showArg = () => alert(arguments[0]);
  showArg();
}

f(1); // 1

Như chúng ta đã nhớ, hàm mũi tên không có

function f(arg1, ...rest, arg2) { // arg2 after ...rest ?!
  // error
}
2 của riêng chúng. Bây giờ chúng tôi biết họ cũng không có đối tượng đặc biệt
function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // the rest go into titles array
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");
6

Chúng ta vừa xem cách lấy một mảng từ danh sách các tham số

Nhưng đôi khi chúng ta cần làm ngược lại

Chẳng hạn, có một hàm tích hợp Math. max trả về số lớn nhất từ ​​​​danh sách

alert( Math.max(3, 5, 1) ); // 5

Bây giờ giả sử chúng ta có một mảng

function f(arg1, ...rest, arg2) { // arg2 after ...rest ?!
  // error
}
4. Làm thế nào để chúng ta gọi
function f(arg1, ...rest, arg2) { // arg2 after ...rest ?!
  // error
}
5 với nó?

Việc chuyển nó "nguyên trạng" sẽ không hiệu quả, bởi vì

function f(arg1, ...rest, arg2) { // arg2 after ...rest ?!
  // error
}
5 mong đợi một danh sách các đối số dạng số, không phải một mảng đơn lẻ

let arr = [3, 5, 1];

alert( Math.max(arr) ); // NaN

Và chắc chắn chúng tôi không thể liệt kê thủ công các mục trong mã

function f(arg1, ...rest, arg2) { // arg2 after ...rest ?!
  // error
}
7, bởi vì chúng tôi có thể không chắc có bao nhiêu mục. Khi tập lệnh của chúng tôi thực thi, có thể có rất nhiều hoặc có thể không có gì. Và điều đó sẽ trở nên xấu xí

Truyền bá cú pháp để giải cứu. Nó trông tương tự như các tham số còn lại, cũng sử dụng

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // the rest go into titles array
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");
0, nhưng hoàn toàn ngược lại

Khi

function f(arg1, ...rest, arg2) { // arg2 after ...rest ?!
  // error
}
9 được sử dụng trong lời gọi hàm, nó sẽ “mở rộng” một đối tượng có thể lặp lại
function showName() {
  alert( arguments.length );
  alert( arguments[0] );
  alert( arguments[1] );

  // it's iterable
  // for(let arg of arguments) alert(arg);
}

// shows: 2, Julius, Caesar
showName("Julius", "Caesar");

// shows: 1, Ilya, undefined (no second argument)
showName("Ilya");
0 vào danh sách các đối số

Cho

function f(arg1, ...rest, arg2) { // arg2 after ...rest ?!
  // error
}
5

let arr = [3, 5, 1];

alert( Math.max(...arr) ); // 5 (spread turns array into a list of arguments)

Chúng tôi cũng có thể vượt qua nhiều lần lặp theo cách này

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

alert( Math.max(...arr1, ...arr2) ); // 8

Chúng tôi thậm chí có thể kết hợp cú pháp lây lan với các giá trị bình thường

function sumAll(...args) { // args is the name for the array
  let sum = 0;

  for (let arg of args) sum += arg;

  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6
0

Ngoài ra, cú pháp trải rộng có thể được sử dụng để hợp nhất các mảng

function sumAll(...args) { // args is the name for the array
  let sum = 0;

  for (let arg of args) sum += arg;

  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6
1

Trong các ví dụ trên, chúng tôi đã sử dụng một mảng để thể hiện cú pháp trải rộng, nhưng bất kỳ lần lặp nào cũng sẽ làm được

Chẳng hạn, ở đây chúng ta sử dụng cú pháp spread để biến chuỗi thành mảng ký tự

function sumAll(...args) { // args is the name for the array
  let sum = 0;

  for (let arg of args) sum += arg;

  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6
2

Cú pháp trải rộng bên trong sử dụng các trình vòng lặp để thu thập các phần tử, giống như cách mà

function showName() {
  alert( arguments.length );
  alert( arguments[0] );
  alert( arguments[1] );

  // it's iterable
  // for(let arg of arguments) alert(arg);
}

// shows: 2, Julius, Caesar
showName("Julius", "Caesar");

// shows: 1, Ilya, undefined (no second argument)
showName("Ilya");
2 thực hiện

Vì vậy, đối với một chuỗi,

function showName() {
  alert( arguments.length );
  alert( arguments[0] );
  alert( arguments[1] );

  // it's iterable
  // for(let arg of arguments) alert(arg);
}

// shows: 2, Julius, Caesar
showName("Julius", "Caesar");

// shows: 1, Ilya, undefined (no second argument)
showName("Ilya");
2 trả về các ký tự và
function showName() {
  alert( arguments.length );
  alert( arguments[0] );
  alert( arguments[1] );

  // it's iterable
  // for(let arg of arguments) alert(arg);
}

// shows: 2, Julius, Caesar
showName("Julius", "Caesar");

// shows: 1, Ilya, undefined (no second argument)
showName("Ilya");
4 trở thành
function showName() {
  alert( arguments.length );
  alert( arguments[0] );
  alert( arguments[1] );

  // it's iterable
  // for(let arg of arguments) alert(arg);
}

// shows: 2, Julius, Caesar
showName("Julius", "Caesar");

// shows: 1, Ilya, undefined (no second argument)
showName("Ilya");
5. Danh sách các ký tự được chuyển đến trình khởi tạo mảng
function showName() {
  alert( arguments.length );
  alert( arguments[0] );
  alert( arguments[1] );

  // it's iterable
  // for(let arg of arguments) alert(arg);
}

// shows: 2, Julius, Caesar
showName("Julius", "Caesar");

// shows: 1, Ilya, undefined (no second argument)
showName("Ilya");
6

Đối với tác vụ cụ thể này, chúng tôi cũng có thể sử dụng

function showName() {
  alert( arguments.length );
  alert( arguments[0] );
  alert( arguments[1] );

  // it's iterable
  // for(let arg of arguments) alert(arg);
}

// shows: 2, Julius, Caesar
showName("Julius", "Caesar");

// shows: 1, Ilya, undefined (no second argument)
showName("Ilya");
7, vì nó chuyển đổi một lần lặp (như một chuỗi) thành một mảng

function sumAll(...args) { // args is the name for the array
  let sum = 0;

  for (let arg of args) sum += arg;

  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6
3

Kết quả giống như

function showName() {
  alert( arguments.length );
  alert( arguments[0] );
  alert( arguments[1] );

  // it's iterable
  // for(let arg of arguments) alert(arg);
}

// shows: 2, Julius, Caesar
showName("Julius", "Caesar");

// shows: 1, Ilya, undefined (no second argument)
showName("Ilya");
6

Nhưng có một sự khác biệt tinh tế giữa

function showName() {
  alert( arguments.length );
  alert( arguments[0] );
  alert( arguments[1] );

  // it's iterable
  // for(let arg of arguments) alert(arg);
}

// shows: 2, Julius, Caesar
showName("Julius", "Caesar");

// shows: 1, Ilya, undefined (no second argument)
showName("Ilya");
9 và
function f() {
  let showArg = () => alert(arguments[0]);
  showArg();
}

f(1); // 1
0

  • function showName() {
      alert( arguments.length );
      alert( arguments[0] );
      alert( arguments[1] );
    
      // it's iterable
      // for(let arg of arguments) alert(arg);
    }
    
    // shows: 2, Julius, Caesar
    showName("Julius", "Caesar");
    
    // shows: 1, Ilya, undefined (no second argument)
    showName("Ilya");
    7 hoạt động trên cả mảng thích và lặp lại
  • Cú pháp lây lan chỉ hoạt động với iterables

Vì vậy, đối với nhiệm vụ biến một thứ gì đó thành một mảng,

function showName() {
  alert( arguments.length );
  alert( arguments[0] );
  alert( arguments[1] );

  // it's iterable
  // for(let arg of arguments) alert(arg);
}

// shows: 2, Julius, Caesar
showName("Julius", "Caesar");

// shows: 1, Ilya, undefined (no second argument)
showName("Ilya");
7 có xu hướng phổ biến hơn

Bạn có nhớ khi chúng ta nói về

function f() {
  let showArg = () => alert(arguments[0]);
  showArg();
}

f(1); // 1
3 không?

Có thể làm điều tương tự với cú pháp lây lan

function sumAll(...args) { // args is the name for the array
  let sum = 0;

  for (let arg of args) sum += arg;

  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6
4

Lưu ý rằng có thể làm điều tương tự để tạo một bản sao của một đối tượng

function sumAll(...args) { // args is the name for the array
  let sum = 0;

  for (let arg of args) sum += arg;

  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6
5

Cách sao chép một đối tượng này ngắn hơn nhiều so với

function f() {
  let showArg = () => alert(arguments[0]);
  showArg();
}

f(1); // 1
4 hoặc cho một mảng
function f() {
  let showArg = () => alert(arguments[0]);
  showArg();
}

f(1); // 1
5 vì vậy chúng tôi muốn sử dụng nó bất cứ khi nào có thể

Khi chúng tôi thấy

function f() {
  let showArg = () => alert(arguments[0]);
  showArg();
}

f(1); // 1
6 trong mã, đó là tham số còn lại hoặc cú pháp trải rộng

Có một cách dễ dàng để phân biệt giữa chúng

  • Khi
    function showName(firstName, lastName, ...titles) {
      alert( firstName + ' ' + lastName ); // Julius Caesar
    
      // the rest go into titles array
      // i.e. titles = ["Consul", "Imperator"]
      alert( titles[0] ); // Consul
      alert( titles[1] ); // Imperator
      alert( titles.length ); // 2
    }
    
    showName("Julius", "Caesar", "Consul", "Imperator");
    0 ở cuối tham số hàm, nó là "tham số còn lại" và tập hợp phần còn lại của danh sách đối số vào một mảng
  • Khi
    function showName(firstName, lastName, ...titles) {
      alert( firstName + ' ' + lastName ); // Julius Caesar
    
      // the rest go into titles array
      // i.e. titles = ["Consul", "Imperator"]
      alert( titles[0] ); // Consul
      alert( titles[1] ); // Imperator
      alert( titles.length ); // 2
    }
    
    showName("Julius", "Caesar", "Consul", "Imperator");
    0 xảy ra trong một lệnh gọi hàm hoặc tương tự, nó được gọi là "cú pháp trải rộng" và mở rộng một mảng thành một danh sách

Sử dụng các mẫu

  • Các tham số còn lại được sử dụng để tạo các hàm chấp nhận bất kỳ số lượng đối số nào
  • Cú pháp trải rộng được sử dụng để truyền một mảng cho các hàm thường yêu cầu danh sách nhiều đối số

Họ cùng nhau giúp di chuyển giữa một danh sách và một mảng các tham số một cách dễ dàng

Tất cả các đối số của lệnh gọi hàm cũng có sẵn ở dạng “kiểu cũ”

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // the rest go into titles array
  // i.e. titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");
6. đối tượng lặp giống như mảng

Làm cách nào để chuyển nhiều giá trị trong mảng trong JavaScript?

Sử dụng Mảng. phương thức concat() để đẩy nhiều giá trị vào một mảng , e. g. kết quả const = mảng. concat('b', 'c', 'd');.

Làm cách nào để trải mảng dưới dạng đối số trong JavaScript?

Trải đối số hàm . Giải trình. Một lời gọi áp dụng trông như sau. chức năng. áp dụng (giá trị này, [param1, param2,. ])use apply(). Explanation: An apply invocation looks as follows: func. apply(thisValue, [param1, param2, ...])

Làm cách nào để chuyển nhiều đối số trong JavaScript?

Khi gọi một hàm trong JavaScript, bạn có thể chuyển vào bất kỳ số lượng đối số nào, bất kể khai báo hàm chỉ định điều gì . Không có giới hạn tham số chức năng. Trong hàm trên, nếu chúng ta truyền vào bao nhiêu đối số thì kết quả luôn giống nhau vì nó chỉ nhận 2 tham số đầu tiên.

Bạn có thể truyền mảng dưới dạng tham số không?

Mảng có thể được truyền dưới dạng đối số cho tham số phương thức . Vì mảng là kiểu tham chiếu nên phương thức có thể thay đổi giá trị của các phần tử.