es6基础学习之解构赋值


Posted in Javascript onDecember 10, 2018

前言

es6的语法已经出了很长的时间了,在使用上也可以通过babel这类的编译工具转译为浏览器可以识别的es5的语法,但是依旧有很多开发在写代码的时候,依旧没有用es6的语法,而是习惯使用老的语法,这篇文章主要会介绍解构赋值基本用法以及在实际使用场景中相比es5语法的优势,让大家从根本上了解es6语法的优势

下面话不多说了,来一起看看详细的介绍吧

基本用法

数组解构

让我们一起先来看数组解构的基本用法:

let [a, b, c] = [1, 2, 3] // a=1, b=2, c=3
let [d, [e], f] = [1, [2], 3] // 嵌套数组解构 d=1, e=2, f=3
let [g, ...h] = [1, 2, 3] // 数组拆分 g=1, h=[2, 3]
let [i,,j] = [1, 2, 3] // 不连续解构 i=1, j=3
let [k,l] = [1, 2, 3] // 不完全解构 k=1, l=2

上面的例子包含了数组解构时常用的基本用法

对象解构

接下来再让我们一起看看对象解构的基本用法:

let {a, b} = {a: 'aaaa', b: 'bbbb'} // a='aaaa' b='bbbb'
let obj = {d: 'aaaa', e: {f: 'bbbb'}}
let {d, e:{f}} = obj // 嵌套解构 d='aaaa' f='bbbb'
let g;
(g = {g: 'aaaa'}) // 以声明变量解构 g='aaaa'
let [h, i, j, k] = 'nice' // 字符串解构 h='n' i='i' j='c' k='e'

使用场景

变量赋值

我们先来看最基本的使用场景:变量赋值,先来看我们在平时开发中是怎么使用es5对变量赋值的:

var data = {userName: 'aaaa', password: 123456}
var userName = data.userName
var password = data.password
console.log(userName)
console.log(password)
var data1 = ['aaaa', 123456]
var userName1 = data1[0]
var password1 = data1[1]
console.log(userName1)
console.log(password1)

上面两个例子是最简单的例子,用传统es5变量赋值,然后调用,这么写的问题就是显得代码??拢?髅饕恍锌梢愿愣ǖ氖虑榉且?萌?写?耄?纯纯唇夤垢持凳窃趺锤傻模?/p>

const {userName, password} = {userName: 'aaaa', password: 123456}
console.log(userName)
console.log(password)
const [userName1, password1] = ['aaaa', 123456]
console.log(userName1)
console.log(password1)

相对于es5的语法是不是更加简单明了,在数据量越大用解构赋值的优势越明显

函数参数的定义

一般我们在定义函数的时候,如果函数有多个参数时,在es5语法中函数调用时参数必须一一对应,否则就会出现赋值错误的情况,来看一个例子:

function personInfo(name, age, address, gender) {
 console.log(name, age, address, gender)
}
personInfo('william', 18, 'changsha', 'man')

上面这个例子在对用户信息的时候需要传递四个参数,且需要一一对应,这样就会极易出现参数顺序传错的情况,从而导致bug,接下来来看es6解构赋值是怎么解决这个问题的:

function personInfo({name, age, address, gender}) {
 console.log(name, age, address, gender)
}
personInfo({gender: 'man', address: 'changsha', name: 'william', age: 18})

这么写我们只需要知道要传什么参数就行来,不需要知道参数的顺序也没问题

交换变量的值

在es5中我们需要交换两个变量的值需要借助临时变量的帮助,来看一个例子:

var a=1, b=2, c
c = a
a = b
b = c
console.log(a, b)

来看es6怎么实现:

let a=1, b=2;
[b, a] = [a, b]
console.log(a, b)

是不是比es5的写法更加方便呢

函数的默认参数

在日常开发中,经常会有这种情况:函数的参数需要默认值,如果没有默认值在使用的时候就会报错,来看es5中是怎么做的:

function saveInfo(name, age, address, gender) {
 name = name || 'william'
 age = age || 18
 address = address || 'changsha'
 gender = gender || 'man'
 console.log(name, age, address, gender)
}
saveInfo()

在函数离 main先对参数做一个默认值赋值,然后再使用避免使用的过程中报错,再来看es6中的使用的方法:

function saveInfo({name= 'william', age= 18, address= 'changsha', gender= 'man'} = {}) {
 console.log(name, age, address, gender)
}
saveInfo()

在函数定义的时候就定义了默认参数,这样就免了后面给参数赋值默认值的过程,是不是看起来简单多了

总结

这篇文章简单介绍了es6的解构赋值,如果有错误或不严谨的地方,欢迎批评指正,如果喜欢,欢迎点赞收藏

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
vue中将html字符串转换成html后遇到的问题小结
Dec 10 #Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 #Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 #Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 #Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 #Javascript
vue form check 表单验证的实现代码
Dec 09 #Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 #Javascript
You might like
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
js中的面向对象入门
2017/03/06 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
详解Flask前后端分离项目案例
2020/07/24 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
党课心得体会范文
2014/09/09 职场文书
2014年评职称工作总结
2014/11/20 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
建国大业电影观后感
2015/06/01 职场文书
2019年教师入党申请书
2019/06/27 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL