搜索
写经验 领红包

初学者容易出错的es6解构赋值语句(初学者容易出错的es6解构赋值语句是什么)

导语:初学者容易出错的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(`${name} --- ${age}`)

//数组

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学科。

本文内容由小馨整理编辑!