Destructuring Assignment In JavaScript

更省事,代码显得也清楚。

Arrays

传统的声明赋值:

let johnDoe = ["John", "Doe", "Iskolo"]
let firstName = johnDoe[0]
let lastName = johnDoe[1]
let title = johnDoe[2]

现代声明和赋值使用:拆解JS中的分配(赋值)

let johnDoe = ["John", "Doe", "Iskolo"]
let [firstName, lastName, title] = johnDoe
console.log(firstName, lastName, title) // John Doe Iskolo

循环:

let obj = {
firstName : "John",
lastName : "Doe",
title : "Iskolo"
}
Object.keys(obj).forEach(key => {
console.log(`${key} : ${obj[key]}`)
})

解释

Object.keys()得到obj的key的数组集合。

Array.protptype.forEach()

let obj = {
firstName : "John",
lastName : "Doe",
title : "Iskolo"
}
for(let [key, value] of Object.entries(obj)) {
console.log(`${key} : ${value}`)
}

使用for...of循环一个String, Array, Array-like objects的数据。

Object.entries()得到:

(3) [Array(2), Array(2), Array(2)]
0: (2) ["firstName", "John"]
1: (2) ["lastName", "Doe"]
2: (2) ["title", "Iskolo"]
length: 3
__proto__: Array(0)

注意:for...in ,循环的是一个对象的properties。


分配默认值

let [firstName="John", , title="Fire"] = "John Doe".split(" ") //undefined firstName //"John" title //"Fire"

"John Doe".split(" ") 会得到["John", "Doe"]

firstName被赋值"John"

nil被赋值"Doe", 所以不存在。

title没有被赋值,所以使用默认的"Fire"


Objects

使用

let obj = {
firstName : "John",
lastName : "Doe",
title : "Iskolo"
} let {firstName, lastName) = obj
console.log(firstName, lastName) // John Doe

使用Object来传递Function arguments

function sumFunc(a = true, b = "", c = "", d = 0, e = false) {
console.log(a,b,c,d,e)
}
// Call the function
sumFunc(true, "", "", "", true)
// Or if we want to preserve default values
sumFunc(true, undefined, undefined, undefined, true)

一个函数定义了5个参数,那么使用这个函数时,也要添加上5个参数,否则会报告❌。

如果是更多的参数,就太费劲了。

把参数变为一个对象。使用这个函数时,把要传入的参数也用对象的形式,就非常方便了

function sumFunc({a = true, b = "", c = "", d = 0, e = false}) {
console.log(a,b,c,d,e)
}
let args = {a : false, e: true}
// Call the function
sumFunc(args)

Destructuring Assignment in JS(解构assignment in js)的更多相关文章

  1. 5个 JS 解构有趣的用途

    摘要: 玩转ES6解构赋值. 原文:5个 JS 解构有趣的用途 译者:前端小智 1. 交换变量 通常交换两个变量的方法需要一个额外的临时变量,来看看例子: let a = 1; let b = 2; ...

  2. JS 解构赋值

    感谢原文作者:小火柴的蓝色理想 原文链接:https://www.cnblogs.com/xiaohuochai/p/7243166.html 介绍 解构赋值语法是一种 Javascript ES6引 ...

  3. 深入浅出ES6(六):解构 Destructuring

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性 ...

  4. ES6中的解构赋值

    在解释什么是解构赋值前,我们先来看一下, ES5 中对变量的声明和赋值. var str = 'hello word'; 左边一个变量名,右边可以是字符串,数组或对象. ES6 中增加了一种更为便捷的 ...

  5. ES6解构赋值

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

  6. ES6_入门(4)_数组的解构赋值

    //2017/7/14 //变量的解构赋值(解构:Destructuring) //(1)数组的解构赋值 let [a,b,c]=[1,2,3];//模式匹配,只要等号两边的模式相同,左边的变量就会被 ...

  7. ES6里的解构赋值

    我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程. 一.引入背景 在ES5中,开发者们为 ...

  8. ES6学习-4 解构赋值(1)数组的解构赋值

    解构赋值是ES6很大的一个提升,为我们带来了很多方便,但用不好,会使程序的可读性变差,所以用时要注意,尽量保持程序的易读性. 数组解构赋值 在JS没有支持解构赋值之前,我们声明几个变量并赋值通常都是像 ...

  9. php 和微信小程序 解构赋值

    php 解构赋值只能解构索引数组 js:

随机推荐

  1. dijkstra最短路

    感觉自己太懒了,以后每天更博客激励自己吧. //时间复杂度O(n*n)的最短路算法 //首先需要设置一个访问数组v[maxn],一个数组d[maxn], memset(v,,sizeof(v)); ; ...

  2. 新建一个Windows Service的方法

    http://www.cnblogs.com/YanPSun/archive/2010/05/22/1741381.html http://blog.csdn.net/m15188153014/art ...

  3. Dart语言快速学习上手(新手上路)

    Dart语言快速学习上手(新手上路) // 声明返回值 int add(int a, int b) { return a + b; } // 不声明返回值 add2(int a, int b) { r ...

  4. P3121 [USACO15FEB]审查(黄金)Censoring (Gold)

    吐槽 数据太水了吧,我AC自动机的trie建错了结果只是RE了两个点,还以为数组开小了改了好久 思路 看到多模板串,字符串匹配,且模板串总长度不长,就想到AC自动机 然后用栈维护当前的字符串位置,如果 ...

  5. 题解——牛客网OI赛制测试赛2

    T1 规律题 考虑先全部选中再去重即可 #include <cstdio> #include <algorithm> #include <cstring> #inc ...

  6. ToString()格式和用法大全,C#实现保留两位小数的方法

    C,货币,2.5.ToString("C"),¥2.50.D,十进制数,25.ToString("D5"),00025.E,科学型,25000.ToString ...

  7. 使用p4c将P4 14代码转换为16代码

    参考: [Question] How to make conversion between P4 14 and P4 16? 使用p4c将P4 14代码转换为16代码: $ p4test --p4v ...

  8. HDU 1512 Monkey King(左偏树模板题)

    http://acm.hdu.edu.cn/showproblem.php?pid=1512 题意: 有n只猴子,每只猴子一开始有个力量值,并且互相不认识,现有每次有两只猴子要决斗,如果认识,就不打了 ...

  9. Scala的配置

    Scala基于Java的JVM,所以先检查是否安装JDK. 在官网上下载并安装好了之后,就是配置环境变量了. SCALA_HOME 变量:C:\Program Files (x86)\scala. P ...

  10. toggle 1.9 以后就被删除了

    toggle 1.9 以后就被删除了, 1.8.x  以前可用. $(function(){ $(".p_title").toggle( function(){ $(this).n ...