ES6-函数中参数的解构赋值

最新推荐文章于 2024-02-04 17:19:07 发布

原创最新推荐文章于 2024-02-04 17:19:07 发布 · 705 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#es6

ES6 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了ES6中函数参数的解构赋值，包括如何将对象属性作为实参传入函数并由形参接收，以及如何通过解构处理无实参情况，如设置默认值以避免报错。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、将obj的属性name和age作为实参传进函数fun，给函数的形参name、age接收

	
	var obj = {
	    name: "zs",
	    age: 11,
	    email: "nodejs@163.com"
	}
	
	function func(name, age) {
	    console.log(name, age);
	}
	func(obj.name, obj.age);

二、使用解构的方法

（1）【传了实参】传了一个对象，参数直接使用对象解构的形式


	var obj = {
	    name: "zs",
	    age: 11,
	    email: "nodejs@163.com"
	}
	//实参是obj--对应形参是{ name, age, email } 
	//这里实际上就是{name:name,age:age,email:email}的间写
	function func({ name, age, email }) {
	    console.log(name, age, email); //zs 11 nodejs@163.com
	}
	func(obj);

（2）【没有传实参】如果形参是使用的解构的形式，但是却没有传实参会报错，如下。可以通过给形参设置一个默认值的方法解决，看（3）。


	var obj = {
	    name: "zs",
	    age: 11,
	    email: "nodejs@163.com"
	}
	function func({ name, age, email }) {
	    console.log(name, age, email);//不传参会报错:Cannot destructure property `name` of 'undefined' or 'null'
	}
	func();

（3）【没有传实参报错】给形参设置一个默认值


	var obj = {
	    name: "zs",
	    age: 11,
	    email: "nodejs@163.com"
	}
	//在这里没有传参的话，默认是把一个空对象结构，得出的是undefined
	function func({ name, age, email } = {}) {
	    console.log(name, age, email); //undefined undefined undefined
	}
	
	func();

（4）如果是解构的形式，给形参默认值，是以等号= 给默认值

	
	//没有传参，默认是空对象，本来应该都是undefined，但是name设置默认值是nodejs
	function func({ name = "nodejs", age, email } = {}) {
	    console.log(name, age, email); //nodejs undefined undefined
	    }
	func();


	function func({ name = "nodejs", age, email } = {}) {
	 	console.log(name, age, email); //js undefined 123@qq.com
	}
	// 传参传的对象，是:
	func({ name: "js", email: "123@qq.com" });