Destructuring assignment is also a new syntax of ES6 in JavaScript, let's just look at the examples and start working! ! !
Many students have learned to use destructuring assignment expressions to exchange variable values :
let a = 'b';
let b = 'a';
[a,b] = [b,a];
console.log(a,b);
But swapping variables is not limited to two variables, and if you need to sort, destructuring expressions is an option.
let num1 = 30;
let num2 = 10;
let num3 = 40;
let num4 = 20;
[num1,num2,num3,num4] = [num2,num4,num1,num3];
console.log(`第一：${num1},第二：${num2},第三：${num3},第四：${num4}`);
If you have an array, we only need to take three elements:
Previously we would just assign values one by one:
const arr = ['蛋同学','鸡同学','鸭同学','鹅同学','牛同学','羊同学'];
const num1 = arr[0];
const num2 = arr[1];
const num3 = arr[2];Now we only need to write as follows, three variables will be automatically created and assigned to them respectively. Note that here the value is taken according to the position in the array .
const arr = ['蛋同学','鸡同学','鸭同学','鹅同学','牛同学','羊同学'];
const [num1,num2,num3] = arr;
console.log(`第一名：${num1},第二名：${num2},第三名：${num3}`);
Of course, there is a situation where you only need to take the element at the specified position inside. At this time, you can use English commas to separate, whichever you want
const arr = ['蛋同学','鸡同学','鸭同学','鹅同学','牛同学','羊同学'];
const [,,num3,,num5] = arr;
console.log(`第三名：${num3},第五名：${num5}`);
Here is a detail. If the variable name you want to deconstruct and assign already exists, we can rewrite the variable value. Destructuring and assigning is not necessarily used for newly created variables, but can also be used to modify variables, and it should be noted here that No need for var, let or const to declare variables.
const arr = ['蛋同学','鸡同学','鸭同学','鹅同学','牛同学','羊同学'];
let num3 = '狗同学'；
let num5 = '猪同学'；
[,,num3,,num5] = arr;
console.log(`第三名：${num3},第五名：${num5}`);
Of course, a certain position in the array may not exist at all. At this time, it is more suitable to set the default value, that is, directly add the value at the specified position by assigning a value.
const arr = ['蛋同学','鸡同学','鸭同学','鹅同学','牛同学','羊同学'];
let num3 = '狗同学'；
let num5 = '猪同学'；
[,,num3,,num5,,num7 = '鹿同学'] = arr;
console.log(`第三名：${num3},第五名：${num5},第七名：${num7}`);
But in fact, it is quite troublesome to access the ink arrays in this way. We can change the square brackets to curly braces (braces) and specify the serial number of the element in the form of an attribute, so that we can define variables more easily.
const arr = ['蛋同学','鸡同学','鸭同学','鹅同学','牛同学','羊同学'];
const{2:num3, 4:num5} = arr;
console.log(`第三名：${num3},第五名：${num5}`);
It is possible that the entire array is empty, and the default value can automatically judge the condition for you. For example, if the array is empty, it will automatically display "array is empty", and if the array is not empty, it will directly replace the default value.
In addition to assigning values one by one, if the remaining array elements need to be saved, three dots can be used to indicate that the remaining non-top elements are all collected in one array.
Note: It is not possible to put indeterminate elements first , and then assign values one by one later.
const arr = ['蛋同学','鸡同学','鸭同学','鹅同学','牛同学','羊同学'];
const[num1,num2,num3,...restNum] = arr;
console.log(`第三名是：${num1},${num2},${num3},不及格的是：${restNum}`);
If there is only one indeterminate element when deconstructing and assigning, then the entire array is actually copied
const arr = ['蛋同学','鸡同学','鸭同学'];
const[...copyArr] = arr;
console.log(copyArr); 
We also don't need to call the concat method to copy the array
We can also destructure nested arrays:
const arr = ['蛋同学','狗同学',['鸡同学','鸭同学'],['鹅同学','牛同学','羊同学'],'鹿同学'];
const[num1,,[,num2],[,,num3]] = arr;
console.log(`第1个数组的第1个元素：${num1}，第2个数组的第2个元素：${num2}，第3个数组的第3个元素：${num3}`);