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

JavaScript函数参数解构赋值

2018-9-20 11:15| 作者: admin| 查看: 1226| 评论: 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).函数参数解构赋值本质就是解构赋值在函数参数中的应用。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部