[JavaScript] Decompose element/property values of objects and arrays into variables (division assignment)

JavaScript

Assign objects and arrays with multiple elements to variables one by one

I couldn't read this code.


const[num1] = client.exe();

When I looked it up, it seemed to be a syntax. Partitioned assignment taken from ES6. It seems that it has become easier to decompose arrays/objects and retrieve element and property values than before.

So, I looked it up.

Syntax for dividing and assigning the elements of an array to variables

[Array] division assignment


//ES6以前の分割代入
var data = [20,49,59,37,62];
var x0 = data[0];
var x0 = data[1];
var x0 = data[2];
var x0 = data[3];
var x0 = data[4];

//ES6の分割代入
let numbers = [40, 50, 20, 70,];
let[a1, a2, a3, a7] = numbers;

console.log(a3); //結果:20
console.log(a4); //結果：ReferenceError a4 is not defiend.
console.log(a7); //結果:70

40, 50, 20, and 70 of the array numbers were divided and assigned to a1, a2, a3, and a7, respectively. Since the sort order of the variables is the same as the sort order of the properties of the array, We can see that a4, which is undefined, is a reference error, and that a7 is assigned 70, the fourth property of the array numbers.

！ note

- The big difference between an array and an object is whether or not the order is allocated! - It seems that you can still see the code before ES6 as of 2020, so it is better to be able to read it!

Cut out the [array] elements together as an array.


let numbers =[40, 50, 60, 18, 95, 34];
let[a1, a2, a3, ...other] = numbers;

console.log(other); //結果:[18, 95,34]

Operator...can be used to extract undivided property values together as an array.

Swapping variables


let a = 10;
let b = 60;
[a,b] = [b,a];
console.log(a,b); //結果:60,10

Truncating an element

let num = [75,34,16,345,923,590,65,21,98];

let[num1,num2,num3, , , , ...rest] = num;
//345,923,590は切り捨て
console.log(num3); //結果:16
console.log(rest); // 結果[65,21,98]

What was that code?


const[num1] = client.exe();

Based on what I've written so far, this code is a good idea.

The right side is in the process of creating some kind of array, Only the first value on the left side was assigned to num1.

That's all there is to it. By the way, I also looked into the division of objects.

Syntax for decomposing object property values into variables

[Object] Partition Assignment


let banana = {color:'黄色', price:100, from:'インドネシア'};
let{from, color, memo='なし'} = banana

console.log(from); //結果：インドネシア
console.log(memo); //結果:なし

In the case of objects, properties are decomposed into individual variables by name. Therefore, the order of variables may be different from the order in which properties are defined. Also, there may be a property (price in the above) that does not decompose. In addition, if there is no desired property, you can specify a default value as "variable name = default value" (above, memo: none)

Break apart nested objects


let car = {name:'プリウス', price:1,000,000,
           other:{color:'silver', tire:'studless'}};

let{name, other, other:{ tire }} = car;

console.log(name); //結果:プリウス
console.log(other); //結果:{color:'silver', tire:'studless'}
console.log(tire); //結果:studless

When defined as other, the contents of the object other are stored. If other:{tire}, studless, which is the value of the property tire of object other, is stored.

Specify an alias for the variable.

//別名を指定する
let seminor = {title:'アフターコロナ', data:'2020.6.10', price:5000};
let { title:name, data:day} = seminor

console.log(name) //結果：アフターコロナ
console.log(day) //結果：2020.6.10

Assignment without declaration

//宣言のない代入
let journey = {data:2020/3/3, price:'priceless'};

let location, price;
({location='千葉', price} = journey);
console.log(location); //結果：千葉
console.log(price) //結果:undefined