further destructuring.md

Posted on | In

further destructuring

Named Arguments

像之前翻译的文章里提到的命名函数参数。里面使用了python的命名参数的例子。在ES6中，我们可以通过解构来实现这个命名函数参数.

1
2
3
4
5
6
7
8
function sum ({
    a = 1,
    b = 2
}) {
    return a + b;
}

sum({b: 3});

建议：

  1. 如果函数超过三个参数，那么我们应该一直使用对象传参
  2. 形成习惯：如果你的参数是callback=>cb, array=> arr, value => v

Destructuring & Restructuring

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var default = {
    url: 'http://some.base.url/api',
    method: 'post',
    headers: [
        'Content-Type: text/plain'
    ]
}

console.log(default);
var setting = {
    url: 'http://some.base.url/api/1',
    data: 42,
    callback: funciton() {}
}

// 合并两个对象，带默认值
// 但是这样的作法存在问题
// 1. 依赖外部库
// 2. 需要文档才能看得懂
// 我们可以使用解构重构这部分的代码 
ajax( _.extend({}, default, setting));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function ajaxOption({
    url = 'http://some.base.url/api',
    methods = 'post',
    data,
    callback,
    headers: [
        header0 = 'Content-Type: text/plain',
        ...otherHeaders
    ] = []
} = {}) {
    return {
        url, method, data, callback,
        headers: [
            header0,
            ...otherHeaders
        ]
    }
}