疑惑:
- 如何解构数组参数?
- 如何解构对象参数?
- 如何模拟命名参数?
- 如何创建别名参数?
解构数组参数
假如有一个 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
持续更新。。。。
网友评论