前言
这些是JavaScript中重要的编程思想,这些析构对象,析构函数与展开运算符很重要
这块内容不怎么难,纯属一些语法,但是在所谓的函数式编程,以及React中却是广泛使用的
逆向思维,之前是怎么构造,而现在让你如何展开,获取里面的内容!!
逆向思维,之前是怎么构造,而现在让你如何展开,获取里面的内容!!
逆向思维,之前是怎么构造,而现在让你如何展开,获取里面的内容!!
目录
一、析构对象
二、析构数组
三、展开运算符
一、析构对象
构造时在等号右边使用{},而析构的原理很简单,直接逆向,直接在等号的左边来进行析构 {}=
{}中填写要获取值的名字,获取的可以是各种属性,比如数组,字符串甚至函数,可以说,很好用!!!
const sandwich = { bread: "dutch crunch", meat: "tuna", cheese: "swiss", toppings: ["lettuce", "tomato", "mustard"] } const {bread, meat} = sandwich console.log(bread, meat) // dutch crunch tuna
要区分“析构对象”和“构造对象”,前者{name} = Object ,后者 object = {name: "value"}
这些是非常关键的,而且{name}可以直接作为参数,来直接对对象进行析构
一定要认识这种形式!! {name} 作为参数,对传入的对象进行析构!!
一定要认识这种形式!! {name} 作为参数,对传入的对象进行析构!!
一定要认识这种形式!! {name} 作为参数,对传入的对象进行析构!!
下面这段代码是个例子,要看看这个函数,其实一点也不难!!
const lordify = ({firstName}) => { console.log(`${firstName} of Canterbury`) } const regularPerson = { firstName: "Bill", lastName: "wilSon" } lordify(regularPerson) // Bill of Canterbury
同时,也可以对嵌套对象进行处理,写的很简单 {name1 : { name2 }} 这种形式,想要什么就获取什么,这个一点也不难
如下,下面这个例子,平淡无奇写上 {spouse: {firstName}},直接析构了这个regularPerson的嵌套对象!!!
const regularPerson = { firstName:"Bill", lastname:"WillSon", spouse: { firstName: "phil", lastname: "WillSon" } } const lordify = ({spouse : {firstName}})=>{ console.log(`${firstName} of Canterbury`); } lordify(regularPerson) // phil of Canterbury
析构对象,其实没什么难度,关键是这种逆向思维方式,以及在参数传递时认识这种析构形式!!
析构对象,其实没什么难度,关键是这种逆向思维方式,以及在参数传递时认识这种析构形式!!
析构对象,其实没什么难度,关键是这种逆向思维方式,以及在参数传递时认识这种析构形式!!
二、析构数组
这个类比上面,构造数组使用 = [ xxx] ,那么析构数组很自然 [xx] .
下面直接写一个代码实例,直接不必多言,很自然的构造出来
const [fistAnimal] = ["Horse", "Mouse", "Cat"]; console.log(fistAnimal) // Horse
一个关键问题,数组是按顺序排序的,不想对象可以直接定位值,因此需要“列表匹配”,使用,来跳过不要的值!!
一个关键问题,数组是按顺序排序的,不想对象可以直接定位值,因此需要“列表匹配”,使用,来跳过不要的值!!
一个关键问题,数组是按顺序排序的,不想对象可以直接定位值,因此需要“列表匹配”,使用,来跳过不要的值!!
const [,,lastAnimal] = ["Horse", "Mouse", "Cat"]; console.log(lastAnimal) // cat
如上代码,这个很好理解,使用“,”直接跳过前面两个值,这个确实比较重要!!
三、展开运算符
展开运算符,可以对对象和数组来进行展开,常常搭配析构数组[ ],可以达到对数组进行拆分的效果
这里展开运算符,理解清楚,展开获取时使用 ...others,而获取的数组是others而不是 ...others
这里你可能有点绕,看下面的例子就好了,如果再使用 ...others,其输出的是整个数组的字符串,类似 others.join(" ")这种形式
这个要深刻理解其原理,展开运算符,在React中经常使用!!!
const lakes = ["Donner", "Marlette", "Fallen Leaf", "Cascade"];
const [first, ...others] = lakes;
console.log(others); // ['Marlette', 'Fallen Leaf', 'Cascade']
console.log(...others); // Marlette Fallen Leaf Cascade
其除了展开数组,还可以展开对象,这是非常重要的,其可以展开对象
我举一个很好的例子,下面其实不难理解,构造新的object的时候,可以使用 ... 来展开之前的object
注意,如果不使用展开运算符,其是一个嵌套的对象,这个要不难理解!!
const morning = { breakfast: "oatmeal", lunch: "peanut butter and jelly" }; const dinner = "mac and cheese"; const backpackingMeals = { ...morning, dinner } console.log(backpackingMeals); // { // breakfast: "oatmeal", // lunch: "peanut butter and jelly", // dinner: "mac and cheese" // }
标签:const,析构,对象,JavaScript,运算符,数组,展开 From: https://www.cnblogs.com/qwe-asd-zxc-nm/p/17641628.html