《深入理解ES6》阅读笔记 --- 解构:使数据访问更便捷

《深入理解ES6》阅读笔记 --- 解构:使数据访问更便捷

如果你正在开发使用数据驱动的应用,那么这一小节的内容对你来讲,就非常重要了,欢迎来到解构的世界。

何为“解构”?当我们定义了很多对象和数组,又必须从中提取有价值的数据时,这种行为在ES6中被称为“解构”,解构分为两种:对象解构和数组解构。

如果你定义过这样的对象:

const obj = {
  name: 'icepy',
  work: 'alibaba'
}

const { name, work } = obj

这是一种非常常见的解构,将值提取出来,假设有一天icepy离职了,没有工作呢?

const obj = {
  name: 'icepy'
}
const { name, work } = obj

这个时候work会是一个undefined,但是我想给予他一份“新的工作”,骑摩托车旅行:

const obj = {
  name: 'icepy'
}
const { name, work = '骑摩托车旅行'} = obj

当然,如果可以,我们也可以重新定义一个名字,比如work变成travel:

const obj = {
  name: 'icepy'
}
const { name, work:travel = '骑摩托车旅行'} = obj

解构在函数的参数中也可以定义,当然传参时需要传入的是对象了。如果你写过一些Redux,那么相信对这个会无比的熟悉:

export const changeDate = ({ mode, date }) => (dispatch) => {
  dispatch(setTime({ mode, date }));
};

// 在action里可以直接使用mode和date

如果你有多重嵌套的对象,解构也可以很方便的提取出来你想要的数据:

const obj = {
  home: {
    ad: 'hunan 湘西',
    mz: 'm'
  },
  name: 'icepy'
}

const { home: {ad, mz = 'h'}, name} = obj

那么,如果你这样定义过数组:

const arr = [1,2,3]

let [f,s,t] = arr

console.log(f) //1
console.log(s) //2
console.log(t) //3

当然如果你只想取第三个元素,只需要用,占位即可,如果你想从嵌套的数组中提取数据,其实和对象非常类似:

const arr = [1,2,3]

let [,,t] = arr;

const arr = [1,[2],3]

let [,[f],] = arr;

// f

曾经我们可能会有这样的一个需求,有一个数组,需要第五个元素之后的元素,返回一个新数组:

const arr = [1,2,3,4,5,6,7,8,9]
let [,,,,,...f] = arr;
//f 

而现在,这样多简单。

当然在这一小节中,主要的内容都是这些实践操作性的内容,如果有时间,不妨试试。

编辑于 2018-08-12

文章被以下专栏收录