JavaScript - 解构数组和对象 [实时文档]

学习文章要努力，但是不要急！今天的这篇文章《JavaScript - 解构数组和对象 [实时文档]》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

• 孤立地学习新主题，否则头脑将无法长期完全掌握这个概念。这也得到了一些实证研究的支持。
• 解构：将数组或对象中的值解包到单独变量中的方法。

const nums = [8,4,5];
const num1 = nums[0];
const num2 = nums[1];
const num3 = nums[2];
console.log(num1, num2, num3);

is reduced to 

const [x,y,z] = nums;
console.log(x, y, z);

three const variables named x,y,z are created in this step

• [x,y,z] 虽然看起来像一个数组，但是当它位于 = 的 lhs 上时，则被视为解构。
• 解构是不可变的操作。

const girl = {
  name: 'melania',
  friends: ['alina', 'alice', 'ayesha', 'anamika', 'anaya'],
  eats: ['roasted', 'pizza', 'burger', 'rice', 'manchurian'],
};

const [first, second] = girl.friends;
console.log(first, second);

const [,,,fourth,last] = girl.eats;
console.log(fourth, last);

交换变量[变异]

let array = [5,6];
let [a,b] = array;
console.log(`a: ${a}, b:${b}`);
[b,a] = [a,b];
console.log(`a: ${a}, b:${b}`);

函数返回一个数组，立即破坏结果，这允许我们从函数返回多个值

const girl = {
  name: 'melania',
  friends: ['alina', 'alice', 'ayesha', 'anamika', 'anaya'],
  eats: ['roasted', 'pizza', 'burger', 'rice', 'manchurian'],
  drinks: ['juice','coffee','coke'],
  order: function(eat,drink){
    return [this.eats[eat],this.drinks[drink]];
  }
};

const [maincourse, drinks] = girl.order(2, 2);

console.log(`maincourse: ${maincourse}`);
console.log(`drinks: ${drinks}`);

解构嵌套数组

let nums = [5,3,[8,7,9,3]];
let [x,y,z] = nums;
console.log(`x: ${x}`); // 5
console.log(`y: ${y}`); // 3
console.log(`z: ${z}`); // 8,7,9,3

let nums2 = [5,3,[8,7]];
let [x,,[y,z]] = nums2;
console.log(`x: ${x}`, `y: ${y}`, `z: ${z}`); // 5 8 7 

从未知大小的数组解构：

const names = ['michael','charlie','peter'];
let [w='xxx',x='xxx',y='xxx',z='xxx'] = names;
console.log(w,x,y,z); // 'michael' 'charlie' 'peter' 'xxx'

解构对象：

• 使用 {} 进行对象解构，使用 [] 进行数组解构。
• 提供要提取的对象属性名称中提到的准确变量名称。这些变量名称的顺序并不重要。

const girl = {
  name: 'melania',
  friends: ['alina', 'alice', 'ayesha', 'anamika', 'anaya'],
  eats: ['roasted', 'pizza', 'burger', 'rice', 'manchurian'],
  drinks: ['juice','coffee','coke'],
  works: {
        mtwt: {
          start: 9,
          end: 5
        },
        fri: {
          start:9,
          end: 3
        }
  }
};

const {name, works, drinks} = girl;
console.log(name);
console.log(works);
console.log(drinks);


// replace long property names with custom names:
const {name:user, works:timings, drinks:enjoys} = girl;
console.log(user);
console.log(timings);
console.log(enjoys);


//destructuring data from api calls returned in the form of objects i.e attaching a default value to a property that does not exist on object received from an api call

// details does not exist, so default value is assigned
const { details = [], eats: loves = [] } = girl;
console.log(details);
// eats exist but is renamed as loves, hence default value won't apply
console.log(loves);

## mutating variables using object destructuring
let x = 10;
let y = 20;
let obj = {x:1, y:2, z:3};

{x,y} = obj; // error
when we start a line with a '{', then js expects a code-block. and we cannot assign anything to a code-block on lhs using = operator. hence, an error is thrown. the error is resolved by wrapping into () as shown below
({x,y} = obj); //{ x: 1, y: 2, z: 3 }

解构嵌套对象

const girl = {
  name: 'Melania',
  friends: ['Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya'],
  eats: ['Roasted', 'Pizza', 'Burger', 'Rice', 'Manchurian'],
  drinks: ['Juice','Coffee','Coke'],
  works: {
        mtwt: {
          start: 9,
          end: 5
        },
        fri: {
          start:10,
          end: 2
        }
  }
};

let { fri } = works;
console.log(fri);

// Destructuring the fri object using the same property names start, end
let {fri: {start, end}} = works;
console.log(start, end);

// Further renaming for shortening start as 'b' and end as 'e'
let {fri: {start: b, end: e}} = works;
console.log(b, e);





const girl = {
  name: 'Melania',
  friends: ['Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya'],
  eats: ['Roasted', 'Pizza', 'Burger', 'Rice', 'Manchurian'],
  drinks: ['Juice','Coffee','Coke'],
  works: {
        mtwt: {
          start: 9,
          end: 5
        },
        fri: {
          start:10,
          end: 2
        }
  },
  // these destructured property-names have to be same as they are passed inside the girl.sleep(). Order need not be same.
  sleep: function ({time='NA', address='NA', color = 'NA', duration='NA'}){
    console.log(`${this.name} sleeps at ${address} for ${duration} in ${color}light for ${duration}. She loves to eat ${this.eats[0]}`);
  }
};

// A single object is passed, which will be destructured by the method inside the object extracting all values via destructuring
girl.sleep({time: '10pm', address:'home', color: 'blue', duration: '7hrs'});

girl.sleep({time: '9pm', duration: '7hrs'});

到这里，我们也就讲完了《JavaScript - 解构数组和对象 [实时文档]》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！