您的位置:首页> 前端教程> ES6教程
文章导航

JavaScript 函数参数解构赋值

2018-9-20 11:15| 作者: admin| 查看: 2025| 评论: 0|来自: 蚂蚁部落

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

一.解构赋值介绍:

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

首先看如下两端代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
let [webName,age,address]=["蚂蚁部落",4,"青岛市南区"];
console.log(webName,age,address);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/20/111613rxz2pmqqyp2ahwkk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/20/111649i88q55okqakb64ea.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

相关阅读:

(1).数组解构赋值参阅 JavaScript数组解构赋值 一章节。

(2).对象解构赋值参阅 JavaScript对象解构赋值 一章节。

二.函数参数解构赋值:

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

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

看如下代码实例:

[JavaScript] 纯文本查看 复制代码
let func = (webName, url) => {
  let webName;
}

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/20/111757zef8hb3f60kkvoqh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

由此可见,函数参数其实就是待声明的变量。

[JavaScript] 纯文本查看 复制代码运行代码
let func = ([webName,url]) => {
  let str="";
  str = webName + "地址是" + url;
  return str;
}
console.log(func(["蚂蚁部落","softwhy.com"]));

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/20/111958twnjjb25suj5uuky.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码中,使用数组解构赋值方式为函数传参。

[JavaScript] 纯文本查看 复制代码运行代码
let func = ({webName,url}) => {
  let str = "";
  str = webName + "地址是" + url;
  return str;
}
console.log(func({webName:"蚂蚁部落",url:"softwhy.com"}));

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/20/112049su36pzjukke4e3pb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码中,使用对象解构赋值方式为函数传参。

[JavaScript] 纯文本查看 复制代码运行代码
let func = ({webName = "蚂蚁部落", url} = {}) => {
  return [webName, url];
}
console.log(func());
console.log(func({webName: "antzone"}));
console.log(func({webName: "蚂蚁部落", url: "softwhy.com"}));

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/20/112122pny2ynkk2knyzuys.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

总结如下:

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

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

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

2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

最新评论

返回顶部