初学者容易出错的ES6解构赋值语句

对于刚开如学习vue或者react的朋友来说，大多数时候我们都需要把ES6引入到我们的技术栈中，但是ES6又增加了那么多的新特性，很多时候，我们想快速全都掌握的话，压力还是挺大的。结合实战经验，我还一般会采用先学习一些常用的，然后再个个深入学习它们。

当然，我们今天还先说一说，刚开始容易理解错的ES6解析赋值语句吧！

首先，话说这个解构赋值语句，主要拿来做什么呢？很多朋友就会产生错觉了吧！其实使用解构它主要用于更方便的数据访问。大家都知道，数组和对象是js中最常用的一种表现形式。为了简化提取信息，ES6中新增了解构这程，是将一个数据结构分解成更小的部分的过程，下面我们将使用传统中的ES5写法提取对象中的信息和使用ES6的解构方式来作一个简单的对比说明。

ES5写法如下：

const people = {

name: '张三',

age: 18

}

const name = people.name

const age = people.age

console.log(name + ' --- ' + age);

是不是看起来很熟悉呀！对，没错，这就是传统的写法，每次都得一个一个的获取信息，当然后面ES6出来后，这种写法就是将原来的信息从对象或数组里解构取出来存为变量。

ES6写法如下：

//对象写法

const people = {

name: '张三',

age: 18

}

const { name, age } = people

console.log(`$ --- $`)

//数组

const color = ['red', 'blue']

const [first, second] = color

console.log(first) //'red'

console.log(second) //'blue'

那么像这样的方式我们称为变量的赋值，那么问题来了，这样的写法有什么用呢？其实变量的赋值主要用于以下几种场景中：

1. 交换变量的值

2. 从函数返回多个值

3. 函数参数的定义，解构赋值可以方便地将一组参数与变量名对应起来。

4. 提取json数据，解构赋值对提取json对象中的数据

5. 函数参数的默认值

6. 遍历map结构

7. 输入模块的指定方法

以上做了两个简单的解析及运用场景，今天大家先把这几点理解到，下期我们再深入的学习实战场景中的运用！后期我们将推出更多前端新技术，请关注我们H5学科。