快速理解ES6的解构赋值?

2023-11-01

function arr(){

         return ['苹果',' 茶','蛋糕']

};

我们将上述数组中的值依次赋值给三个变量,并在后续的程序中输出。

传统的实现方法:

var testArr = arr();
var fruit = testArr[0], tea = testArr[1], cake = testArr[2]

console.log(fruit,tea,cake);

解构赋值实现:

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

let [fruit1,tea1,cake1] = arr();
console.log(fruit1,tea1,cake1);

可以看到解构赋值可以更加高效的从源变量中提取值,这在日常的开发中可以带来体验的提升,熟悉python 小伙伴可能会更加熟悉,这块其实和python中的没啥大的区别。

JavaScript 中,解构赋值的作用类似于 Perl 和 Python 语言中的相似特性。

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

快速理解ES6的解构赋值? 的相关文章

  • JavaScript中的promise

    概述 promise 承诺 是异步编程的一种解决方案 可以替代传统的解决方案 回调函数和事件 ES6统一了用法 并原生提供了Promise对象 promise是异步编程的一种解决方案 什么时候我们会来处理异步事件呢 一种很常见的场景就应该是
  • 学好ES6/ES2015-核心部分(上)

    ECMAScript 6 以下简称ES6 是JavaScript语言的下一代标准 因为当前版本的ES6是在2015年发布的 所以又称ECMAScript 2015 也就是说 ES6就是ES2015 虽然目前并不是所有浏览器都能兼容ES6全部
  • APP内嵌h5页面在android低版本出现白屏问题(vue项目)

    前段时间在处理一个vue项目时 在vivo和华为的android5 0系统出现白屏 没有任何报错信息 之后特地买了两台真机进行测试 经过分段调试 一步步排查 最后发现是这段代码出错 到底什么问题 对比一下这段代码 很明显 参数默认值的问题
  • git提交代码报 vue-cli-service lint found some errors. Please fix them and try committing again

    原因 问过度娘在提交代码的时候 它会在提交代码前运行做代码风格检查 如果代码不符合相应规则 则报错 解决 直接把pre commit文件删除 进入项目 git文件夹 hooks 删除 如何你的项目文件夹下没有找到 git文件夹 检查一下看看
  • JS中的delete

    delete 操作符用于删除对象的某个属性 如果没有指向这个属性的引用 那它最终会被释放 语法 delete expression expression 的计算结果应该是某个属性的引用 例如 delete object property d
  • 如何将类数组转换为真正的数组

    开发过程中 有很多时候获取到的是类似数组的对象 比如元素的集合 elementcollection nodeList 以及今天开发时发现classList也是类数组 有时我们需要类数组去调用数组的方法 怎么办 一 遍历类数组 依次将元素放入
  • 小程序web-view 跳转到h5 监听返回按钮

    1 跳转到h5之后 先给页面堆栈 然后就可以监听到返回事件了
  • 【面试题】说一下promise的理解

    一 什么是Promise ES6 异步编程的一种解决方案 比传统的方案 回调函数和事件 更加的合理和强大 大家都知道传统解决异步编程用的是回调函数套回调函数 简称回调地域 以前用JQuery的朋友应该是相当熟悉了 维护起来很难搞 回调地域
  • ES6的理解

    1 ES6是什么 用来做什么 ES6 全称 ECMAScript 6 0 是 JavaScript 的下一个版本标准 2015 06 发版 它的目标 是使得 JavaScript 语言可以用来编写复杂的大型应用程序 成为企业级开发语言 ES
  • Map 转化为数组

    含义 Map 数据结构类似于对象 也是键值对的集合 但是键的范围不限于字符串 各种类型的值 包括对象 都可以当做键 Map 结构提供了 值 值 的对应 是更完善的 Hash 结构实现 Map 可以作为构造函数 新建 Map new Map
  • ES6非空判断

    es6 Null传导运算符 const firstName message body user firstName default 运算符相当于一种短路机制 只要不满足条件 就不再往下执行 Null 判断运算符 属性的值为null unde
  • Element ui中menu组件(el-menu/el-menu-item/el-submenu/template) 层级结构和用法

    此篇文章写下的时间是2020年 所以如今Element UI都更新了不知道多少版了 肯定会有些许变化 请勿完全照搬照抄 虽然可能这部分代码没什么大的变动 但还是要以官方文档为准 此文仅仅是借鉴 理解具体思路 然后再按照官方的例子来应用到自己
  • ES6迭代器、Set、Map集合和async异步函数

    目录 迭代器 Iterator 的作用 Iterator 的遍历过程 Set Map集合 map和对象区别 async异步函数 迭代器 迭代器 Iterator 就是这样一种机制 它是一种接口 为各种不同的数据结构提供统一的访问机制 任何数
  • 深入理解ES6箭头函数中的this

    简要介绍 箭头函数中的this 指向与一般function定义的函数不同 比较容易绕晕 箭头函数this的定义 箭头函数中的this是在定义函数的时候绑定 而不是在执行函数的时候绑定 1 何为定义时绑定 我们来看下面这个例子 1 var x
  • js 处理树形结构数据

    js 处理树形结构数据 数据 let data id 1 address 安徽 parent id 0 id 2 address 江苏 parent id 0 id 3 address 合肥 parent id 1 id 4 address
  • VUEX各个模块的封装以及Router封装

    一 各个模块的作用 state 用来数据共享数据存储 mutation 用来注册改变数据状态 同步 getters 用来对共享数据进行过滤并计数操作 action 解决异步改变共享数据 异步 二 创建文件 actions js getter
  • 138-139-----JS基础-----二级菜单-完成基本功能、过渡效果

    一 代码 这两节的代码还是有点的难度的 有这样的需求时 按照类似的接口去做即可 不一定要和他的需求完全一样 因为我看他的需求好像点开另一个 已经打开的选项会被自动关闭 这样感觉不好 因为可能用户有时想要看到所有的选项的要求
  • 【JS 构造

    个人格言 时间是亳不留情的 它真使人在自己制造的镜子里照见自己的真相 Git专栏 Git篇 JavaScript专栏 js实用技巧篇 该专栏持续更新中 目的是给大家分享一些常用实用技巧 同时巩固自己的基础 共同进步 欢迎前来交流 你的一键三
  • JavaScript 实现html导出为PDF文件

    相信各位前端工程狮们在一些报表项目 管理系统项目中都会遇到在这样的需求 申请报 表格 简历等等图文信息有导出为PDF文件 下面是记录我在项目中完成该需求的代码dome 发布出来也是希望对大家有些帮助 1 整体思路 将HTML元素打印或导出为
  • VUE实践优化:轮询机制与代码结构升级

    前言 我们之前探讨过 对于包含处理状态的表格数据 我们可以通过轮询的方式进行处理 轮询更新进度条 JavaScript中的定时器和异步编程技巧 然而 当我们离开页面时 定时器仍会继续触发请求 这会造成资源的浪费 因为返回的数据并没有被渲染出

随机推荐