es6之解构赋值

更新日期: 2018-12-13阅读: 2.1k标签: 兼容

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变量赋值,然后调用,这么写的问题就是显得代码啰嗦,明明一行可以搞定的事情非要用三行代码,来看看解构赋值是怎么干的:

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()

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


链接: https://www.fly63.com/article/detial/1573

CSS/CSS3常用的样式兼容,样式总结

这篇文章主要介绍了css中常用但是又难记的样式作为总结,方便大家学习和使用。包括了‘单行缩略号‘、’css圆角兼容’、‘元素阴影’,‘border取消宽度影响’,‘css3的背景渐变’,‘css的透明’等等

CSS3 nth-child的使用,详解css中nth的作用,以及nth-child的兼容写法

:nth-child是css3的一个比较常用的选择器。它用于匹配属于其父元素中的子元素,不论元素的类型。 它的参数可以是数字、关键词或公式。

CSS 3中-webkit-, -moz-, -o-, -ms-这些私有前缀的含义和兼容

css3作为页面样式的表现语言,增加了很多新的属性,但是部分css3属性在一些浏览器上还处于试验阶段,所以为了有效的显示css3的样式,对应不同的浏览器内核需要不同的前缀声明。

css定义变量_css原生变量的使用和兼容 附带还有更高性能,文件更高压缩率的好处

在开发中,css样式有一些属性往往需要重复使用,为了避免代码冗余,降低维护成本。我们需要使用CSS预编译工具【Sass/Less/Stylus】,随着这些工具的流行,CSS变量也开始规范制定,目前很多浏览器都已经支持了

caniuse.com_判断浏览器对css3、html5的兼容性测试工具

caniuse.com 是一个工具性的网站,帮助人们了解各个浏览器以及它们的不同版本对 HTML5、CSS3 等高级特性的支持情况。直接在上面的输入框中输入想要搜索的属性。然后结果就直接出来了。

web浏览器在线兼容性测试工具_检测html网页在不同浏览器上的兼容问题

对于web前端开发者而言,为了确保html代码在不同浏览器上能正常工作,是一件很麻烦的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,下面就为大家推荐一下比较流行的web浏览器在线兼容性测试工具。

原生js兼容写法_在ie标准下的兼容性写法

经常使用原生js,就要考虑到一些浏览器上的兼容,尤其是IE,下面就整理关于js的一些兼容性写法

解决IE不兼容document.getElementByClassName()的实现方法

在使用原生js时候,需要通过class样式名来获取dom对象,发现在IE8以下是不支持document.getElementByClassName()这种方法的。那么我们如何来实现获取classname的兼容写法呢?

document.head.appendChild(element) 在 IE8 及以下报错

问题:在开发中会遇到动态添加 script 标签的情况。但是在 IE8 以下会报如下错误:SCRIPT5007: Unable to get value of the property appendChild: object is null or undefined,解决办法如下

js强制不使用兼容性视图

在IE8浏览器以后版本,都有一个“兼容性视图”,让不少新技术无法使用。那么如何禁止浏览器自动选择“兼容性视图”,强制IE以最高级别的可用模式显示内容呢?X-UA-Compatible是一个设置IE浏览器兼容模式的属性,在IE8浏览器之后诞生。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!