【ECMAScript 5_6_7】3、ES6——变量的解构赋值

一、变量的解构赋值

1. 理解:
  * 从对象或数组中提取数据, 并赋值给变量(多个)
2. 对象的解构赋值
  let {n, a} = {n:'tom', a:12}
3. 数组的解构赋值
  let [a,b] = [1, 'onedean'];
4. 用途
  * 给多个形参赋值
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_变量的解构赋值</title>
</head>
<body>
<script type="text/javascript">
  let obj = {
    username:'onedean',
    age:20
  }
  /*let username = obj.username
  let age = obj.age*/
  let {username,age} = obj
  console.log(username,age)  // onedean 20

  let arr = [1,3,5,'abc',true]
  let [a,b,c,d,e] = arr
  console.log(a,b,c,d,e)  // 1 3 5 "abc" true
  let [,,xxx] = arr
  console.log(xxx)  // 5

  function person(obj) {  // 不用解构赋值
    console.log(obj.username,obj.age)  // onedean 20
  }
  person(obj)

  function person1({username,age}) {  // onedean 20  使用解构赋值,此处相当于{username,age} = obj
    console.log(username,age)
  }
  person1(obj)

</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/edc3001/article/details/85962228