解构赋值-更方便的访问数据

欢迎访问主页，有更多文章内容
转载请注明原出处
原文链接地址:解构赋值-更方便的访问数据

在开发过程中,常会用到const,let,var来声明变量。ES6以后，大家基本上都在会使用const、let来进行变量的声明。接下来记录下用const、let如何在代码中优雅便捷的声明变量，ES6中的解构赋值。

什么是解构

定义

ES6为了简化提取信息的任务，新增了解构，将一个数据结构分解为更小的部分的过程。也可以理解为从数组和对象中提取值，对变量进行赋值。

作用

在ES6之前，如果要从一个对象中取出信息，并保存在本地时，代码将会是


var obj = {
    a: 1,
    b: 2,
    // ...
}
var a = obj.a,obj.b ...

如果需要将这个obj取出更多的变量，将会些很多这样的代码。

ES6中的写法就会比较优雅和便捷：


const obj = {
    a: 1,
    b: 2,
    // ...
}
let { a, b, ...} = obj

作用是从数据中取出部分数据时，解构会使获取数据变得容易很多。下面我们不同的数据类型来具体了解下。

字符串的解构

当对字符串进行结构赋值时，字符串会被转换成了一个类似数组的对象。


const [a, b, c, d, e] = 'vincent';
// a,b,c,d,e 分别是 'v' 'i' 'n' 'c' 'e' 'n' 't'

let [x,y,z]="123"; //此时是将字符串转化为类似数组
console.log(x,y,z); //x=1,y=2,z=3

因为对字符串进行解构赋值时会被转换成类数组对象，所以也具备了length属性。


const { length: l } = 'vincent'
// l => 5

属性解构赋值：类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

对象的解构

对象解构语法在赋值语句的左侧使用了对象的字面量。
解构对象时，变量名必须与属性同名，如果在属性名中找不到，那么变量将取不到值，会被赋值成undefined。


const person = {
    name: 'vincent',
    age: 29
}
const {name, age, sex} = person;
// name -> vincent
// age -> 29
// sex -> undefined

对象的解构赋值，可以很方便的将封装好的模块，赋值给某个变量。


const {log,count} = console;
log('vincent') // vincent

赋值本地变量

赋值给不同的本地变量名,则需要使用冒号。


const person = {
    name: 'vincent',
    age: 29
}
const {name: localName, age: localAge} = person;
// localName => vincent
// localAge => 29
// name, age => undefined

解构赋值添加默认值


const website = {}
const {url = 'https://www.wekic.com', title = 'Vincent的前端博客'} = website
// url => https://www.wekic.com
// title => Vincent的前端博客

嵌套对象的解构赋值


const member = {
    name: 'vincent',
    id: 'No1034',
    position: {
        room: {
            roomId: 218,
            roomName: 'Room2',
            row: 2
        }
    }
}
const { position: { room: { row, roomName } } } = member
// row => 2
// roomName => 'Room2'

每当有一个冒号在解构赋值中出现，就意味着冒号之前的标识符需要检查位置，冒号右侧的则是赋值的目标。冒号右侧如果存在花括号时，则表示目标被嵌套在对象的更深一层。

过滤某些属性

const person = {
    name: 'vincent',
    age: 29,
    sex: 'man'
}

const { age, ...other } = person

console.log(other) // {name: 'vincent',sex: 'man'}

可以过滤掉某些属性并赋值给一个新对象。

数组的解构

数组中的解构赋值，按照对应的位置，对变量进行赋值。


const sports = ['horse riding','play tennis', 'play football','play badminton']
const [a,b,c] = sports;
// a => horse riding
// b => play tennis
// a => play football

从sports解构出了的三个变量，是由他们所在数组中位置决定，实际的变量名与位置无关。没有在解构模式中明确指定的项都会被忽略。

指定解构数组中的某项


const arr = ['jack', 'vincent'];
const [, second] = arr;
// second => vincent

剩余项


const array = ['red','white','black','green'];
const [,...other] = array ;
console.log(other)
// ['white','black','green']

数组的第一个元素被忽略了，剩余的则被赋值给了一个新的数组；我们可以用它来复制数组。


const array = ['red','white','black','green'];
const [...cloneArray] = array;

混合解构

对象与数组解构能被用在一起，以创建更复杂的解构表达式。


let member = {
        name: "vincent",
        position: {
            room: {
                id: 202,
        name: 'Room2'
        }
    },
        sport: ['horse riding','play tennis']
    };

const {
    position: { room : { name } },
    sport: [, second ]
} = member;

console.log(name);  // Room2
console.log(second); // play tennis

在对象与数组混合而成的结构中，通过解构便能准确提取其中想要的信息。

参数解构

函数的参数也能使用解构赋值。当函数需要传递大量的可选参数时，经常都是创建一个options的对象来包含其他的参数。


function eatFruit (name, { fruit = 'watermelon' } = {}) {
    return `${name} likes to eat ${fruit}!`
}

eatFruit('Jack',{fruit: 'banana'})
// Mike likes to eat banana!

eatFruit('Mike',{fruit: 'banana'})
// Mike likes to eat banana!

这里参数解构给属性提供了默认值,可以避免检查指定属性是否已被传入。

总结

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

使用解构时，必须要有初始器(等号右边的值)。否则会报SyntaxError 在析构声明中缺少初始化器。

let {name, age}  ;
//or
let [name, age]  ;
// Uncaught SyntaxError: Missing initializer in destructuring declaration

var {name, age} ;
//or
var [name, age] ;
// Uncaught SyntaxError: Missing initializer in destructuring declaration

const {name, age};
//or
const [name, age];
// Uncaught SyntaxError: Missing initializer in destructuring declaration

同样的，当使用解构赋值时，右侧的值为null、undefined时，也会抛出错误，因为任何读取null、undefined时都会导致运行时错误。

欢迎访问主页，有更多文章内容
转载请注明原出处
原文链接地址:解构赋值-更方便的访问数据