ES6_取值 男娘i 2022-09-11 10:10 125阅读 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
相关 ES6_取值 取值有更优雅的方式吗 在ES里面,我们经常需要取数组的某个值,或者是对象里面的某个属性 数组可能是通过下标去取值,对象通过属性去取值 那么取值有更优雅的方式吗 E 男娘i/ 2022年09月11日 10:10/ 0 赞/ 126 阅读
相关 es6 1.http://pythontutor.com/visualize.html\mode=display 超好用的在线调试工具 2.let 增加块级作用域吧相当于, 骑猪看日落/ 2022年08月23日 04:47/ 0 赞/ 174 阅读
相关 es6? 转载:http://www.cnblogs.com/zr123/p/8353084.html //1.搭建ES6的开发环境; let a=1; console.log( ╰+攻爆jí腚メ/ 2022年06月01日 12:08/ 0 赞/ 210 阅读
相关 ES6 数组取值 const arr =[{ id:'1', name:'a' },{ id:'2', name:'b' } 怼烎@/ 2022年05月11日 09:14/ 0 赞/ 183 阅读
相关 es6 ES6语法 ES6的相关概念 ECMAScript 2016,就是一个语法的规范,想比之前,更加的灵活,更加的方便 ES6新增的语法 let关键字 作用:用来声明变量 短命女/ 2022年01月23日 06:39/ 0 赞/ 229 阅读
相关 ES6 > 转载地址 : [https://www.jianshu.com/p/287e0bb867ae][https_www.jianshu.com_p_287e0bb867ae] 深碍√TFBOYSˉ_/ 2021年11月29日 08:20/ 0 赞/ 313 阅读
相关 es6 简介 - ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。 た 入场券/ 2021年09月15日 15:40/ 0 赞/ 347 阅读
相关 ES6 ES6 1.let和const 2.ES6解构赋值 3.ES6箭头函数 4.ES6剩余参数 5.ES6扩展运算符... 6.ES6内置 野性酷女/ 2021年09月07日 06:16/ 0 赞/ 333 阅读
相关 ES6基础-ES6 class ![file][] 作者 | Jeskson 来源 | 达达前端小酒馆 > ES - Class 类和面向对象: 面向对象,即万物皆对象,面向对象是我们做开发一种的方 我会带着你远行/ 2021年08月20日 00:23/ 0 赞/ 559 阅读
还没有评论,来说两句吧...