欢迎访问主页，有更多文章内容
转载请注明原出处
原文链接地址:解构赋值-更方便的访问数据
在开发过程中,常会用到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时都会导致运行时错误。
欢迎访问主页，有更多文章内容
转载请注明原出处
原文链接地址:解构赋值-更方便的访问数据
网友评论