ES6系列 (十）解构参数

疑惑:

1. 如何解构数组参数?
2. 如何解构对象参数?
3. 如何模拟命名参数?
4. 如何创建别名参数?

解构数组参数

假如有一个 diff 函数,此函数接受两个 dom 元素 dom1 和 dom2 为参数，计算这两个 dom 的差异，最后返回一个数组包含三个值，分别为：

已添加的 DOM 元素节点 inserted，
已删除的 DOM 元素 deleted，
已修改的 DOM 元素 modified

最终有一个 render 函数接受这三个参数值，将内容渲染到页面中，下面的方法可行，但是很繁琐，必须从 diff 中抽取出值传递给 render

//渲染函数
function render(inserted，, deleted，, modified) {
  //....
}
//获取接受的参数
//缺点：抽取出值，才能下一步传递给render调用
const [inserted，, deleted，, modified] = diff(dom1, dom2);
render(inserted，, deleted，, modified);

render 函数的输入和 diff 函数的输出匹配

/*
  此时需要重新实现render方法:
  缺点：抽取参数的步骤放在了函数内部,外部调用render时看起来简洁干净了，
      但是render函数的内部实现变得浑浊起来
*/
function render(diff) {
  const inserted， = diff[0];
  const deleted， = diff[1];
  const domodifiedm3 = diff[2];
}

render(diff(dom1, dom2););

终极目标: 我们采用数组解构改写后，render 函数只会接受一个参数

//在内部进行对参数列表进行数组解构
function render(diff){
  const [inserted，, deleted，, modified] = diff
  console.log(inserted, deleted, modified);

}

//更加简洁，可读性
function render([inserted，, deleted，, modified]){

}

案例:编写组件库

function setColors([primary, success, danger]) {
  //...
}
//开发人员调用
setColors("blue", "yellow", "red");

解构对象参数

//如果换成对象形式的参数
function setColors({ primary, success, danger }) {
  //some code
}
setColors({
  primary: "yellow",
  danger: "red",
  success: "blue"
});

模拟命名参数

案例：编写函数构造一个汽车，拥有品牌，型号，和出产年份

function car(make, model, year) {}

首先对上面的函数参数设置一个默认值，如果我想调用时只想传递 year 这个参数

//ES5
function car(make, model, year) {
  console.log(make, model, year);
}
//ES6
function car(make = "奥迪", model = "A6", year = "2017") {
  console.log(make, model, year);
}

let instance = car(undefined, undefined, 2015); //这种做法并不理想
// 奥迪 A6 2015

我们可以使用对象解构来模拟命名参数(根据名称而不是根据位置设置参数的能力)

function car({ make, model, year }) {
  console.log(make, model, year);
}
let instance = car({ year: 2015 });
console.log(instance); //undefined undefined 2015

//以上代码实际使用的是对象的单个参数，我们还需要找出一种方法来设置每个参数的默认值
function car(
  { make, model, year } = { make: "奥迪", model: "A6", year: "2019" }
) {
  console.log(make, model, year);
}
car(); //奥迪 A6 2019

更好的方式:解构对象，给每个键单独分配默认值,如果调用时是不带参数

function car({ make = "奥迪", model = "A6", year = "2019" }) {}

car(); //没有传入对象，此时参数就是未定义的，不能对未定义的值进行对象解构

//解决：

function car({ make = "奥迪", model = "A6", year = "2019" } = {}) {}

创建别名参数

//给参数起别名
function foo(a, b, c = b) {
  console.log(a, b, c);
}
foo(1, 2); //1,2,2

持续更新。。。。