Destructuring Assignment in JS(解构assignment in js)
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)的更多相关文章
- 5个 JS 解构有趣的用途
摘要: 玩转ES6解构赋值. 原文:5个 JS 解构有趣的用途 译者:前端小智 1. 交换变量 通常交换两个变量的方法需要一个额外的临时变量,来看看例子: let a = 1; let b = 2; ...
- JS 解构赋值
感谢原文作者:小火柴的蓝色理想 原文链接:https://www.cnblogs.com/xiaohuochai/p/7243166.html 介绍 解构赋值语法是一种 Javascript ES6引 ...
- 深入浅出ES6(六):解构 Destructuring
作者 Jason Orendorff github主页 https://github.com/jorendorff 什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性 ...
- ES6中的解构赋值
在解释什么是解构赋值前,我们先来看一下, ES5 中对变量的声明和赋值. var str = 'hello word'; 左边一个变量名,右边可以是字符串,数组或对象. ES6 中增加了一种更为便捷的 ...
- ES6解构赋值
前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 ...
- ES6_入门(4)_数组的解构赋值
//2017/7/14 //变量的解构赋值(解构:Destructuring) //(1)数组的解构赋值 let [a,b,c]=[1,2,3];//模式匹配,只要等号两边的模式相同,左边的变量就会被 ...
- ES6里的解构赋值
我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程. 一.引入背景 在ES5中,开发者们为 ...
- ES6学习-4 解构赋值(1)数组的解构赋值
解构赋值是ES6很大的一个提升,为我们带来了很多方便,但用不好,会使程序的可读性变差,所以用时要注意,尽量保持程序的易读性. 数组解构赋值 在JS没有支持解构赋值之前,我们声明几个变量并赋值通常都是像 ...
- php 和微信小程序 解构赋值
php 解构赋值只能解构索引数组 js:
随机推荐
- topcoder srm 335 div1
problem1 link 直接模拟即可. import java.util.*; import java.math.*; import static java.lang.Math.*; public ...
- 怎么删除git本地分支以及Bitbucket的远程分支?
1. 如果分支只是本地分支,则可以使用 -d (如果分支已合并),例如 git branch -d <branch name>如果分支包含不计划合并的代码,请改用 -D (即使有没有mer ...
- Intellij IDEA 安装配置Gradle
1.安装 到官网链接下载最新的bin版本,解压到 D:\Program Files (x86)\JetBrains\IDEA Configuration And Cache\gradle 配置环境变量 ...
- 微生物增殖|2012年蓝桥杯B组题解析第一题-fishers
(3')微生物增殖 假设有两种微生物 X 和 Y X出生后每隔3分钟分裂一次(数目加倍),Y出生后每隔2分钟分裂一次(数目加倍). 一个新出生的X,半分钟之后吃掉1个Y,并且,从此开始,每隔1分钟吃1 ...
- 外键 Foreign keys
https://docs.microsoft.com/en-us/sql/relational-databases/tables/create-foreign-key-relationships?vi ...
- 【重新分配分片】Elasticsearch通过reroute api重新分配分片
elasticsearch可以通过reroute api来手动进行索引分片的分配. 不过要想完全手动,必须先把cluster.routing.allocation.disable_allocation ...
- hihoCoder week4 Trie图
ac自动机 题目链接 https://hihocoder.com/contest/hiho4/problem/1 参考:https://blog.csdn.net/baidu_30541191/art ...
- 带搜索框的jQuery下拉框插件
由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...
- docker 命令随笔
如果是容器传输文件到本地的话,反过来就好了: docker cp ID全称:容器文件路径 本地路径 2.进入docker 容器 docker exec -it fw-pay-trade-serv ...
- 【转载】SeleniumIDE入门
http://www.open-open.com/lib/view/open1452488109558.html