《大前端三问》 - JavaScript变量之高级特性

发表于 分类于 ， 阅读次数： ：

本章将总结一个JavaScript中和变量操作相关的一些高级操作。主要为ECMAScript6及以上但是非常实用的高级特性。

1 对象的解构

ES6中，定义了一种高级的操作，被称之为解构（Destructuring）。

解构。。。这个名称听起来很高级，其实说白了，就是一种快速从对象中取出想要的成员的语法糖。我觉得可能这个操作想起来就像是对象构建函数的逆操作所以这样命名吧（想想看，构造一个对象我们是往构造函数中传指定的几个参数来构造之。而解构则是从此对象中抽出其成员属性）。

  • 比如下面对数组的解构(就是从数组中抽出特定的成员)：
数组的解构
1
2
3
4
5
6
7
var a = 1;
var b = 2;
var c = 3;

  等价于 ==>

var [a, b, c] = [1, 2, 3];
  • 对一个对象的解构（就是从对象中抽出特定的成员）：
对象的解构
1
2
3
4
5
6
7
8
let car = {
  tie: 4,
  engine: 1
}
  等价于 ==>

let {tie, engine} = car;
// tie = 4, engine = 1;

1.1 解构可以使用默认值

解构时使用默认值
1
2
3
4
5
var {x, y = 5} = {x: 1};
console.log(x, y) // 1, 5

var { message: msg = "Something went wrong" } = {};
console.log(msg); // "Something went wrong”

1.2 常用到的场合

1.2.1 解构在import中的应用

在import时，我们常会使用解构，比如：

import时使用解构
1
2
3
4
5
import {Component} from 'react'

// 这样，相当于从React中抽出Component，这样在下面使用时就可以省去成员引用
// class App extends React.Component
class App extends Component

1.2.2 解构在函数中的应用

在函数的形参中，我们也常常使用解构来快速取出想要的值。比如下面这个React纯函数组件，我们用({ selected = true, onClick = f => f }) => component来代替props => component，相当于快速地把要用到的属性从props中快速地取出来（其中还用到了设置解构默认值）：

解构在函数中的应用
1
2
3
4
5
6
7
const Star = ({ selected = true, onClick = f => f }) => {
  return (
    <div className={(selected ? 'star selected' : 'star unselected')}
      onClick={onClick}>
    </div>
  );
};

1.2.3 swap方法

使用解构可以非常优雅地实现swap交换变量的值，下面请欣赏：

使用解构优雅地实现swap
1
[x, y] = [y, x];

1.2.4 函数返回多个值

有了解构，可以优雅地让函数返回多个值。但是当然，前提是你的注释一定要写清楚：

利用解构让函数返回多个值
1
2
3
4
5
6
7
8
/**
 * @method excuteTasks
 * @return {[results]}  按task顺序组成响应结果对象数组，第一个为task1的响应，第二个为task2的响应，以此类推。。。
 */
function excuteTasks(...tasks) {
  return [result1, reslut2, result3];
}
let [result1, reuslt2, result3] = excuteTasks(task1, task2, task3);

1.2.5 从json中取值

利用解构从json中取值
1
let {id, status = 0} = jsonData;

2 小结

3 引用

  1. 《重新介绍JavaScript》- 介绍JS很好的入门材料