js 参数解构_JavaScript 函数参数解构赋值

解构赋值可以用于函数传参，本文结合代码实例对其进行一下分析。

一.解构赋值介绍：

ES2015 新增解构赋值功能，极大提高了某些操作的便利性。

首先看如下两端代码实例：[JavaScript] 纯文本查看 复制代码运行代码let [webName,age,address]=["蚂蚁部落",4,"青岛市南区"];

console.log(webName,age,address);

代码运行效果截图如下：

[JavaScript] 纯文本查看 复制代码运行代码let {webName, age, address}={webName: "蚂蚁部落", age: 4, address: "青岛市南区"}

console.log(webName,age,address);

代码运行效果截图如下：

上述两端代码分别演示了数组解构赋值与对象解构赋值。

相关阅读：

(1).数组解构赋值参阅

(2).对象解构赋值参阅

二.函数参数解构赋值：

文章标题“JavaScript 函数参数解构赋值”，好像是 ES2015 新增语法。

当然上述说法也没错，但本质上是解构赋值在函数传参上的应用。

看如下代码实例：[JavaScript] 纯文本查看 复制代码let func = (webName, url) => {

let webName;

}

代码运行效果截图如下：

报错变量重复声明，函数调用后，函数参数部分是声明并赋值一个变量。

函数内部也有变量 webName 声明，所以导致变量重复声明。

由此可见，函数参数其实就是待声明的变量。[JavaScript] 纯文本查看 复制代码运行代码let func = ([webName,url]) => {

let str="";

str = webName + "地址是" + url;

return str;

}

console.log(func(["蚂蚁部落","softwhy.com"]));

代码运行效果截图如下：

上述代码中，使用数组解构赋值方式为函数传参。[JavaScript] 纯文本查看 复制代码运行代码let func = ({webName,url}) => {

let str = "";

str = webName + "地址是" + url;

return str;

}

console.log(func({webName:"蚂蚁部落",url:"softwhy.com"}));

代码运行效果截图如下：

上述代码中，使用对象解构赋值方式为函数传参。[JavaScript] 纯文本查看 复制代码运行代码let func = ({webName = "蚂蚁部落", url} = {}) => {

return [webName, url];

}

console.log(func());

console.log(func({webName: "antzone"}));

console.log(func({webName: "蚂蚁部落", url: "softwhy.com"}));

代码运行效果截图如下：

由此可见，函数参数的解构赋值也可以结合默认参数使用。

总结如下：

(1).解构赋值本质是变量声明和变量赋值。

(2).函数参数本质是待声明赋值的变量。

(3).函数参数解构赋值本质就是解构赋值在函数参数中的应用。