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 解构对象和数组的更多相关文章

  1. ES6 - 解构(数组和对象)

    解构对象 /** * 解构:快捷,方便 * * 对象解构 */ { var expense = { type: "es6", amount: "45" }; / ...

  2. ES6解构赋值

    前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 ...

  3. es6 解构赋值

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 关于给变量赋值,传统的变量赋值是这样的: var arr = [1,2,3];//把数组的值 ...

  4. 初识ES6 解构

    1.数组的解构 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 例子: let [a, b, c] = [1, 2, 3]; console.log(a);//1cons ...

  5. 简单看看es6解构赋值

    哎,我真的是太难了,今天就被这个解构赋值(也可以叫做析构,貌似析构是在c++中的,所以我这里叫做解构赋值吧)弄的我很烦,本来以为很容易的,结果还是弄了好久...就总结一下解构吧! 1.解构的基本使用 ...

  6. ES6 解构 destructuring

    解构的作用:简化书写长度,提升开发效率. 解构对象 在开发中我们常用到使用ajax请求数据,并且把数据渲染到页面上.可能这个数据返回的对象或数组.例如返回一个obj{name:'zwq',age:18 ...

  7. ES6解构赋值常见用法

    解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b 问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量 ...

  8. ES6 解构

    { "code": 200, "msg": "success", "data": { "total" ...

  9. Perl面向对象(3):解构——对象销毁

    本系列: Perl面向对象(1):从代码复用开始 Perl面向对象(2):对象 Perl面向对象(3):解构--对象销毁 第3篇依赖于第2篇,第2篇依赖于1篇. perl中使用引用计数的方式管理内存, ...

随机推荐

  1. nginx反向代理、缓存及压缩配置实战

    一.反向代理配置 (原文链接:http://www.studyshare.cn/blog/details/1155/0  ) 准备:两个项目分别使用端口8080,8081,只有一个备案域名,配置如下 ...

  2. EditPlus中文版 安装教程

    EditPlus中文版安装教程 1.下载软件压缩包,解压即可.不需要安装,解压后打开“EditPlus中文版”文件夹(软件我会打包好,在文中的最低端找到即可下载:若链接失效了,请告知我一声,我会重新更 ...

  3. Docker 安装 MySQL 学习笔记

    https://www.runoob.com/docker/docker-install-mysql.html #docker search mysql #docker pull mysql:5.6 ...

  4. Content Security Policy (CSP)内容安全策略

    CSP简介 Content Security Policy(CSP),内容(网页)安全策略,为了缓解潜在的跨站脚本问题(XSS攻击),浏览器的扩展程序系统引入了内容安全策略(CSP)这个概念. CSP ...

  5. selenium浏览器自动化测试框架文档(修正版)

    写在最前面:目前自动化测试并不属于新鲜的事物,或者说自动化测试的各种方法论已经层出不穷,但是,能够在项目中持之以恒的实践自动化测试的团队,却依旧不是非常多.有的团队知道怎么做,做的还不够好:有的团队还 ...

  6. vue 异步渲染

    <!DOCTYPE html> <html> <head> <title> hello world vue </title> <met ...

  7. hexo更改主题

    github+hexo搭建好个人博客之后,一般都挑选自己喜欢的主题.在这里为大家介绍一下比如何挑选主题以及如何修改主题. 主题选择: 1:知乎推荐 2:hexo官方 本地目录中打开git bash: ...

  8. Swiper4的基本使用

    基本介绍: 中文文档地址:https://www.swiper.com.cn/ 它是一个开源,免费,强大的触摸滑动插件. 它是用纯Javascript打造的滑动特效插件,既可用于PC端,也可用于移动端 ...

  9. AIX安装单实例11gR2 GRID+DB

    AIX安装单实例11gR2 GRID+DB   一.1  BLOG文档结构图       一.2  前言部分   一.2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以 ...

  10. vmstat 内存信息

    vmstat - Report virtual memory statistics 报告虚拟内存统计信息. 展示的信息可以用做系统资源监控. 语法格式: vmstat [options] [delay ...