【ES6】—解构赋值

一、定义

解构赋值:解构赋值就是一种模式的匹配,只要等号两边的模式完全相同的,那么左边的变量就会被赋值对应右边的值

二、数组的解构赋值

PS:数组解构赋值时,是通过索引的唯一性赋值的

1. 一维数组解构赋值

(1). ES5 的写法

javascript 复制代码
let arr = [1,2,3]
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a, b, c)

(2). ES6 的写法

javascript 复制代码
let [a,b,c] = [1,2,3]
console.log(a,b,c)
// 1 2 3

2. 多维数组的解构赋值

  1. ES6的写法
javascript 复制代码
let [a,b, [d,f]] = [1,2, [3,4]]
console.log(a,b,d,f)
// 1 2 3 4
  1. 当左右两边的结构模式不匹配时,按照左边变量对应索引的位置赋值
javascript 复制代码
let [a, b, [d]] = [1,2,[3,4]]
console.log(a, b, d)
// 1 2 3
  1. 左边的变量被赋值可以是任意类型
javascript 复制代码
let [a, b, d] = [1,2,[3,4]]
console.log(a, b, d)
// 1 2 [3,4]
  1. 当左边的变量多于右边的值时,多余的变量 = undefined
javascript 复制代码
let [a,b,d, e] = [1, 2, [3, 4]]
console.log(a, b, d, e)
// 1 2 [3, 4] undefined
  1. 设置多余变量的默认值
javascript 复制代码
let [a,b,d, e = 5] = [1, 2, [3, 4]]
console.log(a, b, d, e)
// 1 2 [3, 4] 5
  1. 当左边变量设置默认值,右边又有对应的值,以右边传过来的值为准
javascript 复制代码
let [a,b,d, e = 5] = [1, 2, [3, 4], 6]
console.log(a, b, d, e)
// 1 2 [3, 4] 6

三、基于对象的解构赋值

1. ES5的赋值方式

javascript 复制代码
let user = {
	name: 'xiaoxiao',
	age: 30
}
let name = user.name
let age = user.age
console.log(name, age)
// xiaoxiao 30

2. ES6的解构赋值

  1. 对象解构赋值
javascript 复制代码
let user = {
	name: 'xiaoxiao',
	age: 30
}
let {name, age} = user
console.log(name, age)
// xiaoxiao 30
  1. 再对象解构赋值时,是通过对象key名称唯一性赋值的,跟解构顺序没有关系
javascript 复制代码
let user = {
	name: 'xiaoxiao',
	age: 30
}
let {age, name} = user
console.log(name, age)
// xiaoxiao 30
  1. 给对象的属性起别名
javascript 复制代码
let user = {
	name: 'xiaoxiao',
	age: 30
}
let {age: uage, name: uname} = user
console.log(uage, uname)
// xiaoxiao 30
console.log(age, name)
// Uncaught ReferenceError: age is not defined
// 原有属性名称访问不到, 未定义

四、字符串解构赋值

1. ES5的模式

javascript 复制代码
let str = 'imooc'
for (let i = 0; i < str.length; i++) {
	console.log(str[i]);
}
// i m o o c

2. ES6的解构模式

javascript 复制代码
let str = 'imooc'
let [a,b,c,d, e] = str
console.log(a,b,c,d, e)
// i m o o c

五、解构赋值的应用场景

  1. 数组给没有值的变量设置默认值
javascript 复制代码
let [a, b, c =8] = [4,5]
console.log(a,b,c)
// 4 5 8
  1. 对象给没有值的变量设置默认值
javascript 复制代码
let {name, age =18} = {name: 'xiaoxiao'}
console.log(name, age)
// xiaoxiao 18
  1. 对象解构的变量设置默认值,默认值的范围任意数据类型
    PS: 变量的默认值是惰性赋值,如果右侧有对应的值,左侧的默认值不会执行
javascript 复制代码
function foo () {
	console.log(123)
}
let [a = foo()] = []
console.log(a)
// 1

右侧没有值时,左侧默认值才会执行

javascript 复制代码
function foo () {
	console.log(123)
}
let [a = foo()] = []
console.log(a)
// 123
  1. 函数参数的解构
javascript 复制代码
function foo ([a,b,c]) {
	console.log(a,b,c)
}
foo([1,2,3])
// 1 2 3
javascript 复制代码
function foo ({name,age,school ='imooc'}) {
	console.log(name, age, school)
}
let obj ={
	name: 'xiecheng',
	age: 34
}
foo(obj)
// xiecheng 34 imooc
  1. 函数返回值 解构
javascript 复制代码
function foo () {
	let obj = {
		name: 'xiecheng',
		age: 34,
		school: 'xxx'	
	}
	return obj
}
let {name, age} = foo()
console.log(name, age)
// xiecheng 34
  1. json 字符串解构
javascript 复制代码
// json
let json = '{"name": "xiaoxiao", "sex": "男"}'
// 把json字符串转换为json对象
let {name, sex} = JSON.parse(json)
console.log(name, sex)
// xiaoxiao 男
相关推荐
小曲曲1 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年7 小时前
react中useMemo的使用场景
前端·react.js·前端框架