ES6解构赋值的功能与用途实例分析

本文实例讲述了ES6解构赋值的功能与用途。分享给大家供大家参考，具体如下：

（1）交换变量的值

[x, y] = [y, x];

上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。

（2）从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

// 返回一个数组
function example() {
 return [1, 2, 3];
}
var [a, b, c] = example();
// 返回一个对象
function example() {
 return {
  foo: 1,
  bar: 2
 };
}
var { foo, bar } = example();

（3）函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

（4）提取JSON数据

解构赋值对提取JSON对象中的数据，尤其有用。

var jsonData = {
 id: 42,
 status: "OK",
 data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]

上面代码可以快速提取JSON数据的值。

（5）函数参数的默认值

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

指定参数的默认值，就避免了在函数体内部再写

var foo = config.foo || 'default foo';

这样的语句。

（6）遍历Map结构

任何部署了Iterator接口的对象，都可以用for…of循环遍历。Map结构原生支持Iterator接口，配合变量的解构赋值，获取键名和键值就非常方便。

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
 console.log(key + " is " + value);
}
// first is hello
// second is world

如果只想获取键名，或者只想获取键值，可以写成下面这样。

// 获取键名
for (let [key] of map) {
 // ...
}
// 获取键值
for (let [,value] of map) {
 // ...
}

（7）输入模块的指定方法

加载模块时，往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。

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

更多相关内容可查看本站专题：《ECMAScript6(ES6)入门教程》、《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《javascript面向对象入门教程》

希望本文所述对大家基于ECMAScript的程序设计有所帮助。

赞 (0)

相关推荐

  • ES6解构赋值实例详解

    本文实例讲述了ES6解构赋值.分享给大家供大家参考,具体如下: 基本用法 let [x, y, ...z] = ['a'] //"a", undefined, [] 1.等号右边如果不是数组,将会报错(不是可遍历结构) 2.解构赋值 var, let, const命令声明均适用 3.set结构也可解构赋值(具有Iterator接口,可采用数组形式结构赋值) set解构:任何类型的单个值的集合 let [x, y, z] = new Set(["a", "b

  • ES6新特性四：变量的解构赋值实例

    本文实例讲述了ES6新特性之变量的解构赋值.分享给大家供大家参考,具体如下: 1. 数组的解构赋值 //① 可以从数组中提取值,按照对应位置,对变量赋值 var [a, b] = [1, 2]; //a = 1;b = 2 //② 下面是一些使用嵌套数组进行解构 var [d, [[c], f]] = [1, [[2], 3]]; var [,,third] = ["foo", "bar", "baz"];//third = "baz&

  • 解析JavaScript的ES6版本中的解构赋值

    什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量.这个语法非常简洁,而且比传统的属性访问更加清晰. 在不使用解构赋值的情况下,访问数组的前三项: var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; var first = someArray[0]; var second = someArray[1]; var third = someArray

  • es6学习之解构时应该注意的点

    前言 本文主要给大家介绍了关于在es6解构时需要注意的一些事项,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 如果要将一个已经声明的变量用于解构赋值,必须非常小心. // 错误的写法 let x; {x} = {x: 1}; // SyntaxError: syntax error 上面代码的写法会报错,因为 JavaScript 引擎会将{x}理解成一个代码块,从而发生语法错误.只有不将大括号写在行首,避免 JavaScript 将其解释为代码块,才能解决这个问题. //

  • 深入浅出讲解ES6的解构

    什么是解构? 解构与构造数据截然相反. 例如,它不是构造一个新的对象或数组,而是逐个拆分现有的对象或数组,来提取你所需要的数据. ES6使用了一种新模式来匹配你想要提取的数值, 解构赋值就是采用了这种模式. 该模式会映射出你正在解构的数据结构,只有那些与该模式相匹配的数据,才会被提取出来. 被解构的数据项位于赋值运算符 = 的右侧,可以是任何数组和对象的组合,允许随意嵌套.用于给这些数据赋值的变量个数不限. 数组解构 数组解构 使用一个数组作为一个数据项,你可以根据 数组模式 (用于从数组中匹配

  • ES6学习之变量的解构赋值

    变量的解构赋值 ES6中允许按照一定模式,从数组和对象中提取,对变量进行赋值. 数组的解构赋值 var [a,b,c] = [1,2,3]; a // 1; b // 2; c // 3; 上面的代码标示可以从数组中提取值,按照位置的对应关系对变量进行赋值. 本质上,这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值. let [foo,[[bar],baz]] = [1,[[2],3]]; foo //1; bar //2; baz //3; let [,

  • ES6新特性之解构、参数、模块和记号用法示例

    本文实例讲述了ES6新特性之解构.参数.模块和记号用法.分享给大家供大家参考,具体如下: 一.解构 解构提供了一个方便的地从对象或数组中提取数据的方法,请看下面的例子: //ES6 let [x,y]=[1,2];//x=1,y=2 //ES5 var arr=[1,2]; var x=arr[0]; var y=arr[1]; 使用这个语法,可以一次性给多个变量赋值.一个很好的附加用处是可以很简单的交换变量值: let x=1,y=2; [x,y]=[y,x];x=2 y=1 解构也可以用于对

  • es6中的解构赋值、扩展运算符和rest参数使用详解

    前言 本文主要给大家介绍了关于es6中解构赋值.扩展运算符和rest参数使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. es6中较为常用的书写风格 为了书写的方便,es6中提出了很多比较友好的书写方式,其中最为常见的属于以下几个: 字符串模板 `abcdef${test}` 解构赋值 let [a, b, c] = [1, 2, 3] 扩展运算符 rest参数 ... 本文希望能够学习其中的主要的用法,方便书写和简洁性. 字符串模板 在以前的日子,我们经常捡到各

  • ES6解构赋值的功能与用途实例分析

    本文实例讲述了ES6解构赋值的功能与用途.分享给大家供大家参考,具体如下: (1)交换变量的值 [x, y] = [y, x]; 上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰. (2)从函数返回多个值 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回.有了解构赋值,取出这些值就非常方便. // 返回一个数组 function example() { return [1, 2, 3]; } var [a, b, c] = example(); // 返

  • ES6 解构赋值的原理及运用

    ES6 解构赋值的原理及运用

    数组的解构赋值 let [a, b, c] = [1, 2, 3] 同时定义多个变量,a匹配1.b匹配2.c匹配3 解构赋值允许指定默认值,即左边变量指定默认值,右边没有对应的值,会优先输出默认值. let [x, y = 'b'] = ['a'] // x = 'a', y = 'b' x匹配字符a,y默认值为字符b,若右边没有对应的,默认输出字符b. 对象的解构赋值 解构不仅可以用于数组,还可以用于对象,对象的解构与数组有一个重要的不同,数组的元素是按照次序排列的,变量的取值由它的位置决定的

  • es6中Promise 对象基本功能与用法实例分析

    本文实例讲述了es6中Promise 对象基本功能与用法.分享给大家供大家参考,具体如下: Promise 是异步编程的一种解决方案,解决--回调函数和事件 ES6 规定,Promise对象是一个构造函数,用来生成Promise实例. 下面代码创造了一个Promise实例. 基本用法 ES6 规定,Promise对象是一个构造函数,用来生成Promise实例. const promise = new Promise(function(resolve, reject) { //resolve (d

  • ES6入门教程之变量的解构赋值详解

    前言 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值,下面话不多说了,来一起看看详细的介绍吧 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为结构. 在ES6之前想要为变量赋值,只能指定其值,如下: let a = 1; let b = 2 而在ES6中可以写成这样,如下: let [a,b] = [1,

  • es6基础学习之解构赋值

    前言 es6的语法已经出了很长的时间了,在使用上也可以通过babel这类的编译工具转译为浏览器可以识别的es5的语法,但是依旧有很多开发在写代码的时候,依旧没有用es6的语法,而是习惯使用老的语法,这篇文章主要会介绍解构赋值基本用法以及在实际使用场景中相比es5语法的优势,让大家从根本上了解es6语法的优势 下面话不多说了,来一起看看详细的介绍吧 基本用法 数组解构 让我们一起先来看数组解构的基本用法: let [a, b, c] = [1, 2, 3] // a=1, b=2, c=3 let

  • 详解JS ES6变量的解构赋值

    1.什么是解构? ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.它在语法上比ES5所提供的更加简洁.紧凑.清晰.它不仅能减少你的代码量,还能从根本上改变你的编码方式. 2.数组解构 以前,为变量赋值,我们只能直接指定值,比如 let a = 1; let b = 2; let c = 3; 现在可以用数组解构的方式来进行赋值 let [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 1, 2, 3 这是数组解构最基本类型

  • Javascript中的解构赋值语法详解

    前言 首先在 ES6中引入的"解构赋值语法"允许把数组和对象中的值插入到不同的变量中.虽然看上去可能很难,但实际上很容易学习和使用. 解构赋值语法是一种 JS表达式.ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量. 在ES6解构赋值出现之前,我们需要为变量赋值的时候,只能直接指定值. 比如: let a = 1; let b = 2; let c = 3; let d = 4; let e

  • ES6 对象的新功能与解构赋值介绍

    ES6 通过字面量语法扩展.新增方法.改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程. 一.字面量语法扩展 在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始值可以简写,并可以使用可计算的属性名称.对象方法的定义消除了冒号和 function 关键字,示例如下: // Demo1 var value = "name", age = 18 var person = { age, // age: age ['my' + value]: 'Jenny

随机推荐