ES6 解构对象和数组
1.解构对象
let saveFiled = {
extension: "jpg",
name:"girl",
size:14040
};
ES5
function fileSammary(file){
return `${file.name}.${file.extension}的总大小是${file.size}`;
}
console.log(fileSammary(saveFiled));
ES6
function fileSammary({name,extension,size}){
return `${name}.${extension}的总大小是${size}`;
}
console.log(fileSammary(saveFiled));
2.解构数组
1.返回数组第一位数值
const names = ["Henry","Bucky","Emily"]; ES5
console.log(names[0]) ES6
const [name1,name2,name3] = names;
console.log(name1) 2.返回数组个数
ES5
console.log(names .length) ES6
const { length } = names
console.log(length) 3.结合展开运算符
const [name,...rest] = names;
console.log(name, rest); 4.对象数组
const people = [
{name:"Henry",age:20},
{name:"Bucky",age:25},
{name:"Emily",age:30}
]; ES5
var age = people[0].age;
console.log(age); ES6
const [age] = people;
console.log(age) //{name:"Henry",age:20}
const [{age}] = people;
console.log(age) // 20 5. 使用场景 将数组转化为对象
const points = [
[4, 5],
[10, 1],
[0, 40]
]
// 期望数据格式
[
{x:4,y:5},
{x:10,y:1},
{x:0,y:40}
] ES6
let newPoints = points.map(pair => {
// const x = pair[0];
// const y = pair[1];
const [x,y] = pair;
return {x,y}
}) let newPoints = points.map(([x, y]) => {
// const x = pair[0];
// const y = pair[1];
// const [x,y] = pair;
return { x, y }
}) console.log(newPoints)
ES6 解构对象和数组的更多相关文章
- ES6 - 解构(数组和对象)
解构对象 /** * 解构:快捷,方便 * * 对象解构 */ { var expense = { type: "es6", amount: "45" }; / ...
- ES6解构赋值
前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 ...
- es6 解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 关于给变量赋值,传统的变量赋值是这样的: var arr = [1,2,3];//把数组的值 ...
- 初识ES6 解构
1.数组的解构 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 例子: let [a, b, c] = [1, 2, 3]; console.log(a);//1cons ...
- 简单看看es6解构赋值
哎,我真的是太难了,今天就被这个解构赋值(也可以叫做析构,貌似析构是在c++中的,所以我这里叫做解构赋值吧)弄的我很烦,本来以为很容易的,结果还是弄了好久...就总结一下解构吧! 1.解构的基本使用 ...
- ES6 解构 destructuring
解构的作用:简化书写长度,提升开发效率. 解构对象 在开发中我们常用到使用ajax请求数据,并且把数据渲染到页面上.可能这个数据返回的对象或数组.例如返回一个obj{name:'zwq',age:18 ...
- ES6解构赋值常见用法
解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b 问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量 ...
- ES6 解构
{ "code": 200, "msg": "success", "data": { "total" ...
- Perl面向对象(3):解构——对象销毁
本系列: Perl面向对象(1):从代码复用开始 Perl面向对象(2):对象 Perl面向对象(3):解构--对象销毁 第3篇依赖于第2篇,第2篇依赖于1篇. perl中使用引用计数的方式管理内存, ...
随机推荐
- 【转】java 环境变量:path与classpath区别
path指示java命令的路径,像javac.java.javaw等: classpath是javac编译器的一个环境变量,它的作用与import.package关键字有关,当你写下improt ja ...
- http请求的几种content-type
1. 2.二进制文件 3.form-data 数据:a=1 总结: 1.对于我自己的写的服务来说,只要是raw,接收到的都是二进制字符: 2.如果是urlencode,接收到的是拼接的字符串(和使用p ...
- Jenkins系列之-—DevOps高效插件推荐【转】
基于Jenkins及其插件生态实现自己的持续交付与DevOps平台. jenkins 插件官网 Blue Ocean Jenkins2.7以后可安装,是Jenkins的一种新视图,能够通过图形化的界面 ...
- Python学习日记(三十五) Mysql数据库篇 三
使用Navicate 创建一个连接去使用Mysql的数据库,连接名可以取任意字符但是要有意义 新增一个数据库 填写新数据库名,设置它的字符集和排序规则 新建一个表 增加表中的信息 点击保存再去输入表名 ...
- kindedtor 数据传输问题
<script src="/static/kindeditor/kindeditor-all.js"></script><script src=&qu ...
- POI IndexedColors 编码 与 颜色 对照
https://www.cnblogs.com/yanjie-java/p/8329631.html 1 package com.java.connect.poi; 2 3 import java.i ...
- 有意义的单词分割——经典dfs题目
680. 分割字符串 中文 English 给一个字符串,你可以选择在一个字符或两个相邻字符之后拆分字符串,使字符串由仅一个字符或两个字符组成,输出所有可能的结果 样例 样例1 输入: "1 ...
- python学习类与方法的调用规则
1类方法的特点是类方法不属于任何该类的对象,只属于类本身 2类的静态方法类似于全局函数,因为静态方法既没有实例方法的self参数也没有类方法的cls参数,谁都可以调用 3.实例方法只属于实例,是实例化 ...
- Jmeter连接mysql,如何用delete、update、insert真正删除、更改、插入数据库里的数据;
1.如下图,当插入数据的时候如图对应填写,查询数据的时候上面插入的那条数据就会显示,但是如果不执行下图的提交数据:到数据库里查的时候,插入的这条数据实际上并没有插入成功: . 结果:如果没有提交数据, ...
- C#操作域用户ADHelper
在C#中操作域用户,在项目中写的帮助类: using System; using System.Collections.Generic; using System.DirectoryServices; ...