当前位置： 移动技术网 > IT编程>开发语言>JavaScript > ES6数组解构 - Kaiqisan

ES6数组解构 - Kaiqisan

2020年07月22日  | 移动技术网IT编程  | 我要评论

数组解构基本原理

Kaiqisanです，一つの学生プログラマーである 今天还是来讲讲ES6的新方法把，在我们日常的js学习中，我们很多人都在重于打基础，学习的大都是ES5的内容，但适当得浏览一些新兴的东西也可以在日常的学习中带来一些闪光点，它们或许和您以前学习的东西相互冲突，但是这能自发地引起一个人的思考。

这是ES6的一个全新的定义参数的方法，可以极大地节省代码量，接下来您看了就知道这个方法多么强大了。

这是一个数组

let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']

现在我们需要拿取出数组中的第一个元素，您会怎么做呢？没错，就是赋值。

let info = arr[0]

如果您需要数组里的值全部都拿出来赋值给参数的话

let info1 = arr[0]
let info2 = arr[1]
let info3 = arr[2]
let info4 = arr[3]
let info5 = arr[4]
let info6 = arr[5]
let info7 = arr[6]
let info8 = arr[7]

这代码量可想而知，数据量上去了，代码量也会上去，而且您也会不小心搞错下标，如果因此导致一些不必要的错误的话那就太尴尬了。不会现在还有人这么赋值吧！不会吧不会吧！（试图钓鱼）

这里，使用数组解构就是一个很好的方法

let [info1, info2, info3, info4, info5, info6, info7, info8] = arr

先姑且从结果来说，每个info都被赋予了arr中相应下标的成员元素（不管什么都赋值，对象也会赋）下面为赋值过程

jiegou1

下面我们来分析一些比较常规的赋值情况

  • 需要赋值的数量比数组中的成员数量少
let arr = ['a', 'b', 'c', 'd']
let [parmas1, params2] = arr
console.log(params1, params2) // 结果为 'a', 'b'

这种解构赋值本质上还是看数组的下标，在 [parmas1, params2] 中 parmas1在所在数组中下标为0，所以对于arr数组中下标为0的元素，后面的元素以此类推。
jiegoou2

  • 需要跳跃赋值
let arr = ['a', 'b', 'c', 'd']
let [parmas1, , params2] = arr
console.log(params1, params2) // 结果为 a, c

还是看下标把，这种形式比较特殊，但很容易理解
在这里插入图片描述
虽然b被赋给下标为2的成员，但是这里没有人，所以就赋了一个寂寞。

  • 需要赋值的数量比数组中的成员多
let arr = ['a', 'b']
let [parmas1, params2, params3] = arr
console.log(params1, params2, parmas3) // 结果为 'a', 'b', undefined

其实这种方法有点像函数映射，大家都是一对一的关系，arr里的值主动去找params,最后还是有params没映射，所以就未被复制，为undefined
jiegou3
这里的赋值轮不到params3

  • 需要赋值产生一个数组
let arr = ['a', 'b', 'c', 'd']
let [params1, ...params2] = arr
console.log(params1, params2) // 结果为 'a' 和 ['b', 'c', 'd']

let arr = ['a', 'b', 'c', 'd', 'e']
let [params1, params2, ...params3] = arr
console.log(params1, params2, params3) // 结果为 'a' 和 'b' 和 ['c', 'd', 'e']

后面的params2是带有扩展运算符，所以可以多对一地映射。（PS: 带有扩展运算符，即使只能被映射一个元素，它还是一个数组）

jiegou4

总结

这是ES6新产生的方法，非常新奇，也很好理解，其方式非常具象，有点像画图画。它的书写方式也打破了一般编程语言的惯有套路，很方便，请不要吝啬去使用它！
前端技术更新速度飞快，这更需要我们快速地上手一项新的方法，这样才能长久地立足于这个前端圈内！

本文地址：https://blog.csdn.net/qq_33933205/article/details/107467530

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网