JS对象解构

什么是解构赋值?

解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁,同时还比传统的属性访问方法更为清晰。

通常来说,你很可能这样访问数组中的前三个元素:

    var first = someArray[0];
    var second = someArray[1];
    var third = someArray[2];

如果使用解构赋值的特性,将会使等效的代码变得更加简洁并且可读性更高:


    var [first, second, third] = someArray;

SpiderMonkey(Firefox的JavaScript引擎)已经支持解构的大部分功能,但是仍不健全。你可以通过bug 694100跟踪解构和其它ES6特性在SpiderMonkey中的支持情况。

数组与迭代器的解构

以上是数组解构赋值的一个简单示例,其语法的一般形式为:


    [ variable1, variable2, ..., variableN ] = array;

这将为variable1到variableN的变量赋予数组中相应元素项的值。如果你想在赋值的同时声明变量,可在赋值语句前加入varletconst关键字,例如:


    var [ variable1, variable2, ..., variableN ] = array;
    let [ variable1, variable2, ..., variableN ] = array;
    const [ variable1, variable2, ..., variableN ] = array;

事实上,用变量来描述并不恰当,因为你可以对任意深度的嵌套数组进行解构:


    var [foo, [[bar], baz]] = [1, [[2], 3]];
    console.log(foo);
    // 1
    console.log(bar);
    // 2
    console.log(baz);
    // 3

此外,你可以在对应位留空来跳过被解构数组中的某些元素:


    var [,,third] = ["foo", "bar", "baz"];
    console.log(third);
    // "baz"

而且你还可以通过“不定参数”模式捕获数组中的所有尾随元素:


    var [head, ...tail] = [1, 2, 3, 4];
    console.log(tail);
    // [2, 3, 4]

当访问空数组或越界访问数组时,对其解构与对其索引的行为一致,最终得到的结果都是:undefined

    console.log([][0]);
    // undefined
    var [missing] = [];
    console.log(missing);
    // undefined

请注意,数组解构赋值的模式同样适用于任意迭代器:

    function* fibs() {
      var a = 0;
      var b = 1;
      while (true) {
        yield a;
        [a, b] = [b, a + b];
      }
    }
    var [first, second, third, fourth, fifth, sixth] = fibs();
    console.log(sixth);
    // 5

对象的解构

通过解构对象,你可以把它的每个属性与不同的变量绑定,首先指定被绑定的属性,然后紧跟一个要解构的变量。

    var robotA = { name: "Bender" };
    var robotB = { name: "Flexo" };
    var { name: nameA } = robotA;
    var { name: nameB } = robotB;
    console.log(nameA);
    // "Bender"
    console.log(nameB);
    // "Flexo"

当属性名与变量名一致时,可以通过一种实用的句法简写:


    var { foo, bar } = { foo: "lorem", bar: "ipsum" };
    console.log(foo);
    // "lorem"
    console.log(bar);
    // "ipsum"

与数组解构一样,你可以随意嵌套并进一步组合对象解构:

    var complicatedObj = {
      arrayProp: [
        "Zapp",
        { second: "Brannigan" }
      ]
    };
    var { arrayProp: [first, { second }] } = complicatedObj;
    console.log(first);
    // "Zapp"
    console.log(second);
    // "Brannigan"

当你解构一个未定义的属性时,得到的值为undefined

    var { missing } = {};
    console.log(missing);
    // undefined

请注意,当你解构对象并赋值给变量时,如果你已经声明或不打算声明这些变量(亦即赋值语句前没有letconstvar关键字),你应该注意这样一个潜在的语法错误:

    { blowUp } = { blowUp: 10 };
    // Syntax error 语法错误

为什么会出错?这是因为JavaScript语法通知解析引擎将任何以{开始的语句解析为一个块语句(例如,{console}是一个合法块语句)。解决方案是将整个表达式用一对小括号包裹:

    ({ safe } = {});
    // No errors 没有语法错误

解构值不是对象、数组或迭代器

当你尝试解构nullundefined时,你会得到一个类型错误:

    var {blowUp} = null;
    // TypeError: null has no properties(null没有属性)

然而,你可以解构其它原始类型,例如:布尔值数值字符串,但是你将得到undefined

    var {wtf} = NaN;
    console.log(wtf);
    // undefined

你可能对此感到意外,但经过进一步审查你就会发现,原因其实非常简单。当使用对象赋值模式时,被解构的值需要被强制转换为对象。大多数类型都可以被转换为对象,但nullundefined却无法进行转换。当使用数组赋值模式时,被解构的值一定要包含一个迭代器

默认值

当你要解构的属性未定义时你可以提供一个默认值:

    var [missing = true] = [];
    console.log(missing);
    // true
    var { message: msg = "Something went wrong" } = {};
    console.log(msg);
    // "Something went wrong"
    var { x = 3 } = {};
    console.log(x);
    // 3
时间: 2024-10-12 04:22:49

JS对象解构的相关文章

js es6 解构赋值

解构赋值:es6允许按照一定的模式,从数组或对象中提取值 let [a,b,c] = [1,2,3]; let {a,b}= {a:1,b:2}; 对象 let {a,b}= {b:1,a:2} //输出2,1,即找属性名,不管什么位置 数组例子1:(完全解构) let [a,b,c] = [1,2,3]; console.log(a)//1 console.log(b)//2 console.log(c)//3 例子2:(不完全解构) let [a,[b],c] = [1,[2,3],func

js用解构来定义变量并赋值

解构数组 var [a,b]=[1,2]; a //1 b //2 ------------- var [a,b]=[1,2,3,4]; a //1 b //2 ---------------- var [a,,b]=[1,2,3,4]; a //1 b //3 ----------------- var a,b; [a=3,b=2]=[1]; //默认值 a //1 b //2 ----------------- var [a, ...b] = [1,2,3,4] a //1 b // [2,

ES6 对象解构赋值(浅拷贝 VS 深拷贝)

对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中. 拷贝对象 let aa = { age: 18, name: 'aaa' } let bb = {...aa}; console.log(bb); // {age: 18, name: "aaa"} 合并对象 扩展运算符(...)可以用于合并两个对象 let aa = { age: 18, name: 'aaa' } let bb = { sex: '男' } let cc = {...aa, ...bb

JS的对象、数组等处理方法:解构

对象方法简写 你可以在定义方法时省略function和 :: const obj = { insteadOfThis: function() { // do stuff }, youCanDoThis() { // do stuff } } 请注意,以上不是箭头函数,只是对象方法的简写语法. 解构对象 对象解构是获取对象并将其内部属性提取到对象外部变量的一种方法: const obj = { x: 1, y: 2 } // 不使用解构语法 const x = obj.x const y = ob

对象 与 解构赋值

对象 定义:在javascript中,对象就是拥有属性和方法的无需数据集合 创建对象: 1.object构造函数 var person=new object(); 2.字面量方式 var person = {}; 对象的属性: 对象属性的分类 1.数据属性:一般用于储存数据值 2.访问器属性:不包含数据值,多用于get/set操作 定义对象的数据属性 通过点运算符.来操作一个对象的属性 person.name="zhangsan"; 通过方括号[]操作一个对象的属性 person[&q

对象的解构赋值

let { foo, bar } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb" 对象的解构与数组有一个重要的不同.数组的元素是按次序排列的,变量的取值由它的位置决定:而对象的属性没有次序,变量必须与属性同名,才能取到正确的值. 如果变量名与属性名不一致,必须写成下面这样. let { foo: baz } = { foo: 'aaa', bar: 'bbb' }

ES6变量的解构赋值(二)对象的解构赋值

前面我们知道,数组的结构赋值需要按顺序进行赋值, let [a,,c] = [1,2,3] console.log(a);//1 console.log(c);//3 let [a,b] = [1];console.log(a);//1console.log(b);//undefined 而对象的解构赋值则是通过对象属性进行赋值,不需要按照顺序进行,而无法匹配的则为undefined let {a,b,c}={b:1,a:2}; console.log(a);//2 console.log(b)

ES6 - 解构(数组和对象)

解构对象 /** * 解构:快捷,方便 * * 对象解构 */ { var expense = { type: "es6", amount: "45" }; //1.ES5 // var type = expense.type; // var amount = expense.amount; // console.log(type, amount); //output: es6 45 //2.ES6 const { type, amount, abc } = exp

ES6解构赋值

前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 引入 在ES5中,开发者们为了从对象和数组中获取特定数据并赋值给变量,编写了许多看起来同质化的代码 let options = { repeat: true, save: false }; // 从对象中提取数据 let repeat = options.repeat, save = option