...spread operator and rest operator and Destructuring

118 阅读1分钟

...spread operator 适用于多个参数元素或变量

  1. 将现有数组元素添加到新数组
  2. 将数组的元素作为参数传递给函数
  3. 复制数组
  4. 连接数组

rest operator:可以作为函数参数使用,当你不知道参数有多少个时

与spread operator相反,spread operator将数组扩展或扩展为其元素,但rest operator收集多个元素并压缩为单个数组元素

/* Spread Operator / Rest Operator */
// 多个参数元素或变量的地方扩展表达式

// add the elements of an existing array into a new array 将现有数组元素添加到新数组
var certsToAdd = ['Algorithms and Data Structures', 'Front End Libraries']; 
var certifications = ['Responsive Web Design', ...certsToAdd, 'Data Visualization', 'APIs and Microservices', 'Quality Assurance and Information Security'];
console.log(certifications);

// pass elements of an array as arguments to a function 将数组的元素作为参数传递给函数
function addThreeNumbers(x, y, z) { 
	console.log(x+y+z)
}
var args = [0, 1, 2, 3];
addThreeNumbers(...args);

// copy arrays 复制数组
var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4); 
console.log(arr);
console.log(arr2);


// concatenate arrays  连接数组 
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
//arr1.concat(arr2);
arr1 = [...arr1, ...arr2];
console.log(arr1);


// 与spread operator相反,spread operator将数组扩展或扩展为其元素,但rest operator收集多个元素并压缩为单个数组元素
// REST: condense multiple elements into an array
function multiply(multiplier, ...theArgs) {
  return theArgs.map(function(element) {
    return multiplier * element;
  });
}

var arr = multiply(2, 1, 2, 3); 
console.log(arr)

Destructuring

/* Destructuring */

// Assign variables from objects
var voxel = {x: 3.6, y: 7.4, z: 6.54 };

const {x, y, z} = voxel;
console.log(x);
const {x : a, y : b, z : c} = voxel;
console.log(b);

// Assign variables from nested objects
const nest = {
  start: { x: 5, y: 6},
  end: { x: 6, y: -9 }
};
const { start : { x: startX, y: startY }} = nest;
console.log(startX);

// Assign Variables from Arrays
//const [q,,, r] = [1, 2, 3, 4, 5];
//console.log(q, r);

// Rest Operator to Reassign Array Elements
const [q, r, ...rest] = [1, 2, 3, 4, 5];
console.log(q, r);
console.log(rest);

// Pass an Object as a Function's Parameters
const profileUpdate = ({ name, age }) => {
  // do something with these variables
}