Rest parameters and spread operator

Rest parameters ...

// 不會出現錯誤,只有前面 2 個參數會相加,多餘的參數不會有作用
function sum(a, b) {
  return a + b;
}

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

// rest 參數把剩餘所有參數放到 array 中
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

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");

// rest 必須是最後一個參數
function f(arg1, ...rest, arg2) { // arg2 after ...rest ?!
  // error
}

The “arguments” variable

// 在 rest 發明以前,有特殊 array-like 物件 arguments 變數,將所有參數存到 array-like 物件中,
// 但他不是 array,不能使用 array 的方法,
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");

// 箭頭函式沒有 this、arguments 變數
function f() {
  let showArg = () => alert(arguments[0]);
  showArg();
}

f(1); // 1

Spread operator

// Math.max() 只能用 number 作為參數
alert( Math.max(3, 5, 1) ); // 5

// 非 number 出現錯誤
let arr = [3, 5, 1];
alert( Math.max(arr) ); // NaN

// 用spread 可以把 array 轉成參數
let arr = [3, 5, 1];
alert( Math.max(...arr) ); // 5 (spread turns array into a list of arguments)

// 用多組 spread
let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];
alert( Math.max(...arr1, ...arr2) ); // 8

// 跟一般參數一起使用
let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];
alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25

// 合併參數到新的 array
let arr = [3, 5, 1];
let arr2 = [8, 9, 15];
let merged = [0, ...arr, 2, ...arr2];
alert(merged); // 0,3,5,1,2,8,9,15 (0, then arr, then 2, then arr2)

// string 也可以使用
let str = "Hello";
alert( [...str] ); // H,e,l,l,o

// 用 Array.from() 也可以達成一樣的結果
let str = "Hello";
// Array.from converts an iterable into an array
alert( Array.from(str) ); // H,e,l,l,o

// Array.from() 可以用在 iterables & array-like object,spread 只能用在 iterables

Last updated