ES2015入门系列5-解构赋值

2024年2月22日 77次阅读 来源: chekun

用过ReactNative的同砚一定见过相似下面的代码:

import { Text, View } from 'react-native';

这就是ES2015为JavaScript带来的另一个新的语法：解构赋值。

解构赋值(Destructuring assignment), 是用来让我们从数组或许对象中提取数据赋值给差别的变量。

语法以下:

  • 从数组中解构赋值

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

  • 从对象中解构赋值

let {a, b} = {a: 1, b: 2}

PHP开发者有无觉得很眼熟? 对了，这不就是:

list($a, $b) = [1, 2];

没错，如你所想，ES2015从数组中解构赋值和PHP的语法一样，也能够疏忽某些返回值, 以至全疏忽

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

数组的解构赋值很简单，我们继承来看看对象的解构赋值:

let object = {
  f: 1,
  b: 2
}

let {f, b} = object;

那我想赋值给差别变量的名字该怎么办呢，以下：

let {f: foo, b: bar} = object;

要记着，这样一来，真正初始化并赋值的是foo 和 bar。

解构赋值操纵不会抛错(Fail-soft)，假如没有找到，将会用undefined赋值过去。

let [a] = []; // a === undefined
let {b} = {}; // b === undefined

一样，我们也能够设置默认值:

let [a = 1] = []; // a === 1
let {b = 2} = {}; // b === 2

也能够应用在函数参数中:

function draw({color, using = '粉笔'}) {
  console.log('运用' + color + '的' + using + '画画!');
}
draw({color: '赤色'});
draw({color: '蓝色', using: '蜡笔'});

效果以下：

> 运用赤色的粉笔画画!
> 运用蓝色的蜡笔画画!
    原文作者：chekun
    原文地址: https://segmentfault.com/a/1190000009992557
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞