ES6_取值

男娘i 2022-09-11 10:10 111阅读 0赞

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

**ES6 解构赋值**

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

![在这里插入图片描述][e810eb98a714488aa3b974c4239c725e.png]  
这是对象的解构赋值的方法

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)

![在这里插入图片描述][bc6ad9fb96c2488d9724563b35bb90b3.png]  
复杂的解构赋值：

const course = {
      name: 'es6',
      price: 50，
      teacher： {
         name: 'xiecheng',
         age: 34
      }
    }
    
    // 如果只取值name 和price没问题
    如果想取teacher
    const {name, price，teacher } = course
    console.log(name, price， teacher)

![在这里插入图片描述][991667e99e13447e855f4dd13317c7e4.png]  
如果想取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)

![在这里插入图片描述][83e5c4d9f4724186acf620da95570b74.png]  
如果属性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

![在这里插入图片描述][791a04aef0ca4356943fbc2ddf428264.png]  
name 已经被定义两次， const 是不能重复的  
遇到这种情况，我们可以给我们的属性起一个别名，如何去取

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

![在这里插入图片描述][9ac8dfd2c9cd414fb1edafa666a7eccf.png]  
解构赋值是可以给属性取名的

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

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)
    })

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2RhbGlhbm1pYW8_size_20_color_FFFFFF_t_70_g_se_x_16]

[e810eb98a714488aa3b974c4239c725e.png]: /images/20220828/e03303ba46cc4c81bb96de3290bf84df.png
[bc6ad9fb96c2488d9724563b35bb90b3.png]: /images/20220828/95d64f67080c4e60a440f04dbeab74db.png
[991667e99e13447e855f4dd13317c7e4.png]: /images/20220828/bdf5eb531edc4f2db5347375eef2f575.png
[83e5c4d9f4724186acf620da95570b74.png]: /images/20220828/4e4b7e19e5c64a109efbb1bd86d2d8a9.png
[791a04aef0ca4356943fbc2ddf428264.png]: /images/20220828/b4e45797019f406a95e696596c531f6e.png
[9ac8dfd2c9cd414fb1edafa666a7eccf.png]: /images/20220828/12a96144d9674b72a5a2591ba3c64faf.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAX2RhbGlhbm1pYW8_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/b42d3d9ec1684ecf88e1248deecd9bba.png