ES6新特性-解构赋值

一.解构赋值的理解

解构赋值语法是一种 Javascript 表达式,它使得将值从数组,或属性从对象,提取到不同的变量中,成为可能。ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

二.数组的解构

以前,为变量赋值,只能直接指定值。

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];

不仅方便而且简洁

本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [a, [[b], c]] = [1, [[2], 3]];
var [x,y]=[1,2];

console.log(x);//2

var [x,y,m]=[3,4];

console.log(m);//undefind

var [x,y]=[80,90,100];//100获取不到

小技巧(不用临时变量也能交换变量):

var a = 1;
var b = 3;
//等价于[a,b]=[3,1]
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

三.对象的解构

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true
let { a, b } = { a: 'aa', b: 'bb' };
a // "aa"
b // "bb"
let { c } = { a: 'aa', b: 'bb' };
c // undefined

上面代码的第一个例子,等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于undefined。

注意:如果解构失败,变量的值等于undefined。

四.字符串的解构赋值

字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e,f] = 'xiaohu';
a // "x"
b // "i"
c // "a"
d // "o"
e // "h"
f // "u"

五.解构赋值的主要用途

(1)交换变量的值

var a = 1;
var b = 3;
//等价于[a,b]=[3,1]
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

面试题:

请用一句代码,实现两个数据值互换?答案也就是上方解构交换赋值的内容。

(2)提取 JSON 数据

let jsonData = {
 id: 42,
 status: "OK",
 data: [867, 5309]};
let { id, status, data: number } = jsonData;


console.log(id, status, number);

// 42, "OK", [867, 5309]

(3)从函数返回多个值

// 返回一个数组

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    a: 1,
    b: 2
  };
}
let { a, b } = example();

还有其他多种用途,博主目前遇到的只有以上类似的相关情况,有其他想法的也可以评论告诉一下我!!!

参考:
https://zhuanlan.zhihu.com/p/59683520
https://es6.ruanyifeng.com/#docs/string

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值