js 数组与对象的解构赋值

最新推荐文章于 2025-01-26 01:45:00 发布

kangkang_style

最新推荐文章于 2025-01-26 01:45:00 发布

阅读量1k

点赞数 1

分类专栏： javascript 文章标签：解构赋值 js 扩展运算符默认值重命名

本文链接：https://blog.youkuaiyun.com/kangkang_style/article/details/103277759

版权

javascript 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了JavaScript中的解构赋值技术，包括如何从数组和对象中提取值并分配给不同变量。此外，还提到了使用for、for of、for each遍历数组进行解构赋值，以及利用for in遍历对象属性。同时，文章指出重命名特性只适用于对象解构赋值，因数组元素无名称。

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

解构赋值是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 可以用来遍历对象属性进行解构赋值
       重命名现象仅能使用于对象解构赋值，因为数组不存在名称