ES6的解构赋值实例详解

1 什么是解构赋值

解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁,同时还比传统的属性访问方法更为清晰。解构会仅提取出一个大对象中的部分成员来单独使用。

如下是传统的:

var y=data[0]
var m=data[1]
var d=data[2]

但在ES6中可以简写为:

var [y,m,d]=date;

2 数组与对象的解构

数组解构赋值语法的一般形式为:

 [ variable1, variable2, ..., variableN ] = array;

这将为variable1到variableN的变量赋予数组中相应元素项的值。如果你想在赋值的同时声明变量,可在赋值语句前加入var、let或const关键字

对象的解构类似,如下所示:

var user={
  uid:1001,
  uname:"dingding",
  set:1,
  signin:function(){
   console.log("登录...");
  },
  signout:function(){
   console.log("注销...");
  },
  signup:function(){
   console.log("注册...");
  }
}
//var {uid:uid,signup:signup}=user;//简写如下
var {uid,signup}=user;
console.log(uid);
signup();

对象解构的一个特殊用法是参数结构,在向函数中传参时,将一个大的对象,打散后,传递给对应的形参变量,有效解决了传参时有多个形参不确定但又要求按顺序传入的需求

//1. 定义形参列表时,就用对象结构定义
function ajax({
 //与顺序无关
 url,
 type,
 data,//不确定
 dataType,//不确定
}){
   console.log(`向${url}发送${type}请求`);
   if(data!=undefined&&type=="get"){
    console.log(`在url结尾拼接参数?${data}`)
   }
   if(data!=undefined&&type=="post"){
    console.log(`xhr.send(${data})`);
   }
   if(dataType=="json"){
    console.log(`JSON.parse(返回结果)`);
   }
}
//2. 调用函数传参时,所有实参值,都要放在一个对象结构中整体传入。
ajax({
  url:"http://localhost:3000/products/getProductsByKwords",
  type:"get",
  data:"kw=macbook i5",
  dataType:"json"
});

使用解构很方便,但它强调对应关系,数组解构:下标对下标,对象解构:属性对属性,但允许元素或者参数为空,例如下面三种写法:

var [y,,]=date;
var [y,,d]=date;
var [,m,]=date;

虽然有不同位置的元素为空,但是依然可以正常执行赋值操作,不过和传统方法一样,为空的在用时会按undefined处理。

总结

以上所述是小编给大家介绍的ES6的解构赋值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(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)交换变量的值 [x, y] = [y, x]; 上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰. (2)从函数返回多个值 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回.有了解构赋值,取出这些值就非常方便. // 返回一个数组 function example() { return [1, 2, 3]; } var [a, b, c] = example(); // 返

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

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

  • 解析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

  • ECMAScript6变量的解构赋值实例详解

    数组的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring) var [a, b, c] = [1, 2, 3]; 这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值. 下面是一些使用嵌套数组进行解构的例子 let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo

  • ES6的解构赋值实例详解

    1 什么是解构赋值 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量.这种赋值语法极度简洁,同时还比传统的属性访问方法更为清晰.解构会仅提取出一个大对象中的部分成员来单独使用. 如下是传统的: var y=data[0] var m=data[1] var d=data[2] 但在ES6中可以简写为: var [y,m,d]=date; 2 数组与对象的解构 数组解构赋值语法的一般形式为:  [ variable1, variable2, ..., variableN

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

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

  • python 实现tar文件压缩解压的实例详解

    python 实现tar文件压缩解压的实例详解 压缩文件: import tarfile import os def tar(fname): t = tarfile.open(fname + ".tar.gz", "w:gz") for root, dir, files in os.walk(fname): print root, dir, files for file in files: fullpath = os.path.join(root, file) t.

  • ZIP4j 压缩与解压的实例详解

    ZIP4j 压缩与解压的实例详解 使用的jar包:zip4j_1.3.2.jar 基本功能: 针对ZIP压缩文件创建.添加.分卷.更新和移除文件 (读写有密码保护的Zip文件) (支持AES 128/256算法加密) (支持标准Zip算法加密) (支持zip64格式) (支持Store(仅打包,默认不压缩,不过可以手动设置大小)和Deflate压缩方法 (针对分块zip文件创建和抽出文件) (支持编码) (进度监控) 压缩方式(3种): static final int COMP_STORE =

  • 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&

  • ES6中的箭头函数实例详解

    本文实例讲述了ES6中的箭头函数.分享给大家供大家参考,具体如下: 语法 我们先来看看箭头函数的语法: ([param] [, param]) => { statements } param => expression param 是参数,根据参数个数不同,分这几种情况: () => { - } // 零个参数用 () 表示: x => { - } // 一个参数可以省略 (): (x, y) => { - } // 多参数不能省略 (): 示例 我们再来看看一些示例,看看在

  • ES6扩展运算符的用途实例详解

    ES6的扩展运算符可以说是非常使用的,在给多参数函数传参,替代Apply,合并数组,和解构配合进行赋值方面提供了很好的便利性. 扩展运算符就是三个点"...",就是将实现了Iterator 接口的对象中的每个元素都一个个的迭代并取出来变成单独的被使用. 看这个例子: console.log(...[3, 4, 5]) 结果: 3 4 5 调用其实就是: console.log(3, 4, 5) 合并数组 可以使用扩展运算符将多个数组进行合并. let arr1 = [1, 2, 3]

  • ES6中Symbol类型用法实例详解

    本文实例讲述了ES6中的Symbol类型.分享给大家供大家参考,具体如下: Symbol是在ES6中新加入的类型. 正如我们所知,JavaScript中有以下几种类型: Undefined ,Null ,Boolean ,Number ,String, Object. 但是上述类型在处理某些情况的时候是远远不够的.下面我们来举一个例子: 假设我们要移动div,也需要在某些情况下判断该div是否处于移动状态,所以我们会想到给div这类的对象设置一个属性. if (element.isMoving)

随机推荐