ES6基础-变量的解构赋值
作者 | Jeskson 来源 | 达达前端小酒馆
解构赋值：
数组的解构赋值，对象的解构赋值，字符串的解构赋值，数值与布尔值的解构赋值，函数参数的解构赋值。
开发环境准备：
编辑器，VS Code，Atom，Sublime，或IDE（Webstorm）浏览器（最新的Chrome）或Node.js环境越新越好。
数组的解构赋值：
解构赋值语法是一个JavaScript表达式，这使得可以将值从数组或属性从对象提取道不同的变量中。
重点解构赋值的概念理解：
数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值
数组的解构赋值
const arr = [1,2,3,4];
let [a,b,c,d] = arr;更复杂的匹配规则
const arr = ['a','b',['c','d',['e','f','g']]];
const [ , b] = arr;
const [ , , g] = ['e', 'f', 'g']
const [ , , [ , , g]] = ['c','d',['e','f','g']];
const [ , , [ , , [ , , g]]] = arr;扩展运算符
const arr1 = [1,2,3];
const arr2 = ['a', 'b'];
const arr3 = ['zz', 1];
const arr4 = [arr1, arr2, arr3];const arr4 = [...arr1, ...arr2, ...arr3];
const arr = [1,2,3,4];
const [a,b,...c] = arr;
const arr = [1, undefined, undefined];
const [a,b,c,d] = arr;默认值：
const [a, b=2, c, d = 'a'] = arr;交换变量
let a = 2;
let b = 1;
let temp;
temp = a;
a = b;
b = temp;[a,b] = [b,a];接收多个函数返回值
function getUserInfo(id) {
// ...ajax
return {
true, // 第一个参数
// 第二个参数
{
name: 'dada',
gender: '男',
id: id
},
'请求成功'
};
};
const [status, data, msg] = getUserInfo(1)对象的解构赋值：
对象的解构赋值与数组的解构赋值相似，等号左右两边都为对象解构
const { a, b } = {a:1, b:2}左边的{}中为需要赋值的变量，右边为需要解构的对象
对象的解构赋值：
对象解构赋值的方法，稍微复杂的解构条件，扩展运算符，如何对已经申明了的变量进行对象的解构赋值，默认值。
对象的解构赋值的主要用途，提取对象属性，使用对象传入乱序的函数参数，获取多个函数的返回值。
对象的解构赋值：
const obj = {
name: 'da',
age: '12'
};
const { name, age } = obj;提取对象的属性：
结合扩展运算符：
如何对已经申明了的变量进行对象的解构赋值
// 报错
let age;
const obj = {
name: 'da',
age: 12
};
{age} = obj;
({age} = obj); // 对的
let {age} = obj;默认值：
let girlfriend = {
name: '小红',
age: 22, // age: undefined
};
let {name,age = 24, hobby = ['学习'] } = girlfriend;提取对象的属性：
const { name, hobody: [ hobby1 ] } = {
name: "小红",
hobby: ['学习']
};
使用对象传入乱序的函数参数：
function AJAX(option) {
var type = option.type || 'get';
console.log(option);
};
AJAX({
url: '/getinfo',
data: {
a: 1
},
});获取多个函数返回值：
function getUserInfo(uid) {
// ...ajax
return {
status: true,
data: {
name: 'da',
},
msg: '1'
};
};
const { status, data, msg } = getUserInfo(1);字符串的解构赋值
const str = 'i am';
const [a,b,c,...ath] = str;
数值与布尔值的解构赋值：
// 数值与布尔值的解构赋值
const { valueOf } = 1;
函数参数的解构赋值：
function m ([x,y]) {
return [y,x];
}
let arr = [1,2];
arr = m(arr);对象的解构赋值：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读