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中使用引用计数的方式管理内存, ...
随机推荐
- JS中的if语句内如何加or使多个条件通过
if(a==1&&b==2){ //do something }//条件是a等于1 并且 b等于2时才能成立,两个条件必须同时满足 if(a==1||b==2){ //do som ...
- HTTP专业术语,你了解多少?
HTTP协议是什么? 超文本传输协议(HTTP)是一种为分布式.协作式的,面向应用层的超媒体信息系统.它是一种通用的.无状态(stateless)的协议,除了应用于超文本传输外,它也可以应用于如名称服 ...
- activiti工作流(传智播客)
1:工作流的概念 说明: 1) 假设:这两张图就是华谊兄弟的请假流程图 2) 图的组成部分: A. 人物:范冰冰 冯小刚 王中军 B. 事件(动作):请假.批准.不批准 工作流(Wo ...
- python SqlServer操作
python连接微软的sql server数据库用的第三方模块叫做pymssql(document:http://www.pymssql.org/en/stable/index.html).在官方文档 ...
- C# winform 托盘控件的使用
从工具栏里,把NotifyIcon控件拖到窗体上,并设置属性: 1.visible 设置默认为FALSE: 2.Image 选一张图片为托盘时显示的图样:比如选奥巴马卡通画像: 3.Text 显示: ...
- MySQL- [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated column 'information_schema.PROFILING.SEQ' which is not functionally dependent on columns in GR
新建的mysql,在查询时报异常信息,虽然有正常执行结果. [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY claus ...
- 基于gtk的imshow:用stb_image读取图像并用gtk显示
在前面一篇,已经能够基于gtk读取图像并显示.更前面的一篇:基于GDI的imshow:使用stb_image读取图像并修正绘制,通过stb_image读取图像并通过GDI显示图像,实现了一个imsho ...
- angular官网实例(综合)
第一部分: (应用的“外壳”) 1.新建项目: ng new mytest 2.进入项目目录,并启动这个应用. cd mytest ng serve --open 3.添加一个标题 打开 app.co ...
- supervisor安装部署文档和管理实例
Supervisord是用Python实现的一款非常实用的进程管理工具,类似于monit(关于monit见我的博客:用monit监控系统关键进程),monit和supervisord的一个比较大的差异 ...
- 在Windows下/Linux下安装jdk版本
到官网https://www.oracle.com/technetwork/java/javase/downloads/index.html选择适合自己的版本, 目前我做测试和开发主要用的是jdk 8 ...