ES6 解构赋值【详解】

简介: ES6 解构赋值【详解】

对象的解构赋值

变量名与属性名相同时使用,用 {} 包裹

let config = {
  server: 'localhost',
  port: '8080',
  timeout: 900,
}
let {server,port} = config
console.log(server, port) //"localhost" "8080"

可以自定义变量名:

let {timeout : t} =config
console.log(t) //900

将对象的属性值赋值给已经声明过的变量,需要在外面加上小括号

let config = {
  server: 'localhost',
  port: '8080',
  timeout: 900,
}
let server = '127.0.0.1';
let port = '80';
({server,port} = config) //用()赋值
console.log(server, port) //"localhost" "8080"

函数传参时,也可以使用解构赋值的方式

let config = {
  server: 'localhost',
  port: '8080',
  timeout: 900,
}
let server='127.0.0.1';
let port ='80';
let timeout ='100';
function startServer(configValue){
  console.log(configValue)
}
startServer({server,port,timeout} = config)

赋值的变量名在对象中找不到与之匹配的属性名,这个变量的值会变成undefined。

可以为变量设置默认值:

let config = {
  server: 'localhost',
  port: '8080'
}
let {server,port,timeout=0} = config
console.log(timeout)

数组的解构赋值

变量顺序与数组中元素的顺序要保持一致,用 [ ] 包裹

const arr = ['a','b']
const [x,y] = arr
console.log (x,y) /"a" "b"

如果想跳过数组中的某个元素,可以采取下面这种方法:

const days = ['Thursday','Friday','Saturday','Sunday']
const [,,sat,sun] = days
console.log (sat,sun) //"Saturday" "Sunday"

配合剩余操作符(…)将数组中剩余的所有元素以数组的形式赋值给变量(剩余操作符在使用时只能被放置在最后)

const [x, ...y] = ['a', 'b', 'c']; // x='a'; y=['b', 'c']

解构赋值的妙用——互换赋值

解构赋值实现便捷的互换赋值(不再需要临时中间变量)

let a=1, b=2;
[b,a] = [a,b]
console.log(a,b) //2 1
目录
相关文章
|
7月前
|
JavaScript
ES6之变量的解构赋值
ES6之变量的解构赋值
|
7月前
|
JSON JavaScript 前端开发
ES6 变量的解构赋值
ES6 变量的解构赋值
ES6学习(2)解构赋值
ES6学习(2)解构赋值
|
3月前
ES6解构赋值
本文介绍了ES6中解构赋值的用法,包括对象和数组的解构,展示了如何从复杂数据结构中提取需要的变量,以及使用重命名和嵌套解构来简化代码。
40 0
ES6解构赋值
|
6月前
|
JSON JavaScript 前端开发
ES6 解构赋值详解
ES6是JavaScript语言的一次重大更新,引入了许多新特性和语法改进,其中解构赋值是一个非常实用和灵活的语法特性。它可以让我们从数组或对象中提取值,并赋给对应的变量,让代码变得更加简洁和易读。本文将深入探讨ES6解构赋值的语法、用法及其在实际开发中的应用。
196 58
ES6 解构赋值详解
|
4月前
es6 的解构赋值
【8月更文挑战第22天】
24 3
|
JavaScript 前端开发 网络架构
ES6 解构赋值
ES6 解构赋值
88 0
|
7月前
|
小程序
es6学习笔记(二)解构赋值
es6学习笔记(二)解构赋值
ES6语法: 解构赋值
ES6语法: 解构赋值
61 0