ES6的解构赋值

·  阅读 179

这是我参与11月更文挑战的第4天,活动详情查看:2021最后一次更文挑战

左右两边结构一致

一、数组的解构赋值

将右边数组的值解构后赋值给左边数组中对应的值,可应用于var、let、const

var [v1, v2 ,vn] = [a, b, c];

let [v1, v2, ...v3] = [a, b, c, d, e]; // v3 = [c ,d ,e];

const [v1, v2 ,[v3, ,v4], v5] = [1, ,2 ,[3, 4], 5];
复制代码

注1:等号右边的不是数组将会报错

注2:等号左边数组内的值少于后边时,仍可赋值成功,不完全解构

二、对象的解构赋值

var {fn : fn} = {fn : 'aaa' };

var {fn} = {fn : 'aaa'}; // 等价写法  在右侧对象中找到与左侧对象中的相同的键进行赋值。
复制代码

注:实际在对左侧的值进行赋值,

var{fn : foo} = {foo : 'aaa'}; 实际是对值foo赋值, 赋值结束后fn并不存在

var {p : [x, {y} ] } = {p : ['hello', {y : 'world} ] }; // x='hello'  y='world'  **嵌套赋值**
复制代码
var x;

{x} = {x : 1}; // Error  引擎会将{x}理解成一个代码块

({x} = {x : 1});
复制代码

 

三、默认值的问题

var [a, b, c='暂无'] = ['Stri', '20',];

console.log(c); // '暂无..';
 

var [a, b, c='暂无'] = ['Stri', '20', null];

console.log(c); //  null;    无值表示空  null也代表一个值
复制代码

四、圆括号问题

var [(a)] = [1];

var { x: (c) } = {};

var {o : ({p : p }) } = {o :{p :2 } };
复制代码

以上都是错误示例,因为他们都是变量声明语句,模式不能使用圆括号

function f( [ (z) ]){return z;} // Error 函数参数也属于变量声明,不能有括号

({ p : a}) = { p : 42};

([a]) = [5]; // 以上代码将整个模式处于括号中

[({p : a}), { x : c}] = [{}, {} ]; // 将嵌套模式的一层放在了括号中
复制代码

正确写法 :都是赋值语句,其实括号不属于模式的一部分

[(b)] = [3]; // 模式是取数组的第一个成员,与圆括号无关

({ p : (d)} = {}); // 模式是p,而不是d

[(parseInt.prop)] = [3]; // 类1
复制代码
分类:
前端
分类:
前端