React学习手册2.4对象和数字

2.4.1析构对象

        在控制台中输出firstName的函数为例

const fun1 = param => {console.log(`${param.firstName}`);}const person = {firstName: &＃39;a&＃39;,lastName: &＃39;b&＃39;}fun1(person);//a

        与其使用"点句法"深入对象内部，我们可以从person对象中析构出需要使用的值：

const fun1 = ({ firstName }) => {console.log(`${firstName}`);
}
const person = {firstName: &＃39;a&＃39;,lastName: &＃39;b&＃39;
}
fun1(person);//a

下面我们更进一步，修改以下数据。现在person对象内部嵌套一个对象，键名为student：

const person = {firstName: &＃39;a&＃39;,lastName: &＃39;b&＃39;,student:{firstName: &＃39;zhangsan&＃39;,lastName: &＃39;lisi&＃39;,}
}

        如果想把student的名字也变成firstName的形式，要稍微调整以下函数的析构参数：

const fun1 = ({student:{ firstName }}) => {console.log(`${firstName}`);
}
fun1(person);//zhangsan

使用冒号和嵌套的花括号可以从student对象中析构出firstname

2.4.2 析构数组

        值也可以从数组中析构出来。假设我们想把数组中的第一个值复制给一个变量。

const [firstName] = [&＃39;mouse&＃39;,&＃39;cat&＃39;,&＃39;horse&＃39;]
console.log(firstName);//mouse

         此外，还可以使用逗号跳过不需要的值，这叫列表匹配。

const [,,thirdname] = [&＃39;mouse&＃39;,&＃39;cat&＃39;,&＃39;horse&＃39;]
console.log(thirdname);//horse

2.4.3 对象字面量增强

        对象字面量增强和析构相反，把对象重新组合成一体。使用对象字面量增强可以把全局作用域中的变量添加到一个对象中。

const name = &＃39;zhangsan&＃39;
const age = 18
const person = { name, age }
console.log(person)//{name:&＃39;zhangsan&＃39;,age:18}

2.4.4 展开运算符

        展开运算符是三个点号(...)，可用于执行及想不通的任务。首先，可以使用展开运算符合并数组的内容。加入有2个数组，我们可以把他们合并成一个数组，创建第三个数组：

const name = [&＃39;zhangsan&＃39;, &＃39;lisi&＃39;];
const address = [&＃39;beijing&＃39;, &＃39;guangdong&＃39;]
const merge = [...name, ...address];
console.log(merge.join(&＃39;,&＃39;));//zhangsan,lisi,beijing,guangdong

        name和address中的所有元素都放入了新数组merge中。

        下面来看展开运算符可以解决的一个问题。以前例中的name数组为例，这一次我们不想获取第一个元素，而是获取最后一个元素，为此，我们使用Array.reverse方法反转数组，再析构数组：

const name = [&＃39;zhangsan&＃39;, &＃39;lisi&＃39;];
const [last] = name.reverse();
console.log(last);//lisi
console.log(name.join(&＃39;,&＃39;));//lisi,zhangsan

        看到了吗？reverse函数其实改变了原数组。在有展开运算符的情况中，我们无需改变原数组，二是创建一个副本，在做反转。

const name = [&＃39;zhangsan&＃39;, &＃39;lisi&＃39;];
const [last] = [...name].reverse();
console.log(last);//lisi
console.log(name.join(&＃39;,&＃39;));//zhangsan,lisi

        由于我们创建的是副本，name数组完好无损，可以原来的形式继续使用。

        展开运算符也可以用于获取数组中的剩余元素：

const name = [&＃39;beijing&＃39;, &＃39;guangzhou&＃39;, &＃39;tianjin&＃39;, &＃39;jinan&＃39;];
const [first, ...other] = name;
console.log(first);//lisi
console.log(other.join(&＃39;,&＃39;));//guangzhou,tianjin,jinan

我们还可以使用三个点号法把函数的参数收集到一个数组中。在函数中，这叫剩余参数。

function city(...args) {let [start, ...remaining] = args;let [finish, ...stops] = remaining.reverse();console.log(`length = ${args.length}`); //length = 5console.log(`start in ${start}`);//start in beijingconsole.log(`finish in ${finish}`);//finish in shanghaiconsole.log(`stops ${stops.length } in between`);//stops 3 in between
}
city(&＃39;beijing&＃39;,&＃39;guangzhou&＃39;,&＃39;shenzhen&＃39;,&＃39;jinan&＃39;,&＃39;shanghai&＃39;)