文档章节

es6之解构赋值巧用

秋季长青
 秋季长青
发布于 07/18 18:31
字数 518
阅读 7
收藏 0

ES6 允许按照一定模式,从数组、对象等中提取值,对变量进行赋值,这被称为解构赋值。

如何进行解构赋值我这里就不赘述,本篇文章主要是将解构赋值的巧妙使用之处。

1、交互变量的值

常用交互变量两个方法是引入第三个变量 和 异或(^)。

这里可以使用解构赋值的方式交换变量的值:

let a = 10;
let b = 29;

[a, b] = [b, a]

这样,最后结果是 a = 29, b = 10 。

2、从函数中返回多个值

可以返回一个数组或者对象,然后对其进行解构赋值。

// 返回一个数组

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

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

3、函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来,有序的可以使用数组,无序的可以使用对象。

// 参数是一组有序的值,使用数组

function f([a, b, c]){ 
  // ...
}
f([1, 2, 3]);

// 参数是一组无序的值,使用对象

function f({a, b, c}}{ 
  // ... 
}
f({c: 3, b: 2, x:1});

我觉得,第二种使用对象的方式在开发过程中使用意义非常。

4、函数参数的默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};

配合上一个内容,在定义函数时可以很容易的配置默认值并通过能够很容易地指定参数。

5、模块化开发中模块按需加载

const { SourceMapConsumer, SourceNode } = require("source-map");

 

如果大家还有更巧的用处,可以戳我哟

 

 

本文转载自:http://es6.ruanyifeng.com/#docs/destructuring

共有 人打赏支持
秋季长青
粉丝 30
博文 53
码字总数 42285
作品 0
南京
程序员
【探秘ES6】系列专栏(六):解构赋值

ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该...

一配
2015/11/08
0
0
谈谈神秘的ES6——(四)解构赋值【数组篇】

今天,我们来讲一个新的概念,叫做解构赋值。那么在ES6中,什么是解构赋值呢?我们先来给它下个定义。 在ES6中,允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(D...

JandenMa
08/09
0
0
2017.11.21-学习笔记:篇二之es6解构赋值

变量解构 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(destructuring)。 本文简单介绍解构赋值的基本用法 1.数组的解构赋值 es5 中给多个变量赋值方式: ...

演员小新
2017/11/21
0
0
ES6新增核心语法一览

let 和const let不可以声明前置 let不可以重复声明 存在块级作用域 这样就可以替换掉原来IIFE的写法 const 声明的常量不可以改变 适用于let的也同样适用于const 解构赋值 数组的解构(用来给...

Monettt
2017/11/23
0
0
ES6(二)--变量的解构赋值

定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 数组的解构赋值 基本要领:结构一致,左边变量等于“=”右边的值 完全匹配 部分匹配 不...

一书and一世界
2017/01/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

HTTPS is easy

HTTPS is easy https://www.troyhunt.com/https-is-easy/ HTTPS is easy! In fact, it's so easy I decided to create 4 short videos around 5 minutes each to show people how to enable ......

openthings
18分钟前
0
0
bugList 2

用户端: 1. 上传文件时,当选择:彩色-A3-双面时,第二个图片有bug 应改为 和第一个图片的类型相同 2. 确认打印时,三个下拉选目前有bug 应改为:根据后台配置的商家,group by计算出不同城...

勇恒
21分钟前
2
0
keras cnn 网咯 mnist 分类

搭建貌似比tf是简单很多。。。。。 from keras.datasets import mnistfrom keras.utils import np_utilsfrom keras.models import Sequentialfrom keras.layers import Dense, Activat......

阿豪boy
24分钟前
0
0
解决 /var/run/nginx.pid failed

nginx: [error] open() "/var/run/nginx.pid" failed (2: No such file or directory) sudo nginx -c /etc/nginx/nginx.conf nginx -s reload...

驛路梨花醉美
25分钟前
0
0
nginx负载均衡-ssl原理-生成ssl密钥对-nginx配置ssl

nginx负载均衡: 1.创建配置文件 vim /usr/local/nginx/conf/vhost/load.conf #添加以下内容: upstream qq_com #名字自定义,借助此模块定义多个IP,后面...

ZHENG-JY
26分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部