ES6 解构赋值
2018-01-20 15:11
330 查看
定义:ES6允许按照一定的模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构赋值。
对象的解构赋值:
let {a} = b;
意思是从b这个对象中提取属性名为a的值并赋给a属性,返回一个对象{a: a}。
即:对象的赋值是下面的简写形式:
let {foo:foo,bar:bar} = {foo:'aaa',bar:'vvvv'};
也就是说,对象的解构赋值的内部机制是先找到同名属性,讲值赋值给对应的变量。真正被赋值的是后者,而不是前者。
上面代码
2.交换变量的值
3.从函数中返回的多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组和对象中。通过解构取出这些值就非常方便。
4.提取JSON数据
如: //定义变量 let a = 1; let b = 2; let c = 3; 解构写法: let [a, b, c] = [1, 2, 3]; console.log(a); //1 console.log(c); //3
对象的解构赋值:
let {foo} = { foo: "222", bar: "adsafe" }; //console.log(foo); //222 let {foo:baz} = { foo: 12345 }; //console.log(foo); //foo is undefined console.log(baz); //12345
let {a} = b;
意思是从b这个对象中提取属性名为a的值并赋给a属性,返回一个对象{a: a}。
即:对象的赋值是下面的简写形式:
let {foo:foo,bar:bar} = {foo:'aaa',bar:'vvvv'};
也就是说,对象的解构赋值的内部机制是先找到同名属性,讲值赋值给对应的变量。真正被赋值的是后者,而不是前者。
上面代码
let {foo:baz} = { foo: 12345 }; //console.log(foo); //foo is undefined console.log(baz); //12345 这段代码foo是匹配模式,baz才是变量。 用途: 1.函数参数的定义
function foo([x, y]) { return x + y; } var baz = foo([1, 2]); console.log("baz", baz); //baz 3 function foo({y, x}) { return x + y; } var baz = foo({ x: 1, y: 2 }); console.log("baz", baz); //baz 3
2.交换变量的值
let x = 2; let y = 3; [x, y] = [y, x]; console.log(x, y); //3,2
3.从函数中返回的多个值
function foo() { return { a: 1, b: 2, c: 3 } } let {a, b, c} = foo(); console.log(b); //2 function foo() { return [1, 2, 3] } let [a, b, c] = foo(); console.log(b); //2
函数只能返回一个值,如果要返回多个值,只能将它们放在数组和对象中。通过解构取出这些值就非常方便。
4.提取JSON数据
let jsonData = { id: 12, status: 'OK', data: [987, 654] } let {id, status, data} = jsonData console.log(id, status, data); //12 "OK" [987, 654]
相关文章推荐
- es6-变量的解构赋值
- ES6 变量的解构赋值
- ES6——Day3(字符串的解构赋值+函数参数解构赋值)
- 【es6】【变量的解构赋值】【对象解构赋值】
- 小谈ES6解构赋值
- ES6解构赋值的默认值
- ES6 解构赋值
- es6分享——变量的解构赋值
- ES6之解构赋值
- ES6学习-解构赋值
- ES6 变量的解构赋值
- ES6第二章 关于“变量的解构赋值”不得不说的事~
- ES6--变量的解构赋值
- ES6:变量的解构赋值
- ES6 对象的解构赋值
- 【es6】【变量的解构赋值】【字符串,数值和布尔值解构】【函数参数的解构赋值】【用途】
- ES6(二) Destructuring-变量的解构赋值
- ES6中变量的解构赋值
- 如何理解es6语法的,对象前面加三个点(...) 对象的解构赋值和扩展
- ES6里面的解构赋值最佳使用位置