ES6下javascript解构赋值常见用法总结

Javascript解构赋值出现的契机：

    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    let a = obj.a
    let b = obj.b

Javascript解构赋值问题核心：

每次取值既要确定对象属性名，还得重新定义一个变量占用多一行，代码行数和重复的声明a，使得代码不够简洁，能否通过左边变量名，匹配到右边的属性名从而取得对应的值，ES6解构语法核心就基于这样的模式匹配思想

上面的问题解构方案:

    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    let {a, b} = obj
    // a=1 b=2

很明显看到，我们无需在右侧显式声明取值属性名，完全依据右边结构进行对应取值，非常优雅

Javascript解构赋值应用场景：

1.对象声明解构

    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    let {a, b} = obj
    // a=1 b=2

2.对象赋值解构

    let a, b
    let obj = {
        a: 1,
        b: 2
    }
    // 取值
    ({a, b} = obj)
    // 更常见的场景是变量c d被声明到全局,这种情况在vue很常见，数据被提前声明到data选项，数据访问一般都是this.xxxdata,此时就很有用了
    ({a:c, b:d} = obj)

3.变量交换

    [x,y] = [y,x]

4.数组解构

   let  [first,] = arr//获取
   let [first, ...rest] = arr//获取第一个，以及剩余参数

5.函数对象实参解构

    function buildAnimal({accessory = "", animal = "cat", color = 'rainbow', hairType = 'straight'} = {})
    {...}

更多关于ES6下的Javascript使用小技巧请查看下面的相关链接

赞 (0)

相关推荐

  • Javascript 解构赋值详情

    Javascript 解构赋值详情

    目录 1.数组解构 2.对象解构 3.不完全解构 4.用解构赋值实现变量交换 1.数组解构 let [a, b, c] = [1,2,3] console.log(a, b, c) // 1 2 3 除了数组,任何可迭代的对象都支持被解构, 例如字符串 let [first, second] = "he" console.log(first, second) // h e 2.对象解构 赋值右侧是对象,左侧是包含在花括号内逗号隔开的变量名 let {a, b, c} = {a:1, b

  • 关于JS解构的5种有趣用法

    前言 原文标题:5 Interesting Uses of JavaScript Destructuring 原文链接:dmitripavlutin.com/5-interesti- 定期回顾我写的JS代码,我发现解构运算无处不在. 获取对象的属性和访问数组内容是都是很常用的操作.而解构运算使得这些操作变得非常简单明了. 在这篇文章中,我将会讲解JS解构不同于常见用法的五种使用技巧. 1. 交换变量 常见的交互两个变量值的方法都需要借助一个额外的变量,看一个简单的例子: let a = 1; l

  • JavaScript ES6解构运算符的理解和运用

    目录 前言 解构符号的作用 使用方法 解构赋值的应用 浅谈应用 提取json数据 可扩展运算符... 交换变量值 总结 前言 最近一直在学JavaScript,看到了ES6中的解构符号,觉得这个给我们的代码简洁性带来了一个飞跃式的提升,而且它已经运用在了企业开发中,假如未来你工作中,别人在用,你却读不懂别人的代码,这造成的影响还是很大的.因此,好好学习一下吧. 你可以不用,但是你不能不懂✔ JavaScript ES6中,有很多特性都是为了简化代码,方便程序员去书写的.解构运算符就是其中很好的特

  • JavaScript解构赋值详解

    目录 概念 数组解构 声明分别赋值 解构默认值 交换变量值 解构函数返回的数组 忽略返回值(或跳过某一项) 赋值数组剩余值给一个变量 嵌套数组解构 字符串解构 对象解构 基础对象解构 赋值给新变量名 解构默认值 赋值给新对象名的同时提供默认值 同时使用数组和对象解构 不完全解构 赋值剩余值给一个对象 嵌套对象解构(可忽略解构) 注意事项 小心使用已声明变量进行解构 函数参数的解构赋值 解构的用途 交换变量的值 从函数返回多个值 提取JSON数据 总结 概念 ES6提供了更简洁的赋值模式,从数组和

  • JavaScript解构赋值的实用技巧指南

    目录 一.基本概念 二.解构分类 1. 对象的解构赋值 2. 数组的解构赋值 (1)字符串 (2)数组 (3)集合 (4)Map 三.嵌套解构 四.使用技巧 1. 函数解构 (1)解构函数参数 2. 循环中的解构 3. 动态属性解构 4. 交换变量 5. 数组拷贝 四.解构赋值注意点 总结 一.基本概念 为什么需要解构呢,先来看一个例子: const student = { name: 'ZhangSan', age: 18, scores: { math: 19, english: 85, c

  • 解析JavaScript的ES6版本中的解构赋值

    什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量.这个语法非常简洁,而且比传统的属性访问更加清晰. 在不使用解构赋值的情况下,访问数组的前三项: var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; var first = someArray[0]; var second = someArray[1]; var third = someArray

  • 一篇文章带你了解JavaScript的解构赋值

    一篇文章带你了解JavaScript的解构赋值

    目录 1. 什么是解构赋值 ? 2. 数组的解构赋值 2.1) 数组解构赋值的默认值 2.2) 数组解构赋值的应用 类数组中的应用 交换变量的值 3. 对象的解构赋值 3.1) 对象解构赋值的默认值 3.2)对一个已声明的变量解构赋值 4. 字符串的解构赋值 总结 1. 什么是解构赋值 ? 将属性/值从对象/数组中取出,赋值给其他变量 通俗来说,即解析某一数据的结构,将我们想要的东西提取出来,赋值给变量或常量. 让我们通过一个例子看看: const [a, b, c] = [1, 2, 3];

  • JavaScript对象解构的用法实例解析

    JavaScript对象解构的用法实例解析

    目录 前言 使用解构从对象中获取值 使用解构从嵌套对象中获取值 使用对象解构定义一个新变量以及默认值 默认值 新变量 使用 JavaScript 对象解构别名 使用对象解构处理动态名称属性 在函数参数和返回值中解构对象 解构赋值传参 解构函数对象返回值 在循环中使用对象解构 总结 前言 ES6(ES2015)的发布,给JavaScript 提供了一种更方便快捷的方式来处理对象的属性.该机制称为Destructuring(也称为解构赋值).但是你真的会用吗?你真的了解各种场景下,解构赋值的用法吗?

  • ES6下javascript解构赋值常见用法总结

    Javascript解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b Javascript解构赋值问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量占用多一行,代码行数和重复的声明a,使得代码不够简洁,能否通过左边变量名,匹配到右边的属性名从而取得对应的值,ES6解构语法核心就基于这样的模式匹配思想 上面的问题解构方案: let obj = { a: 1, b: 2 } // 取值 let {a,

  • JavaScript解构赋值的5个常见场景与实例教程

    目录 前言 1. 提取数据 2. 别名取值 3. 动态属性 4. 对象解构中的 Rest 5. 默认值 总结 前言 解构赋值语法是一种 JavaScript 表达式,通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量.这种语法是 ECMAscript 6 规范引入了一种新语法,可以更轻松地从数组和对象中获取值. 1. 提取数据 先来看看如何在 JavaScript 中解构对象,可以从这个商品对象的简单示例开始. const product = { id: 1, title: "Ni

  • ES6基础之解构赋值(destructuring assignment)

    我们经常可以在其他编程语言(如GO语言)中看到多返回值这种特性,因为在很多实际场景中,函数的返回值中,函数的返回值并不只有一个单一的值.ES6之前,并没有可以直接使用语法来实现多返回值的特性.ES6终于出现了解构赋值的语法糖来解决此类问题. 解构赋值是一种表达式,允许您使用数组或对象,将可迭代对象的值或属性分配给变量.解构赋值能让我们用更简短的语法进行多个变量的赋值,大大的减少了代码量.解构表达式有两种:array和object. 今天的文章笔者将从以下方面进行介绍: 使用数组表达式解构赋值 常

  • 详解JS ES6变量的解构赋值

    1.什么是解构? ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.它在语法上比ES5所提供的更加简洁.紧凑.清晰.它不仅能减少你的代码量,还能从根本上改变你的编码方式. 2.数组解构 以前,为变量赋值,我们只能直接指定值,比如 let a = 1; let b = 2; let c = 3; 现在可以用数组解构的方式来进行赋值 let [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 1, 2, 3 这是数组解构最基本类型

  • es6中的解构赋值、扩展运算符和rest参数使用详解

    前言 本文主要给大家介绍了关于es6中解构赋值.扩展运算符和rest参数使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. es6中较为常用的书写风格 为了书写的方便,es6中提出了很多比较友好的书写方式,其中最为常见的属于以下几个: 字符串模板 `abcdef${test}` 解构赋值 let [a, b, c] = [1, 2, 3] 扩展运算符 rest参数 ... 本文希望能够学习其中的主要的用法,方便书写和简洁性. 字符串模板 在以前的日子,我们经常捡到各

  • 深入理解ES6之数据解构的用法

    一 对象解构 对象解构语法在赋值语句的左侧使用了对象字面量 let node = { type: true, name: false } //既声明又赋值 let { type, name } = node; //或者先声明再赋值 let type, name ({type,name} = node); console.log(type);//true console.log(name);//false type与name标识符既声明了本地变量,也读取了对象的相应属性值. 解构赋值表达式的值为表

  • ES6数组与对象的解构赋值详解

    本文实例讲述了ES6数组与对象的解构赋值.分享给大家供大家参考,具体如下: 数组的解构赋值 基本用法 ES6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称之为解构(Destructuring) // 以前为变量赋值,只能直接指定值 var a = 1; var b = 2; var c = 3; // ES6允许写成这样 var [a,b,c] = [1,2,3]; 本质上,这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值. 下面是一些使

随机推荐