ES6_取值

取值有更优雅的方式吗
在ES里面，我们经常需要取数组的某个值，或者是对象里面的某个属性
数组可能是通过下标去取值，对象通过属性去取值
那么取值有更优雅的方式吗

ES6 解构赋值

const course = {
  name: 'es6',
  price: 50
}
取值：
const name = course.name
const price = course.price

解构赋值
const {name, price } = course  // 解构赋值等号左边和等号右边对应的结构是完全一样的
console.log(name, price)

这是对象的解构赋值的方法

const courseArr = ['es6', 'es7', 'es8']
const a = courseArr[0]
const b = courseArr[1]
const c = courseArr[2]
解构赋值：
const [a,b,c] = courseArr;
console.log(a, b, c)

复杂的解构赋值：

const course = {
  name: 'es6',
  price: 50，
  teacher： {
     name: 'xiecheng',
     age: 34
  }
}

// 如果只取值name 和price没问题
如果想取teacher
const {name, price，teacher } = course
console.log(name, price， teacher)

如果想取teacher里面的name和age属性呢
等号左右两边结构完全一样

const course = {
  name1: 'es6',
  price: 50，
  teacher： {
     name: 'xiecheng',
     age: 34
  }
}
const {name1, price，teacher: {name, age} } = course
console.log(name1, price, name, age)

如果属性name和teacher里面的属性同名，会出现什么情况

const course = {
  name: 'es6',
  price: 50，
  teacher： {
     name: 'xiecheng',
     age: 34
  }
}
const {name, price，teacher: {name, age} } = course
console.log(name, price, name, age) // 两个name

name 已经被定义两次， const 是不能重复的
遇到这种情况，我们可以给我们的属性起一个别名，如何去取

const {
name: courseName,  // 别名
 price，
 teacher: {name, age} 
 } = course
console.log(courseName, price, name, age) // 两个name

解构赋值是可以给属性取名的

在项目中准确的使用解构赋值

const sum = (arr) => {
   let result = 0;
   for(let i = 0; i < arr.length; i++) {
   result += arr[i]
   }
   console.log(result)
}
sum([1, 2, 3])     // 结果是6

ES6写法

解构赋值应用：函数参数
const sum = ([a, b, c ]) => {
   console.log(a + b + c)
}
sum([1, 2, 3])     // 结果是6

// 可以默认属性，默认属性值可以不传
const foo = ({name, age, school = 'XX 学校'}) => {  //设置默认值
console.log(name, age，school )
}
foo({
  name: '张三'，
  age: 20
})

解构赋值应用：接收返回值
const foo = () => {
  return {
    name: '张三'，
    age： 20
  }
}
const {name, age} = foo()
conosle.log(name, age)   // 张三  20

解构赋值应用：交换两个变量的值
let  a = 1
let b = 2
[b, a] = [a, b]
console.log(a, b) // 2, 1

//解构赋值应用： json应用
const json = '{"name": es", "price": "500"}'
const obj = JSON.parse(json)
console.log(obj)  // {"name": es", "price": "500"}

解构赋值
const {name, price} = JSON.parse(json)

解构赋值应用：Ajax请求应用
先在项目中引用axios
 axios.get('./data.json').then(function (res) {
   console.log(res)
})
// es6优化
 axios.get('./data.json').then(res => {
   console.log(res.data)
})
====
 axios.get('./data.json').then(({data})=> {
   console.log(data)
})
===
 axios.get('./data.json').then(({data: {name, type}})=> {
   console.log(name, type)
})