[js高手之路] es6系列教程 - 解构详解
2017-08-08 11:34
1176 查看
解构通俗点说,就是通过一种特定格式,快捷的读取对象/数组中的数据的方法,
es6之前,我们通过对象名称[键] 读取数据
上面第5行就是一个简单的数据解构过程:
1,右边如果是对象,左边解构的语法也要用对象格式, 如果解构的数据是数组,左边就用数组格式
2,name, age是局部变量
3,解构出来的变量 一定要是 对象中能够查找到的属性名
4,如果解构出来的属性在对象中查找不到,值为undefined
解构出来的变量虽然是跟属性名称相同,但是他不再是属性,而是外部的变量,这个变量名也可以被修改, 不一定要跟属性同名
更改解构出来的变量名称的语法: 旧的名称 : 新的名称
上述实例,为sex赋值了一个默认值 'man';
解构数组
解构嵌套数组
在以前,我们交换变量,一般的做法是借助第三个变量, 而现在有了解构之后,我们可以直接交换
利用解构出来的值,修改局部变量的值
上述实例,是一个对象赋值的简写语法,你还记得吗?
解构表达式传参
嵌套对象的解构
解构中的不定参数(...)
最后一道综合练习题: 对象与数组的混合解构,能看懂,基本就算掌握了
es6之前,我们通过对象名称[键] 读取数据
var User = { 'name' : 'ghostwu', 'age' : 22 }; console.log( User.name, User.age ); //ghostwu, 22
var User = { 'name' : 'ghostwu', 'age' : 22 }; let { name, age } = User; console.log( name, age ); //ghostwu 22
上面第5行就是一个简单的数据解构过程:
1,右边如果是对象,左边解构的语法也要用对象格式, 如果解构的数据是数组,左边就用数组格式
2,name, age是局部变量
3,解构出来的变量 一定要是 对象中能够查找到的属性名
4,如果解构出来的属性在对象中查找不到,值为undefined
var User = { 'name' : 'ghostwu', 'age' : 22 }; let { name1, age1 } = User; console.log( name1, age1 ); //undefined, undefined
解构出来的变量虽然是跟属性名称相同,但是他不再是属性,而是外部的变量,这个变量名也可以被修改, 不一定要跟属性同名
var User = { 'name' : 'ghostwu', 'age' : 22 }; //解构出来的变量可以更改名称 let { name : name1, age : age1 } = User; // console.log( name, age ); //报错, 因为name和age的名称已经被改了 console.log( name1, age1 ); //ghost, 22
更改解构出来的变量名称的语法: 旧的名称 : 新的名称
var User = { 'name': 'ghostwu', 'age': 22 }; let { name, age, sex } = User; // 解构出来的属性,如果不存在,默认值为undefined console.log( name, age, sex ); //ghost 22 undefined
var User = { 'name': 'ghostwu', 'age': 22 }; // 解构出来的值 可以赋值 一个默认的值 let { name, age, sex = 'man' } = User; console.log( name, age, sex );
上述实例,为sex赋值了一个默认值 'man';
解构数组
let arr = [ 10, 20, 30, 40 ]; // 数组用[]解构 let [ one, two ] = arr; console.log( one, two ); //10 20
let arr = [ 10, 20, 30, 40 ]; // 对于不需要解构的值,可以用逗号占位 let [ , , , a ] = arr; console.log( a ); //40
解构嵌套数组
let arr = [ 10, [ 20, 30 ], 40 ]; console.log( arr[1][1] ); //30 let [ one, two, three, four ] = arr; console.log( one, two, three, four ); //10 [20, 30] 40 undefined [ one, [ two, three ], four ] = arr; //前面不要let,否则会报重定义错误 console.log( one, two, three, four ); //10 20 30 40
在以前,我们交换变量,一般的做法是借助第三个变量, 而现在有了解构之后,我们可以直接交换
/* 交换两个变量的值 */ let a = 10, b = 20; [ a, b ] = [ b, a ]; //前面不要加let,否则会报 重定义错误 console.log( a, b ); //20, 10
利用解构出来的值,修改局部变量的值
let User = { name : 'ghostwu', age : 22 }, name = 'zhangsan', age = 30; //小括号: 把下面这个 转成解构表达式, 如果不用小括号会报错 ({ name, age } = User); console.log( name, age ); //ghostwu, 22
let name = 'zhangsan', age = 40; ({ name, age } = { name, age }); console.log( name, age ); //zhangsan 40
上述实例,是一个对象赋值的简写语法,你还记得吗?
let User = { name : 'ghostwu', age : 22 }; //重命名局部变量,mySex:赋初始值 let { name : myName, age : myAge, sex : mySex = 'man' } = User; console.log( myName, myAge, mySex ); //ghostwu 22 man
解构表达式传参
let User = { name : 'ghostwu', age : 22 }; function show( obj ){ console.log( obj ); //obj其实就是User对象 console.log( obj === User ); //true //函数中可以访问在参数中解构出来的变量 console.log( name, age ); //ghostwu, 22 } show( { name, age } = User ); //表达式传值,整个表达式的值 取决于右边,所以把User传给了obj console.log( name, age ); //ghostwu, 22
嵌套对象的解构
let User = { name : 'ghostwu', age : 22, class : { group1 : { one : '王超', two : '马汉' }, group2 : { one : '张龙', two : '赵虎' } } }; //在User对象解构class, 在class中解构group1 let { class : { group1 } } = User; console.log( group1.one ); //王超 console.log( group1.two ); //马汉 //在User对象解构class, 在class中解构group1, 在group1中解构one, two ({ class : { group1 : { one, two } } } = User); console.log( one, two ); //王超, 马汉 //重命名group1 为 diyizu ({ class : { group1 : diyizu } } = User); console.log( diyizu.one ); //王超 console.log( diyizu.two ); //马汉 //three 赋默认值 ({ class : { group1 : { one, two, three = '展昭' } } } = User); console.log( one, two, three );//王超,马汉,展昭
解构中的不定参数(...)
let arr = [ 10, 20, 30 ]; let [ one, ...others ] = arr; console.log( others.length ); //2 console.log( one ); //10 console.log( others[0] ); //20 console.log( others[1] ); //30
//es6之前,用concat复制数组 let arr = [ 10, 20, 30 ]; let newArr = arr.concat(); console.log( newArr );
//用解构与不定参数结合 复制 数组 let arr = [ 10, 20, 30 ]; let [ ...newArr ] = arr; console.log( newArr );
最后一道综合练习题: 对象与数组的混合解构,能看懂,基本就算掌握了
let User = { name : 'ghostwu', age : 22, class : { group1 : { one : '王超', two : '马汉' }, group2 : { one : '张龙', two : '赵虎' } }, arr : [ 10, 20, 30 ] }; // let { name, age, class : { group1 }, arr } = User; let { name, age, class : { group1, group2 }, arr : [ one, two, three ] } = User; // console.log( name, age, group1.one, group1.two, arr ); console.log( name, age, group1.one, group1.two, group2.one, group2.two, one, two, three );
相关文章推荐
- [js高手之路] es6系列教程 - 解构详解
- [js高手之路] es6系列教程 - 函数的默认参数详解
- [js高手之路] es6系列教程 - 对象功能扩展详解
- [js高手之路] es6系列教程 - 箭头函数详解
- [js高手之路] es6系列教程 - 函数的默认参数详解
- [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)
- [js高手之路] es6系列教程 - var, let, const详解
- [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
- [js高手之路] es6系列教程 - 箭头函数详解
- [js高手之路] es6系列教程 - Set详解与抽奖程序应用实战
- [js高手之路] es6系列教程 - Map详解以及常用api
- [js高手之路] es6系列教程 - 对象功能扩展详解
- [js高手之路] es6系列教程 - 迭代器与生成器详解
- [js高手之路] es6系列教程 - 不定参数与展开运算符(...)
- [js高手之路] es6系列教程 - 不定参数与展开运算符(...)
- [js高手之路] es6系列教程
- [js高手之路] es6系列教程
- [js高手之路] es6系列教程 - var, let, const详解
- [js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)