ES6中的解构赋值(数组,对象,嵌套,默认值)
解构赋值
通过解构赋值,可以快速从对象或者数组中取出属性或者数值。
解构赋值
可以通过定位到数组或者对象的某一个位置,将值直接赋给一个或多个变量。
const arr = ['dasha', 'ersha', 'gangdan']
let [a, b, c] = arr //a='dasha' b='ersha' c='gangdan'
//假如需要交换ab的值 只需要
[a, b] = [b, a]
解构赋值嵌套
复杂的对象或者数组也可以使用这种方法。
const arr = [1, [2,3,4], 5]
let [a, [b,,d], c] = arr console.log(a) // 1
console.log(b) // 2
console.log(d) // 4
解构赋值的默认值
给变量先设置好默认值,当数组或者对象中无法找到匹配的值,则将默认值赋给变量。
let [a=1] = [100] // a=100
let [b=1] = [] // b=1
解构赋值用在对象上时候,需要用键的方式
const obj = {
name:'shabi',
age:12,
}
let{age} = obj // 为了防止age在上面被let定义过了,可以将age改名为ag
let{age:ag, err="定义err默认值即使对象中没有这个属性,也可以获取到这个默认值字符串"} = obj
console.log(err)// '定义err默认值即使对象中没有这个属性,也可以获取到这个默认值字符串'
解析一个从函数返回的数组
获取返回值进行解构赋值,更加方便
function test(){
return [1,2,3]
}
let [x,y] = test()
console.log(x) //x = 1
console.log(y) //y = 2
rest写法:将剩下的所有值赋值给一个变量
这种写法只能适用于用在最后一位,无法用在开头或者中间,否则会报错。
let [a,...rest] = [1, 2, 3];
console.log(a); // 1
console.log(rest); // [2, 3]
ES6中的解构赋值(数组,对象,嵌套,默认值)的更多相关文章
- 【JS】325- 深度理解ES6中的解构赋值
点击上方"前端自习课"关注,学习起来~ 对象和数组时 Javascript 中最常用的两种数据结构,由于 JSON 数据格式的普及,二者已经成为 Javascript 语言中特别重 ...
- ES6中的解构赋值
在解释什么是解构赋值前,我们先来看一下, ES5 中对变量的声明和赋值. var str = 'hello word'; 左边一个变量名,右边可以是字符串,数组或对象. ES6 中增加了一种更为便捷的 ...
- ES6学习-5 解构赋值(2)对象的解构赋值
啥也不说,先举个栗子: 1 let { myname, myage } = { myage: 18, myname: "郭郭" }; 2 console.log(myname) / ...
- ES6 变量的解构赋值
数组的解构赋值 var [a,b,c] = [1,2,3]; 左边是变量,右边是值,根据数据结构一一对应 只要等号两边的模式相同,左边的变量就会被赋予右边对应的值,必须模式相同 如果等号 ...
- (2)ES6解构赋值-数组篇
1.解构赋值-数组篇 //Destrcturing(解构) //ES5 /* var a = 1; var b = 2; var c = 3; */ //ES6 var [a,b,c] = [1,2, ...
- ES6里的解构赋值
我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程. 一.引入背景 在ES5中,开发者们为 ...
- ES2015中的解构赋值
ES2015中允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,被称为”解构(Destructering)“. 以前,为变量赋值,只能指定值. /** * 以前,为变量赋值,只能直接指定值 * ...
- ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator
在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...
- 【ES6 】ES6 解构赋值--数组解构赋值
定义 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 数组的解构赋值 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ...
- ES6:使用解构赋值仅用一行定义多个相同的数组,且指向堆不同(解构赋值)
在开发过程中我们经常要用到一些临时变量对数据进行一些特殊处理,由于良好的编码习惯要在临时变量用完后释放内存,所以当临时变量数量较多时,整体代码会变得冗余. let a = [] let b = [] ...
随机推荐
- 用python判断三角形的形状
# coding:utf-8 class point: def __init__(self,x,y,name): self.x = x self.y = y self.name = name '''两 ...
- 项目实训DAY 11-12 学习
在神经网络可视化工具中,选择了三种,NNSVG,PlotNeuralNet,GraphCore 前两者应该比较好实现,例子都跑通了,对于定制的代码读起来也不难.PNN的示例图如下 最后一个虽然有实例图 ...
- curl下载远程图片到服务器
<?php //curl下载远程图片到服务器 方法 function download($url, $path = 'images/'){ $ch = curl_init(); $names = ...
- python中列表,字典,字符串常用操作
1. 列表操作 分类 关键字 / 函数 / 方法 说明 增加 列表.append(值) 在末尾追加值 列表.insert(索引, 值) 在指定位置插入值, 超过索引会追加值 列表.extend ...
- Ansible AWX
Ansible简介 ansible是一个非常简单的it自动化平台,使得程序和系统更易于部署.ansible本质是一个进行封装的shell,优点在于它是去中心化的工具,可以直接通过ssh远程管理主机,实 ...
- P1296 奶牛的耳语
P1296 奶牛的耳语 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 本题核心思路: 1.读入后要排序以达到剪枝的目的 2.模拟,遇到不能再交流就转入下一头牛,否则计数器加一 3. ...
- laravel5.5 数据查询记录
laravel5.5版本数据查询 基于 prettus/l5-repository 插件 首先安装好 prettus/l5-repository插件 配置相关参数 1 根据条件查询数据总数 publi ...
- ubuntu安装xface
Gnome.KDE.XFACE桌面环境安装和卸载 出自Ubuntu中文 安装桌面环境 (一)在终端中运行安装: 1.安装XFACE: sudo apt-get install xubuntu-desk ...
- 题解,洛谷P3435
根据题意,分析如右图 显然,对于每个前缀,有这样的性质A==B==C,所以,周期最长则a最短,即求该字符串的最短公共前后缀.通过kmp算法中nex数组的迭代,很容易求得最短前后缀. for(int i ...
- IDEA Maven 项目报错 java: 程序包org.springframework.beans.factory.annotation不存在
idea 刚把项目导进去的时候,点击运行,import的好多包都报红,所有的文件的Maven依赖包都没导入进去. 但只是第一个报错是: java: 程序包org.springframework.bea ...