Asignación de estructura ES6
1. Pavimentación básica (método tradicional de asignación de valor)
var a = [1,2]
var person = {
name:"fanfusuzi",sex:"man"}
(1) Declaración y asignación de variables:
可以理解上面的代码分为这两步: var a; a=[1,2]
因为声明变量都会出现变量名的提升(声明变量这句代码会被提升到生效作用于最前面)
var声明的是全局变量，而let const声明的是块级作用域
(2) El método de valor tradicional en el pasado
数组按照值的所在位置进行取值，eg:a[0]、a[1]
对象按照属性的名字进行取值：eg: person.name、person.sex
(3) ¿Por qué ocurre la asignación de estructuras?
实际的开发中后台传的值是嵌套很多层的，
按照传统的方式进行取值会让人很难受,eg: a.b.c.d.n
2. Asignación de estructura
En comparación con el método de asignación convencional, lo más importante en la asignación de estructuras es la palabra "deconstrucción". En el proceso de asignación, debe conocer claramente la estructura en el lado derecho del signo igual. La deconstrucción, como su nombre lo indica, es : desatar la estructura.
(1) Gramática:
数组: let [a] =[1] [变量名]:变量名可随意
对象: let {name} = {name} {变量名}:变量名必须是对象中的属性名
(2) Correspondencia de estructura:
Mantra:Matriz (sin nombre ni nombre), objeto (sin nombre ni nombre)
(3) Matriz de estructura completa
:
按顺序： let [a,b,c] = [1,2,3]; console.log(a,b,c); //1,2,3
打乱顺序: let [b,a,c] = [1,2,3]; console.log(a,b,c); //1,2,3
数组的是按照位置来进行结构的，所以与变量名字无关
Objeto:
按顺序： let {
name,sex} = {
name:"fanfusuzi",sex:"man"}; console.log(name,sex); //fanfusuzi,man
打乱顺序: let {
sex,name} = {
name:"fanfusuzi",sex:"man"}; console.log(sex,name); //nan,fanfusuzi
对象是按照属性名字进行结构的，所以与变量的位置无关
不存在的属性名： let {
name,age} = {
name:"fanfusuzi",sex:"man"}; console.log(name,age); //fanfusuzi,undefined
(4) Matriz de estructura anidada
let [a, [b,c], d] = [1, [2, 3], 4];
console.log(a,b,c,d)
//1,2,3,4
//结构和位置一一对应就行了.
Objeto
const obj={
man:{
student:{
name:'ning',
age:18
}
}
}
let {
man:{
student}} = obj //obj里面有个man,然后里面有个student,注意这一行代码里变量就只有一个student,并没有man
console.log(man,student) // undefined,{name:'ning',age:18}
let {
man:{
student:{
name}}} = obj //同理,逐层拿到最后的name值,而且也只有name这一个属性
console.log(name) //ning
//如何同时拿到嵌套的每层的数据
let {
man,man:{
studengt},man:{
student:{
name}}} = obj
console.log(man,student,name) //{student:{name:'ning',age:18}},{name:'ning',age:18},18
(5) Estructura incompleta
let [a, b] = [1, 2, 3];
console.log(a,b,c)
//1,2
//这里变量只有两个,但是数组中元素有三个.这里还是根据位置对应原理就行.a表示数组中的第一个元素,b表示第2个.而第三个元素我不要.
let [a, [b], d] = [1, [2, 3], 4];
console.log(a,b,d)
//1,2,4 数组的多层嵌套直接仿照嵌套的机构，根据想要结构的给变量名即可
//嵌套解构同样也可以不完全解构,根据实际需要,需要哪个就解构赋值哪个
let [, , c] = [1, 2, 3];
console.log(c)
//3
//注意这里是完全解构,只不过前两个元素我虽然解构了,但是我不要.因为位置对应的关系,所以必须有两个占位的,才能拿到第三个.
//放在这里是为了方便理解为啥前面两个明明不要还得写两个','
let [a,b,c,d] = [1,2,3]
onsole.log(a,b,c,d)
//1,2,3,undefined
//因为前三个元素都能对应找到,而第四个找不到,但是已经声明了,没有值.
//对象同理,如果出现了对象中没有的属性就会得到undefined
(6) Nomenclatura doble (nueva denominación preventiva)
Array: Como dijimos anteriormente, solo debe prestar atención a la correspondencia de posición cuando se deconstruye el arreglo. El nombre no importa. El nombre de la variable que le gusta es el nombre de la variable
objeto: cuando el objeto se deconstruye, el nombre del atributo debe corresponden al nombre del atributo para obtener el valor. Pero no dice que no pueda cambiar el nombre después de obtener el valor. Asegúrese de nombrarlo después de obtener el valor
let {
name:myName,age} ={
name:'ning',age:18}
//这里name:myName的意思是:取到name属性值,冒号后面的变量名没有花括号,意思是把我取到的值交给冒号后面的变量名,即'myName'.相当于把name变量重命名为myName
/**而student:{name},同样是'属性名:'意思一样,取里面对应的属性,冒号后面还有花括号,所以再解构,取student里面的name属性/
console.log(name,myName,age)
//undefined,ning,18
(7) Matriz de valor predeterminado (tomar primero y luego predeterminado)
:
let [a=0, b=0,c=10] = [1, 2];
console.log(a,b,c) //1,2,10
//这里a,b,c在左边都先给了个默认值,但是这里是变量超过了实际的数据,a和b都成功取到值,但是c没取到,所以最终是默认值10,如果没有默认值就是undefined
Objeto:
let {
name:sex='男'} ={
name:'ning',age:18}
console.log(sex) //ning 取到了name值并且重命名为sex然后默认值为男
let {
name:{
sex='男'}} = {
name:'ning',age:18}
console.log(sex) //男
//这里刚好通过这两个例子区分一下重命名和嵌套
3. Estructura de cuerdas
La deconstrucción de una cuerda puede entenderse como la deconstrucción de una matriz unidimensional, lo que es particularmente conveniente cuando se trata de cuerdas.
let [a,b,c] ='123'
console.log(a,b,c,typeof c) //1,2,3,string 解构出来的是字符类型的数据 长度
let {
length:s} ='123'
console.log(s,typeof s) //3,number
//同理,数组也有长度
let {
length:s} = [1,2,3]
console,log(s,typeof s) //3,number
4. Estructura automática de los parámetros de función.
function look([x,y]){
console.log(x,y)
}
look([1,2]) //1,2