js 数组与对象的解构赋值

news/2024/7/19 13:32:27 标签: 解构赋值, js, 扩展运算符, 默认值, 重命名

解构赋值是javascript 语法,作用是将值从数组、或属性从对象,提取到不同的变量中。

1. 数组解构
		1.1 声明变量并赋值:
			let hi = ['hello', 'world'];
			let [hello, world] = hi
			console.log(hello) => hello
			console.log(world) => world
			
		1.2 设置解构默认值
			let hi = 'hello world';
			let [hello, world = 'hi'] = hi
			console.log(hello) => hello world
			console.log(world) => hi
			
		1.3 使用扩展运算符解构
			function f () {
				return ['hello', 'world', 'my', 'name', 'is Lilei'];
			}
			let [hello, world, ...who] = f()
			console.log(hello) => hello
			console.log(world) => world
			console.log(who) => ['my', 'name', 'is Lilei']
			
		1.4 忽略某些返回值
			function f () {
				return ['hello', 'world', 'my', 'name', 'is Lilei'];
			}
			let [hello, world,, ...who] = f()  // 两个逗号之间的值被忽略了
			console.log(hello) => hello
			console.log(world) => world
			console.log(who) => ['name', 'is Lilei']
2. 对象解构
		2.1 基本解构
			let obj = {
				hello: 'hello',
				world: 'world'
			}
			let {hello, world} = obj
			console.log(hello) => hello
			console.log(world) => world
		
		2.2 属性重命名
			let obj = {
				hello: 'hello',
				world: 'world'
			}
			let {hello: one, world: two} = obj;
			console.log(one) => 'hello'
			console.log(two) => 'world'

		2.3 默认值
			let obj = {
				hello: 'hello'
			}
			let {hello, world = 'world'} = obj
			console.log(hello) => hello
			console.log(world) => world
			
		2.4 重命名默认值同时存在
			let obj = {
				hello: 'hello'
			}
			let {hello: one, world:two = 'world'} = obj
			console.log(one) => hello
			console.log(two) => world

		2.5 为函数参数设置默认值
			function f ({name='Tim', hi={hello: 'hello', world: 'world'}, age: 18} = {}) {
				console.log(name + ':' + hi + ':' + age)
			}
			f({
				name: 'Tom',
				age: 20
			})
	
		2.6 对象展开运算符
			let obj = {
				hello: 'hello',
				world: 'world',
				name: 'Tim',
				age: 18
			}
			let {hello, world, ...hi} = obj;
			console.log(hello) => hello
			console.log(world) => world
			console.log(hi) => {name: 'Tim', age: 18}

补充说明:
        for 、 for of 、 for each 可以用来遍历数组进行解构赋值
        for in 可以用来遍历对象属性进行解构赋值
        重命名现象仅能使用于对象解构赋值,因为数组不存在名称


http://www.niftyadmin.cn/n/1162503.html

相关文章

vue 导入第三方js实例对象

第一步: 因为vue是单页面引用,所有要在一开始加载页面的时候将js库给引入进来,无论是本地的文件还是网络文件,都需要引入。vue的单页面入口就在根目录中的index.html中。 第二步 在配置文件中为引入的第三方js库实例申明代理对象…

JS dateObject.getTime is not a function

dateObject.getTime is not a function 这个错误出现的原因是通过接口或者初始化数据的时候获取的数据由date变为了string 程序校验string类型数据没有getTime方法,所以检验出错。 最简单的方法就是,通过string to date 还原数据类型 new Date(2019-11-1…

SpringBoot 通过spring starter project 创建springboot项目时报错 connect timed out

根据报错信息可知是创建项目时建模信息获取超时,解决方案: 1. 加长spring网络连接时长 eclipse > window > preferences > spring > beans support > 将timeout时间从默认的60 改为600 2. 设置eclipse连接网络方式 eclipse > wind…

处理The requested profile pom.xml could not be activated because it does not exist 问题

Eclipse打包SpringBoot项目出现这个报错。 1. 一般情况可以通过右键项目 > Properties > Maven > 删除文本框内的文字pom.xml > Apply 处理 2. 如果报错信息具体到提示:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin 则说明…

Spring 常见文件上传

文件上传 1. springmvc中使用commons-fileupload 与 commons-io完成文件上传 /*** 文件上传需要使用到两个jar包:* 1. commons-fileupload.jar* 2. commons-io.jar* 配置springmvc的配置文件-配置文件上传的解析器 CommensMultipartResolver* throws IOExce…

Spring 常用注解解释

A Autowired可以自动帮把bean里面引用的对象的setter/getter方法省略,它会自动帮你set/get。注释进行自动注入时,spring容器中匹配的候选Bean数目必须有且仅有一个。否则将抛出BeanCreationException异常默认先按byType进行匹配,如果发现找到…

module.exports、exports、export default、export、require、import 区别和不同之处

在es5中,用 module.exports 和 exports 导出模块,用 require 导入模块。 在es6中,新增 export default 和 export 导出模块,用 import 导入模块。 如果开发环境支持es6语法,用es5的 module.exports 和 exports 导出的模…

JS 添加有效身份证验证

/*** certificate 身份证识别*/ export function IdentifyCertificate(cardNo) {let idCard cardNo.toString();let province {11: "北京",12: "天津",13: "河北",14: "山西",15: "内蒙古",21: "辽宁",22: &quo…