ES6中如何设置函数数组参数默认值和解构赋值技巧？

本文共计880个文字，预计阅读时间需要4分钟。

ES6 知识点讲解：函数参数的默认值及应用

在 ES6 中，函数的参数可以设置默认值，这样即使调用函数时没有提供对应的参数，函数也会使用默认值执行。这种用法不仅增强了代码的可读性，还提高了函数的灵活性。

以下是一个使用函数参数默认值的示例：

javascriptfunction greet(name='Guest') { console.log(`Hello, ${name}!`);}

greet(); // 输出: Hello, Guest!greet('Alice'); // 输出: Hello, Alice!

在这个例子中，`name` 参数有一个默认值 `'Guest'`。当调用 `greet()` 时，因为没有提供 `name` 参数，所以会使用默认值 `'Guest'`。

函数参数默认值的设置规则如下：

1. 在参数列表中，默认值必须放在具有默认值的参数之前。

2.默认值可以是任何有效的 JavaScript 表达式。

下面是几个应用场景：

1. 简化函数调用：

javascriptfunction createArray(size=10) { return new Array(size);}

let smallArray=createArray(); // 创建一个长度为10的数组let largeArray=createArray(20); // 创建一个长度为20的数组

2. 提供默认配置选项：javascriptfunction fetchData(url, options={}) { // 使用默认配置或提供的配置选项 fetch(url, options).then(response=> response.json());}

fetchData('https://api.example.com/data');

3. 动态设置参数值：javascriptfunction add(a, b, c=a + b) { return a + b + c;}

console.log(add(1, 2)); // 输出: 4console.log(add(1, 2, 3)); // 输出: 6

通过这种方式，ES6 的函数参数默认值为开发者提供了更多的灵活性和便利性。

本文实例讲述了ES6知识点整理之函数数组参数的默认值及其解构应用。分享给大家供大家参考，具体如下：

在ES6中， 函数的参数也可以使用解构赋值和默认值的设置，下面我们来看下

在ES6之前设置函数默认值的写法

function test(x,y) { x = x || 12; y = y || 22; console.log(x,y); } test(); // 12 22 test(1,2) // 1 2

在ES6中给函数参数赋默认值

function test(x=12, y=22) { console.log(x,y); } test(); // 12 22 test(3,4); // 3 4

ES6中函数数组参数的默认值

function test([x=2,y=1]) { console.log(x, y); } test([]); // 2, 1 test([3,4]) // 3 4 test(); // 报错： Uncaught TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined

解决上述最后一个错误：使用默认数组来匹配没有参数的情形

function test([x=2,y=1]=[]) { console.log(x, y); } test(); // 2 1

更多应用：

function test([x=2,y=1]=[], z=90) { console.log(x, y, z); } test(); // 2 1 90 test(undefined, 80); // 2 1 80 test('', 50); // 2 1 50 正常输出 // test(null, 80); // 报错，不能填入null Uncaught TypeError: Cannot read property 'Symbol(Symbol.iterator)' of object // test(NaN, 60); // 报错： Uncaught TypeError: undefined is not a function

注意上面函数参数可以接受undefined，但不能接受null和NaN

下面则是更复杂的应用

function test([x=2,[y=3,w=4]=[]]=[], z=90) { console.log(x, y, w, z); } test(); // 2 3 4 90 test(undefined, undefined); // 2 3 4 90 test(undefined, 8); // 2 3 4 8 test([5,[]],12); // 5 3 4 12 test([5,[2,6]],12); // 5 2 6 12

注意其中的陷阱：

function test([x,y]=[1,2]) { console.log(x,y); } test(); // 1 2 test([]); // undefined undefined

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具tools.jb51.net/code/HtmlJsRun测试上述代码运行结果。

更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。